From 4697018a6e73a45d1675d861274b4d00d4e3edc5 Mon Sep 17 00:00:00 2001
From: christian <christian@flavigny.de>
Date: Sun, 27 Oct 2019 09:10:37 +0100
Subject: [PATCH] stuff

---
 mobile/static/mobile/base.css        | 18 +++++++++++
 mobile/templates/mobile/base.html    |  4 +--
 mobile/templates/mobile/index.html   | 11 ++++---
 mobile/templates/mobile/scan.html    | 45 ++++++++++++++++++++++++++--
 mobile/templates/mobile/scan2.html   | 24 +++++++++++++++
 mobile/templates/mobile/scanned.html |  2 +-
 mobile/views.py                      |  3 +-
 7 files changed, 96 insertions(+), 11 deletions(-)
 create mode 100644 mobile/templates/mobile/scan2.html
diff --git a/mobile/static/mobile/base.css b/mobile/static/mobile/base.css
index ffd91fb..16957d4 100644
--- a/mobile/static/mobile/base.css
+++ b/mobile/static/mobile/base.css
@@ -107,3 +107,21 @@ body,html{
     right: 50px;
     top: 24px;
 }
+
+.hidden {
+    display: none;
+}
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/mobile/templates/mobile/base.html b/mobile/templates/mobile/base.html
index f5481fe..70359b1 100644
--- a/mobile/templates/mobile/base.html
+++ b/mobile/templates/mobile/base.html
@@ -22,7 +22,7 @@
         <div id='heading'>
             <div class='inner'>
                 <img src='{% static 'favicon.ico' %}' />
-                <h1 id='title'>Bloom up your city</h1>
+                <h1 id='title'>Bloom up your region</h1>
 
             </div>
         </div>
@@ -36,7 +36,7 @@
 
     <!-- FOOTER -->
     <div id='footer'>
-        <p class='left'>Bloom Hunting - a Ökostadt Heidelberg initiative</p>
+        <p class='left'>Bloom Hunting</p>
         <p>A Climathon Heidelberg project</p>
     </div>
 </body>
diff --git a/mobile/templates/mobile/index.html b/mobile/templates/mobile/index.html
index b99b005..6913a36 100644
--- a/mobile/templates/mobile/index.html
+++ b/mobile/templates/mobile/index.html
@@ -2,18 +2,21 @@
 
 {% block content %}
 <body>
-<h1>Bloomhunt</h1>
+<h1>Bloom Hunt</h1>
 
-<p>Hunt blooming trees in your area.</p>
+<p>Be the <b>first</b> that scans a blooming tree in your neighborhood.</p>
 
 <a class="btn btn-default" id="btn_scan" href="{% url 'mobile:scan' %}">Scan a blooming tree</a>
 
-<p></p>
+<p></p><br>
 
+<h3>Shortly blooming species</h3>
 <p>Especially look for the following trees, they are likely to bloom
 soon:</p>
+<ul>
 {% for tree in prediction %}
-{{ tree }}<br>
+<li>{{ tree }}</li>
 {% endfor %}
+</ul>
 
 {% endblock %}
diff --git a/mobile/templates/mobile/scan.html b/mobile/templates/mobile/scan.html
index 8c05043..acad262 100644
--- a/mobile/templates/mobile/scan.html
+++ b/mobile/templates/mobile/scan.html
@@ -1,14 +1,53 @@
 {% extends "mobile/base.html" %}
 
 {% block content %}
+
+<script>
+
+function identify() {
+    var loader = document.getElementById("loader");
+    var question_p = document.getElementById("question_p");
+    var options_p = document.getElementById("options_p");
+    var image_in = document.getElementById("image_in");
+    var btn_identify = document.getElementById("btn_identify");
+    var p_result = document.getElementById("identification_result");
+    var p_upload = document.getElementById("p_upload");
+    var p_help = document.getElementById("p_help");
+    btn_identify.classList.toggle("hidden");
+    image_in.classList.toggle("hidden");
+    loader.classList.toggle("hidden");
+    p_upload.classList.toggle("hidden");
+    setTimeout(function () {
+            question_p.classList.toggle("hidden");
+            options_p.classList.toggle("hidden");
+            loader.classList.toggle("hidden");
+            p_result.classList.toggle("hidden");
+            p_help.classList.toggle("hidden");
+        }, 2000);
+}
+
+</script>
+
 <h1>Scan a blooming tree!</h1>
 
-<p>We will help you identifying the tree you are hunting.</p>
+<p id="p_help">We will help you identifying the tree you are hunting.</p>
+
+<p id="p_upload">Just upload a picture of your tree<p>
 
-<p>{{ question.text }}</p>
+<input id="image_in" type="file" accept="image/*" capture="camera" />
 
-<table>
+<button id="btn_identify" class="btn btn-default" onclick="identify()">Identify the tree</button>
+
+<div id="loader" class="loader hidden"></div> 
+
+<p id="identification_result" class="hidden">We were able to identify your tree as a <b>Apple
+    Tree</b>. We need only some further questions to identify the exact species</p>
+
+<p id="question_p" class="hidden">{{ question.text }}</p>
+
+<table id="options_p" class="hidden">
     <tr>
+
 {% for option in question.options %}
 <td width=30%>
 <form action="" method="post">
diff --git a/mobile/templates/mobile/scan2.html b/mobile/templates/mobile/scan2.html
new file mode 100644
index 0000000..9655221
--- /dev/null
+++ b/mobile/templates/mobile/scan2.html
@@ -0,0 +1,24 @@
+{% extends "mobile/base.html" %}
+
+{% block content %}
+
+<h1>Scan a blooming tree!</h1>
+
+<p id="question_p" class="">{{ question.text }}</p>
+
+<table id="options_p" class="">
+    <tr>
+
+{% for option in question.options %}
+<td width=30%>
+<form action="" method="post">
+    {% csrf_token %}
+    <input name="question" type="hidden" value="{{ question.key }}">
+    <input name="chosen_option" class="btn btn-default" type="submit" value="{{ option.text }}">
+</form>
+</td>
+{% endfor %}
+    </tr>
+</table>
+
+{% endblock %}
diff --git a/mobile/templates/mobile/scanned.html b/mobile/templates/mobile/scanned.html
index c4a11a0..ace4ccb 100644
--- a/mobile/templates/mobile/scanned.html
+++ b/mobile/templates/mobile/scanned.html
@@ -3,7 +3,7 @@
 {% block content %}
 
 <p>Congratulions, you are the first to report that this <b>{{ tree.name }}</b>
-tree is blooming.<p>
+is blooming.<p>
 
 <p>You may give it a name now</p>
 
diff --git a/mobile/views.py b/mobile/views.py
index 6f82ff1..9d3a472 100644
--- a/mobile/views.py
+++ b/mobile/views.py
@@ -33,7 +33,8 @@ def scan(request):
                         continue
                     if opt.question:
                         question = opt.question
-                        break
+                        context = {'question': question}
+                        return render(request, 'mobile/scan2.html', context)
                     else:
                         return scanned(request, opt.result)
     # first question
