From e4bb2d661671ce8ef08c0e525a6e296d1fc01f10 Mon Sep 17 00:00:00 2001
From: Davide Bongiovanni <davidebo@kth.se>
Date: Mon, 5 Jun 2017 00:34:24 +0200
Subject: [PATCH] Added overlay with in and out animation

---
 static/script.js          | 31 +++++++++++++++++++++++++++++--
 static/style.css          | 28 ++++++++++++++++++++++++++++
 templates/partsearch.html | 15 ++++++++++++++-
 3 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/static/script.js b/static/script.js
index 0b31957..b73b61a 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,3 +1,19 @@
+function overlay_in() {
+	$('.shadow').css({'display' : 'block'});
+	$('.overlay').css({'display' : 'block'});
+	$('.shadow').animate({'opacity' : 0.7});
+	$('.overlay').animate({'top' : '10%'});
+}
+
+function overlay_out() {
+	$('.shadow').animate({'opacity' : 0.0}, function () {
+		$('.overlay').css({'display' : 'none'});
+	});
+	$('.overlay').animate({'top' : '-70%'}, function () {
+		$('.shadow').css({'display' : 'none'});
+	});
+}
+
 $(document).ready(function() {
     $('.search-bar').on('keyup', function() {
         var query = $('.search-bar').val();
@@ -13,7 +29,8 @@ $(document).ready(function() {
         $.getJSON('http://127.0.0.1:5000/query/' + filter  + '/' + query, function(data) {
             var newResults = '<div class="results">';
             for(var i = 0; i < data.length; i++) { // Create new view for results
-              newResults += '<div class="results-row">';
+              newResults += '<div class="results-row" part-id="' + data[i].id + '">';
+              newResults += '<a href=#>'
 
               newResults += '<div class="results-block">';
               if (data[i].block != null)
@@ -45,12 +62,22 @@ $(document).ready(function() {
               if (data[i].datasheet != null)
                 newResults += '<a href="http://127.0.0.1:5000/getfile/' + data[i].datasheet + '"><i class="fa fa-file-text" aria-hidden="true"></i></a>';
               newResults += '</div>';
+              newResults += '</a>'
               newResults += '</div>';
             }
             newResults += '</div>';
             $('.results').replaceWith(newResults);
         }).fail(function() {
-          console.log( "failed" );
+          console.log( "Query failed" );
         });
     });
+
+    $('.results-row').on('click', function() {
+      var partID = $(this).attr('part-id');
+      $.getJSON('http://127.0.0.1:5000/getpartinfo/' + partID, function(data) {
+        // TODO: Fill stuff with the fetched info
+      }).fail(function() {
+        console.log( "Fetching part info failed" );
+      });
+    });
 });
diff --git a/static/style.css b/static/style.css
index 20ab81f..184f74c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -67,6 +67,7 @@ input[type=checkbox] + label.toggle-btn {
   margin-right: 3pt;
   width: 100pt;
   text-align: center;
+  border: 1pt solid #D7E2E2;
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
@@ -188,3 +189,30 @@ div label input {
     border-style: solid;
     border-color: transparent transparent transparent black;
 }
+
+.shadow {
+	background-color: black;
+	display: none;
+	height: 100%;
+	left: 0;
+	opacity: 0.0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	z-index: 200;
+}
+
+.overlay {
+	background-color: #226666;
+	color: #D7E2E2;
+	display: none;
+	height: 70%;
+	left: 20%;
+	padding: 8pt;
+	position: absolute; /*Should probably be 'fixed' instead*/
+	top: -70%;
+	width: 60%;
+	z-index: 201;
+	border-radius: 2pt;
+	text-align: center;
+}
diff --git a/templates/partsearch.html b/templates/partsearch.html
index 7beaf5f..91ffd37 100644
--- a/templates/partsearch.html
+++ b/templates/partsearch.html
@@ -31,6 +31,19 @@
     <div class="res-header-3">Description</div>
     <div class="res-header-small">Notes</div>
     <div class="res-header-small">Docs</div>
-    <div class="results"></div>
+    <div class="results">
+    </div>
+
+    <div class="shadow" onclick="overlay_out()"></div>
+  	<div class="overlay">
+  		<!--<h2 class="card-id"></h2>
+  		<input type="text" name="name" placeholder="Name" id="name"><br><br>
+  		<div class="checkbox-wrapper">
+  		&emsp;<input type="checkbox" name="fridge" value="Fridge" id="fridge"> Fridge <br>
+  		&emsp;<input type="checkbox" name="tools" value="Tools" id="tools"> Secret tools
+  		</div>
+  		<input type="button" class="button" value="Cancel" id="cancel" onclick="overlay_out()">
+  		<input type="button" class="button" value="Save" id="save" onclick="save()">-->
+  	</div>
   </body>
 </html>