OCR Scan Design (fast) fertig und funktioniert

express-server/public/ocrscan/fileuploads.js

@@ -4,9 +4,11 @@ function readURL(input) {
 
         reader.onload = function (e) {
             $('#blah')
-                .attr('src', e.target.result).attr('width', "650px")
+                .attr('src', e.target.result).css('height', "80vmin")
         };
 
+        $(".btn-analyze").removeClass("disabled");
+
         reader.readAsDataURL(input.files[0]);
     }
 }

express-server/public/ocrscan/ocrscan.js

@@ -23,7 +23,7 @@ $(document).ready(function() {
     
         $("#modal1").modal("open");
 
-    $(".btnanalyze").click(function() {
+    $(".btn-analyze").click(function() {
         analyzeUploaded();
     });
     
@@ -55,6 +55,7 @@ function movePurchases(text) {
             },
             success(result){
               console.log(result);
+              alert("Done");
             },
             error(err){
                 console.error("Error: " + err);
@@ -68,6 +69,12 @@ $(".test").click(function() {
     getAllShoppinglists();
 });
 
+$(document).on("click", ".btndash", function() {
+    firebase.auth().onAuthStateChanged(function(user){if(user){firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idtoken) {
+      window.location.href = "/dash/" + idtoken
+    }).catch((error) => console.error("Get id token client error: ", error));}else{console.log("Check Auth error", user)}});
+});
+
 function analyzeUploaded() {
     var img = document.getElementById("blah");
 
@@ -78,8 +85,7 @@ function analyzeUploaded() {
         }
     }).then((result) => {
         loading = false;
-        $(".output").text(result.text);
-        $('#modal1').modal("open");
+        console.log(result.text);
         movePurchases(result.text);
         $(".determinate").css("width", "0%");
     });
@@ -124,12 +130,28 @@ $(document).on("click", ".collection-item", function() {
 });
 
 $(".btncont").click(function() {
-    $('.r1').animate({'margin-top': '0'}, 1000);
+    run([{y:100}, {y:0}], $(".r1"));
 });
 
+function run(v, elem){
+    //Reverse the array
+    var reversed = JSON.parse(JSON.stringify(v)).reverse();
+  
+    $(v[0]).animate(v[1], {
+        //The speed the element moves - lower is faster
+        duration: 500,
+        step: function(val) {
+            //Adding the transform to your element
+            elem.css("transform", `translateY(${val}%)`); 
+        }
+    })
+  };
+
 $(".opt1").click(function() {
-    $('.r1').animate({'margin-top': '-100%'}, 1000);
-    $(".r2").css("display", "block");
+    run([{y:0}, {y:-100}], $(".r1"))
+
+    run([{y:0}, {y:-100}], $(".r2"));
+    //$("#modal2").modal("open");
 });
 
 $(".opt2").click(function() {

express-server/public/ocrscan/style.css

@@ -23,15 +23,24 @@
 .r1 {
     height: 100%;
     max-height: 100%;
-    margin-top: 100%;
+    transform: translateY(100%);
 }
 
 .r2 {
     height: 100%;
     max-height: 100%;
-    background-color: forestgreen;
-    display: none;
-    margin-top: 50%;
+    transform: translateY(100%);
+    background-color: #242424;
+}
+
+.row {
+    margin-bottom: 0px !important;
+    margin-top: 0px !important;
+}
+
+.container {
+    margin-bottom: 0px !important;
+    margin-top: 0px !important;
 }
 
 html, body {
@@ -39,7 +48,7 @@ html, body {
     margin: 0;
     max-height: 100%;
     overflow: hidden;
-    background-color: #161616;
+    background-color: #242424;
   }
 
 .ico {
@@ -51,5 +60,15 @@ html, body {
 
 .collection .collection-item.active {
     /* background-color: #00c853; */
-
+    background-color: rgb(0, 195, 255);
+    color: rgb(24, 24, 24);
 }
+
+.collection-item {
+    /* background-color: #00c853; */
+    color: rgb(24, 24, 24) !important;
+}
+
+.btn-choose {
+    width: 100%;
+}