ocr design update

express-server/public/ocrscan/ocrscan.js

@@ -1,14 +1,24 @@
+var id;
+
 $(document).ready(function() {
         //initialize all modals           
         $('.modal').modal();
         $('.materialboxed').materialbox();
 
+        if ($(window).width() > 600) {
+            //large     
+            $(".col").css("height", "100%");
+        }
+        else {
+            //small    
+            $(".col").css("height", "50%");
+        }
+    
+        $("#modal1").modal("open");
+
     $(".btnanalyze").click(function() {
         analyzeUploaded();
     });
-
-
-
     
 //AJAX
 
@@ -24,15 +34,17 @@ var config = {
 
   firebase.initializeApp(config);
 
-function movePurchases() {
+  getAllShoppinglists();
+
+function movePurchases(text) {
     firebase.auth().onAuthStateChanged(function(user){if(user){firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idtoken) {
         $.ajax({
             type: "POST",
             url: "/dones",
             data:{
                 idtoken: idtoken,
-                sl_id: "BplQ5lFU",
-                billcontent: "fsfs"
+                sl_id: id,
+                billcontent: text
             },
             success(result){
               console.log(result);
@@ -45,7 +57,8 @@ function movePurchases() {
 }
 
 $(".test").click(function() {
-    movePurchases();
+    //movePurchases();
+    getAllShoppinglists();
 });
 
 function analyzeUploaded() {
@@ -60,7 +73,7 @@ function analyzeUploaded() {
         loading = false;
         $(".output").text(result.text);
         $('#modal1').modal("open");
-        movePurchases();
+        movePurchases(result.text);
         $(".determinate").css("width", "0%");
     });
 }
@@ -74,6 +87,36 @@ function updateProgress(percent) {
     
 }
 
+function getAllShoppinglists() {
+    firebase.auth().onAuthStateChanged(function(user){if(user){firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idtoken) {
+        $.ajax({
+            type: "GET",
+            url: "/myshoppinglists",
+            data:{
+                idtoken: idtoken,
+            },
+            success(data){
+                for(let item of data) {
+                    $(".output").append("<a id='" + item.sl_id +"' class='collection-item'>" + item.name + "</a>")
+                }
+              
+            },
+            error(err){
+                console.error("Error: " + err);
+            }
+        });
+    }).catch((error) => console.error("Get id token client error: ", error));}else{console.log("Check Auth error", user)}});
+}
+
+$(document).on("click", ".collection-item", function() {
+    id = $(this).closest("a").attr("id");
+
+    $(".active").removeClass("active");
+
+    $(this).addClass("active");
+});
+
+
 });
 
 var loading = false;

express-server/public/ocrscan/style.css

@@ -1,36 +1,35 @@
-html, body {
-    height: 100%;
-    margin: 0;
-    background-color: #90caf9;
-  }
-
-#video {
-    width: 100%;
-}
-
-#canvas {
-    width: 100%;
-}
-
-.cont {
-    margin-top: 3%;
-    height: 100%;
-    border-radius: 30px;
-    background-color: rgb(44, 44, 44);
-}
-
 .opt1 {
-    background-color: rgb(44, 44, 44);
+    background-color: #ff5722 ;
     height: 100%;
-    border-radius: 30px;
+    max-height: 100%;
 }
 
 .opt2 {
-    background-color: rgb(44, 44, 44);
+    background-color: #03a9f4;
     height: 100%;
-    border-radius: 30px;
+    max-height: 100%;
 }
 
-.blah {
-    
+.row {
+    height: 100%;
+    max-height: 100%;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+.ico {
+    color: white;
+    font-size: 50vmin;
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+}
+
+.collection .collection-item.active {
+    /* background-color: #00c853; */
+
 }