Fixed issues with / and added manual entry of EAN

template/add.html

@@ -32,6 +32,32 @@
             left: 0;
             top: 0;
         }
+        /* Style the button that is used to open and close the collapsible content */
+        .collapsible {
+          background-color: #eee;
+          color: #444;
+          cursor: pointer;
+          /*padding: 18px;*/
+          /*width: 100%;*/
+          border: none;
+          /*text-align: left;*/
+          outline: none;
+          font-size: 15px;
+        }
+        
+        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+        .active, .collapsible:hover {
+          background-color: #ccc;
+        }
+        
+        /* Style the collapsible content. Note: hidden by default */
+        .content {
+          padding: 0 18px;
+          display: none;
+          overflow: hidden;
+          background-color: #f1f1f1;
+        }
+
 
     </style>
 
@@ -61,6 +87,10 @@
                 <div id="currentEAN">EAN: Waiting for valid EAN...</div>
                 <button onclick="sendEanConvRequest()" disabled id="searchBtn"> <i class="fas fa-search"></i>Search</button>
                 <button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
+                <button type="button" class="collapsible">Manual input</button>
+                <div class="content">
+                   <input type="number" placeholder="EAN" max=9999999999999 min=1000000000000 id="manEAN">
+                </div><br>
             <% } %>
             </div>
     </div>
@@ -68,6 +98,22 @@
     <!-- Include the image-diff library -->
 
     <script>
+
+        var coll = document.getElementsByClassName("collapsible");
+        var i;
+        
+        for (i = 0; i < coll.length; i++) {
+          coll[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var content = this.nextElementSibling;
+            if (content.style.display === "block") {
+              content.style.display = "none";
+            } else {
+              content.style.display = "block";
+            }
+          });
+        }
+
         setTimeout(function(){
             document.getElementById("btn").style.backgroundColor = "rgba(255, 0, 0, 0.5)";
             document.getElementById("searchBtn").style.backgroundColor = "rgba(10, 10, 10, 0.5);"
@@ -177,9 +223,20 @@
             }
         }, false);
 
+        setInterval(function(){
+            if(document.getElementById("manEAN").value != ""){
+                document.getElementById("searchBtn").style.backgroundColor = "color: #555;"
+                    document.getElementById("searchBtn").disabled = false; 
+            }
+        }, 200)
+
         function sendEanConvRequest(){
             curEan = document.getElementById("currentEAN").innerHTML
             curEan = curEan.replace("EAN: ", "")
+            if(curEan == "Waiting for valid EAN..."){
+                curEan = document.getElementById("manEAN").value
+            }
+            console.log(curEan)
             document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><div class=\"lds-grid\"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><br><i>Searching database...</i></center>";
             /*if(curEan[0] == "0"){
                 curEan = curEan.substring(1);