added save settings

static/app.js

@@ -54,6 +54,8 @@ var marketFeatures = document.querySelectorAll("#market-list li");
 var sectorFeatures = document.querySelectorAll("#sector-list li");
 var placeFeatures = document.querySelectorAll("#place-list li");
 var clock1Features = document.querySelectorAll("#clock1-features li");
+var clock2Features = document.querySelectorAll("#clock2-features li");
+var worldclockFeatures = document.querySelectorAll("#worldclock-features li");
 
 var allFeaturesList = [
   stocksFeatures,
@@ -79,6 +81,8 @@ var allFeaturesList = [
   sectorFeatures,
   placeFeatures,
   clock1Features,
+  clock2Features,
+  worldclockFeatures,
 ];
 
 // features remove buttons
@@ -111,6 +115,8 @@ var marketRemoveBtn = document.getElementById("market-remove-btn");
 var sectorRemoveBtn = document.getElementById("sector-remove-btn");
 var placeRemoveBtn = document.getElementById("place-remove-btn");
 var clock1RemoveBtn = document.getElementById("clock1-remove-btn");
+var clock2RemoveBtn = document.getElementById("clock2-remove-btn");
+var worldclockRemoveBtn = document.getElementById("worldclock-remove-btn");
 
 var allFeaturesRemoveBtns = [
   stocksRemoveBtn,
@@ -136,6 +142,8 @@ var allFeaturesRemoveBtns = [
   sectorRemoveBtn,
   placeRemoveBtn,
   clock1RemoveBtn,
+  clock2RemoveBtn,
+  worldclockRemoveBtn,
 ];
 // features increase buttons
 var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
@@ -167,6 +175,8 @@ var marketincreaseBtn = document.getElementById("market-increase-btn");
 var sectorincreaseBtn = document.getElementById("sector-increase-btn");
 var placeincreaseBtn = document.getElementById("place-increase-btn");
 var clock1increaseBtn = document.getElementById("clock1-increase-btn");
+var clock2increaseBtn = document.getElementById("clock2-increase-btn");
+var worldclockincreaseBtn = document.getElementById("worldclock-increase-btn");
 
 var allFeaturesIncreaseBtns = [
   stocksincreaseBtn,
@@ -192,6 +202,8 @@ var allFeaturesIncreaseBtns = [
   sectorincreaseBtn,
   placeincreaseBtn,
   clock1increaseBtn,
+  clock2increaseBtn,
+  worldclockincreaseBtn,
 ];
 
 // features decrease buttons
@@ -224,6 +236,8 @@ var marketDecreaseBtn = document.getElementById("market-decrease-btn");
 var sectorDecreaseBtn = document.getElementById("sector-decrease-btn");
 var placeDecreaseBtn = document.getElementById("place-decrease-btn");
 var clock1DecreaseBtn = document.getElementById("clock1-decrease-btn");
+var clock2DecreaseBtn = document.getElementById("clock2-decrease-btn");
+var worldclockDecreaseBtn = document.getElementById("worldclock-decrease-btn");
 
 var allFeaturesDecreaseBtns = [
   stocksDecreaseBtn,
@@ -249,6 +263,8 @@ var allFeaturesDecreaseBtns = [
   sectorDecreaseBtn,
   placeDecreaseBtn,
   clock1DecreaseBtn,
+  clock2DecreaseBtn,
+  worldclockDecreaseBtn,
 ];
 
 const changeVarValue = () => {
@@ -281,6 +297,8 @@ const changeVarValue = () => {
   sectorFeatures = document.querySelectorAll("#sector-list li");
   placeFeatures = document.querySelectorAll("#place-list li");
   clock1Features = document.querySelectorAll("#clock1-features li");
+  clock2Features = document.querySelectorAll("#clock2-features li");
+  worldclockFeatures = document.querySelectorAll("#worldclock-features li");
   
   allFeaturesList = [
     stocksFeatures,
@@ -306,6 +324,8 @@ const changeVarValue = () => {
     sectorFeatures,
     placeFeatures,
     clock1Features,
+    clock2Features,
+    worldclockFeatures,
   ];
 };
 
@@ -689,6 +709,8 @@ var market = document.getElementById("market-list");
 var sector = document.getElementById("sector-list");
 var place = document.getElementById("place-list");
 var clock1 = document.getElementById("clock1-features");
+var clock2 = document.getElementById("clock2-features");
+var worldclock = document.getElementById("worldclock-features");
 
 var allFeatures = [
   stocks,
@@ -713,7 +735,9 @@ var allFeatures = [
   market,
   sector,
   place,
-  clock1
+  clock1,
+  clock2,
+  worldclock,
 ];
 
 // features select box
@@ -752,6 +776,8 @@ var allFeaturesSelectBox = [
   sectorSelect,
   placeSelect,
   null,
+  null,
+  null,
 ];
 
 // features select add buttons
@@ -790,6 +816,8 @@ var allFeaturesSelectAddBtn = [
   sectorAddBtn,
   placeAddBtn,
   null,
+  null,
+  null,
 ];
 
 allFeaturesSelectAddBtn.map((value, index) => {
@@ -833,6 +861,8 @@ var allFeaturesFile = [
   null,
   null,
   null,
+  null,
+  null,
 ];
 // features file add button
 var imagesFileAddBtn = document.getElementById("inputTextBtn11");
@@ -862,6 +892,8 @@ var allFeaturesFileAddBtn = [
   null,
   null,
   null,
+  null,
+  null,
 ];
 
 // features input text
@@ -898,6 +930,8 @@ var allFeaturesText = [
   null,
   null,
   null,
+  null,
+  null,
 ];
 
 // features text add button
@@ -934,6 +968,8 @@ var allFeaturesTextAddBtn = [
   null,
   null,
   null,
+  null,
+  null,
 ];
 
 
@@ -961,6 +997,8 @@ var allFeaturesLimit = [
   null,
   null,
   null,
+  null,
+  null,
 ];
 
 
@@ -1239,6 +1277,8 @@ function getFeatureSettings() {
     "Sector Performance",
     "Place (Reddit)",
     "Clock 1",
+    "Clock 2",
+    "World Clock",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1319,6 +1359,12 @@ function getFeatureSettings() {
     case 23:
       s = getClock1Settings(page);
       break;
+    case 24:
+      s = getClock2Settings(page);
+      break;
+    case 25:
+      s = getWorldclockSettings(page);
+      break;
   }
   
   settings = { ...settings, ...s }; // merge both sets of settings
@@ -1520,6 +1566,8 @@ function saveMovieAPIKey(){
     "Sector Performance",
     "Place (Reddit)",
     "Clock 1",
+    "Clock 2",
+    "World Clock",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1567,6 +1615,8 @@ function saveIpoAPIKey(){
     "Sector Performance",
     "Place (Reddit)",
     "Clock 1",
+    "Clock 2",
+    "World Clock",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1931,15 +1981,38 @@ function getPlaceSettings(page) {
 // clock1 settings
 function getClock1Settings(page) {
   
-  let pause_place = page.querySelectorAll(".pause-select")[0].value;
+  let clock1pause = page.querySelectorAll(".pause-select")[0].value;
 
   settings = {
-    pause: pause_place,
+    pause: clock1pause,
   };
   console.log(settings);
   return settings;
 }
 
+// clock2 settings
+function getClock2Settings(page) {
+  
+  let clock2pause = page.querySelectorAll(".pause-select")[0].value;
+
+  settings = {
+    pause: clock2pause,
+  };
+  console.log(settings);
+  return settings;
+}
+
+// world clock settings
+function getWorldclockSettings(page) {
+  
+  let worldclockpause = page.querySelectorAll(".pause-select")[0].value;
+
+  settings = {
+    pause: worldclockpause,
+  };
+  console.log(settings);
+  return settings;
+}
 
 // Join Network
 
@@ -2074,7 +2147,7 @@ inputAnimationBtn.addEventListener("click", () => {
 // scroll speed row two
 let inputScrollSpeedRow = [];
 
-for (let i = 1; i <= 23; i++) {
+for (let i = 1; i <= 25; i++) {
   inputScrollSpeedRow.push(
     document.getElementById(
       i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`
@@ -3489,7 +3562,7 @@ function featureSavePrompt() {
 
 
 const pageIDs = ['Page1', 'Page2', 'Page3', 'Page4', 'Page5', 'Page6', 'Page7', 'Page8', 'Page9', 'Page10', 'Page11', 'Page12', 'Page13',
-  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21', 'Page22', 'Page23'];
+  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21', 'Page22', 'Page23', 'Page24', 'Page25'];
 
 for (const pageID of pageIDs) {
   // Select the parent div
@@ -3509,7 +3582,7 @@ for (const pageID of pageIDs) {
     }
   });
   // Add event listeners for input text fields specifically for page22 (r/place)
-  if ((pageID === 'Page22') || (pageID === 'Page23')) {
+  if ((pageID === 'Page22') || (pageID === 'Page23') || (pageID === 'Page24') || (pageID === 'Page25')) {
     const inputForms = parentDiv.querySelectorAll('input[type="text"]');
     inputForms.forEach(inputForm => {
       inputForm.addEventListener('input', function(event) {