regional forecast font cleanup

.vscode/launch.json

@@ -4,18 +4,17 @@
 	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 	"version": "0.2.0",
 	"configurations": [
-		
 		{
 			"name": "Frontend",
 			"request": "launch",
-			"type": "pwa-chrome",
+			"type": "chrome",
 			"url": "http://localhost:8080",
 			"webRoot": "${workspaceFolder}/server",
 			"skipFiles": [
 				"<node_internals>/**",
 				"**/*.min.js",
 				"**/vendor/**"
-			]
+			],
 		},
 		{
 			"name": "Data:stations",
@@ -40,7 +39,10 @@
 	"compounds": [
 		{
 			"name": "Compound",
-			"configurations": ["Frontend", "Server"]
+			"configurations": [
+				"Frontend",
+				"Server"
+			]
 		}
 	]
 }

.vscode/settings.json

@@ -4,7 +4,7 @@
 	],
 	"liveSassCompile.settings.formats": [
 		{
-			"format": "expanded",
+			"format": "compressed",
 			"extensionName": ".css",
 			"savePath": "/server/styles",
 			"savePathSegmentKeys": null,

server/scripts/modules/progress.js

@@ -1,11 +1,11 @@
 // regional forecast and observations
 
-/* globals WeatherDisplay, utils, STATUS, draw, navigation */
+/* globals WeatherDisplay, utils, STATUS, navigation */
 
 // eslint-disable-next-line no-unused-vars
 class Progress extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId);
+		super(navId, elemId, '', false, true);
 
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
@@ -14,103 +14,91 @@ class Progress extends WeatherDisplay {
 		this.timing = false;
 
 		this.version = document.getElementById('version').innerHTML;
+
+		// setup event listener
+		this.elem.querySelector('.container').addEventListener('click', this.lineClick.bind(this));
 	}
 
 	async drawCanvas(displays, loadedCount) {
 		super.drawCanvas();
-		// set up an event listener
-		if (!this.eventListener) {
-			this.eventListener = true;
-			this.canvas.addEventListener('click', (e) => this.canvasClick(e), false);
-		}
 
-		// get the background image
-		const backgroundImage = await this.backgroundImage;
-
-		// only draw the background once
-		if (!this.backgroundDrawn) {
-			this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480);
-			draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
-			draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
-			draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
-			draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
-			draw.titleText(this.context, 'WeatherStar', `4000+ ${this.version}`);
-		}
-
-		this.finishDraw();
 		// if no displays provided just draw the backgrounds (above)
 		if (!displays) return;
-		displays.forEach((display, idx) => {
+		const lines = displays.map((display, index) => {
-			const y = 120 + idx * 29;
+			const fill = {};
-			const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
-			draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
 
-			let statusText;
+			fill.name = display.name;
-			let statusColor;
+
+			let statusClass;
 			switch (display.status) {
 			case STATUS.loading:
-				statusText = 'Loading';
+				statusClass = 'loading';
-				statusColor = '#ffff00';
 				break;
 			case STATUS.loaded:
-				statusText = 'Press Here';
+				statusClass = 'press-here';
-				statusColor = '#00ff00';
-				this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
 				break;
 			case STATUS.failed:
-				statusText = 'Failed';
+				statusClass = 'failed';
-				statusColor = '#ff0000';
 				break;
 			case STATUS.noData:
-				statusText = 'No Data';
+				statusClass = 'no-data';
-				statusColor = '#C0C0C0';
-				draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
 				break;
 			case STATUS.disabled:
-				statusText = 'Disabled';
+				statusClass = 'disabled';
-				statusColor = '#C0C0C0';
-				this.context.drawImage(backgroundImage, 470, y - 20, 45, 25, 470, y - 20, 45, 25);
 				break;
 			default:
 			}
-			// Erase any dots that spill into the status text.
+
-			this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
+			// make the line
-			draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
+			const line = this.fillTemplate('item', fill);
-		});
+			// because of timing, this might get called before the template is loaded
+			if (!line) return false;
+
+			// update the status
+			const links = line.querySelector('.links');
+			links.classList.remove('loading');
+			links.classList.add(statusClass);
+			links.dataset.index = index;
+			return line;
+		}).filter((d) => d);
+
+		// get the container and update
+		const container = this.elem.querySelector('.container');
+		container.innerHTML = '';
+		container.append(...lines);
+
+		this.finishDraw();
 
 		// calculate loaded percent
 		const loadedPercent = (loadedCount / displays.length);
 
 		if (loadedPercent < 1.0) {
 			// Draw a box for the progress.
-			draw.box(this.context, '#000000', 51, 428, 534, 22);
+
-			draw.box(this.context, '#ffffff', 53, 430, 530, 18);
-			// update the progress gif
-			draw.box(this.context, '#1d7fff', 55, 432, 526 * loadedPercent, 14);
 		} else {
 			// restore the background
-			this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
+
 		}
 	}
 
-	canvasClick(e) {
+	lineClick(e) {
-		// un-scale
+		// get index
-		const scale = e.target.getBoundingClientRect().width / e.target.width;
+		const indexRaw = e.target?.parentNode?.dataset?.index;
-		const x = e.offsetX / scale;
+		if (indexRaw === undefined) return;
-		const y = e.offsetY / scale;
+		const index = +indexRaw;
-		// eliminate off canvas and outside area clicks
-		if (!this.isActive()) return;
-		if (y < 100 || y > 410) return;
-		if (x < 440 || x > 570) return;
 
 		// stop playing
 		navigation.message('navButton');
 		// use the y value to determine an index
-		const index = Math.floor((y - 100) / 29);
 		const display = navigation.getDisplay(index);
 		if (display && display.status === STATUS.loaded) {
 			display.showCanvas(navigation.msg.command.firstFrame);
-			this.hideCanvas();
+			if (this.canvas) {
+				this.canvas.style.display = 'none';
+			}
+			if (this.isHtml) {
+				this.elem.classList.remove('show');
+			}
 		}
 	}
 }

server/styles/compiled.css

@@ -1,441 +0,0 @@
-.weather-display {
-  width: 640px;
-  height: 480px;
-  overflow: hidden;
-  position: relative;
-  background-image: url(../images/BackGround1_1.png);
-  /* this method is required to hide blocks so they can be measured while off screen */
-  height: 0px;
-}
-.weather-display.show {
-  height: 480px;
-}
-.weather-display .template {
-  display: none;
-}
-.weather-display .header {
-  width: 640px;
-  height: 60px;
-  padding-top: 30px;
-}
-.weather-display .header .title {
-  color: yellow;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  font-family: "Star4000";
-  font-size: 24pt;
-  position: absolute;
-  width: 250px;
-}
-.weather-display .header .title.single {
-  left: 170px;
-  top: 25px;
-}
-.weather-display .header .title.dual {
-  left: 170px;
-}
-.weather-display .header .title.dual > div {
-  position: absolute;
-}
-.weather-display .header .title.dual .top {
-  top: -3px;
-}
-.weather-display .header .title.dual .bottom {
-  top: 26px;
-}
-.weather-display .header .logo {
-  top: 30px;
-  left: 50px;
-  position: absolute;
-  z-index: 10;
-}
-.weather-display .header .noaa-logo {
-  position: absolute;
-  top: 39px;
-  left: 356px;
-}
-.weather-display .header .title.single {
-  top: 40px;
-}
-.weather-display .header .date-time {
-  white-space: pre;
-  color: white;
-  font-family: "Star4000 Small";
-  font-size: 24pt;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  left: 415px;
-  width: 170px;
-  text-align: right;
-  position: absolute;
-}
-.weather-display .header .date-time.date {
-  padding-top: 22px;
-}
-.weather-display .main {
-  position: relative;
-}
-.weather-display .main.has-scroll {
-  width: 640px;
-  height: 310px;
-  overflow: hidden;
-}
-.weather-display .main.has-box {
-  margin-left: 64px;
-  margin-right: 64px;
-  width: calc(100% - 128px);
-}
-.weather-display .scroll {
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  width: 640px;
-  height: 80px;
-  overflow: hidden;
-  margin-top: 10px;
-}
-.weather-display .scroll .fixed {
-  font-family: "Star4000";
-  font-size: 24pt;
-  margin-left: 55px;
-}
-
-.weather-display .main.hourly.main {
-  overflow-y: hidden;
-}
-.weather-display .main.hourly.main .column-headers {
-  background-color: rgb(32, 0, 87);
-  height: 20px;
-  position: absolute;
-  width: 100%;
-}
-.weather-display .main.hourly.main .column-headers {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0px;
-  z-index: 5;
-}
-.weather-display .main.hourly.main .column-headers div {
-  display: inline-block;
-  font-family: "Star4000 Small";
-  font-size: 24pt;
-  color: yellow;
-  position: absolute;
-  top: -14px;
-  z-index: 5;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-}
-.weather-display .main.hourly.main .column-headers .temp {
-  left: 355px;
-}
-.weather-display .main.hourly.main .column-headers .like {
-  left: 435px;
-}
-.weather-display .main.hourly.main .column-headers .wind {
-  left: 535px;
-}
-.weather-display .main.hourly.main .hourly-lines {
-  min-height: 338px;
-  padding-top: 10px;
-  background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px);
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row {
-  font-family: "Star4000 Large";
-  font-size: 24pt;
-  height: 72px;
-  color: yellow;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  position: relative;
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row > div {
-  position: absolute;
-  white-space: pre;
-  top: 8px;
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row .hour {
-  left: 25px;
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row .icon {
-  left: 255px;
-  width: 70px;
-  text-align: center;
-  top: unset;
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row .temp {
-  left: 355px;
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row .like {
-  left: 425px;
-}
-.weather-display .main.hourly.main .hourly-lines .hourly-row .wind {
-  left: 505px;
-  width: 100px;
-  text-align: right;
-}
-
-.weather-display .main.current-weather.main .col {
-  height: 50px;
-  width: 255px;
-  display: inline-block;
-  margin-top: 10px;
-  position: absolute;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-}
-.weather-display .main.current-weather.main .col.left {
-  font-family: "Star4000 Extended";
-  font-size: 24pt;
-}
-.weather-display .main.current-weather.main .col.right {
-  right: 0px;
-  font-family: "Star4000 Large";
-  font-size: 20px;
-  font-weight: bold;
-}
-.weather-display .main.current-weather.main .col.right .row {
-  margin-bottom: 12px;
-}
-.weather-display .main.current-weather.main .col.right .row .label,
-.weather-display .main.current-weather.main .col.right .row .value {
-  display: inline-block;
-}
-.weather-display .main.current-weather.main .col.right .row .label {
-  margin-left: 20px;
-}
-.weather-display .main.current-weather.main .col.right .row .value {
-  float: right;
-  margin-right: 10px;
-}
-.weather-display .main.current-weather.main .center {
-  text-align: center;
-}
-.weather-display .main.current-weather.main .temp {
-  font-family: "Star4000 Large";
-  font-size: 24pt;
-}
-.weather-display .main.current-weather.main .icon {
-  height: 100px;
-}
-.weather-display .main.current-weather.main .icon img {
-  max-width: 126px;
-}
-.weather-display .main.current-weather.main .wind-container {
-  margin-bottom: 10px;
-}
-.weather-display .main.current-weather.main .wind-container > div {
-  width: 45%;
-  display: inline-block;
-  margin: 0px;
-}
-.weather-display .main.current-weather.main .wind-container .wind-label {
-  margin-left: 5px;
-}
-.weather-display .main.current-weather.main .wind-container .wind {
-  text-align: right;
-}
-.weather-display .main.current-weather.main .wind-gusts {
-  margin-left: 5px;
-}
-.weather-display .main.current-weather.main .location {
-  color: yellow;
-  margin-bottom: 10px;
-}
-
-.weather-display .local-forecast .container {
-  position: relative;
-  top: 15px;
-  margin: 0px 10px;
-  box-sizing: border-box;
-  height: 280px;
-  overflow: hidden;
-}
-.weather-display .local-forecast .forecasts {
-  position: relative;
-}
-.weather-display .local-forecast .forecast {
-  font-family: "Star4000";
-  font-size: 24pt;
-  text-transform: uppercase;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  min-height: 280px;
-  line-height: 40px;
-}
-
-.weather-display .latest-observations.main {
-  overflow-y: hidden;
-}
-.weather-display .latest-observations.main .column-headers {
-  height: 20px;
-  position: absolute;
-  width: 100%;
-}
-.weather-display .latest-observations.main .column-headers {
-  top: 0px;
-}
-.weather-display .latest-observations.main .column-headers div {
-  display: inline-block;
-  font-family: "Star4000 Small";
-  font-size: 24pt;
-  position: absolute;
-  top: -14px;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-}
-.weather-display .latest-observations.main .column-headers .temp {
-  display: none;
-}
-.weather-display .latest-observations.main .column-headers .temp.show {
-  display: inline-block;
-}
-.weather-display .latest-observations.main .temp {
-  left: 230px;
-}
-.weather-display .latest-observations.main .weather {
-  left: 280px;
-}
-.weather-display .latest-observations.main .wind {
-  left: 430px;
-}
-.weather-display .latest-observations.main .observation-lines {
-  min-height: 338px;
-  padding-top: 10px;
-}
-.weather-display .latest-observations.main .observation-lines .observation-row {
-  font-family: "Star4000";
-  font-size: 24pt;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  position: relative;
-  height: 40px;
-}
-.weather-display .latest-observations.main .observation-lines .observation-row > div {
-  position: absolute;
-  top: 8px;
-}
-.weather-display .latest-observations.main .observation-lines .observation-row .wind {
-  white-space: pre;
-  text-align: right;
-}
-
-#regional-forecast-html.weather-display {
-  background-image: url("../images/BackGround5_1.png");
-}
-
-.weather-display .main.regional-forecast {
-  position: relative;
-}
-.weather-display .main.regional-forecast .map {
-  position: absolute;
-}
-.weather-display .main.regional-forecast .location {
-  position: absolute;
-  width: 140px;
-  margin-left: -40px;
-  margin-top: -35px;
-}
-.weather-display .main.regional-forecast .location > div {
-  position: absolute;
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-}
-.weather-display .main.regional-forecast .location .icon {
-  top: 26px;
-  left: 44px;
-}
-.weather-display .main.regional-forecast .location .icon img {
-  max-height: 32px;
-}
-.weather-display .main.regional-forecast .location .temp {
-  font-family: "Star4000 Large Compressed";
-  font-size: 28px;
-  color: yellow;
-  top: 32px;
-  text-align: right;
-  width: 40px;
-}
-.weather-display .main.regional-forecast .location .city {
-  font-family: Star4000;
-  font-size: 20px;
-}
-
-#extended-forecast-html.weather-display {
-  background-image: url("../images/BackGround2_1.png");
-}
-
-.weather-display .main.extended-forecast .day-container {
-  margin-top: 16px;
-  margin-left: 27px;
-}
-.weather-display .main.extended-forecast .day {
-  /* eventually, when chrome supports paint-order for html elements */
-  /* -webkit-text-stroke: 2px black; */
-  /* paint-order: stroke fill; */
-  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
-  padding: 5px;
-  height: 285px;
-  width: 155px;
-  display: inline-block;
-  margin: 0px 15px;
-  font-family: "Star4000";
-  font-size: 24pt;
-}
-.weather-display .main.extended-forecast .day .date {
-  text-transform: uppercase;
-  text-align: center;
-  color: yellow;
-}
-.weather-display .main.extended-forecast .day .condition {
-  text-align: center;
-  height: 74px;
-  margin-top: 10px;
-}
-.weather-display .main.extended-forecast .day .icon {
-  text-align: center;
-  height: 75px;
-}
-.weather-display .main.extended-forecast .day .icon img {
-  max-height: 75px;
-}
-.weather-display .main.extended-forecast .day .temperatures {
-  width: 100%;
-  margin-top: 5px;
-}
-.weather-display .main.extended-forecast .day .temperatures .temperature-block {
-  display: inline-block;
-  width: 44%;
-}
-.weather-display .main.extended-forecast .day .temperatures .temperature-block > div {
-  text-align: center;
-}
-.weather-display .main.extended-forecast .day .temperatures .temperature-block .value {
-  font-family: "Star4000 Large";
-  margin-top: 4px;
-}
-.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label {
-  color: #8080FF;
-}
-.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label {
-  color: yellow;
-}/*# sourceMappingURL=compiled.css.map */

server/styles/compiled.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss","scss/_extended-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"}

server/styles/index.css

@@ -1,364 +0,0 @@
-@font-face 
-{
-    font-family: "Star4000";
-    src: url('../fonts/Star4000.woff') format('woff');
-}
-body
-{
-    font-family: "Star4000";
-}
-
-input, button
-{
-    font-family: "Star4000";
-}
-
-#imgGetGps
-{
-    height: 13px;
-    vertical-align: middle;
-}
-
-#txtAddress
-{
-    width: 490px;
-    font-size: 16pt;
-}
-
-#btnGetGps, #btnGetLatLng, #btnClearQuery
-{
-    font-size: 16pt;
-}
-
-.autocomplete-suggestions
-{
-    background-color: #ffffff;
-    border: 1px solid #000000;
-	/*overflow: auto;*/
-}
-.autocomplete-suggestion 
-{
-	/*padding: 2px 5px;*/
-	white-space: nowrap;
-	overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 16pt;
-}
-.autocomplete-selected
-{
-	background-color: #0000ff;
-    color: #ffffff;
-}
-#divTwc
-{
-    display: block;
-    background-color: #000000;
-    color: #ffffff;
-    width: 100%;
-    max-width: 640px;
-}
-
-#divTwcLeft
-{
-    display: none;
-    text-align: right;
-    flex-direction: column;
-    vertical-align: middle;
-}
-#divTwcLeft > div
-{
-    flex: 1;
-    padding-right: 12px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-#divTwcRight
-{
-    text-align: left;
-    display: none;
-    flex-direction: column;
-    vertical-align: middle;
-}
-#divTwcRight > div
-{
-    flex: 1;
-    padding-left: 12px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-#divTwcBottom
-{
-    /* visibility: hidden; */
-    display: flex;
-    flex-direction: row;
-    background-color: #000000;
-    color: #ffffff;
-    width: 100%;
-}
-#divTwcBottom > div
-{
-    padding-left: 6px;
-    padding-right: 6px;
-}
-#divTwcBottomLeft
-{
-    flex: 1;
-    text-align: left;
-}
-#divTwcBottomMiddle
-{
-    flex: 0;
-    text-align: center;
-}
-#divTwcBottomRight
-{
-    flex: 1;
-    text-align: right;
-}
-
-#divTwcNavContainer
-{
-    display: none;
-}
-
-#divTwcNav
-{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    background-color: #000000;
-    color: #ffffff;
-    max-width: 640px;
-}
-#divTwcNav > div
-{
-    padding-left: 6px;
-    padding-right: 6px;
-}
-#divTwcNavLeft
-{
-    flex: 1;
-    text-align: left;
-}
-#divTwcNavMiddle
-{
-    flex: 0;
-    text-align: center;
-}
-#divTwcNavRight
-{
-    flex: 1;
-    text-align: right;
-}
-
-#imgPause1x, #imgPause2x
-{
-    visibility: hidden;
-    position: absolute;
-}
-
-.HideCursor
-{
-    cursor: none !important;
-}
-
-#txtScrollText
-{
-    width: 475px;
-}
-
-@font-face 
-{
-    font-family: "Star4000";
-    src: url('../fonts/Star4000.woff') format('woff');
-}
-@font-face 
-{
-    font-family: "Star 4 Radar";
-    src: url('../fonts/Star 4 Radar.woff') format('woff');
-}
-@font-face 
-{
-    font-family: 'Star4000 Extended';
-    src: url('../fonts/Star4000 Extended.woff') format('woff');
-}
-@font-face 
-{
-    font-family: 'Star4000LCN';
-    src: url('../fonts/Star4000LCN.woff') format('woff');
-}
-@font-face
- {
-    font-family: 'Star4000 Large Compressed';
-    src: url('../fonts/Star4000 Large Compressed.woff') format('woff');
-}
-@font-face 
-{
-    font-family: 'Star4000 Large';
-    src: url('../fonts/Star4000 Large.woff') format('woff');
-}
-@font-face
- {
-    font-family: 'Star4000 Small';
-    src: url('../fonts/Star4000 Small.woff') format('woff');
-}
-
-#display
-{
-    font-family: "Star4000";
-    margin: 0 0 0 0;
-    /* overflow: hidden; */
-    width: 100%;
-    /* height: 480px; */
-    /* max-width: 640px; */
-}
-
-jsgif
-{
-    display: none;
-}
-
-#Star4000
-{
-    font-family: 'Star4000';
-}
-#Star4000Extended
-{
-    font-family: 'Star4000 Extended';
-}
-#Star4000LargeCompressed
-{
-    font-family: 'Star4000 Large Compressed';
-}
-#Star4000Large
-{
-    font-family: 'Star4000 Large';
-}
-#Star4000LargeCompressedNumbers
-{
-    font-family: 'Star4000LCN';
-}
-#Star4000Small
-{
-    font-family: 'Star4000 Small';
-}
-#Star4Radar
-{
-    font-family: 'Star 4 Radar';
-}
-
-#container {
-	position: relative;
-	width: 100%;
-	/* max-width: 640px; */
-	height: 100%;
-	max-height: 480;
-	background-image: url(../images/BackGround1_1.png);
-}
-#divTwc:fullscreen #container {
-    background-image: none;
-}
-#loading {
-    width: 640px;
-    height: 480px;
-    max-width: 100%;
-    text-shadow: 4px 4px black;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-}
-#loading .title {
-    font-family: Star4000 Large;
-    font-size: 36px;
-    color:  yellow;
-    margin-bottom: 40px;
-}
-#loading .instructions {font-size: 18pt;}
-#container canvas {
-	/* position: absolute; */
-	width: 100%;
-	/* max-width: 640px; */
-}
-.heading {
-	font-weight: bold;
-	margin-top: 15px;
-}
-#enabledDisplays {
-	margin-bottom: 15px;
-}
-#enabledDisplays label {
-	display: block;
-	max-width: 300px;
-}
-#divTwcBottom img {
-	zoom: 150%;
-}
-#divTwc:fullscreen {
-	display:flex;
-	align-items: center;
-	justify-content: center;
-	align-content: center;
-}
-
-#divTwc:fullscreen #display {
-
-	position: relative;
-}
-#divTwc:fullscreen #divTwcBottom {
-    display: flex;
-    flex-direction: row;
-    background-color: rgb(0 0 0 / 0.5);
-    color: #ffffff;
-    width: 100%;
-    position: absolute;
-    bottom: 0px;
-}
-
-@media screen and (orientation: portrait) {
-	#divTwc:fullscreen canvas {
-		width: 100vw;
-		max-width: 100vw;
-		height: auto;
-    }
-	#divTwc:fullscreen #container {
-		width: 100vw;
-        height: auto;
-        max-height: unset;
-        max-width: unset;
-    }
-}
-
-@media screen and (orientation: landscape) {
-	#divTwc:fullscreen canvas {
-		height: 100vh;
-		max-height: 100vh;
-		width: auto;
-	}
-    #divTwc:fullscreen #container {
-		height: 100vh;
-        width: auto;
-        max-width: 100vw;
-        max-height: unset;
-    }
-}
-
-.navButton {
-    cursor: pointer;
-}
-
-.visible {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 1s linear;
-}
-
-.hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s 1s, opacity 1s linear
-}

server/styles/scss/_current-weather.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 .weather-display .main.current-weather {
 	&.main {

server/styles/scss/_extended-forecast.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 #extended-forecast-html.weather-display {
 	background-image: url('../images/BackGround2_1.png');
@@ -49,10 +49,10 @@
 			.temperature-block {
 				display: inline-block;
 				width: 44%;
+				vertical-align: top;
 
 				>div {
 					text-align: center;
-					;
 				}
 
 				.value {

server/styles/scss/_hourly.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 .weather-display .main.hourly {
 	&.main {

server/styles/scss/_latest-observations.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 .weather-display .latest-observations {
 

server/styles/scss/_local-forecast.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 .weather-display .local-forecast {
 	.container {

server/styles/scss/_page.scss

@@ -0,0 +1,365 @@
+@font-face {
+	font-family: "Star4000";
+	src: url('../fonts/Star4000.woff') format('woff');
+}
+
+body {
+	font-family: "Star4000";
+}
+
+input,
+button {
+	font-family: "Star4000";
+}
+
+#imgGetGps {
+	height: 13px;
+	vertical-align: middle;
+}
+
+#txtAddress {
+	width: 490px;
+	font-size: 16pt;
+}
+
+#btnGetGps,
+#btnGetLatLng,
+#btnClearQuery {
+	font-size: 16pt;
+}
+
+.autocomplete-suggestions {
+	background-color: #ffffff;
+	border: 1px solid #000000;
+	/*overflow: auto;*/
+}
+
+.autocomplete-suggestion {
+	/*padding: 2px 5px;*/
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 16pt;
+}
+
+.autocomplete-selected {
+	background-color: #0000ff;
+	color: #ffffff;
+}
+
+#divTwc {
+	display: block;
+	background-color: #000000;
+	color: #ffffff;
+	width: 100%;
+	max-width: 640px;
+}
+
+#divTwcLeft {
+	display: none;
+	text-align: right;
+	flex-direction: column;
+	vertical-align: middle;
+}
+
+#divTwcLeft>div {
+	flex: 1;
+	padding-right: 12px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#divTwcRight {
+	text-align: left;
+	display: none;
+	flex-direction: column;
+	vertical-align: middle;
+}
+
+#divTwcRight>div {
+	flex: 1;
+	padding-left: 12px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#divTwcBottom {
+	/* visibility: hidden; */
+	display: flex;
+	flex-direction: row;
+	background-color: #000000;
+	color: #ffffff;
+	width: 100%;
+}
+
+#divTwcBottom>div {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+#divTwcBottomLeft {
+	flex: 1;
+	text-align: left;
+}
+
+#divTwcBottomMiddle {
+	flex: 0;
+	text-align: center;
+}
+
+#divTwcBottomRight {
+	flex: 1;
+	text-align: right;
+}
+
+#divTwcNavContainer {
+	display: none;
+}
+
+#divTwcNav {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	background-color: #000000;
+	color: #ffffff;
+	max-width: 640px;
+}
+
+#divTwcNav>div {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+#divTwcNavLeft {
+	flex: 1;
+	text-align: left;
+}
+
+#divTwcNavMiddle {
+	flex: 0;
+	text-align: center;
+}
+
+#divTwcNavRight {
+	flex: 1;
+	text-align: right;
+}
+
+#imgPause1x,
+#imgPause2x {
+	visibility: hidden;
+	position: absolute;
+}
+
+.HideCursor {
+	cursor: none !important;
+}
+
+#txtScrollText {
+	width: 475px;
+}
+
+@font-face {
+	font-family: "Star4000";
+	src: url('../fonts/Star4000.woff') format('woff');
+}
+
+@font-face {
+	font-family: "Star 4 Radar";
+	src: url('../fonts/Star 4 Radar.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Star4000 Extended';
+	src: url('../fonts/Star4000 Extended.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Star4000LCN';
+	src: url('../fonts/Star4000LCN.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Star4000 Large Compressed';
+	src: url('../fonts/Star4000 Large Compressed.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Star4000 Large';
+	src: url('../fonts/Star4000 Large.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Star4000 Small';
+	src: url('../fonts/Star4000 Small.woff') format('woff');
+}
+
+#display {
+	font-family: "Star4000";
+	margin: 0 0 0 0;
+	/* overflow: hidden; */
+	width: 100%;
+	/* height: 480px; */
+	/* max-width: 640px; */
+}
+
+jsgif {
+	display: none;
+}
+
+#Star4000 {
+	font-family: 'Star4000';
+}
+
+#Star4000Extended {
+	font-family: 'Star4000 Extended';
+}
+
+#Star4000LargeCompressed {
+	font-family: 'Star4000 Large Compressed';
+}
+
+#Star4000Large {
+	font-family: 'Star4000 Large';
+}
+
+#Star4000LargeCompressedNumbers {
+	font-family: 'Star4000LCN';
+}
+
+#Star4000Small {
+	font-family: 'Star4000 Small';
+}
+
+#Star4Radar {
+	font-family: 'Star 4 Radar';
+}
+
+#container {
+	position: relative;
+	width: 100%;
+	/* max-width: 640px; */
+	height: 100%;
+	max-height: 480;
+	background-image: url(../images/BackGround1_1.png);
+}
+
+#divTwc:fullscreen #container {
+	background-image: none;
+}
+
+#loading {
+	width: 640px;
+	height: 480px;
+	max-width: 100%;
+	text-shadow: 4px 4px black;
+	display: flex;
+	align-items: center;
+	text-align: center;
+	justify-content: center;
+}
+
+#loading .title {
+	font-family: Star4000 Large;
+	font-size: 36px;
+	color: yellow;
+	margin-bottom: 40px;
+}
+
+#loading .instructions {
+	font-size: 18pt;
+}
+
+#container canvas {
+	/* position: absolute; */
+	width: 100%;
+	/* max-width: 640px; */
+}
+
+.heading {
+	font-weight: bold;
+	margin-top: 15px;
+}
+
+#enabledDisplays {
+	margin-bottom: 15px;
+}
+
+#enabledDisplays label {
+	display: block;
+	max-width: 300px;
+}
+
+#divTwcBottom img {
+	zoom: 150%;
+}
+
+#divTwc:fullscreen {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+}
+
+#divTwc:fullscreen #display {
+
+	position: relative;
+}
+
+#divTwc:fullscreen #divTwcBottom {
+	display: flex;
+	flex-direction: row;
+	background-color: rgb(0 0 0 / 0.5);
+	color: #ffffff;
+	width: 100%;
+	position: absolute;
+	bottom: 0px;
+}
+
+@media screen and (orientation: portrait) {
+	#divTwc:fullscreen canvas {
+		width: 100vw;
+		max-width: 100vw;
+		height: auto;
+	}
+
+	#divTwc:fullscreen #container {
+		width: 100vw;
+		height: auto;
+		max-height: unset;
+		max-width: unset;
+	}
+}
+
+@media screen and (orientation: landscape) {
+	#divTwc:fullscreen canvas {
+		height: 100vh;
+		max-height: 100vh;
+		width: auto;
+	}
+
+	#divTwc:fullscreen #container {
+		height: 100vh;
+		width: auto;
+		max-width: 100vw;
+		max-height: unset;
+	}
+}
+
+.navButton {
+	cursor: pointer;
+}
+
+.visible {
+	visibility: visible;
+	opacity: 1;
+	transition: opacity 1s linear;
+}
+
+.hidden {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0s 1s, opacity 1s linear
+}

server/styles/scss/_progress.scss

@@ -0,0 +1,85 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+.weather-display .progress {
+	@include u.text-shadow();
+	font-family: 'Star4000 Extended';
+	font-size: 19pt;
+
+	.container {
+		position: relative;
+		top: 15px;
+		margin: 0px 10px;
+		box-sizing: border-box;
+		height: 280px;
+		overflow: hidden;
+
+		.item {
+			position: relative;
+
+			.name {
+				white-space: nowrap;
+
+				&::after {
+					content: '........................................................................';
+				}
+			}
+
+			.links {
+				position: absolute;
+				text-align: right;
+				right: 0px;
+				top: 0px;
+
+				>div {
+					background-color: c.$blue-box;
+					display: none;
+					padding-left: 4px;
+				}
+
+				.loading {
+					color: #ffff00;
+				}
+
+				.press-here {
+					color: #00ff00;
+					cursor: pointer;
+				}
+
+				.failed {
+					color: #ff0000;
+				}
+
+				.no-data {
+					color: #C0C0C0;
+				}
+
+				.disabled {
+					color: #C0C0C0;
+				}
+
+				&.loading .loading {
+					display: block;
+				}
+
+				&.press-here .press-here {
+					display: block;
+				}
+
+				&.failed .failed {
+					display: block;
+				}
+
+				&.no-data .no-data {
+					display: block;
+				}
+
+				&.disabled .disabled {
+					display: block;
+				}
+
+			}
+		}
+	}
+
+}

server/styles/scss/_regional-forecast.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 #regional-forecast-html.weather-display {
 	background-image: url('../images/BackGround5_1.png');
@@ -35,10 +35,10 @@
 		}
 
 		.temp {
-			font-family: 'Star4000 Large Compressed';
+			font-family: 'Star4000 Large';
 			font-size: 28px;
 			color: c.$title-color;
-			top: 32px;
+			top: 28px;
 			text-align: right;
 			width: 40px;
 		}

server/styles/scss/_weather-display.scss

@@ -1,5 +1,5 @@
-@use 'colors'as c;
+@use 'shared/_colors'as c;
-@use 'utils'as u;
+@use 'shared/_utils'as u;
 
 .weather-display {
 	width: 640px;

server/styles/scss/compiled.scss

@@ -1,7 +0,0 @@
-@use '_weatherdisplay';
-@use '_hourly';
-@use '_current-weather';
-@use '_local-forecast';
-@use '_latest-observations';
-@use '_regional-forecast';
-@use '_extended-forecast';

server/styles/scss/main.scss

@@ -0,0 +1,9 @@
+@import 'page';
+@import 'current-weather';
+@import 'extended-forecast';
+@import 'hourly';
+@import 'latest-observations';
+@import 'local-forecast';
+@import 'progress';
+@import 'regional-forecast';
+@import 'weather-display';

server/styles/scss/shared/_colors.scss

@@ -8,3 +8,5 @@ $gradient-main-background-1: #102080;
 $gradient-main-background-2: #001040;
 
 $extended-low: #8080FF;
+
+$blue-box: #26235a;

views/index.ejs

@@ -5,8 +5,7 @@
 <head>
   <meta charset="utf-8" />
   <title>WeatherStar 4000+</title>
-	<meta name="description"
+  <meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
-		content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
   <meta name="keywords" content="WeatherStar 4000+" />
   <meta name="author" content="Matt Walsh" />
   <meta name="application-name" content="WeatherStar 4000+" />
@@ -22,8 +21,7 @@
   <script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
   <% } else { %>
-			<link rel="stylesheet" type="text/css" href="styles/index.css" />
+  <link rel="stylesheet" type="text/css" href="styles/main.css" />
-			<link rel="stylesheet" type="text/css" href="styles/compiled.css" />
   <script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
   <script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
   <script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
@@ -64,9 +62,7 @@
 
   <div id="divQuery">
     <form id="frmGetLatLng">
-			<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps"
+      <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img id="imgGetGps" src="images/nav/ic_gps_fixed_black_18dp_1x.png" /></button>
-				type="button" title="Get GPS Location"><img id="imgGetGps"
-					src="images/nav/ic_gps_fixed_black_18dp_1x.png" /></button>
       <input id="btnGetLatLng" type="submit" value="GO" />
       <input id="btnClearQuery" type="reset" value="Reset" />
     </form>
@@ -90,6 +86,9 @@
           <div class="instructions">Enter your location above to continue</div>
         </div>
       </div>
+      <div id="progress-html" class="weather-display show">
+        <%- include('partials/progress.ejs') %>
+      </div>
       <div id="hourly-html" class="weather-display">
         <%- include('partials/hourly.ejs') %>
       </div>
@@ -112,8 +111,7 @@
     <div id="divTwcBottom">
       <div id="divTwcBottomLeft">
         <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
-				<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png"
+        <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" />
-					title="Previous" />
         <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" />
         <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" />
       </div>
@@ -121,8 +119,7 @@
         <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" />
       </div>
       <div id="divTwcBottomRight">
-				<img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png"
+        <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" />
-					title="Exit Fullscreen" />
       </div>
     </div>
   </div>
@@ -147,8 +144,7 @@
 
   <div id="divRefresh">
     Last Update: <span id="spanLastRefresh">(None)</span><br />
-		<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown"
+    <input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
-			for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
   </div>
 
   <div id="divUnits">

views/partials/extended-forecast.ejs

@@ -10,11 +10,11 @@
       <div class="temperatures">
         <div class="temperature-block lo">
           <div class="label">Lo</div>
-						<div class="value value-hi"></div>
+          <div class="value value-lo"></div>
         </div>
         <div class="temperature-block hi">
           <div class="label">Hi</div>
-						<div class="value value-lo"></div>
+          <div class="value value-hi"></div>
         </div>
       </div>
     </div>

views/partials/progress.ejs

@@ -0,0 +1,15 @@
+<%- include('header.ejs', {titleDual:{ top: 'WeatherStar' , bottom: '4000+  v' + version }, hasTime: true}) %>
+<div class="main has-box progress">
+  <div class="container">
+    <div class="item template">
+      <div class="name">Current Conditions</div>
+      <div class="links loading">
+        <div class="loading">Loading</div>
+        <div class="press-here">Press Here</div>
+        <div class="failed">Failed</div>
+        <div class="no-data">No Data</div>
+        <div class="disabled">Disabled</div>
+      </div>
+    </div>
+  </div>
+</div>

ws4kp.code-workspace

@@ -42,5 +42,11 @@
 			"**/twc3.js",
 		],
 		"editor.tabSize": 2,
+		"emmet.includeLanguages": {
+			"ejs": "html",
+		},
+		"[html]": {
+			"editor.defaultFormatter": "j69.ejs-beautify"
+		},
 	},
 }