Feature fresh skin

[TravJav]

This branch's intention is to create a new front-end service with Angular2 as a framework.

The benefits this branch will provide is an ordered and structured way to construct components and modules that are ready to scale up while offering Typescript and Angular2 support.

[github-actions]

Visit the preview URL for this PR (updated for commit b4b9bf9):

https://openherb-89fa0--pr8-feature-fresh-skin-jkpsszjb.web.app

_{(expires Tue, 30 Nov 2021 04:25:46 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[ztnel]

Sweet. Feel free to remove what I have in the repository root and replace with what you have inside open-herb-dashboard since I think that should be what's in the actual root

[TravJav]

Next set of commit(s) will be implementing a sidebar for future implementation. The sidebar should have router functionality as well and employ Angular2 ** router library

[TravJav]

@cSDes1gn Can you give me a sample of the telemetry data, please? I have currently the following gauges ( temperature, relative humidity, luminosity, soil humidity ) are there any other sensors available in the system that can be or will be advertised to the MQTT shadow document that I should build a component for? Thanks

[ztnel]

@cSDes1gn Can you give me a sample of the telemetry data, please? I have currently the following gauges ( temperature, relative humidity, luminosity, soil humidity ) are there any other sensors available in the system that can be or will be advertised to the MQTT shadow document that I should build a component for? Thanks
@TravJav Here you go:

cloudlink  | 2021-11-23 04:26:52,526 INFO Published to topic/telemetry: 
cloudlink  | {
cloudlink  |   "id": "19e00907-d565-4055-8abd-a9941d93e7da",
cloudlink  |   "tp": 24.5,
cloudlink  |   "rh": 95.2,
cloudlink  |   "pa": 95.2,
cloudlink  |   "lx": 2441,
cloudlink  |   "sm": 11.9,
cloudlink  |   "sc": 2,
cloudlink  |   "ts": "2021-11-23T04:26:52.526264"
cloudlink  | } 

The key definitions are defined below:

key	description	Type
id	uuid for telemetry payload	str
pa	ambient pressure in kPa	float (1 decimal)
tp	ambient temperature in celsius	float (1 decimal)
lx	ambient luminous flux in lux	int
sm	soil moisture as %	float (1 decimal)
rh	relative humidity as %	float (1 decimal)
sc	status code (0-2)	int enum
ts	telemetry timestamp in UTC ISO format	str

The most detailed definition is the actual telemetry model file which you can vie here

[TravJav]

So that's what the gauges currently look like i'm going to do a light and dark mode toggle for you. Also going to give it a legit theme as well. I have applied Angular material which is great for scaling template quickly but still need to give it a "skin" I can define this in the global styles

[ztnel]

So that's what the gauges currently look like i'm going to do a light and dark mode toggle for you. Also going to give it a legit theme as well. I have applied Angular material which is great for scaling template quickly but still need to give it a "skin" I can define this in the global styles

Cool yea I was thinking dark theme would be the default and iirc the old web app used Montserrat Light for the fonts.

[TravJav]

So that's what the gauges currently look like i'm going to do a light and dark mode toggle for you. Also going to give it a legit theme as well. I have applied Angular material which is great for scaling template quickly but still need to give it a "skin" I can define this in the global styles

Cool yea I was thinking dark theme would be the default and iirc the old web app used Montserrat Light for the fonts.

No problem, I can apply this.

i'm also going to do a draw io diagram up to illustrate some of the documentation and intention in terms of the singleton service that will retrieve the shadow object and be accessible. I am going to apply a subscriber pattern I believe so the shadow document which will update the subscribes when the value has changed

[TravJav]

https://drive.google.com/file/d/1M-7P24bNsfnQBJDetQH1kwgdPXRYfsjE/view?usp=sharing

[TravJav]

All further changes to the Draw io diagram will living inside the living document ( the actual diagram ) and be applied in the documentation next pass.

[ztnel]

Im not using AWS and therefore not using a shadow (native to AWS IoTCore) Im using my own in-house broker. Ill update you tomorrow the integration should be easier for you

[TravJav]

Development Doc: https://docs.google.com/document/d/16MEreY9P1V9kqsD1-2KA36VYII9NwlMz5Odq1NB3g1A/edit?usp=sharing

[TravJav]

Open Herb Front end.pdf

[TravJav]

I branched off and created a new branch for Angular 12. #9 Ultimately this PR can be closed at a later date and only the above can be merged