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);
+        console.log(result.text);
-        $('#modal1').modal("open");
         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);
+    run([{y:0}, {y:-100}], $(".r1"))
-    $(".r2").css("display", "block");
+
+    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;
+    transform: translateY(100%);
-    display: none;
+    background-color: #242424;
-    margin-top: 50%;
+}
+
+.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%;
+}

express-server/views/ocrscan.ejs

@@ -44,16 +44,35 @@
             <center><i class="material-icons ico">camera</i></center>
         </div>
     </div>
+
+    <div class="row r2">
+      <div class="container">
+        <div class="file-field input-field">
+          <div class="btn deep-orange darken-1 btn-choose waves-effect waves-light">
+            <span>Choose Image</span>
+            <input type='file' onchange="readURL(this);" />
+          </div>
+          <div class="file-path-wrapper">
+          </div>
+        </div>
+        <center><img id="blah" src="#" alt="your image" /></center>
+      </div>
+    
+      <center><button class="btn waves-effect waves-light deep-orange darken-1 disabled btn-analyze " type="submit" name="action">Continue<i class="material-icons right">send</i></button></center>
+    
+    </div>
+
+
     
 <div class="fixed-action-btn">
-    <a class="btn-floating btn-large red">
+    <a class="btn-floating btn-large red btndash">
       <i class="large material-icons blue-grey darken-4">arrow_back</i>
     </a>
   </div>
         
 
 
-  <!-- Modal Structure -->
+  <!-- Modal Structure PRE -->
   <div id="modal1" class="modal">
     <div class="modal-content">
       <h4>Choose Shoppinglist</h4>
@@ -62,11 +81,36 @@
                 
     </div>
     <div class="modal-footer">
-            <a href="/dash" class="modal-close waves-effect waves-red btn-flat">Return to Dashboard</a>
+            <a class="modal-close waves-effect waves-red btn-flat btndash">Return to Dashboard</a>
       <a href="#!" class="modal-close waves-effect waves-green btn-flat btncont">Continue</a>
     </div>
   </div>
 
+    <!-- Modal Structure IMPORT -->
+    <div id="modal2" class="modal">
+        <div class="modal-content">
+          <h4>Import Image</h4>
+
+          <div class="file-field input-field">
+            <div class="btn">
+              <span>File</span>
+              <input type='file' onchange="readURL(this);" />
+            </div>
+            <div class="file-path-wrapper">
+              <input class="file-path validate" type="text" placeholder="Upload one or more files">
+            </div>
+          </div>
+        <img class="materialboxed" id="blah" src="#" alt="your image" />
+    
+
+                    
+        </div>
+        <div class="modal-footer">
+                <a class="modal-close waves-effect waves-red btn-flat btndash">Return to Dashboard</a>
+          <a href="#!" class="modal-close waves-effect waves-green btn-flat btnanalyze">Remove Items</a>
+        </div>
+      </div>
+
   <script src="/ocrscan/cam.js"></script>
   <script src="/ocrscan/ocrscan.js"></script>
   <script src="/ocrscan/fileuploads.js"></script>