added movie + add movie api key

static/app.js

@@ -46,6 +46,7 @@ var gifsFeatures = document.querySelectorAll("#gifs-features li");
 var messagesFeatures = document.querySelectorAll("#messages-features li");
 var commoditiesFeatures = document.querySelectorAll("#commodities-features li");
 var indicesFeatures = document.querySelectorAll("#indices-features li");
+var moviesFeatures = document.querySelectorAll("#movies-features li");
 
 var allFeaturesList = [
   stocksFeatures,
@@ -63,6 +64,7 @@ var allFeaturesList = [
   messagesFeatures,
   commoditiesFeatures,
   indicesFeatures,
+  moviesFeatures,
 ];
 
 // features remove buttons
@@ -87,6 +89,7 @@ var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
 var messagesRemoveBtn = document.getElementById("messages-remove-btn");
 var commoditiesRemoveBtn = document.getElementById("commodities-remove-btn");
 var indicesRemoveBtn = document.getElementById("indices-remove-btn");
+var moviesRemoveBtn = document.getElementById("movies-remove-btn");
 
 var allFeaturesRemoveBtns = [
   stocksRemoveBtn,
@@ -104,6 +107,7 @@ var allFeaturesRemoveBtns = [
   messagesRemoveBtn,
   commoditiesRemoveBtn,
   indicesRemoveBtn,
+  moviesRemoveBtn,
 ];
 // features increase buttons
 var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
@@ -127,6 +131,7 @@ var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
 var messagesincreaseBtn = document.getElementById("messages-increase-btn");
 var commoditiesincreaseBtn = document.getElementById("commodities-increase-btn");
 var indicesincreaseBtn = document.getElementById("indices-increase-btn");
+var moviesincreaseBtn = document.getElementById("movies-increase-btn");
 
 var allFeaturesIncreaseBtns = [
   stocksincreaseBtn,
@@ -144,6 +149,7 @@ var allFeaturesIncreaseBtns = [
   messagesincreaseBtn,
   commoditiesincreaseBtn,
   indicesincreaseBtn,
+  moviesincreaseBtn,
 ];
 
 // features decrease buttons
@@ -168,6 +174,7 @@ var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
 var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
 var commoditiesDecreaseBtn = document.getElementById("commodities-decrease-btn");
 var indicesDecreaseBtn = document.getElementById("indices-decrease-btn");
+var moviesDecreaseBtn = document.getElementById("movies-decrease-btn");
 
 var allFeaturesDecreaseBtns = [
   stocksDecreaseBtn,
@@ -185,6 +192,7 @@ var allFeaturesDecreaseBtns = [
   messagesDecreaseBtn,
   commoditiesDecreaseBtn,
   indicesDecreaseBtn,
+  moviesDecreaseBtn,
 ];
 
 const changeVarValue = () => {
@@ -209,6 +217,7 @@ const changeVarValue = () => {
   messagesFeatures = document.querySelectorAll("#messages-features li");
   commoditiesFeatures = document.querySelectorAll("#commodities-features li");
   indicesFeatures = document.querySelectorAll("#indices-features li");
+  moviesFeatures = document.querySelectorAll("#movies-features li");
 
   allFeaturesList = [
     stocksFeatures,
@@ -226,6 +235,7 @@ const changeVarValue = () => {
     messagesFeatures,
     commoditiesFeatures,
     indicesFeatures,
+    moviesFeatures,
   ];
 };
 
@@ -596,6 +606,7 @@ var gifs = document.getElementById("gifs-features");
 var messages = document.getElementById("messages-features");
 var commodities = document.getElementById("commodities-features");
 var indices = document.getElementById("indices-features");
+var movies = document.getElementById("movies-features");
 
 var allFeatures = [
   stocks,
@@ -613,6 +624,7 @@ var allFeatures = [
   messages,
   commodities,
   indices,
+  movies,
 ];
 
 // features select box
@@ -621,6 +633,7 @@ var upcomingGamesSelect = document.getElementById("inputTransition73");
 var pastGamesSelect = document.getElementById("inputTransition83");
 var liveGamesSelect = document.getElementById("inputTransition93");
 var teamStatsSelect = document.getElementById("inputTransition103");
+var moviesSelect = document.getElementById("inputTransition64");
 var allFeaturesSelectBox = [
   null,
   null,
@@ -637,6 +650,7 @@ var allFeaturesSelectBox = [
   null,
   null,
   null,
+  moviesSelect,
 ];
 
 // features select add buttons
@@ -661,6 +675,7 @@ var allFeaturesSelectAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 allFeaturesSelectAddBtn.map((value, index) => {
@@ -695,6 +710,7 @@ var allFeaturesFile = [
   null,
   null,
   null,
+  null,
 ];
 // features file add button
 var imagesFileAddBtn = document.getElementById("inputTextBtn11");
@@ -716,6 +732,7 @@ var allFeaturesFileAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 // features input text
@@ -744,6 +761,7 @@ var allFeaturesText = [
   messagesText,
   commoditiesText,
   indicesText,
+  null,
 ];
 
 // features text add button
@@ -772,6 +790,7 @@ var allFeaturesTextAddBtn = [
   messagesTextAddBtn,
   commoditiesTextAddBtn,
   indicesTextAddBtn,
+  null,
 ];
 
 
@@ -791,6 +810,7 @@ var allFeaturesLimit = [
   20,
   30,
   40,
+  null,
 ];
 
 
@@ -1047,6 +1067,7 @@ function getFeatureSettings() {
     "Custom Messages",
     "Commodities",
     "Indices",
+    "Movies",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1103,6 +1124,9 @@ function getFeatureSettings() {
     case 15:
       s = getTradingSettings(page);
       break;
+    case 16:
+      s = getMovieSettings(page);
+      break;
   }
   
   settings = { ...settings, ...s }; // merge both sets of settings
@@ -1226,6 +1250,7 @@ function saveWeatherAPIKey(){
     "Custom Messages",
     "Commodities",
     "Indices",
+    "Movies",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1246,7 +1271,48 @@ function saveWeatherAPIKey(){
 }
 
 
+function saveMovieAPIKey(){
+  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",
+    "Commodities",
+    "Indices",
+    "Movies",
+  ];
+  let pageNum = features.indexOf(feature) + 1;
+  let pageSelector = "Page" + pageNum.toString();
 
+  let page = document.getElementById(pageSelector);
+  
+  let api_key = page.querySelectorAll(".api-key")[0].value;
+  let settings = {
+    api_key:api_key
+  };
+  
+  console.log(settings);
+  
+  fetch("/saveMovieAPIKey", {
+    method: "POST",
+    body: JSON.stringify(settings),
+  });
+}
+
+
+var movieAPIbtn = document.getElementById("movie-api-btn");
+movieAPIbtn.addEventListener("click", saveMovieAPIKey);
 
 var weatherAPIbtn = document.getElementById("weather-api-btn");
 weatherAPIbtn.addEventListener("click", saveWeatherAPIKey);
@@ -1274,6 +1340,21 @@ function getNewsSettings(page) {
   return settings;
 }
 
+function getMovieSettings(page) {
+  
+  let category = getSelected(page.querySelectorAll(".movie-categories")[0]);
+  let title = page.querySelectorAll(".title-select")[0].checked;
+  let api_key = page.querySelectorAll(".api-key")[0];
+
+  settings = {
+    category: category,
+    title: title,
+    api_key: api_key
+  };
+ 
+  return settings;
+}
+
 function getSportsSettings(page) {
   let title = page.querySelectorAll(".title-select")[0].checked;
   let leagues_el = page.querySelectorAll(".league-list")[0];
@@ -1579,7 +1660,7 @@ inputAnimationBtn.addEventListener("click", () => {
 // scroll speed row two
 let inputScrollSpeedRow = [];
 
-for (let i = 1; i <= 15; i++) {
+for (let i = 1; i <= 16; i++) {
   inputScrollSpeedRow.push(
     document.getElementById(
       i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`
@@ -1724,6 +1805,26 @@ function showWeatherP() {
     }
 
 
+// Display message asking for restart of ticker when new API key added for movie
+
+function showMovieP() {
+  if(document.getElementById("api-key-movie").value==="") {
+
+            document.getElementById('movie-api-p').style.display = "none";
+        } 
+
+        else if (document.getElementById("api-key-movie").value==="Movies API Key") {
+                      document.getElementById('movie-api-p').style.display = "none";
+
+        }
+
+          else {
+            document.getElementById('movie-api-p').style.display = "block"
+        }
+
+    }
+
+
 // Disable adding cities when no API key detected