new frontend added
This commit is contained in:
Neythen
parent
f27e4eec4d
commit
40d19b9fa0
@ -1 +1 @@
|
||||
{"feature": "Stocks", "speed": "medium", "animation": "down", "percent": false, "point": false, "logos": true, "chart": false, "title": true, "symbols": {"NEO,USD": {"current": 43.45, "24hr_change": -8.868602959790408}, "BTC,USD": {"current": 60427, "24hr_change": -5.50343462209234}, "ETH,BTC": {"current": 0.07072443, "24hr_change": -7.189558281316787}, "ADA,GBP": {"current": 1.41, "24hr_change": -6.194047327868864}}}
|
||||
{"feature": "Stocks", "speed": "medium", "animation": "down", "percent": false, "point": false, "logos": true, "chart": false, "title": true, "symbols": {"NEO,USD": {"current": 43.15, "24hr_change": -1.600187916156379}, "BTC,USD": {"current": 60805, "24hr_change": -0.013075042984485738}, "ETH,BTC": {"current": 0.07031509, "24hr_change": -1.3369356155844327}, "ADA,GBP": {"current": 1.4, "24hr_change": -2.1414474393242457}}}
|
||||
@ -1 +1 @@
|
||||
{"feature": "Current Weather", "speed": "medium", "animation": "down", "temp": "celsius", "wind_speed": "miles/sec", "colour": "white", "city_colour": "yellow", "title": true, "locations": {"Beijing": {"main_weather": "Clear", "description": "clear sky", "temp": 0.94, "min_temp": 0.94, "max_temp": 13.85, "feels_like": 0.94, "humidity": 72, "clouds": 0, "wind_speed": 0.6, "wind_direction": 307, "visibility": 10000, "uv": 0, "rain_chance": 0}, "London": {"main_weather": "Clouds", "description": "few clouds", "temp": 9.54, "min_temp": 7.43, "max_temp": 11.11, "feels_like": 8.23, "humidity": 88, "clouds": 20, "wind_speed": 2.57, "wind_direction": 230, "visibility": 10000, "uv": 0, "rain_chance": 0}, "Tokyo": {"main_weather": "Clouds", "description": "broken clouds", "temp": 12.24, "min_temp": 12.24, "max_temp": 15.91, "feels_like": 11.09, "humidity": 60, "clouds": 75, "wind_speed": 0.89, "wind_direction": 33, "visibility": 10000, "uv": 0, "rain_chance": 0.02}, "Moscow": {"main_weather": "Clear", "description": "clear sky", "temp": -2.25, "min_temp": -2.57, "max_temp": 0.29, "feels_like": -7.63, "humidity": 80, "clouds": 0, "wind_speed": 4.84, "wind_direction": 273, "visibility": 10000, "uv": 0, "rain_chance": 0}}, "current_weather": true}
|
||||
{"feature": "Current Weather", "speed": "medium", "animation": "down", "temp": "celsius", "wind_speed": "miles/sec", "colour": "white", "city_colour": "yellow", "title": true, "locations": {"Tokyo": {"main_weather": "Clouds", "description": "broken clouds", "temp": 10.83, "min_temp": 10.83, "max_temp": 16.51, "feels_like": 9.82, "humidity": 71, "clouds": 75, "wind_speed": 2.06, "wind_direction": 310, "visibility": 10000, "uv": 0, "rain_chance": 0.05}, "London": {"main_weather": "Clouds", "description": "overcast clouds", "temp": 7.5, "min_temp": 7.44, "max_temp": 11.01, "feels_like": 5.84, "humidity": 85, "clouds": 86, "wind_speed": 2.53, "wind_direction": 269, "visibility": 10000, "uv": 0, "rain_chance": 0}, "Moscow": {"main_weather": "Clouds", "description": "overcast clouds", "temp": 0.41, "min_temp": -2.12, "max_temp": 0.41, "feels_like": -2.13, "humidity": 83, "clouds": 100, "wind_speed": 2.13, "wind_direction": 230, "visibility": 10000, "uv": 0, "rain_chance": 0}, "Beijing": {"main_weather": "Clear", "description": "clear sky", "temp": -0.06, "min_temp": -0.06, "max_temp": 13.01, "feels_like": -0.06, "humidity": 49, "clouds": 0, "wind_speed": 0.31, "wind_direction": 4, "visibility": 10000, "uv": 0, "rain_chance": 0}}, "current_weather": true}
|
||||
@ -1 +1 @@
|
||||
{"feature": "Current Weather", "speed": "medium", "animation": "continuous", "temp": "celsius", "wind_speed": "miles/sec", "colour": "white", "city_colour": "yellow", "title": true, "locations": {"Beijing": [{"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 0.94, "max_temp": 13.85}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 6.16, "max_temp": 13.29}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 5.69, "max_temp": 9.87}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 5.62, "max_temp": 9.94}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 2.8, "max_temp": 9.15}, {"main_weather": "Clear", "description": "clear sky", "min_temp": -0.28, "max_temp": 3.8}, {"main_weather": "Clear", "description": "clear sky", "min_temp": -1.2, "max_temp": 3.28}, {"main_weather": "Clear", "description": "clear sky", "min_temp": -0.49, "max_temp": 5.87}], "London": [{"main_weather": "Clear", "description": "clear sky", "min_temp": 7.43, "max_temp": 11.11}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 7.51, "max_temp": 11}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 7.05, "max_temp": 12.71}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 8.97, "max_temp": 12.83}, {"main_weather": "Clouds", "description": "few clouds", "min_temp": 8.1, "max_temp": 12.31}, {"main_weather": "Rain", "description": "light rain", "min_temp": 6.12, "max_temp": 10.84}, {"main_weather": "Rain", "description": "light rain", "min_temp": 4.61, "max_temp": 9.35}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 5.3, "max_temp": 8.62}], "Tokyo": [{"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 12.24, "max_temp": 15.91}, {"main_weather": "Rain", "description": "light rain", "min_temp": 13.48, "max_temp": 14.39}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 12.63, "max_temp": 17.46}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 12.47, "max_temp": 16.3}, {"main_weather": "Rain", "description": "light rain", "min_temp": 13.08, "max_temp": 14.47}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 11.16, "max_temp": 15.37}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 12.42, "max_temp": 14.94}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 10.5, "max_temp": 14.7}], "Moscow": [{"main_weather": "Clouds", "description": "few clouds", "min_temp": -2.57, "max_temp": 0.29}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": -1.92, "max_temp": 0.29}, {"main_weather": "Snow", "description": "light snow", "min_temp": -1.86, "max_temp": 0.44}, {"main_weather": "Snow", "description": "light snow", "min_temp": -1.68, "max_temp": 0.94}, {"main_weather": "Snow", "description": "rain and snow", "min_temp": -0.34, "max_temp": 3.57}, {"main_weather": "Snow", "description": "light snow", "min_temp": -0.52, "max_temp": 1.01}, {"main_weather": "Snow", "description": "light snow", "min_temp": -5.53, "max_temp": 0.3}, {"main_weather": "Snow", "description": "light snow", "min_temp": -5.31, "max_temp": -2.03}]}, "current_weather": true}
|
||||
{"feature": "Current Weather", "speed": "medium", "animation": "continuous", "temp": "celsius", "wind_speed": "miles/sec", "colour": "white", "city_colour": "yellow", "title": true, "locations": {"Tokyo": [{"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 10.83, "max_temp": 16.51}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 12.8, "max_temp": 17.57}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 13.22, "max_temp": 15.53}, {"main_weather": "Rain", "description": "light rain", "min_temp": 13.76, "max_temp": 15.19}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 13.58, "max_temp": 15.32}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 12.47, "max_temp": 16.75}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 10.07, "max_temp": 14.43}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 9.46, "max_temp": 14.2}], "London": [{"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 7.44, "max_temp": 11.01}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 6.86, "max_temp": 12.12}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 8.91, "max_temp": 13.56}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 8.83, "max_temp": 12.04}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 4.98, "max_temp": 10}, {"main_weather": "Rain", "description": "light rain", "min_temp": 5.58, "max_temp": 8.88}, {"main_weather": "Rain", "description": "light rain", "min_temp": 5.59, "max_temp": 8.54}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 4.17, "max_temp": 7.12}], "Moscow": [{"main_weather": "Clouds", "description": "overcast clouds", "min_temp": -2.12, "max_temp": 0.41}, {"main_weather": "Snow", "description": "light snow", "min_temp": -1.86, "max_temp": 0.22}, {"main_weather": "Snow", "description": "light snow", "min_temp": -1.12, "max_temp": 1.31}, {"main_weather": "Snow", "description": "rain and snow", "min_temp": 0.91, "max_temp": 4.36}, {"main_weather": "Snow", "description": "light snow", "min_temp": 0.48, "max_temp": 2.38}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": -3.31, "max_temp": -0.3}, {"main_weather": "Snow", "description": "light snow", "min_temp": -5.11, "max_temp": -1.24}, {"main_weather": "Snow", "description": "snow", "min_temp": -5.1, "max_temp": 0.92}], "Beijing": [{"main_weather": "Clouds", "description": "few clouds", "min_temp": -0.06, "max_temp": 13.01}, {"main_weather": "Clouds", "description": "few clouds", "min_temp": 5.04, "max_temp": 9.55}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 6, "max_temp": 10.32}, {"main_weather": "Clouds", "description": "broken clouds", "min_temp": 2.93, "max_temp": 8.23}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 0.5, "max_temp": 3.43}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 0.02, "max_temp": 5.54}, {"main_weather": "Clouds", "description": "few clouds", "min_temp": -0.38, "max_temp": 5.35}, {"main_weather": "Clear", "description": "clear sky", "min_temp": 0.59, "max_temp": 8.15}]}, "current_weather": true}
|
||||
@ -1 +1 @@
|
||||
{"feature": "Stocks", "speed": "medium", "animation": "down", "percent": false, "point": false, "logos": false, "chart": false, "title": true, "symbols": {"NZD,GBP": {"current": 1.9148, "24hr_change": 0.015700000000000047}, "CAD,USD": {"current": 1.2533, "24hr_change": 0.0008000000000001339}}}
|
||||
{"feature": "Stocks", "speed": "medium", "animation": "down", "percent": false, "point": false, "logos": false, "chart": false, "title": true, "symbols": {"NZD,GBP": {"current": 1.922, "24hr_change": 0.007199999999999873}, "CAD,USD": {"current": 1.2554, "24hr_change": 0.0020999999999999908}}}
|
||||
@ -1 +0,0 @@
|
||||
{"stocks": "16/11/2021 14:09:37", "crypto": "16/11/2021 14:07:15", "news": "16/11/2021 13:47:18", "weather": "16/11/2021 14:07:00", "forex": "16/11/2021 19:47:20", "sports": "16/11/2021 13:59:46"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
{"feature": "Stocks", "speed": "medium", "animation": "down", "percent": true, "point": true, "logos": false, "chart": false, "title": true, "symbols": {"MSFT": {"current": 340.32, "opening": 335.665}, "GOOG": {"current": 2987.62, "opening": 2983.36}}}
|
||||
{"feature": "Stocks", "speed": "medium", "animation": "down", "percent": true, "point": true, "logos": false, "chart": false, "title": true, "symbols": {"MSFT": {"current": 340.11, "opening": 339.29}, "GOOG": {"current": 2982.49, "opening": 2984.38}}}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
707
static/app.js
707
static/app.js
@ -1,11 +1,28 @@
|
||||
var availableFeatures = document.querySelectorAll("#available-features li");
|
||||
var availableFeatures2 = document.querySelectorAll("#available-features-2 li");
|
||||
|
||||
var displayFormat = document.querySelector("#display-format");
|
||||
var displayFormat2 = document.querySelector("#display-format-2");
|
||||
|
||||
var featureToDisplay = document.querySelector("#feature-to-display");
|
||||
var featureToDisplay2 = document.querySelector("#feature-to-display-2");
|
||||
|
||||
var displayToFeature = document.querySelector("#display-to-feature");
|
||||
var displayToFeature2 = document.querySelector("#display-to-feature-2");
|
||||
|
||||
var displayToFormat = document.querySelectorAll("#display-format li");
|
||||
var displayToFormat2 = document.querySelectorAll("#display-format-2 li");
|
||||
|
||||
var availableToDisplay = document.querySelector("#available-features");
|
||||
var availableToDisplay2 = document.querySelector("#available-features-2");
|
||||
|
||||
var displayincreaseBtn = document.getElementById("display-increase-btn");
|
||||
var displayincreaseBtn2 = document.getElementById("display-increase-btn-2");
|
||||
|
||||
var displayDecreaseBtn = document.getElementById("display-decrease-btn");
|
||||
var displayDecreaseBtn2 = document.getElementById("display-decrease-btn-2");
|
||||
|
||||
var secondRow = document.getElementById("second-row");
|
||||
|
||||
// features lists
|
||||
var stocksFeatures = document.querySelectorAll("#stocks-features li");
|
||||
@ -207,6 +224,20 @@ const addEventOnList = () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
// for available feature 2
|
||||
for (let i = 0; i < availableFeatures2.length; i++) {
|
||||
const availableFeature = availableFeatures2[i];
|
||||
availableFeature.addEventListener("click", () => {
|
||||
for (let i = 0; i < availableFeatures2.length; i++) {
|
||||
availableFeatures2[i].setAttribute("class", "");
|
||||
}
|
||||
if (availableFeature.getAttribute("class") == "active") {
|
||||
availableFeature.setAttribute("class", "");
|
||||
} else {
|
||||
availableFeature.setAttribute("class", "active");
|
||||
}
|
||||
});
|
||||
}
|
||||
// for display format
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
const display_format = displayToFormat[i];
|
||||
@ -221,6 +252,20 @@ const addEventOnList = () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
// for display format 2
|
||||
for (let i = 0; i < displayToFormat2.length; i++) {
|
||||
const display_format = displayToFormat2[i];
|
||||
display_format.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat2.length; i++) {
|
||||
displayToFormat2[i].setAttribute("class", "");
|
||||
}
|
||||
if (display_format.getAttribute("class") == "active") {
|
||||
display_format.setAttribute("class", "");
|
||||
} else {
|
||||
display_format.setAttribute("class", "active");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const addEventonBtns = () => {
|
||||
@ -251,6 +296,38 @@ const addEventonBtns = () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
featureToDisplay2.addEventListener("click", () => {
|
||||
for (let i = 0; i < availableFeatures2.length; i++) {
|
||||
const availableFeature = availableFeatures2[i];
|
||||
if (availableFeature.getAttribute("class") == "active") {
|
||||
availableFeature.remove();
|
||||
availableFeature.setAttribute("class", "");
|
||||
displayFormat2.appendChild(availableFeature);
|
||||
availableFeatures2 = document.querySelectorAll(
|
||||
"#available-features-2 li"
|
||||
);
|
||||
displayToFormat2 = document.querySelectorAll("#display-format-2 li");
|
||||
addEventOnList();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
displayToFeature2.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat2.length; i++) {
|
||||
const availableFormat = displayToFormat2[i];
|
||||
if (availableFormat.getAttribute("class") == "active") {
|
||||
availableFormat.remove();
|
||||
availableFormat.setAttribute("class", "");
|
||||
availableToDisplay2.appendChild(availableFormat);
|
||||
availableFeatures2 = document.querySelectorAll(
|
||||
"#available-features-2 li"
|
||||
);
|
||||
displayToFormat2 = document.querySelectorAll("#display-format-2 li");
|
||||
addEventOnList();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
addEventOnList();
|
||||
@ -268,6 +345,64 @@ const addEventOnFeaturesList = () => {
|
||||
availableFeature.setAttribute("class", "");
|
||||
} else {
|
||||
availableFeature.setAttribute("class", "active");
|
||||
let getCustomImages = JSON.parse(
|
||||
localStorage.getItem("customImages")
|
||||
);
|
||||
let getCustomGifs = JSON.parse(localStorage.getItem("customGifs"));
|
||||
let getCustomMsg = JSON.parse(localStorage.getItem("customMsg"));
|
||||
|
||||
getCustomImages.map((value) => {
|
||||
let scrollSpeed1 = document.getElementById("inputScrollSpeed11");
|
||||
let scrollSpeed2 = document.getElementById("inputScrollSpeedRow11");
|
||||
let inputTransition = document.getElementById("inputTransition11");
|
||||
let inputText12 = document.getElementById("inputText12");
|
||||
let displayCheck = document.getElementById("flexCheckChecked25");
|
||||
|
||||
if (value.fileName == availableFeature.innerText) {
|
||||
scrollSpeed1.value = value.scrollSpeed;
|
||||
scrollSpeed2.value = value.scrollSpeed2;
|
||||
inputTransition.value = value.transition;
|
||||
inputText12.value = value.pauseScreen;
|
||||
displayCheck.checked = value.displayCheck;
|
||||
}
|
||||
});
|
||||
getCustomGifs.map((value) => {
|
||||
let scrollSpeed1 = document.getElementById("inputScrollSpeed12");
|
||||
let scrollSpeed2 = document.getElementById("inputScrollSpeedRow12");
|
||||
let inputTransition = document.getElementById("inputTransition12");
|
||||
let inputText12 = document.getElementById("inputText112");
|
||||
let displayCheck = document.getElementById("flexCheckChecked28");
|
||||
|
||||
if (value.fileName == availableFeature.innerText) {
|
||||
scrollSpeed1.value = value.scrollSpeed;
|
||||
scrollSpeed2.value = value.scrollSpeed2;
|
||||
inputTransition.value = value.transition;
|
||||
inputText12.value = value.pauseScreen;
|
||||
displayCheck.checked = value.displayCheck;
|
||||
}
|
||||
});
|
||||
|
||||
getCustomMsg.map((value) => {
|
||||
let scrollSpeed1 = document.getElementById("inputScrollSpeed13");
|
||||
let scrollSpeed2 = document.getElementById("inputScrollSpeedRow13");
|
||||
let inputTransition = document.getElementById("inputTransition13");
|
||||
let inputMsg = document.getElementById("inputText14");
|
||||
let inputColor = document.getElementById("inputScrollSpeed16");
|
||||
let inputSize = document.getElementById("inputScrollSpeed17");
|
||||
let inputBg = document.getElementById("inputScrollSpeed19");
|
||||
let displayCheck = document.getElementById("flexCheckChecked29");
|
||||
|
||||
if (value.messageName == availableFeature.innerText) {
|
||||
scrollSpeed1.value = value.scrollSpeed1;
|
||||
scrollSpeed2.value = value.scrollSpeed2;
|
||||
inputTransition.value = value.transition;
|
||||
inputMsg.value = value.messageInput;
|
||||
inputColor.value = value.colorInput;
|
||||
inputSize.value = value.sizeInput;
|
||||
inputBg.value = value.backgroundInput;
|
||||
displayCheck.checked = value.displayCheck;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -292,6 +427,23 @@ displayincreaseBtn.addEventListener("click", () => {
|
||||
}
|
||||
});
|
||||
|
||||
// display increase 2 function
|
||||
displayincreaseBtn2.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat2.length; i++) {
|
||||
var displayItem = displayToFormat2[i];
|
||||
|
||||
if (displayItem.getAttribute("class") == "active") {
|
||||
var prevElement = displayItem.previousElementSibling;
|
||||
var currentText = displayItem.innerText;
|
||||
|
||||
displayItem.innerText = prevElement.innerText;
|
||||
prevElement.innerText = currentText;
|
||||
prevElement.setAttribute("class", "active");
|
||||
displayItem.setAttribute("class", "");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// display decrease function
|
||||
displayDecreaseBtn.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
@ -310,12 +462,53 @@ displayDecreaseBtn.addEventListener("click", () => {
|
||||
}
|
||||
});
|
||||
|
||||
// display decrease 2 function
|
||||
displayDecreaseBtn2.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat2.length; i++) {
|
||||
var displayItem = displayToFormat2[i];
|
||||
|
||||
if (displayItem.getAttribute("class") == "active") {
|
||||
var nextElement = displayItem.nextElementSibling;
|
||||
var currentText = displayItem.innerText;
|
||||
displayItem.innerText = nextElement.innerText;
|
||||
nextElement.innerText = currentText;
|
||||
nextElement.setAttribute("class", "active");
|
||||
displayItem.setAttribute("class", "");
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// feature remove function
|
||||
allFeaturesRemoveBtns.map((value, index) => {
|
||||
value.addEventListener("click", () => {
|
||||
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||||
var item = allFeaturesList[index][i];
|
||||
if (item.getAttribute("class") == "active") {
|
||||
if (item.parentElement.getAttribute("id") == "images-features") {
|
||||
let getImages = JSON.parse(localStorage.getItem("customImages"));
|
||||
|
||||
let filter = getImages.filter(
|
||||
(value) => value.fileName !== item.innerText
|
||||
);
|
||||
localStorage.setItem("customImages", JSON.stringify(filter));
|
||||
} else if (item.parentElement.getAttribute("id") == "gifs-features") {
|
||||
let getGifs = JSON.parse(localStorage.getItem("customGifs"));
|
||||
|
||||
let filter = getGifs.filter(
|
||||
(value) => value.fileName !== item.innerText
|
||||
);
|
||||
localStorage.setItem("customGifs", JSON.stringify(filter));
|
||||
} else if (
|
||||
item.parentElement.getAttribute("id") == "messages-features"
|
||||
) {
|
||||
let getMsgs = JSON.parse(localStorage.getItem("customMsg"));
|
||||
|
||||
let filter = getMsgs.filter(
|
||||
(value) => value.messageName !== item.innerText
|
||||
);
|
||||
localStorage.setItem("customMsg", JSON.stringify(filter));
|
||||
}
|
||||
item.remove();
|
||||
}
|
||||
}
|
||||
@ -486,11 +679,6 @@ var allFeaturesFileAddBtn = [
|
||||
null,
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// features input text
|
||||
var stocksText = document.getElementById("inputText3");
|
||||
var cryptoText = document.getElementById("inputText4");
|
||||
@ -542,60 +730,102 @@ var allFeaturesTextAddBtn = [
|
||||
allFeaturesTextAddBtn.map((value, index) => {
|
||||
if (value !== null) {
|
||||
value.addEventListener("click", () => {
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesText[index].value;
|
||||
allFeatures[index].appendChild(tag);
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
if (value == messagesTextAddBtn) {
|
||||
// custom message
|
||||
let messageName = document.getElementById("inputText13").value;
|
||||
let scrollSpeed1 = document.getElementById("inputScrollSpeed13").value;
|
||||
let scrollSpeed2 = document.getElementById(
|
||||
"inputScrollSpeedRow13"
|
||||
).value;
|
||||
let transition = document.getElementById("inputTransition13").value;
|
||||
let messageInput = document.getElementById("inputText14").value;
|
||||
let colorInput = document.getElementById("inputScrollSpeed16").value;
|
||||
let sizeInput = document.getElementById("inputScrollSpeed17").value;
|
||||
let backgroundInput =
|
||||
document.getElementById("inputScrollSpeed19").value;
|
||||
let displayCheck =
|
||||
document.getElementById("flexCheckChecked29").checked;
|
||||
let messagesWrapper = document.getElementById("messages-features");
|
||||
|
||||
let fileFound = false;
|
||||
|
||||
for (let i = 0; i < messagesWrapper.children.length; i++) {
|
||||
fileFound =
|
||||
messagesWrapper.children[i]?.innerText == messageName && true;
|
||||
}
|
||||
if (!fileFound) {
|
||||
let values = {
|
||||
messageName,
|
||||
scrollSpeed1,
|
||||
scrollSpeed2,
|
||||
transition,
|
||||
messageInput,
|
||||
colorInput,
|
||||
sizeInput,
|
||||
backgroundInput,
|
||||
displayCheck,
|
||||
};
|
||||
|
||||
let getCustomMsg = localStorage.getItem("customMsg");
|
||||
|
||||
let newValues = getCustomMsg && JSON.parse(getCustomMsg);
|
||||
getCustomMsg && newValues.push(values);
|
||||
|
||||
getCustomMsg
|
||||
? localStorage.setItem("customMsg", JSON.stringify(newValues))
|
||||
: localStorage.setItem("customMsg", JSON.stringify([values]));
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesText[index].value;
|
||||
allFeatures[index].appendChild(tag);
|
||||
}
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
} else {
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesText[index].value;
|
||||
allFeatures[index].appendChild(tag);
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var startButton = document.getElementById("start-btn");
|
||||
// start the display
|
||||
startButton.addEventListener("click", () => {
|
||||
var HTML = document.getElementById('display-format').innerHTML;
|
||||
var HTML = document.getElementById("display-format").innerHTML;
|
||||
fetch("/start", {
|
||||
method:"PUT",
|
||||
body:JSON.stringify(HTML)
|
||||
method: "PUT",
|
||||
body: JSON.stringify(HTML),
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var brightnessButton = document.getElementById("brightness-btn");
|
||||
// start the display
|
||||
brightnessButton.addEventListener("click", () => {
|
||||
|
||||
|
||||
let brightness = document.querySelectorAll(".brightness-text")[0].value;
|
||||
console.log(brightness);
|
||||
fetch("/brightness", {
|
||||
method:"PUT",
|
||||
body:JSON.stringify({'brightness':brightness})
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ brightness: brightness }),
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var shutdownButton = document.getElementById("shutdown-btn");
|
||||
|
||||
shutdownButton.addEventListener("click", () => {
|
||||
fetch("/shutdown", {
|
||||
method:"GET",
|
||||
method: "GET",
|
||||
});
|
||||
});
|
||||
|
||||
var stopButton = document.getElementById("stop-btn");
|
||||
stopButton.addEventListener("click", () => {
|
||||
fetch("/stop", {
|
||||
method:"GET",
|
||||
method: "GET",
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var dispFormatButton = document.getElementById("dispformat-btn");
|
||||
|
||||
var displayFormats = document.getElementById("inputDisplayFormat");
|
||||
@ -603,12 +833,12 @@ var displayFormats = document.getElementById("inputDisplayFormat");
|
||||
// gets selected functions to display
|
||||
function getSelected(selector) {
|
||||
var opt;
|
||||
for ( var i = 0, len = selector.options.length; i < len; i++ ) {
|
||||
opt = selector.options[i];
|
||||
for (var i = 0, len = selector.options.length; i < len; i++) {
|
||||
opt = selector.options[i];
|
||||
|
||||
if ( opt.selected === true ) {
|
||||
break;
|
||||
}
|
||||
if (opt.selected === true) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return opt.innerHTML;
|
||||
@ -617,7 +847,7 @@ function getSelected(selector) {
|
||||
function getListItems(list_el) {
|
||||
let symbols = list_el.getElementsByTagName("li");
|
||||
|
||||
let items = []
|
||||
let items = [];
|
||||
for (var i = 0; i < symbols.length; ++i) {
|
||||
items.push(symbols[i].innerText);
|
||||
}
|
||||
@ -626,104 +856,113 @@ function getListItems(list_el) {
|
||||
|
||||
// toggle professional
|
||||
dispFormatButton.addEventListener("click", () => {
|
||||
|
||||
opt = getSelected(displayFormats);
|
||||
fetch("/display_format", {
|
||||
method:"PUT",
|
||||
body:JSON.stringify(opt)
|
||||
method: "PUT",
|
||||
body: JSON.stringify(opt),
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// saves the feature specific settings
|
||||
function saveSettings() {
|
||||
let featureSelector = document.getElementById("drop");
|
||||
feature = getSelected(featureSelector);
|
||||
|
||||
let features = ["Stocks", "Crypto", "Forex", "Current Weather", "Daily Forecast", "News", "Sports (Upcoming Games)", "Sports (Past Games)", "Sports (Live Games)", "Sports (Team Stats)", "Custom Images", "Custom GIFs", "Custom Messages"];
|
||||
let features = [
|
||||
"Stocks",
|
||||
"Crypto",
|
||||
"Forex",
|
||||
"Current Weather",
|
||||
"Daily Forecast",
|
||||
"News",
|
||||
"Sports (Upcoming Games)",
|
||||
"Sports (Past Games)",
|
||||
"Sports (Live Games)",
|
||||
"Sports (Team Stats)",
|
||||
"Custom Images",
|
||||
"Custom GIFs",
|
||||
"Custom Messages",
|
||||
];
|
||||
let pageNum = features.indexOf(feature) + 1;
|
||||
let pageSelector = "Page" + pageNum.toString();
|
||||
|
||||
let page = document.getElementById(pageSelector);
|
||||
|
||||
|
||||
// these common to all settings
|
||||
let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
|
||||
let animation = getSelected(page.querySelectorAll(".animation-select")[0]);
|
||||
|
||||
var settings = {'feature': feature, 'speed':speed, 'animation':animation}; // general settings
|
||||
var settings = { feature: feature, speed: speed, animation: animation }; // general settings
|
||||
|
||||
var s;
|
||||
//function specific settings
|
||||
switch(pageNum){
|
||||
case 1: case 2: case 3:
|
||||
switch (pageNum) {
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
s = getTradingSettings(page);
|
||||
break;
|
||||
case 4: case 5:
|
||||
case 4:
|
||||
case 5:
|
||||
s = getWeatherSettings(page);
|
||||
break;
|
||||
case 6:
|
||||
s = getNewsSettings(page);
|
||||
break;
|
||||
case 7: case 8: case 9: case 10:
|
||||
case 7:
|
||||
case 8:
|
||||
case 9:
|
||||
case 10:
|
||||
s = getSportsSettings(page);
|
||||
break;
|
||||
case 11: case 12:
|
||||
case 11:
|
||||
case 12:
|
||||
s = getImageSettings(page);
|
||||
break;
|
||||
case 13:
|
||||
s = getMessageSettings(page);
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
settings = {...settings, ...s}; // merge both sets of settings
|
||||
|
||||
console.log(settings);
|
||||
|
||||
settings = { ...settings, ...s }; // merge both sets of settings
|
||||
|
||||
fetch("/feature_settings", {
|
||||
method:"PUT",
|
||||
body:JSON.stringify(settings)
|
||||
method: "PUT",
|
||||
body: JSON.stringify(settings),
|
||||
});
|
||||
|
||||
//send uploaded images and gifs
|
||||
if (pageNum == 11){
|
||||
if (pageNum == 11) {
|
||||
var data = new FormData();
|
||||
|
||||
for ( var i = 0; i < uploaded_images.length; i++ ) {
|
||||
for (var i = 0; i < uploaded_images.length; i++) {
|
||||
data.append(uploaded_images[i].name, uploaded_images[i]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
fetch("/upload", {
|
||||
method:"POST",
|
||||
body:data
|
||||
method: "POST",
|
||||
body: data,
|
||||
});
|
||||
|
||||
|
||||
} else if (pageNum == 12) {
|
||||
var data = new FormData();
|
||||
|
||||
for ( var i = 0; i < uploaded_GIFs.length; i++ ) {
|
||||
for (var i = 0; i < uploaded_GIFs.length; i++) {
|
||||
data.append(uploaded_GIFs[i].name, uploaded_GIFs[i]);
|
||||
}
|
||||
|
||||
fetch("/upload", {
|
||||
method:"POST",
|
||||
body:data
|
||||
method: "POST",
|
||||
body: data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let saveSettingsButtons = document.querySelectorAll(".save-btn-div").forEach(button =>
|
||||
button.addEventListener("click", saveSettings)
|
||||
)
|
||||
let saveSettingsButtons = document
|
||||
.querySelectorAll(".save-btn-div")
|
||||
.forEach((button) => button.addEventListener("click", saveSettings));
|
||||
|
||||
// gets the stock, crypto or forex specific settings
|
||||
function getTradingSettings(page) {
|
||||
|
||||
// get all the tick boxes
|
||||
let percent = page.querySelectorAll(".percent-select")[0].checked;
|
||||
let point = page.querySelectorAll(".point-select")[0].checked;
|
||||
@ -734,7 +973,14 @@ function getTradingSettings(page) {
|
||||
let symbols_el = page.querySelectorAll(".symbol-list")[0];
|
||||
let symbols = getListItems(symbols_el);
|
||||
|
||||
let settings = {'percent': percent, 'point':point, 'logos':no_logos, 'chart':chart, 'title': title, 'symbols': symbols}
|
||||
let settings = {
|
||||
percent: percent,
|
||||
point: point,
|
||||
logos: no_logos,
|
||||
chart: chart,
|
||||
title: title,
|
||||
symbols: symbols,
|
||||
};
|
||||
|
||||
return settings;
|
||||
}
|
||||
@ -744,32 +990,34 @@ function getWeatherSettings(page) {
|
||||
let temp = getSelected(page.querySelectorAll(".temp-select")[0]);
|
||||
let speed = getSelected(page.querySelectorAll(".wind-speed-select")[0]);
|
||||
let colour = getSelected(page.querySelectorAll(".colour-select")[0]);
|
||||
let city_colour = getSelected(page.querySelectorAll(".city-colour-select")[0]);
|
||||
let city_colour = getSelected(
|
||||
page.querySelectorAll(".city-colour-select")[0]
|
||||
);
|
||||
let title = page.querySelectorAll(".title-select")[0].checked;
|
||||
|
||||
settings = {'temp':temp, 'wind_speed': speed, 'colour':colour, 'city_colour':city_colour, 'title': title}
|
||||
|
||||
settings = {
|
||||
temp: temp,
|
||||
wind_speed: speed,
|
||||
colour: colour,
|
||||
city_colour: city_colour,
|
||||
title: title,
|
||||
};
|
||||
|
||||
//only for daily weather
|
||||
try {
|
||||
current_weather = page.querySelectorAll(".current-weather-select")[0].checked;
|
||||
console.log(current_weather);
|
||||
settings['current_weather'] = current_weather;
|
||||
} catch {
|
||||
|
||||
}
|
||||
|
||||
current_weather = page.querySelectorAll(".current-weather-select")[0]
|
||||
.checked;
|
||||
settings["current_weather"] = current_weather;
|
||||
} catch {}
|
||||
|
||||
let locations_el = page.querySelectorAll(".location-list")[0];
|
||||
let locations = getListItems(locations_el);
|
||||
settings['locations'] = locations;
|
||||
settings["locations"] = locations;
|
||||
|
||||
return settings;
|
||||
}
|
||||
|
||||
|
||||
function getNewsSettings(page){
|
||||
|
||||
function getNewsSettings(page) {
|
||||
let country = getSelected(page.querySelectorAll(".country-select")[0]);
|
||||
let category = getSelected(page.querySelectorAll(".category-select")[0]);
|
||||
let title = page.querySelectorAll(".title-select")[0].checked;
|
||||
@ -777,21 +1025,25 @@ function getNewsSettings(page){
|
||||
|
||||
let sources_el = page.querySelectorAll(".sources-list")[0];
|
||||
let sources = getListItems(sources_el);
|
||||
settings = {'country':country, 'category': category, 'title':title, 'use_sources':use_sources, 'sources': sources};
|
||||
settings = {
|
||||
country: country,
|
||||
category: category,
|
||||
title: title,
|
||||
use_sources: use_sources,
|
||||
sources: sources,
|
||||
};
|
||||
return settings;
|
||||
}
|
||||
|
||||
|
||||
function getSportsSettings(page){
|
||||
function getSportsSettings(page) {
|
||||
let title = page.querySelectorAll(".title-select")[0].checked;
|
||||
let leagues_el = page.querySelectorAll(".league-list")[0];
|
||||
leagues = getListItems(leagues_el);
|
||||
|
||||
settings = {'title':title, 'leagues':leagues};
|
||||
settings = { title: title, leagues: leagues };
|
||||
return settings;
|
||||
}
|
||||
|
||||
|
||||
var uploaded_images = [];
|
||||
var uploaded_GIFs = [];
|
||||
|
||||
@ -801,76 +1053,299 @@ allFeaturesFileAddBtn.map((value, index) => {
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesFile[index].files[0].name;
|
||||
if (index == 10) {
|
||||
uploaded_images.push(allFeaturesFile[index].files[0]);
|
||||
let getCustomImg = localStorage.getItem("customImages");
|
||||
let fileName = imagesFile.files[0].name;
|
||||
let scrollSpeed = document.getElementById("inputScrollSpeed11").value;
|
||||
let scrollSpeed2 = document.getElementById(
|
||||
"inputScrollSpeedRow11"
|
||||
).value;
|
||||
let transition = document.getElementById("inputTransition11").value;
|
||||
let pauseScreen = document.getElementById("inputText12").value;
|
||||
let displayCheck =
|
||||
document.getElementById("flexCheckChecked25").checked;
|
||||
|
||||
let fileFound = false;
|
||||
|
||||
for (let i = 0; i < allFeatures[index].children.length; i++) {
|
||||
fileFound =
|
||||
allFeatures[index].children[i]?.innerText == fileName && true;
|
||||
}
|
||||
if (!fileFound) {
|
||||
let values = {
|
||||
fileName,
|
||||
scrollSpeed,
|
||||
scrollSpeed2,
|
||||
transition,
|
||||
pauseScreen,
|
||||
displayCheck,
|
||||
};
|
||||
|
||||
let newValues = getCustomImg && JSON.parse(getCustomImg);
|
||||
getCustomImg && newValues.push(values);
|
||||
|
||||
getCustomImg
|
||||
? localStorage.setItem("customImages", JSON.stringify(newValues))
|
||||
: localStorage.setItem("customImages", JSON.stringify([values]));
|
||||
|
||||
uploaded_images.push(allFeaturesFile[index].files[0]);
|
||||
allFeatures[index].appendChild(tag);
|
||||
}
|
||||
} else if (index == 11) {
|
||||
uploaded_GIFs.push(allFeaturesFile[index].files[0]);
|
||||
let getCustomGifs = localStorage.getItem("customGifs");
|
||||
let fileName = allFeaturesFile[index].files[0].name;
|
||||
let scrollSpeed = document.getElementById("inputScrollSpeed12").value;
|
||||
let scrollSpeed2 = document.getElementById(
|
||||
"inputScrollSpeedRow12"
|
||||
).value;
|
||||
let transition = document.getElementById("inputTransition12").value;
|
||||
let pauseScreen = document.getElementById("inputText112").value;
|
||||
let displayCheck =
|
||||
document.getElementById("flexCheckChecked28").checked;
|
||||
|
||||
let fileFound = false;
|
||||
|
||||
for (let i = 0; i < allFeatures[index].children.length; i++) {
|
||||
fileFound =
|
||||
allFeatures[index].children[i]?.innerText == fileName && true;
|
||||
}
|
||||
if (!fileFound) {
|
||||
let values = {
|
||||
fileName,
|
||||
scrollSpeed,
|
||||
scrollSpeed2,
|
||||
transition,
|
||||
pauseScreen,
|
||||
displayCheck,
|
||||
};
|
||||
|
||||
let newValues = getCustomGifs && JSON.parse(getCustomGifs);
|
||||
getCustomGifs && newValues.push(values);
|
||||
|
||||
getCustomGifs
|
||||
? localStorage.setItem("customGifs", JSON.stringify(newValues))
|
||||
: localStorage.setItem("customGifs", JSON.stringify([values]));
|
||||
|
||||
uploaded_GIFs.push(allFeaturesFile[index].files[0]);
|
||||
allFeatures[index].appendChild(tag);
|
||||
}
|
||||
}
|
||||
|
||||
allFeatures[index].appendChild(tag);
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//images and GIFs
|
||||
function getImageSettings(page){
|
||||
function getImageSettings(page) {
|
||||
let pause = page.querySelectorAll(".pause-select")[0].value;
|
||||
let title = page.querySelectorAll(".title-select")[0].checked;
|
||||
|
||||
|
||||
let images_el = page.querySelectorAll(".image-list")[0];
|
||||
images = getListItems(images_el);
|
||||
|
||||
settings = {'title':title, 'pause':pause, 'images':images};
|
||||
settings = { title: title, pause: pause, images: images };
|
||||
return settings;
|
||||
}
|
||||
|
||||
|
||||
var messages = [];
|
||||
|
||||
|
||||
messagesTextAddBtn.addEventListener("click", () => {
|
||||
let pageSelector = "Page13";
|
||||
let pageSelector = "Page13";
|
||||
|
||||
let page = document.getElementById(pageSelector);
|
||||
let page = document.getElementById(pageSelector);
|
||||
|
||||
let msg_name = messagesText.value;
|
||||
//let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
|
||||
//let animation = getSelected(page.querySelectorAll(".animation-select")[0]);
|
||||
|
||||
let msg_name = messagesText.value;
|
||||
//let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
|
||||
//let animation = getSelected(page.querySelectorAll(".animation-select")[0]);
|
||||
|
||||
let message_text = page.querySelectorAll(".message-input")[0].value;
|
||||
let text_colour = getSelected(page.querySelectorAll(".text-colour")[0]);
|
||||
let text_size = getSelected(page.querySelectorAll(".text-size")[0]);
|
||||
let background_colour = getSelected(page.querySelectorAll(".back-colour")[0]);
|
||||
|
||||
let message = {'name':msg_name, 'text':message_text, 'text_colour':text_colour, 'size':text_size, 'background_colour':background_colour};
|
||||
messages.push(message);
|
||||
|
||||
let message_text = page.querySelectorAll(".message-input")[0].value;
|
||||
let text_colour = getSelected(page.querySelectorAll(".text-colour")[0]);
|
||||
let text_size = getSelected(page.querySelectorAll(".text-size")[0]);
|
||||
let background_colour = getSelected(page.querySelectorAll(".back-colour")[0]);
|
||||
|
||||
let message = {
|
||||
name: msg_name,
|
||||
text: message_text,
|
||||
text_colour: text_colour,
|
||||
size: text_size,
|
||||
background_colour: background_colour,
|
||||
};
|
||||
messages.push(message);
|
||||
});
|
||||
|
||||
|
||||
|
||||
function getMessageSettings(page) {
|
||||
|
||||
let messages_el = page.querySelectorAll(".message-list")[0];
|
||||
let message_names = getListItems(messages_el);
|
||||
|
||||
//remove any messages that arent in the list
|
||||
let new_messages = [];
|
||||
|
||||
for (let i = 0; i < messages.length; i++){
|
||||
if (message_names.includes(messages[i]['name'])) {
|
||||
for (let i = 0; i < messages.length; i++) {
|
||||
if (message_names.includes(messages[i]["name"])) {
|
||||
new_messages.push(messages[i]);
|
||||
}
|
||||
}
|
||||
let title = page.querySelectorAll(".title-select")[0].checked;
|
||||
return {'title':title, 'messages':new_messages};
|
||||
return { title: title, messages: new_messages };
|
||||
}
|
||||
|
||||
// Join Network
|
||||
|
||||
let wifiSsidInput = document.getElementById("wifi-ssid-input");
|
||||
let wifiPassInput = document.getElementById("wifi-pass-input");
|
||||
let countryCodeInput = document.getElementById("country-code-input");
|
||||
|
||||
let joinNetworkBtn = document.querySelector("#join-network-btn");
|
||||
let connectedText = document.querySelector("#connected-text");
|
||||
|
||||
joinNetworkBtn.addEventListener("click", () => {
|
||||
localStorage.setItem("wifiSsid", wifiSsidInput.value);
|
||||
localStorage.setItem("wifiPass", wifiPassInput.value);
|
||||
localStorage.setItem("countryCode", countryCodeInput.value);
|
||||
|
||||
connectedText.style.display = "block";
|
||||
setTimeout(() => {
|
||||
connectedText.style.display = "none";
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// change display format
|
||||
let displayFormatDropDown = document.querySelector("#inputDisplayFormat");
|
||||
let displayFormatBtn = document.querySelector("#dispformat-btn");
|
||||
let selectedDisplayText = document.querySelector("#selected-display-text");
|
||||
let topRowText = document.querySelector("#top-row-text");
|
||||
let bottomRowText = document.querySelector("#bottom-row-text");
|
||||
|
||||
displayFormatBtn.addEventListener("click", () => {
|
||||
selectedDisplayText.innerText = displayFormatDropDown.value;
|
||||
localStorage.setItem("displayFormat", displayFormatDropDown.value);
|
||||
if (selectedDisplayText.innerText === "Professional two rows") {
|
||||
topRowText.style.display = "inline";
|
||||
bottomRowText.style.display = "inline";
|
||||
secondRow.style.display = "flex";
|
||||
inputScrollSpeedRow.forEach((value) => {
|
||||
value.parentElement.parentElement.style.display = "flex";
|
||||
});
|
||||
} else {
|
||||
topRowText.style.display = "none";
|
||||
bottomRowText.style.display = "none";
|
||||
secondRow.style.display = "none";
|
||||
inputScrollSpeedRow.forEach((value) => {
|
||||
value.parentElement.parentElement.style.display = "none";
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// if selected display text = Professional two rows
|
||||
|
||||
if (selectedDisplayText.innerText === "Professional two rows") {
|
||||
topRowText.style.display = "inline";
|
||||
}
|
||||
|
||||
// change host name
|
||||
|
||||
let hostNameInput = document.getElementById("host-name-input");
|
||||
let hostNameBtn = document.getElementById("host-name-btn");
|
||||
let hostNameText = document.getElementById("host-name");
|
||||
|
||||
hostNameBtn.addEventListener("click", () => {
|
||||
hostNameText.innerText = hostNameInput.value;
|
||||
localStorage.setItem("hostName", hostNameText.innerText);
|
||||
});
|
||||
|
||||
// change brightness
|
||||
|
||||
let brightnessInput = document.getElementById("brightness-input");
|
||||
let brightnessBtn = document.getElementById("brightness-btn");
|
||||
|
||||
brightnessBtn.addEventListener("click", () => {
|
||||
localStorage.setItem("brightness", brightnessInput.value);
|
||||
});
|
||||
|
||||
// change input animation
|
||||
let inputAnimation = document.getElementById("inputAnimation");
|
||||
let inputAnimationBtn = document.getElementById("input-animation-btn");
|
||||
|
||||
inputAnimationBtn.addEventListener("click", () => {
|
||||
localStorage.setItem("inputAnimation", inputAnimation.value);
|
||||
});
|
||||
|
||||
// scroll speed row two
|
||||
let inputScrollSpeedRow = [];
|
||||
|
||||
for (let i = 1; i <= 13; i++) {
|
||||
inputScrollSpeedRow.push(
|
||||
document.getElementById(
|
||||
i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
let getHostName = localStorage.getItem("hostName");
|
||||
let getBrightness = localStorage.getItem("brightness");
|
||||
let getWifiSsid = localStorage.getItem("wifiSsid");
|
||||
let getWifiPass = localStorage.getItem("wifiPass");
|
||||
let getCountryCode = localStorage.getItem("countryCode");
|
||||
let getInputAnimation = localStorage.getItem("inputAnimation");
|
||||
|
||||
getHostName &&
|
||||
(hostNameText.innerText = getHostName) &&
|
||||
(hostNameInput.value = getHostName);
|
||||
|
||||
getBrightness && (brightnessInput.value = getBrightness);
|
||||
getWifiSsid && (wifiSsidInput.value = getWifiSsid);
|
||||
getWifiPass && (wifiPassInput.value = getWifiPass);
|
||||
getCountryCode && (countryCodeInput.value = getCountryCode);
|
||||
|
||||
let getDispayFormat = localStorage.getItem("displayFormat");
|
||||
getDispayFormat && (displayFormatDropDown.value = getDispayFormat);
|
||||
selectedDisplayText.innerText = displayFormatDropDown.value;
|
||||
|
||||
getInputAnimation && (inputAnimation.value = getInputAnimation);
|
||||
|
||||
if (selectedDisplayText.innerText === "Professional two rows") {
|
||||
topRowText.style.display = "inline";
|
||||
bottomRowText.style.display = "inline";
|
||||
secondRow.style.display = "flex";
|
||||
inputScrollSpeedRow.forEach((value) => {
|
||||
value.parentElement.parentElement.style.display = "flex";
|
||||
});
|
||||
} else {
|
||||
topRowText.style.display = "none";
|
||||
bottomRowText.style.display = "none";
|
||||
secondRow.style.display = "none";
|
||||
inputScrollSpeedRow.forEach((value) => {
|
||||
value.parentElement.parentElement.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// custom images
|
||||
let localCustomImages = JSON.parse(localStorage.getItem("customImages"));
|
||||
localCustomImages?.map((value) => {
|
||||
let tag = document.createElement("li");
|
||||
tag.innerText = value.fileName;
|
||||
images.appendChild(tag);
|
||||
});
|
||||
// custom gifs
|
||||
let localCustomGifs = JSON.parse(localStorage.getItem("customGifs"));
|
||||
localCustomGifs?.map((value) => {
|
||||
let tag = document.createElement("li");
|
||||
tag.innerText = value.fileName;
|
||||
gifs.appendChild(tag);
|
||||
});
|
||||
// custom messages
|
||||
let localCustomMsg = JSON.parse(localStorage.getItem("customMsg"));
|
||||
localCustomMsg?.map((value) => {
|
||||
let tag = document.createElement("li");
|
||||
tag.innerText = value.messageName;
|
||||
var messagesWrapper = document.getElementById("messages-features");
|
||||
|
||||
messagesWrapper.appendChild(tag);
|
||||
});
|
||||
addEventOnList();
|
||||
addEventonBtns();
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
};
|
||||
|
||||
137
static/style.css
137
static/style.css
@ -16,22 +16,32 @@ body {
|
||||
|
||||
/* Top logo bar */
|
||||
header {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
border-bottom: 2px solid white;
|
||||
padding-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
}
|
||||
.update-btn,
|
||||
.update-btn:hover {
|
||||
.update-btn {
|
||||
background-color: gray;
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.hostname-text {
|
||||
margin: 0;
|
||||
align-self: flex-end;
|
||||
font-style: italic;
|
||||
color: greenyellow;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* General Ticker */
|
||||
@ -40,15 +50,58 @@ header {
|
||||
justify-content: space-around;
|
||||
list-style-type: none;
|
||||
}
|
||||
.btn-stop-display,
|
||||
.btn-stop-display:hover {
|
||||
.btn-stop-display {
|
||||
background-color: purple;
|
||||
color: white;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.set-btn,
|
||||
.set-btn:hover {
|
||||
.btn-warning {
|
||||
background-color: #ffc107;
|
||||
color: white;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.btn-warning:hover {
|
||||
background-color: greenyellow;
|
||||
color: white;
|
||||
}
|
||||
.btn-warning:active {
|
||||
background-color: #ffce45;
|
||||
color: white;
|
||||
}
|
||||
.btn-stop-display:hover {
|
||||
background-color: #b000b9;
|
||||
color: white;
|
||||
}
|
||||
.btn-stop-display:active {
|
||||
background-color: #3e065f;
|
||||
color: white;
|
||||
}
|
||||
.set-btn {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.set-btn:hover,
|
||||
.fa-chevron-right:hover,
|
||||
.fa-chevron-left:hover,
|
||||
.fa-chevron-up:hover,
|
||||
.fa-chevron-down:hover,
|
||||
.fa-minus:hover,
|
||||
.update-btn:hover,
|
||||
.save-btn:hover {
|
||||
background-color: #8ca1a5;
|
||||
color: white;
|
||||
}
|
||||
.set-btn:active:active,
|
||||
.fa-chevron-right:active,
|
||||
.fa-chevron-left:active,
|
||||
.fa-chevron-up:active,
|
||||
.fa-chevron-down:active,
|
||||
.fa-minus:active,
|
||||
.update-btn:active,
|
||||
.save-btn:active {
|
||||
background-color: #6c4a4a;
|
||||
color: white;
|
||||
}
|
||||
.row-2 {
|
||||
border-bottom: 2px solid white;
|
||||
@ -79,6 +132,7 @@ header {
|
||||
.fa-minus {
|
||||
background-color: gray;
|
||||
padding: 10px;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.icons-list {
|
||||
margin-block: 70px;
|
||||
@ -98,11 +152,11 @@ header {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.save-btn,
|
||||
.save-btn:hover {
|
||||
.save-btn {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
padding-inline: 40px;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -114,52 +168,79 @@ header {
|
||||
li.active {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.row-1, .row-3{
|
||||
.row-1,
|
||||
.row-3 {
|
||||
margin-block: 50px;
|
||||
}
|
||||
.w-115-px {
|
||||
width: 115px;
|
||||
}
|
||||
.h-50-px {
|
||||
height: 50px;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.mr-5 {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
.font-6 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#connected-text {
|
||||
left: calc(100% + 1.25rem);
|
||||
display: none;
|
||||
}
|
||||
#selected-display-text {
|
||||
color: blue;
|
||||
}
|
||||
#top-row-text,
|
||||
#bottom-row-text {
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
padding-right: 150px;
|
||||
display: none;
|
||||
}
|
||||
#second-row {
|
||||
display: none;
|
||||
}
|
||||
/* Responsiveness */
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.buttons-list{
|
||||
.buttons-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 25px;
|
||||
position: relative;
|
||||
right: 20px;
|
||||
}
|
||||
.row-1, .row-3{
|
||||
.row-1,
|
||||
.row-3 {
|
||||
margin-block: 25px;
|
||||
}
|
||||
.screen-saver{
|
||||
.screen-saver {
|
||||
margin-block: 25px;
|
||||
}
|
||||
.display-none-div{
|
||||
.display-none-div {
|
||||
display: none;
|
||||
}
|
||||
.icons-list{
|
||||
.icons-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.icons-list a{
|
||||
.icons-list a {
|
||||
margin-left: -120px;
|
||||
}
|
||||
|
||||
.remove{
|
||||
.remove {
|
||||
margin-right: -100px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
|
||||
.icons-list a{
|
||||
position: relative;
|
||||
.icons-list a {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user