implement image upload gui

ofu_app/ofu_app/settings.py

@@ -23,7 +23,7 @@ SECRET_KEY = '7tm($-7tz!co8762!)ptmj%)80)qa^z0odee*8-!be!i(a!p4j'
 
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
-ALLOWED_HOSTS = ['mg-server.ddns.net', 'localhost', '127.0.0.1', ]
+ALLOWED_HOSTS = ['mg-server.ddns.net', 'localhost', '127.0.0.1', '192.168.100.8']
 
 # Application definition
 

ofu_app/static/css/food/main.css

@@ -1,4 +1,4 @@
-footer{
+footer {
     /*mb equal height in #food-nav*/
     margin-bottom: 60px;
 }
@@ -10,4 +10,21 @@ footer{
     position: fixed;
     width: 100%;
     height: 60px;
+}
+
+.food-name p {
+    margin-bottom: 0;
+}
+
+/** Picture Input **/
+.pic-upload {
+    display: none !important;
+}
+
+.custom-pic-upload {
+    /*border: 1px solid #ccc;*/
+    display: inline-block;
+    /*padding: 6px 12px;*/
+    padding-right: 5px;
+    cursor: pointer;
 }

ofu_app/static/js/food/image_capturing.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', add_img_class, true);
+
+function add_img_class() {
+    console.log($('.food-item'));
+    $('.food-item').each(function () {
+        var food_id = $(this).data('food');
+        console.log("ITEM: " + $(this) + " FOOD-ID: " + food_id);
+        $(this).find('.img').addClass('img-' + food_id);
+        $(this).find('.pic-upload').addClass('img-upload-' + food_id).on('change', function () {
+            readURL(this)
+        });
+    });
+}
+
+function readURL(obj) {
+    var picClass = "img-" + $(obj).attr('class').split(' ')[1].split('-')[2];
+    console.log(picClass);
+    input = $('.' + picClass)[0];
+    var file = input.files[0];
+    console.log(file);
+
+    var reader = new FileReader();
+    reader.onload = function () {
+        document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
+    }
+    if (file) {
+        reader.readAsDataURL(file);
+    } else {
+    }
+}

ofu_app/static/js/food/rating.js

@@ -10,7 +10,7 @@ function rate_init() {
     $('.star').on("mouseenter mouseleave", function () {
         showRating(this);
     }).on("click", function () {
-        console.log('Click')
+        console.log('Click');
         sendRating(this);
     })
 }

ofu_app/templates/food/food_wrapper.jinja

@@ -2,6 +2,7 @@
 {% block js_extra %}
     <script src="{{ static('libs/jquery/jquery-3.2.1.min.js') }}"></script>
     <script src="{{ static('js/food/rating.js') }}"></script>
+    <script src="{{ static('js/food/image_capturing.js') }}"></script>
 {% endblock %}
 {% block css_extra %}
     <link rel="stylesheet" href="{{ static('css/food/main.css') }}">

ofu_app/templates/macros/food_macros.jinja

@@ -34,8 +34,23 @@
     <ul class="border">
         {% for single_food in menu %}
             <li data-food="{{ single_food.id }}" data-rating="{{ single_food.rating }}" class="food-item">
-                <p>{{ single_food.name }}</p>
-                <p class="rating-wrapper"></p>
+                <div class="row">
+                    <div class="food-name col-8"><p>{{ single_food.name }}</p></div>
+                    <div class="image-wrapper col-4"><img src="" class="img-rounded img" alt="Gericht" width="304"
+                                                          height="236"></div>
+                </div>
+                <div class="row">
+                    <div class="rating-wrapper col-6 text-left"></div>
+                    <div class="col-6 text-right">
+                        <label for="pic-upload" class="custom-pic-upload">
+                            <i class="fa fa-camera" aria-hidden="true"></i>
+                        </label>
+                        <div class="pic-input-wrapper">
+                            {# TODO: extract style to external css file #}
+                            <input id="pic-upload" class="pic-upload" type="file" name="photo" id="upload-photo" style="display: none !important;"/>
+                        </div>
+                    </div>
+                </div>
             </li>
         {% endfor %}
     </ul>