TGIMBA .NET Core – New Dashboard Oriented Welcome Page

Git  Code Commit (all commits between last post and this commit (link))

Selenium Git  Code Commit (all commits between last post and this commit (link))

Welcome back to The Globe In My BucketList Application (TGIMBA) continuing .NET Core   update.  Today, I unveil the new welcome page.  What I am excited about is that this layout looks good on a desktop and mobile device.  This is something the previous version did not do well.  I guess this is my first venture into ‘progressive web design’ 🙂

On a desktop:

p1

On a mobile device:

p2

The page  consists of two dynamically loaded Hyper Text Markup Language (HTML) files:

  • Index.html – This file contains the three client login buttons, a title and a container that the statistic displays are loaded into.

p3

  • Partial_SystemStatus.html – This HTML file contains the three Salable Vector Graphics (SVG) lines and place holders for the system and build statistics displays.

p4

Data (based on previous work described here) is loaded via several method calls.  Originally, I wanted two separate Asynchronous JavaScript and XML (AJAX) calls.  However, I settled on one when the second stalled.  I still don’t know the reason and didn’t want to spend a lot of time on it.  The key components in the call stack are:

  • wwwroot\Scripts\Welcome\Display.js
    • SetView(args)
      • ServerCalls.js -> GetAjaxView(args)
    • SetAjaxView(args)
      • WelcomeServerCalls.js -> GetSystemStatistics()
        • Controllers\WelcomeController.cs -> GetSystemStatistics()
        • TgimbaNetCore\API\TgimbaService.cs
          • GetSystemStatistics()
            • DAL\providers\BucketListDataV2.cs -> GetSystemBuildStatistics()
          • GetSystemBuildStatistics()
            • DAL\providers\BucketListDataV2.cs -> GetSystemStatistics()
    • SetSystemStatistics(args)

To make the display interactive (or at least more interactive then the previous version), the system flashes green/red lines alternating with black to indicate what parts of the system were up/down based on the last Azure function check  More specifically, Display.js -> Refresh() is called every second and updates the lines based on the load values stored in session.  It is only as accurate as each time the page is refreshed, but I will eventually work in a refresh call.

p5

Centering the system and build status came from reference #3 and #4.  Specifically, the CSS created by Márton Salomváry for centering a div.  Seems to work pretty well 🙂

p6

To wrap up, I build most of the HTML dynamically.  Not ideal, but the closest I can do given this architecture.  I have seen other approaches where .cshtml files are rendered and loaded and it works pretty well.  However, the JavaScript has to ‘connect’ with the .cshtml data and that can get a bit complicated.

Its always an experiment 🙂

Next (I hope) will be me starting on the Application Programmatic Interface (API) using a Test Driven Design (TDD) approach.

Stay tuned!

References

  1. https://www.w3schools.com/js/js_timing.asp
  2. https://www.w3schools.com/CSS/css_howto.asp
  3. https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div
  4. https://salomvary.com/position-fixed-horizontally-centered.html
  5. https://stackoverflow.com/questions/24700184/how-do-i-force-a-vertical-scrollbar-to-appear
  6. https://stackoverflow.com/questions/6936972/draw-circle-using-css-alone
  7. https://stackoverflow.com/questions/6936972/draw-circle-using-css-alone

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 )

Connecting to %s