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

Git  Code

I know it has been a while, but I am back on the .Net Core The Globe In My BucketList Application (TGIMBA) upgrade. The last version of TGIMBA used .NET 4.6.X and JQuery. I picked Angular 4 with a .NET Core backend.

If you remember, I had started this earlier in the year. I had worked my way through the basic user interface and stumbled on the Dashboard.  Anyone interested can read that here – https://erichelin.wordpress.com/2018/02/28/tgimba-net-core-upgrade-part-7-tgimba-user-interface-dashboard/

Instead of working from the back end forward like I had been planning (i.e. the Node JS TypeScript API work), I am starting with the front because of my return to the .NET ecosystem at work. To speed this up, I am using a lot of the previous 4.6.x’s core logic wrapped in the .NET Core run time. It is very likely that the old logic will be re-written once I move the Application Programmatic Interface (API) that is now bundled with the web site to its on separate service installation. I really want this version of TGIMBA to allow separate clients that all subscribe to the same API.

If you also notice, I have taken down the old site. I was reading about the new European Union (EU) privacy rules and I wanted to make sure I was compliant. Plus the old User Interface (UI) could be a lot better. I am going to focus on the basic UI with functionality before making it ‘pretty’. Much like the approach I took with Full Stack Developer series, making the UI interesting will be the last step. I am also not exactly sure what I want to do as I am not a graphic artist. I am hoping that by taking this approach, a ‘pretty’ UI idea will present itself. I am going to do things a little bit differently in constructing a ‘pretty’ UI as well. Instead of crafting two separate versions like I did earlier, I am going to create this version first with as little Cascading Style Sheets (CSS) as possible. Then, I am going to review just the raw Hyper Mark Text Language (HTML) views and functionality and ‘CSS’ myself into a pretty desktop version. Then, take the same approach for the mobile version. I hope to learn if it is possible to truly have one set of generic views and make multiple sites out of them with CSS only. Should be an interesting experiment 🙂

Though I have to add a little CSS to restore the Dashboard to its former brilliance 🙂

On to business! In the last post, I had not been able to incorporate the Google JavaScript Chart code with the Angular 4/TypeScript site. To address this apparent inability for an Angular 4 site to handle <script> tags, I am going to create a landing page that will reside outside of the Angular 4 site. I have done this in previous jobs where there is a set of landing pages that are managed by the marketing department. They are able ‘manage’ these pages via a tool with no developer interactions. This allows the software team to focus on the web application. There are links in these content pages that lead to the various web applications the team manages.

To accomplish this, we first create a welcome controller.  To be able to launch a page, the first thing we need in a Model View Controller (MVC) site is a controller.  The controller ‘decides’ how a request will be handled. I also created a base controller to handle shared items between all of the controllers. At this point, the one ‘item’ is the API service reference.  I am not injecting it because there is only one.  If this changes, I will create a factory or something to handle it.

  • The completed base controller looks like this:

1

  • The completed welcome controller looks like this:

2

Then, we create a welcome model.  Once an MVC controller is called, it needs data to send to the user.   I also created a base model to handle shared items between all of the models. At this point, it is the API service reference. This is a little bit of duplication between the base controller and base model, but I want this version of TGIMBA to adhere to the specification that the model handles all date interactions. I would put it in the model only, but the controller is the first one in the chain. Soooo, this is my solution 🙂

  • The completed base model looks like this:

3

  • The completed welcome model looks like this:

4

Finally, we create a welcome page.  Once the data is available, it has to be displayed to the user. Something I am doing differently here than in the .NET 4.6.x version is I am placing the JavaScript that loads the Google JavaScript Chart and populates it within the view. Previously, this code was contained in a separate set of files and run by JQuery. I am probably not going to use any JQuery in this version of TGIMBA since the whole point is to use Angular 4 which is TypeScript. Any JavaScript I use will be should be vanilla JavaScript.

  • The completed view looks like this:

5

Clicking ‘here’ at the bottom of the page loads the Angular 4 TypeScript portion of the application. So, it looks like this approach to using existing Dashboard and combining it with the Angular 4 version is successful 🙂

Running the project reveals this page.

6

Clicking on ‘here’ takes you into the Angular 4 Application:

7

Next will be the login functionality.  I am going to expand on what was previously supported to allow an account recovery as well as the ability to delete an account.  Future versions will allow a user to login with Facebook, Google and a few others.

Stay tuned!

Reference

1) https://stackoverflow.com/questions/22723077/does-the-output-of-jsonconvert-serializeobject-need-to-be-encoded-in-razor-view

 

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