1410 lines
44 KiB
JavaScript
1410 lines
44 KiB
JavaScript
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");
|
|
var cryptoFeatures = document.querySelectorAll("#crypto-features li");
|
|
var forexFeatures = document.querySelectorAll("#forex-features li");
|
|
var currentWeatherFeatures = document.querySelectorAll(
|
|
"#current-weather-features li"
|
|
);
|
|
var dailyForecastFeatures = document.querySelectorAll(
|
|
"#daily-forecast-features li"
|
|
);
|
|
var newsFeatures = document.querySelectorAll("#news-features li");
|
|
var upcomingGamesFeatures = document.querySelectorAll(
|
|
"#upcoming-games-features li"
|
|
);
|
|
var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
|
|
var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
|
|
var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
|
|
var imagesFeatures = document.querySelectorAll("#images-features li");
|
|
var gifsFeatures = document.querySelectorAll("#gifs-features li");
|
|
var messagesFeatures = document.querySelectorAll("#messages-features li");
|
|
|
|
var allFeaturesList = [
|
|
stocksFeatures,
|
|
cryptoFeatures,
|
|
forexFeatures,
|
|
currentWeatherFeatures,
|
|
dailyForecastFeatures,
|
|
newsFeatures,
|
|
upcomingGamesFeatures,
|
|
pastGamesFeatures,
|
|
liveGamesFeatures,
|
|
teamStatsFeatures,
|
|
imagesFeatures,
|
|
gifsFeatures,
|
|
messagesFeatures,
|
|
];
|
|
|
|
// features remove buttons
|
|
var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
|
|
var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
|
|
var forexRemoveBtn = document.getElementById("forex-remove-btn");
|
|
var currentWeatherRemoveBtn = document.getElementById(
|
|
"current-weather-remove-btn"
|
|
);
|
|
var dailyForecastRemoveBtn = document.getElementById(
|
|
"daily-forecast-remove-btn"
|
|
);
|
|
var newsRemoveBtn = document.getElementById("news-remove-btn");
|
|
var upcomingGamesRemoveBtn = document.getElementById(
|
|
"upcoming-games-remove-btn"
|
|
);
|
|
var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
|
|
var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
|
|
var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
|
|
var imagesRemoveBtn = document.getElementById("images-remove-btn");
|
|
var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
|
|
var messagesRemoveBtn = document.getElementById("messages-remove-btn");
|
|
|
|
var allFeaturesRemoveBtns = [
|
|
stocksRemoveBtn,
|
|
cryptoRemoveBtn,
|
|
forexRemoveBtn,
|
|
currentWeatherRemoveBtn,
|
|
dailyForecastRemoveBtn,
|
|
newsRemoveBtn,
|
|
upcomingGamesRemoveBtn,
|
|
pastGamesRemoveBtn,
|
|
liveGamesRemoveBtn,
|
|
teamStatsRemoveBtn,
|
|
imagesRemoveBtn,
|
|
gifsRemoveBtn,
|
|
messagesRemoveBtn,
|
|
];
|
|
// features increase buttons
|
|
var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
|
|
var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
|
|
var forexincreaseBtn = document.getElementById("forex-increase-btn");
|
|
var currentWeatherincreaseBtn = document.getElementById(
|
|
"current-weather-increase-btn"
|
|
);
|
|
var dailyForecastincreaseBtn = document.getElementById(
|
|
"daily-forecast-increase-btn"
|
|
);
|
|
var newsincreaseBtn = document.getElementById("news-increase-btn");
|
|
var upcomingGamesincreaseBtn = document.getElementById(
|
|
"upcoming-games-increase-btn"
|
|
);
|
|
var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
|
|
var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
|
|
var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
|
|
var imagesincreaseBtn = document.getElementById("images-increase-btn");
|
|
var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
|
|
var messagesincreaseBtn = document.getElementById("messages-increase-btn");
|
|
|
|
var allFeaturesIncreaseBtns = [
|
|
stocksincreaseBtn,
|
|
cryptoincreaseBtn,
|
|
forexincreaseBtn,
|
|
currentWeatherincreaseBtn,
|
|
dailyForecastincreaseBtn,
|
|
newsincreaseBtn,
|
|
upcomingGamesincreaseBtn,
|
|
pastGamesincreaseBtn,
|
|
liveGamesincreaseBtn,
|
|
teamStatsincreaseBtn,
|
|
imagesincreaseBtn,
|
|
gifsincreaseBtn,
|
|
messagesincreaseBtn,
|
|
];
|
|
|
|
// features decrease buttons
|
|
var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
|
|
var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
|
|
var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
|
|
var currentWeatherDecreaseBtn = document.getElementById(
|
|
"current-weather-decrease-btn"
|
|
);
|
|
var dailyForecastDecreaseBtn = document.getElementById(
|
|
"daily-forecast-decrease-btn"
|
|
);
|
|
var newsDecreaseBtn = document.getElementById("news-decrease-btn");
|
|
var upcomingGamesDecreaseBtn = document.getElementById(
|
|
"upcoming-games-decrease-btn"
|
|
);
|
|
var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
|
|
var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
|
|
var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
|
|
var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
|
|
var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
|
|
var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
|
|
|
|
var allFeaturesDecreaseBtns = [
|
|
stocksDecreaseBtn,
|
|
cryptoDecreaseBtn,
|
|
forexDecreaseBtn,
|
|
currentWeatherDecreaseBtn,
|
|
dailyForecastDecreaseBtn,
|
|
newsDecreaseBtn,
|
|
upcomingGamesDecreaseBtn,
|
|
pastGamesDecreaseBtn,
|
|
liveGamesDecreaseBtn,
|
|
teamStatsDecreaseBtn,
|
|
imagesDecreaseBtn,
|
|
gifsDecreaseBtn,
|
|
messagesDecreaseBtn,
|
|
];
|
|
|
|
const changeVarValue = () => {
|
|
stocksFeatures = document.querySelectorAll("#stocks-features li");
|
|
cryptoFeatures = document.querySelectorAll("#crypto-features li");
|
|
forexFeatures = document.querySelectorAll("#forex-features li");
|
|
currentWeatherFeatures = document.querySelectorAll(
|
|
"#current-weather-features li"
|
|
);
|
|
dailyForecastFeatures = document.querySelectorAll(
|
|
"#daily-forecast-features li"
|
|
);
|
|
newsFeatures = document.querySelectorAll("#news-features li");
|
|
upcomingGamesFeatures = document.querySelectorAll(
|
|
"#upcoming-games-features li"
|
|
);
|
|
pastGamesFeatures = document.querySelectorAll("#past-games-features li");
|
|
liveGamesFeatures = document.querySelectorAll("#live-games-features li");
|
|
teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
|
|
imagesFeatures = document.querySelectorAll("#images-features li");
|
|
gifsFeatures = document.querySelectorAll("#gifs-features li");
|
|
messagesFeatures = document.querySelectorAll("#messages-features li");
|
|
|
|
allFeaturesList = [
|
|
stocksFeatures,
|
|
cryptoFeatures,
|
|
forexFeatures,
|
|
currentWeatherFeatures,
|
|
dailyForecastFeatures,
|
|
newsFeatures,
|
|
upcomingGamesFeatures,
|
|
pastGamesFeatures,
|
|
liveGamesFeatures,
|
|
teamStatsFeatures,
|
|
imagesFeatures,
|
|
gifsFeatures,
|
|
messagesFeatures,
|
|
];
|
|
};
|
|
|
|
const addEventOnList = () => {
|
|
// for available feature
|
|
for (let i = 0; i < availableFeatures.length; i++) {
|
|
const availableFeature = availableFeatures[i];
|
|
availableFeature.addEventListener("click", () => {
|
|
for (let i = 0; i < availableFeatures.length; i++) {
|
|
availableFeatures[i].setAttribute("class", "");
|
|
}
|
|
if (availableFeature.getAttribute("class") == "active") {
|
|
availableFeature.setAttribute("class", "");
|
|
} else {
|
|
availableFeature.setAttribute("class", "active");
|
|
}
|
|
});
|
|
}
|
|
// 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];
|
|
display_format.addEventListener("click", () => {
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
|
displayToFormat[i].setAttribute("class", "");
|
|
}
|
|
if (display_format.getAttribute("class") == "active") {
|
|
display_format.setAttribute("class", "");
|
|
} else {
|
|
display_format.setAttribute("class", "active");
|
|
}
|
|
});
|
|
}
|
|
// 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 = () => {
|
|
featureToDisplay.addEventListener("click", () => {
|
|
for (let i = 0; i < availableFeatures.length; i++) {
|
|
const availableFeature = availableFeatures[i];
|
|
if (availableFeature.getAttribute("class") == "active") {
|
|
availableFeature.remove();
|
|
availableFeature.setAttribute("class", "");
|
|
displayFormat.appendChild(availableFeature);
|
|
availableFeatures = document.querySelectorAll("#available-features li");
|
|
displayToFormat = document.querySelectorAll("#display-format li");
|
|
addEventOnList();
|
|
}
|
|
}
|
|
});
|
|
|
|
displayToFeature.addEventListener("click", () => {
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
|
const availableFormat = displayToFormat[i];
|
|
if (availableFormat.getAttribute("class") == "active") {
|
|
availableFormat.remove();
|
|
availableFormat.setAttribute("class", "");
|
|
availableToDisplay.appendChild(availableFormat);
|
|
availableFeatures = document.querySelectorAll("#available-features li");
|
|
displayToFormat = document.querySelectorAll("#display-format li");
|
|
addEventOnList();
|
|
}
|
|
}
|
|
});
|
|
|
|
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();
|
|
addEventonBtns();
|
|
|
|
const addEventOnFeaturesList = () => {
|
|
allFeaturesList.map((value) => {
|
|
for (let i = 0; i < value.length; i++) {
|
|
const availableFeature = value[i];
|
|
availableFeature.addEventListener("click", () => {
|
|
for (let i = 0; i < value.length; i++) {
|
|
value[i].setAttribute("class", "");
|
|
}
|
|
if (availableFeature.getAttribute("class") == "active") {
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
addEventOnFeaturesList();
|
|
|
|
// display increase function
|
|
displayincreaseBtn.addEventListener("click", () => {
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
|
var displayItem = displayToFormat[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 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++) {
|
|
var displayItem = displayToFormat[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;
|
|
}
|
|
}
|
|
});
|
|
|
|
// 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();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// feature increase function
|
|
allFeaturesIncreaseBtns.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") {
|
|
var prevElement = item.previousElementSibling;
|
|
var currentText = item.innerText;
|
|
item.innerText = prevElement.innerText;
|
|
prevElement.innerText = currentText;
|
|
prevElement.setAttribute("class", "active");
|
|
item.setAttribute("class", "");
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// feature decrease function
|
|
allFeaturesDecreaseBtns.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") {
|
|
var nextElement = item.nextElementSibling;
|
|
var currentText = item.innerText;
|
|
|
|
item.innerText = nextElement.innerText;
|
|
nextElement.innerText = currentText;
|
|
nextElement.setAttribute("class", "active");
|
|
item.setAttribute("class", "");
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// all features
|
|
var stocks = document.getElementById("stocks-features");
|
|
var crypto1 = document.getElementById("crypto-features");
|
|
var forex = document.getElementById("forex-features");
|
|
var currentWeather = document.getElementById("current-weather-features");
|
|
var dailyForecast = document.getElementById("daily-forecast-features");
|
|
var news = document.getElementById("news-features");
|
|
var upcomingGames = document.getElementById("upcoming-games-features");
|
|
var pastGames = document.getElementById("past-games-features");
|
|
var liveGames = document.getElementById("live-games-features");
|
|
var teamStats = document.getElementById("team-stats-features");
|
|
var images = document.getElementById("images-features");
|
|
var gifs = document.getElementById("gifs-features");
|
|
var messages = document.getElementById("messages-features");
|
|
|
|
var allFeatures = [
|
|
stocks,
|
|
crypto1,
|
|
forex,
|
|
currentWeather,
|
|
dailyForecast,
|
|
news,
|
|
upcomingGames,
|
|
pastGames,
|
|
liveGames,
|
|
teamStats,
|
|
images,
|
|
gifs,
|
|
messages,
|
|
];
|
|
|
|
// features select box
|
|
var newsSelect = document.getElementById("inputTransition63");
|
|
var upcomingGamesSelect = document.getElementById("inputTransition73");
|
|
var pastGamesSelect = document.getElementById("inputTransition83");
|
|
var liveGamesSelect = document.getElementById("inputTransition93");
|
|
var teamStatsSelect = document.getElementById("inputTransition103");
|
|
var allFeaturesSelectBox = [
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
newsSelect,
|
|
upcomingGamesSelect,
|
|
pastGamesSelect,
|
|
liveGamesSelect,
|
|
teamStatsSelect,
|
|
null,
|
|
null,
|
|
null,
|
|
];
|
|
|
|
// features select add buttons
|
|
var newsAddBtn = document.getElementById("inputTransitionBtn63");
|
|
var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
|
|
var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
|
|
var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
|
|
var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
|
|
var allFeaturesSelectAddBtn = [
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
newsAddBtn,
|
|
upcomingGamesAddBtn,
|
|
pastGamesAddBtn,
|
|
liveGamesAddBtn,
|
|
teamStatsAddBtn,
|
|
null,
|
|
null,
|
|
null,
|
|
];
|
|
|
|
allFeaturesSelectAddBtn.map((value, index) => {
|
|
if (value != null) {
|
|
value.addEventListener("click", () => {
|
|
var tag = document.createElement("li");
|
|
tag.innerHTML = allFeaturesSelectBox[index].value;
|
|
allFeatures[index].appendChild(tag);
|
|
changeVarValue();
|
|
addEventOnFeaturesList();
|
|
});
|
|
}
|
|
});
|
|
|
|
// features input file
|
|
var imagesFile = document.getElementById("inputText11");
|
|
var gifsFile = document.getElementById("inputText1112");
|
|
|
|
var allFeaturesFile = [
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
imagesFile,
|
|
gifsFile,
|
|
null,
|
|
];
|
|
// features file add button
|
|
var imagesFileAddBtn = document.getElementById("inputTextBtn11");
|
|
var gifsFileAddBtn = document.getElementById("inputTextBtn1112");
|
|
|
|
var allFeaturesFileAddBtn = [
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
imagesFileAddBtn,
|
|
gifsFileAddBtn,
|
|
null,
|
|
];
|
|
|
|
// features input text
|
|
var stocksText = document.getElementById("inputText3");
|
|
var cryptoText = document.getElementById("inputText4");
|
|
var forexText = document.getElementById("inputText5");
|
|
var currentWeatherText = document.getElementById("inputText6");
|
|
var dailyForecastText = document.getElementById("inputText7");
|
|
var messagesText = document.getElementById("inputText13");
|
|
|
|
var allFeaturesText = [
|
|
stocksText,
|
|
cryptoText,
|
|
forexText,
|
|
currentWeatherText,
|
|
dailyForecastText,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
messagesText,
|
|
];
|
|
|
|
// features text add button
|
|
var stocksTextAddBtn = document.getElementById("inputTextBtn3");
|
|
var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
|
|
var forexTextAddBtn = document.getElementById("inputTextBtn5");
|
|
var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
|
|
var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
|
|
var messagesTextAddBtn = document.getElementById("inputTextBtn13");
|
|
|
|
var allFeaturesTextAddBtn = [
|
|
stocksTextAddBtn,
|
|
cryptoTextAddBtn,
|
|
forexTextAddBtn,
|
|
currentWeatherTextAddBtn,
|
|
dailyForecastTextAddBtn,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
messagesTextAddBtn,
|
|
];
|
|
|
|
allFeaturesTextAddBtn.map((value, index) => {
|
|
if (value !== null) {
|
|
value.addEventListener("click", () => {
|
|
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", () => {
|
|
|
|
let opt = getSelected(displayFormats);
|
|
|
|
if (opt.includes("Standard")) {
|
|
var list_el = document.getElementById("display-format");
|
|
|
|
let features = getListItems(list_el);
|
|
fetch("/start", {
|
|
method: "PUT",
|
|
body: JSON.stringify(features),
|
|
});
|
|
} else if (opt.includes("Professional")) {
|
|
|
|
var top_list_el = document.getElementById("display-format");
|
|
|
|
let top_features = getListItems(top_list_el);
|
|
|
|
|
|
var bot_list_el = document.getElementById("display-format-2");
|
|
|
|
let bot_features = getListItems(bot_list_el);
|
|
|
|
|
|
let features = [top_features, bot_features];
|
|
|
|
|
|
fetch("/start", {
|
|
method: "PUT",
|
|
body: JSON.stringify(features),
|
|
});
|
|
|
|
}
|
|
});
|
|
|
|
var brightnessButton = document.getElementById("brightness-btn");
|
|
// start the display
|
|
brightnessButton.addEventListener("click", () => {
|
|
let brightness = document.querySelectorAll(".brightness-text")[0].value;
|
|
fetch("/brightness", {
|
|
method: "PUT",
|
|
body: JSON.stringify({ brightness: brightness }),
|
|
});
|
|
});
|
|
|
|
var shutdownButton = document.getElementById("shutdown-btn");
|
|
|
|
shutdownButton.addEventListener("click", () => {
|
|
fetch("/shutdown", {
|
|
method: "GET",
|
|
});
|
|
});
|
|
|
|
var stopButton = document.getElementById("stop-btn");
|
|
stopButton.addEventListener("click", () => {
|
|
fetch("/stop", {
|
|
method: "GET",
|
|
});
|
|
});
|
|
|
|
|
|
|
|
var stopButton = document.getElementById("screensaver-btn");
|
|
stopButton.addEventListener("click", () => {
|
|
let anim = localStorage.getItem("inputAnimation");
|
|
|
|
|
|
fetch("/screensaver", {
|
|
method: "POST",
|
|
body: anim,
|
|
});
|
|
});
|
|
|
|
var updateButton = document.getElementById("update-btn");
|
|
updateButton.addEventListener("click", () => {
|
|
|
|
fetch("/update", {
|
|
method: "POST",
|
|
});
|
|
});
|
|
|
|
|
|
|
|
var dispFormatButton = document.getElementById("dispformat-btn");
|
|
|
|
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];
|
|
|
|
if (opt.selected === true) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return opt.innerHTML;
|
|
}
|
|
|
|
function getListItems(list_el) {
|
|
let symbols = list_el.getElementsByTagName("li");
|
|
|
|
let items = [];
|
|
for (var i = 0; i < symbols.length; ++i) {
|
|
items.push(symbols[i].innerText);
|
|
}
|
|
return items;
|
|
}
|
|
|
|
// toggle professional
|
|
dispFormatButton.addEventListener("click", () => {
|
|
opt = getSelected(displayFormats);
|
|
fetch("/display_format", {
|
|
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 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 s;
|
|
//function specific settings
|
|
switch (pageNum) {
|
|
case 1:
|
|
case 2:
|
|
case 3:
|
|
s = getTradingSettings(page);
|
|
break;
|
|
case 4:
|
|
case 5:
|
|
s = getWeatherSettings(page);
|
|
break;
|
|
case 6:
|
|
s = getNewsSettings(page);
|
|
break;
|
|
case 7:
|
|
case 8:
|
|
case 9:
|
|
case 10:
|
|
s = getSportsSettings(page);
|
|
break;
|
|
case 11:
|
|
case 12:
|
|
s = getImageSettings(page);
|
|
break;
|
|
case 13:
|
|
s = getMessageSettings(page);
|
|
break;
|
|
}
|
|
|
|
settings = { ...settings, ...s }; // merge both sets of settings
|
|
|
|
fetch("/feature_settings", {
|
|
method: "PUT",
|
|
body: JSON.stringify(settings),
|
|
});
|
|
|
|
//send uploaded images and gifs
|
|
if (pageNum == 11) {
|
|
var data = new FormData();
|
|
|
|
for (var i = 0; i < uploaded_images.length; i++) {
|
|
data.append(uploaded_images[i].name, uploaded_images[i]);
|
|
}
|
|
|
|
fetch("/upload", {
|
|
method: "POST",
|
|
body: data,
|
|
});
|
|
} else if (pageNum == 12) {
|
|
var data = new FormData();
|
|
|
|
for (var i = 0; i < uploaded_GIFs.length; i++) {
|
|
data.append(uploaded_GIFs[i].name, uploaded_GIFs[i]);
|
|
}
|
|
|
|
fetch("/upload", {
|
|
method: "POST",
|
|
body: data,
|
|
});
|
|
}
|
|
}
|
|
|
|
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;
|
|
let no_logos = page.querySelectorAll(".logo-select")[0].checked;
|
|
let chart = page.querySelectorAll(".chart-select")[0].checked;
|
|
let title = page.querySelectorAll(".title-select")[0].checked;
|
|
|
|
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,
|
|
};
|
|
|
|
return settings;
|
|
}
|
|
|
|
// gets the current wether and forecast settings
|
|
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 title = page.querySelectorAll(".title-select")[0].checked;
|
|
|
|
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;
|
|
settings["current_weather"] = current_weather;
|
|
} catch {}
|
|
|
|
let locations_el = page.querySelectorAll(".location-list")[0];
|
|
let locations = getListItems(locations_el);
|
|
settings["locations"] = locations;
|
|
|
|
return settings;
|
|
}
|
|
|
|
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;
|
|
let use_sources = page.querySelectorAll(".sources-select")[0].checked;
|
|
|
|
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,
|
|
};
|
|
return settings;
|
|
}
|
|
|
|
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 };
|
|
return settings;
|
|
}
|
|
|
|
var uploaded_images = [];
|
|
var uploaded_GIFs = [];
|
|
|
|
allFeaturesFileAddBtn.map((value, index) => {
|
|
if (value !== null) {
|
|
value.addEventListener("click", () => {
|
|
var tag = document.createElement("li");
|
|
tag.innerHTML = allFeaturesFile[index].files[0].name;
|
|
if (index == 10) {
|
|
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) {
|
|
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);
|
|
}
|
|
}
|
|
|
|
changeVarValue();
|
|
addEventOnFeaturesList();
|
|
});
|
|
}
|
|
});
|
|
|
|
//images and GIFs
|
|
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 };
|
|
return settings;
|
|
}
|
|
|
|
var messages = [];
|
|
|
|
messagesTextAddBtn.addEventListener("click", () => {
|
|
let pageSelector = "Page13";
|
|
|
|
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 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"])) {
|
|
new_messages.push(messages[i]);
|
|
}
|
|
}
|
|
let title = page.querySelectorAll(".title-select")[0].checked;
|
|
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);
|
|
|
|
data = {country:countryCodeInput.value, ssid:wifiSsidInput.value, pwd:wifiPassInput.value}
|
|
|
|
fetch("/wifi", {
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
});
|
|
});
|
|
|
|
// 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();
|
|
};
|