TGIMBA .NET Core Upgrade – Part 7 – TGIMBA User Interface – Dashboard

Git  Code

In this post, I will demonstrate how I added the existing TGIMBA Dashboard to the .Net Core 2 Angular project.

  • First I updated the existing navigation component to have a link to each placeholder.

pointFive

  • Running the project shows the default (for now) home view

one

  • Clicking on ‘Dashboard’ shows the dashboard place holder

two

  • I placed the existing dashboard markup into the placeholder, updated the .css and ran it. I left text references for where the Google JavaScript graphs will go (i.e. category, achieved and created)

three

Couple of Things:

  • I got a compile error initially because of a <center> tag. Since this has been deprecated, the nearest working solution I could find was to place the title in a div tag and use the align tage (i.e. <div align=”center”>). This surprised me since the usual text-align: center; Cascading Style Sheet (CSS) didn’t work. I tried a couple other CSS entries, but none worked. I will update this if I can find a working CSS entry.
  • I learned tonight that <script> tags are not allowed in Angular 2.  I use Google JavaScript charts in the current TGIMBA.  Looks like I may have to rethink this.

 

  • I added some test (testing for regular and demonstration login links)

five

  • Running those tests

five

So, the next thing is to update the <– Display –> <div> holders with data.

Stay tuned!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s