lastest observations in html
This commit is contained in:
parent
9ce8176b63
commit
efd2cc7808
|
@ -1,12 +1,10 @@
|
|||
// current weather conditions display
|
||||
/* globals WeatherDisplay, utils, STATUS, UNITS, draw, navigation, StationInfo */
|
||||
/* globals WeatherDisplay, utils, STATUS, UNITS, navigation, StationInfo */
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class LatestObservations extends WeatherDisplay {
|
||||
constructor(navId, elemId) {
|
||||
super(navId, elemId, 'Latest Observations');
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
super(navId, elemId, 'Latest Observations', true, true);
|
||||
|
||||
// constants
|
||||
this.MaximumRegionalStations = 7;
|
||||
|
@ -67,25 +65,15 @@ class LatestObservations extends WeatherDisplay {
|
|||
// sort array by station name
|
||||
const sortedConditions = conditions.sort((a, b) => ((a.Name < b.Name) ? -1 : 1));
|
||||
|
||||
this.context.drawImage(await this.backgroundImage, 0, 0);
|
||||
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.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
|
||||
draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
|
||||
|
||||
draw.titleText(this.context, 'Latest', 'Observations');
|
||||
|
||||
if (navigation.units() === UNITS.english) {
|
||||
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 295, 105, `${String.fromCharCode(176)}F`, 2);
|
||||
this.elem.querySelector('.column-headers .temp.english').classList.add('show');
|
||||
this.elem.querySelector('.column-headers .temp.metric').classList.remove('show');
|
||||
} else {
|
||||
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 295, 105, `${String.fromCharCode(176)}C`, 2);
|
||||
this.elem.querySelector('.column-headers .temp.english').classList.remove('show');
|
||||
this.elem.querySelector('.column-headers .temp.metric').classList.add('show');
|
||||
}
|
||||
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 345, 105, 'WEATHER', 2);
|
||||
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 495, 105, 'WIND', 2);
|
||||
|
||||
let y = 140;
|
||||
|
||||
sortedConditions.forEach((condition) => {
|
||||
const lines = sortedConditions.map((condition) => {
|
||||
let Temperature = condition.temperature.value;
|
||||
let WindSpeed = condition.windSpeed.value;
|
||||
const windDirection = utils.calc.directionToNSEW(condition.windDirection.value);
|
||||
|
@ -95,22 +83,25 @@ class LatestObservations extends WeatherDisplay {
|
|||
WindSpeed = utils.units.kphToMph(WindSpeed);
|
||||
}
|
||||
|
||||
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 65, y, condition.city.substr(0, 14), 2);
|
||||
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 345, y, LatestObservations.shortenCurrentConditions(condition.textDescription).substr(0, 9), 2);
|
||||
|
||||
const fill = {};
|
||||
fill.location = utils.string.locationCleanup(condition.city).substr(0, 14);
|
||||
fill.temp = Temperature;
|
||||
fill.weather = LatestObservations.shortenCurrentConditions(condition.textDescription).substr(0, 9);
|
||||
if (WindSpeed > 0) {
|
||||
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString(), 2);
|
||||
fill.wind = windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString();
|
||||
} else if (WindSpeed === 'NA') {
|
||||
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, 'NA', 2);
|
||||
fill.wind = 'NA';
|
||||
} else {
|
||||
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, 'Calm', 2);
|
||||
fill.wind = 'Calm';
|
||||
}
|
||||
|
||||
const x = (325 - (Temperature.toString().length * 15));
|
||||
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', x, y, Temperature, 2);
|
||||
|
||||
y += 40;
|
||||
return this.fillTemplate('observation-row', fill);
|
||||
});
|
||||
|
||||
const linesContainer = this.elem.querySelector('.observation-lines');
|
||||
linesContainer.innerHTML = '';
|
||||
linesContainer.append(...lines);
|
||||
|
||||
this.finishDraw();
|
||||
}
|
||||
|
||||
|
|
|
@ -97,7 +97,7 @@ const navigation = (() => {
|
|||
almanac = new Almanac(7, 'almanac');
|
||||
displays = [
|
||||
currentWeather,
|
||||
new LatestObservations(1, 'latestObservations'),
|
||||
new LatestObservations(1, 'latest-observations'),
|
||||
new Hourly(2, 'hourly'),
|
||||
new TravelForecast(3, 'travelForecast', false), // not active by default
|
||||
new RegionalForecast(4, 'regionalForecast'),
|
||||
|
|
|
@ -136,99 +136,21 @@ const utils = (() => {
|
|||
const wrap = (x, m) => ((x % m) + m) % m;
|
||||
|
||||
// ********************************* strings *********************************************
|
||||
const wordWrap = (_str, ...rest) => {
|
||||
// discuss at: https://locutus.io/php/wordwrap/
|
||||
// original by: Jonas Raoni Soares Silva (https://www.jsfromhell.com)
|
||||
// improved by: Nick Callen
|
||||
// improved by: Kevin van Zonneveld (https://kvz.io)
|
||||
// improved by: Sakimori
|
||||
// revised by: Jonas Raoni Soares Silva (https://www.jsfromhell.com)
|
||||
// bugfixed by: Michael Grier
|
||||
// bugfixed by: Feras ALHAEK
|
||||
// improved by: Rafał Kukawski (https://kukawski.net)
|
||||
// example 1: wordwrap('Kevin van Zonneveld', 6, '|', true)
|
||||
// returns 1: 'Kevin|van|Zonnev|eld'
|
||||
// example 2: wordwrap('The quick brown fox jumped over the lazy dog.', 20, '<br />\n')
|
||||
// returns 2: 'The quick brown fox<br />\njumped over the lazy<br />\ndog.'
|
||||
// example 3: wordwrap('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
|
||||
// returns 3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\nveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\ncommodo consequat.'
|
||||
const intWidth = rest[0] ?? 75;
|
||||
const strBreak = rest[1] ?? '\n';
|
||||
const cut = rest[2] ?? false;
|
||||
const locationCleanup = (input) => {
|
||||
// regexes to run
|
||||
const regexes = [
|
||||
// "Chicago / West Chicago", removes before slash
|
||||
/^[A-Za-z ]+ \/ /,
|
||||
// "Chicago/Waukegan" removes before slash
|
||||
/^[A-Za-z ]+\//,
|
||||
// "Chicago, Chicago O'hare" removes before comma
|
||||
/^[A-Za-z ]+, /,
|
||||
];
|
||||
|
||||
let i;
|
||||
let j;
|
||||
let line;
|
||||
|
||||
let str = _str;
|
||||
str += '';
|
||||
|
||||
if (intWidth < 1) {
|
||||
return str;
|
||||
}
|
||||
|
||||
const reLineBreaks = /\r\n|\n|\r/;
|
||||
const reBeginningUntilFirstWhitespace = /^\S*/;
|
||||
const reLastCharsWithOptionalTrailingWhitespace = /\S*(\s)?$/;
|
||||
|
||||
const lines = str.split(reLineBreaks);
|
||||
const l = lines.length;
|
||||
let match;
|
||||
|
||||
// for each line of text
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (i = 0; i < l; lines[i++] += line) {
|
||||
line = lines[i];
|
||||
lines[i] = '';
|
||||
|
||||
while (line.length > intWidth) {
|
||||
// get slice of length one char above limit
|
||||
const slice = line.slice(0, intWidth + 1);
|
||||
|
||||
// remove leading whitespace from rest of line to parse
|
||||
let ltrim = 0;
|
||||
// remove trailing whitespace from new line content
|
||||
let rtrim = 0;
|
||||
|
||||
match = slice.match(reLastCharsWithOptionalTrailingWhitespace);
|
||||
|
||||
// if the slice ends with whitespace
|
||||
if (match[1]) {
|
||||
// then perfect moment to cut the line
|
||||
j = intWidth;
|
||||
ltrim = 1;
|
||||
} else {
|
||||
// otherwise cut at previous whitespace
|
||||
j = slice.length - match[0].length;
|
||||
|
||||
if (j) {
|
||||
rtrim = 1;
|
||||
}
|
||||
|
||||
// but if there is no previous whitespace
|
||||
// and cut is forced
|
||||
// cut just at the defined limit
|
||||
if (!j && cut && intWidth) {
|
||||
j = intWidth;
|
||||
}
|
||||
|
||||
// if cut wasn't forced
|
||||
// cut at next possible whitespace after the limit
|
||||
if (!j) {
|
||||
const charsUntilNextWhitespace = (line.slice(intWidth).match(reBeginningUntilFirstWhitespace) || [''])[0];
|
||||
|
||||
j = slice.length + charsUntilNextWhitespace.length;
|
||||
}
|
||||
}
|
||||
|
||||
lines[i] += line.slice(0, j - rtrim);
|
||||
line = line.slice(j + ltrim);
|
||||
lines[i] += line.length ? strBreak : '';
|
||||
}
|
||||
}
|
||||
|
||||
return lines.join('\n');
|
||||
// run all regexes
|
||||
return regexes.reduce((value, regex) => value.replace(regex, ''), input);
|
||||
};
|
||||
|
||||
// ********************************* cors ********************************************
|
||||
// rewrite some urls for local server
|
||||
const rewriteUrl = (_url) => {
|
||||
|
@ -325,7 +247,7 @@ const utils = (() => {
|
|||
wrap,
|
||||
},
|
||||
string: {
|
||||
wordWrap,
|
||||
locationCleanup,
|
||||
},
|
||||
cors: {
|
||||
rewriteUrl,
|
||||
|
|
|
@ -265,4 +265,64 @@
|
|||
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;
|
||||
}/*# sourceMappingURL=compiled.css.map */
|
|
@ -1 +1 @@
|
|||
{"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"],"names":[],"mappings":"AAGA;EACC,YAAA;EACA,aAAA;EACA,gBAAA;EACA,kBAAA;EACA,kDAAA;EAEA,oFAAA;EACA,WAAA;ACHD;ADKC;EACC,aAAA;ACHF;ADMC;EACC,aAAA;ACJF;ADOC;EACC,YAAA;EACA,YAAA;EACA,iBAAA;ACLF;ADSE;EACC,aE7BW;ECGb,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EHwBC,uBAAA;EACA,eAAA;EACA,kBAAA;ACJH;ADMG;EACC,WAAA;EACA,SAAA;ACJJ;ADOG;EACC,WAAA;ACLJ;ADOI;EACC,kBAAA;ACLL;ADQI;EACC,SAAA;ACNL;ADSI;EACC,SAAA;ACPL;ADaE;EACC,SAAA;EACA,UAAA;EACA,kBAAA;EACA,WAAA;ACXH;ADcE;EACC,kBAAA;EACA,SAAA;EACA,WAAA;ACZH;ADeE;EACC,SAAA;ACbH;ADgBE;EACC,gBAAA;EACA,YE5ES;EF6ET,6BAAA;EACA,eAAA;EG5EF,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EH0EC,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACXH;ADaG;EACC,iBAAA;ACXJ;ADgBC;EACC,kBAAA;ACdF;ADgBE;EACC,YAAA;EACA,aAAA;EACA,gBAAA;ACdH;ADiBE;EACC,iBAAA;EACA,kBAAA;EACA,yBAAA;ACfH;ADoBC;EACC,YAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;AClBF;;AG3FC;EACC,kBAAA;AH8FF;AG5FE;EACC,gCFJa;EEKb,YAAA;EACA,kBAAA;EACA,WAAA;AH8FH;AG3FE;EACC,wBAAA;EAAA,gBAAA;EACA,QAAA;EACA,UAAA;AH6FH;AG3FG;EACC,qBAAA;EACA,6BAAA;EACA,eAAA;EACA,aFpBiB;EEqBjB,kBAAA;EACA,UAAA;EACA,UAAA;EDvBH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AFoHF;AG7FG;EACC,WAAA;AH+FJ;AG5FG;EACC,WAAA;AH8FJ;AG3FG;EACC,WAAA;AH6FJ;AGzFE;EACC,iBAAA;EACA,iBAAA;EAEA,qGAAA;AH0FH;AGpFG;EACC,6BAAA;EACA,eAAA;EACA,YAAA;EACA,aFzDU;ECGb,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;ECoDE,kBAAA;AHyFJ;AGvFI;EACC,kBAAA;EACA,gBAAA;EACA,QAAA;AHyFL;AGtFI;EACC,UAAA;AHwFL;AGrFI;EACC,WAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;AHuFL;AGpFI;EACC,WAAA;AHsFL;AGnFI;EACC,WAAA;AHqFL;AGlFI;EACC,WAAA;EACA,YAAA;EACA,iBAAA;AHoFL;;AIvKE;EACC,YAAA;EACA,YAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EFRF,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AFkLF;AI1KG;EACC,gCAAA;EACA,eAAA;AJ4KJ;AIxKG;EACC,UAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;AJ0KJ;AIxKI;EACC,mBAAA;AJ0KL;AIxKK;;EAEC,qBAAA;AJ0KN;AIvKK;EACC,iBAAA;AJyKN;AItKK;EACC,YAAA;EACA,kBAAA;AJwKN;AIhKE;EACC,kBAAA;AJkKH;AI/JE;EACC,6BAAA;EACA,eAAA;AJiKH;AI5JE;EACC,aAAA;AJ8JH;AI5JG;EACC,gBAAA;AJ8JJ;AI1JE;EACC,mBAAA;AJ4JH;AI1JG;EACC,UAAA;EACA,qBAAA;EACA,WAAA;AJ4JJ;AIzJG;EACC,gBAAA;AJ2JJ;AIxJG;EACC,iBAAA;AJ0JJ;AItJE;EACC,gBAAA;AJwJH;AIrJE;EACC,aH3FW;EG4FX,mBAAA;AJuJH;;AK/OC;EACC,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,gBAAA;ALkPF;AK/OC;EACC,kBAAA;ALiPF;AK9OC;EACC,uBAAA;EACA,eAAA;EACA,yBAAA;EHjBD,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EGeA,iBAAA;EACA,iBAAA;ALmPF","file":"compiled.css"}
|
||||
{"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"],"names":[],"mappings":"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","file":"compiled.css"}
|
72
server/styles/scss/_latest-observations.scss
Normal file
72
server/styles/scss/_latest-observations.scss
Normal file
|
@ -0,0 +1,72 @@
|
|||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
|
||||
.weather-display .latest-observations {
|
||||
|
||||
&.main {
|
||||
overflow-y: hidden;
|
||||
|
||||
.column-headers {
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-headers {
|
||||
top: 0px;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
font-family: 'Star4000 Small';
|
||||
font-size: 24pt;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
@include u.text-shadow();
|
||||
}
|
||||
|
||||
.temp {
|
||||
// hidden initially for english/metric switching
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.temp {
|
||||
left: 230px;
|
||||
}
|
||||
|
||||
.weather {
|
||||
left: 280px;
|
||||
}
|
||||
|
||||
.wind {
|
||||
left: 430px;
|
||||
}
|
||||
|
||||
.observation-lines {
|
||||
min-height: 338px;
|
||||
padding-top: 10px;
|
||||
|
||||
.observation-row {
|
||||
font-family: 'Star4000';
|
||||
font-size: 24pt;
|
||||
@include u.text-shadow();
|
||||
position: relative;
|
||||
height: 40px;
|
||||
|
||||
>div {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.wind {
|
||||
white-space: pre;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -24,8 +24,6 @@
|
|||
height: 60px;
|
||||
padding-top: 30px;
|
||||
|
||||
|
||||
|
||||
.title {
|
||||
color: c.$title-color;
|
||||
@include u.text-shadow(3px, 1.5px);
|
||||
|
@ -104,6 +102,7 @@
|
|||
margin-right: 64px;
|
||||
width: calc(100% - 128px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@use '_weatherdisplay';
|
||||
@use '_hourly';
|
||||
@use '_current-weather';
|
||||
@use '_local-forecast';
|
||||
@use '_local-forecast';
|
||||
@use '_latest-observations';
|
|
@ -99,6 +99,9 @@
|
|||
<div id="local-forecast-html" class="weather-display">
|
||||
<%- include('partials/local-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="latest-observations-html" class="weather-display">
|
||||
<%- include('partials/latest-observations.ejs') %>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divTwcBottom">
|
||||
<div id="divTwcBottomLeft">
|
||||
|
|
20
views/partials/latest-observations.ejs
Normal file
20
views/partials/latest-observations.ejs
Normal file
|
@ -0,0 +1,20 @@
|
|||
<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true }) %>
|
||||
<div class="main has-scroll latest-observations has-box">
|
||||
<div class="container">
|
||||
<div class="column-headers">
|
||||
<div class="temp english">°F</div>
|
||||
<div class="temp metric">°C</div>
|
||||
<div class="weather">Weather</div>
|
||||
<div class="wind">Wind</div>
|
||||
</div>
|
||||
<div class="observation-lines">
|
||||
<div class="observation-row template">
|
||||
<div class="location"></div>
|
||||
<div class="temp"></div>
|
||||
<div class="weather"></div>
|
||||
<div class="wind"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('scroll.ejs') %>
|
|
@ -28,7 +28,8 @@
|
|||
"T",
|
||||
"T'storm",
|
||||
"uscomp",
|
||||
"Visib"
|
||||
"Visib",
|
||||
"Waukegan"
|
||||
],
|
||||
"cSpell.ignorePaths": [
|
||||
"**/package-lock.json",
|
||||
|
|
Loading…
Reference in a new issue