Overview

This area is to serve as a reference for developing, extending or learnign about the inner workings of my take on the project.

Table of Contents

Project Structure

All of the files for this project reside within the src folder, and once running a local instance the only file you will have to open is index.html.

src/
├── Components/
│   ├── LeftPaneControl.js
│   ├── NavigationButtonControl.js
│   ├── PropertiesPaneControl.js
│   ├── RightPaneControl.js
│   └── Table.js
├── Styles/
│   ├── Layout.css
│   ├── Navigation.css
│   ├── Panes.css
│   └── Tables.css
├── Services/
│   ├── http.js
│   └── ws.js
│
├── index.html
└── index.js

Application Entries

The base src directory houses two particulary important files.

Directories

Components

Files that render, create and handle all of our logic

Services

Javascript class files used to handle our service connections

Styles

Files that define the look and feel of the application

How to use

Real Time Subscriptions

Directions

Open index.html file in your web browser.

By Default Real time queries is the first page you will see, on the left hand side you will see several options. To subscribe to a topic, press any of the buttons that appear under REAL-TIME QUERIES. After the dashboard data table will begin updating with data.

To close the websocket connection, press the Reset button.

To querie a custom point, press the Custom button, and enter the details within the slideout form. After, press the Connect button on the slideout. If you had sent a succesfull subscription point, your datatable will begin updating.

Historic Queries

Directions

Open index.html file in your web browser. By Default Real time queries is the first page you will see.

On the navigation bar click the Toggle Historic button to change to the historic query menu.

Getting data

Click any of the buttons on the side menu to preform a new query

Sorting Data

By Default the returned data will be sorted by timestamp ascending. To change that, activate the prefered sort method by clicking either of the options bellow Sorting within the left control panel.

How its made

In this section I will break down how the application was made, and the important elements within each file.

Components Breakdown

For this exercise, components are arguably the most important pieces of the puzzle. They tell our application, how to look, feel, and move. Primarily throughout the application I choose to stick to singleton class patterns, and generator functions. This allows me to move usefull data, and help maintain state in a framework barren app.

Repeated functions to avoid redundant explination

Some patters and functions are repeated within the app, as a roadmap I would refactor the project to be more dry, and write more test cases. Regaurdless bellow are some of the patterns that are standard.

Rendering Views, and attaching listeners

In most of the files you will see a pattern like bellow, it is used to asyncronously render dom elements, and then attaching listeners to said dom elements. This pattern allows us to ensure that before we try to attach a event listener, the dom is ready. I've replaced the important parts with placeholder text.

let /*Unique Name*/ = {
  
   render: async () => {
      let view = `
        /*String representing dom object, and any logic within*/
        `
      return view
   },
   attach_listeners: async () => {
      
   const /*Some Element Constant Name */ = document.getElementById(/*Some Element ID Referenced from the above render methods view */ );
   

      /**
      * Attach an event listener to the selected element
      */

      /*Some Element Constant */.addEventListener(/* Listener */, () => {
         /* Functions completed on listener */
      })

}

Table.js

Table.js is used to render all of our data

Includes

Important Dom Elements

Renderable HTML

Table.js has two two areas where it can render new html from, so it is unique in that it doesnt only hold a view, as seen in other files.

Initial Table Element

   const newTable = `
        <table class="fixed_header" id="data-table">
        <thead>
            <tr class="trHeader">
           ${tblObj.columns.map((column) => `\t\t\t<th class="trHeader" onclick="sortBy('${column.text}')">${column.text}</th>`).join('\n ')}
            
            </tr>
        </thead>
        <tbody id="tableBody">
        ${tblObj.data.map((row, index) =>
            `\t\t\t<tr class="trself" data-id="${index}" id="${index}">
            <td>${row.id}</td> <td>${row.id}</td> <td>${index}</td>`)}
                   
        </tbody>
        </table>`;

New Table Rows

const baseRowContent = `<tr class="trself"><td>${rowItem.id}</td><td>${rowItem.timestamp}</td><td>${rowItem.value}</td></tr>`

Javascript Overview

The javascript located in Table.js is what controls the inner workings of data table.

Scattered Variables,Paramaters, and Arguments

Main Frontend Functions and Methods

RightPanelControl.js

Serves as the dashboard content area

Includes

Important Dom Elements

Renderable HTML

   let view = `
        <div id="rightPanelWrapper">
           <h2>current table</h2>
             <table id="dataTable">
                     <!-- Data Appears Here -->
            </table>
         </div>
        `

Javascript Overview

The javascript located in RightPaneControl is primarily used to initialize the table singleton when the dom is ready.

PropertiesPaneControl.js

Slide out menu used for custom websocket queries

Includes

Important Dom Elements

Renderable HTML

   let view = `
        <div id="propertiesMenu" class="propertiesMenu">
  <div class="propertiesMenuTitle">
    Custom-Queries
  </div>
  <!--MARK : Property Data-->
  <div class="proprtyFormContainer">
    <form class="propertyForm" action="#" method="post">
      <div class="propertiesPaneDescriptor">
        <h4>Enter PointId </h4>
        <p>single : pwr.c</p>
        <p>multi : pwr.v,pwr.c </p>
        
        <input id="customTextInput" placeholder="Enter your domain object here" required></input>
      </div>
      </form>
  </div>
   <button class="propertyFormButton connect" id="propertyFormSubmit">Connect</button>
    
  <div>
   <button id="propertiesCloseMenu" class="propertyFormButton connect">Close Panel</button>
  
  </div>
</div>
        `

NavigationButtonControl.js

Holds the html renderer and offers the ability to switch query menues

Includes

Important Dom Elements

Renderable HTML

   let view = `
   <ul id="nav_wrapper">
         <li class="navLink">OpenMCT Exam - </li>
          <li class="navLink toggleButton is-active"  data-menu="realTime">Toggle Real-Time </li>
          <li class="navLink toggleButton"  data-menu="historic">Toggle Historic </li>      
      </ul>`

Main Frontend Functions and Methods

LeftPaneControl.js

Handles many of the dom updating, querying and state management operations

Includes

Important Dom Elements

Renderable HTML

   let view = `
   <div id="wcMenu" class="is-active">
                  <div class="leftPaneTitle" id="querylatest">
                            Real-Time Queries
                  </div>
                  <hr />
                  <div class="leftPaneControl is-active wsQuery" data-point="pwr.v,pwr.c">
                            Query Both
                  </div>
                  <div class="leftPaneControl wsQuery"  data-point="pwr.v" >
                            Query Voltage
                  </div>
                  <div class="leftPaneControl wsQuery" data-point="pwr.c">
                            Query Current
                  </div>
                  <div class="leftPaneControl wsQuery">
                            Reset
                  </div>
                  <div class="leftPaneTitle">
                            Toggle Custom Panel
                  </div>
                  <hr />
                  <div class="leftPaneControl" id="toggleCustomPanel">
                            Custom
                  </div>
            </div>
            <div id="httpMenu">
                  <div class="leftPaneTitle"  >
                            Historic Queries
                  </div>
                  <hr />
                  <div class="leftPaneControl is-active httpQuery" data-point="pwr.v,pwr.c">
                            Query Latest
                  </div>
                  <div class="leftPaneControl httpQuery" data-point="pwr.v">
                            Query One : A
                  </div>
                  <div class="leftPaneControl httpQuery" data-point="pwr.c">
                            Query One : B
                  </div>
                  <div class="leftPaneTitle">
                            Sorting
                  </div>
                  <hr />
                  <div class="leftPaneControlSort is-active-sort" id="httpSetSortAscending">
                            Sort Ascending
                  </div>
                  <div class="leftPaneControlSort is-active-sort" id="httpSetDescending">
                            Sort Descending
                  </div>
            </div>`

Main Frontend Functions and Methods

Services Breakdown

For this exercise, components are arguably the most important pieces of the puzzle. They tell our application, how to look, feel, and move. Primarily throughout the application I choose to stick to singleton class patterns, and generator functions. This allows me to move usefull data, and help maintain state in a framework barren app.

ws.js

Handles all of the queries for websocket real time events

:: tip Unlike http requests to create a websocket connection the url will begin with ws or wss rather than http or https ::

Includes

Main Frontend Functions and Methods

http.js

Handles all of the queries for historical data

Includes

Main Frontend Functions and Methods

Styles Breakdown

For this exercise, the style files are broken up so that they coorespond to their prospective elements, and sections. There is not much to explain about them though overall the intention was to sort of have fun with building a colorful flexbox based responsive dashboard.