add jquery-ui, add datepicker, kind of finish first version of controlbar

coinmanager/coinc/static/coinc/main.js

@@ -27,12 +27,14 @@ $(document).ready(function() {
   //
 
   let settings = {
-    circulation: '',
+    found:        true,
-    found_now: true,
+    found_by:     '',
-    found:     true,
+    found_on:     '',
-    buy_only:  false,
+    circulation:  '',
-    checked:   false,
+    buy_only:     false,
-    ec:        false
+    checked:      false,
+    ec:           false,
+    exists:       true
   }
 
   // button #advanced_options
@@ -47,7 +49,7 @@ $(document).ready(function() {
 
       // save settings
       settings['circulation'] = $('#circulation').val();
-      let checkboxes = $('#found_now, #found, #datetime_now, #buy_only, #checked, #ec')
+      let checkboxes = $('#found_now, #found, #buy_only, #checked, #ec')
         .map(function() {
           return {
             [$(this).prop('id')]: $(this).prop('checked')
@@ -62,7 +64,7 @@ $(document).ready(function() {
       $('#found, #buy_only, #checked, #ec').each(function() {
         $(this).prop('checked', false);
       });
-      $('#found, #select_usernames, #datetime_now, #datetime_custom, #circulation, #buy_only, #checked, #ec').each(function() {
+      $('#found, #select_usernames, #circulation, #buy_only, #checked, #ec').each(function() {
         $(this).prop('disabled', 'disabled');
       });
 
@@ -71,19 +73,27 @@ $(document).ready(function() {
 
       // restore settings
       $('#circulation').val(settings['circulation']);
-      $('#found_now, #found, #datetime_now, #buy_only, #checked, #ec').each(function() {
+      $('#found_now, #found, #buy_only, #checked, #ec').each(function() {
         let setting = $(this).prop('id');
         $(this).prop('checked', settings[setting]);
       });
 
       // enable settings
-      $('#found, #select_usernames, #datetime_now, #datetime_custom, #circulation, #buy_only, #checked, #ec').each(function() {
+      $('#found, #select_usernames, #circulation, #buy_only, #checked, #ec').each(function() {
         $(this).prop('disabled', '');
       });
 
     }
   });
 
+
+  // datepicker TODO make it nicer
+  $.datepicker.setDefaults( $.datepicker.regional['de'] );
+  $('input[name=datetime]').datepicker({
+    defaultDate: new Date(),
+    dateFormat: 'dd.mm.yy'
+  });
+
   function render_login(input_name, input_color) {
     // manage user login
 
@@ -92,14 +102,14 @@ $(document).ready(function() {
     new Cookie('coinc-name', name)
 
     render_login_color(color);
-    let option = $('div.username option[value=' + name + ']');
+    let option = $('div#controlbar option[value=' + name + ']');
     if (option.length == 0) {
-      $('div.username select').append($('<option>', {
+      $('div#controlbar select').append($('<option>', {
         value: name, color: color, html: name
       }));
     }
 
-    $('div.username option[value=' + name + ']').attr('selected', 'selected');
+    $('div#controlbar option[value=' + name + ']').attr('selected', 'selected');
   }
 
 
@@ -107,7 +117,7 @@ $(document).ready(function() {
     // manage login colors
 
     new Cookie('coinc-color', color);
-    $('div.username').css('background-color', color);
+    $('div#controlbar').css('background-color', color);
   }
 
 
@@ -117,9 +127,9 @@ $(document).ready(function() {
 
 
   // select username on change
-  $('div.username select').on('change', function() {
+  $('div#controlbar select').on('change', function() {
-    let color = $('div.username option[value=' + this.value + ']').attr('color');
+    let color = $('div#controlbar option[value=' + this.value + ']').attr('color');
-    $('div.username option[selected=selected]').removeAttr('selected');
+    $('div#controlbar option[selected=selected]').removeAttr('selected');
     render_login(this.value, color);
   });
 
@@ -181,14 +191,5 @@ $(document).ready(function() {
     render_login(name, color);
   } else {
   //#TODO log in as default if any
-   // let option = $('div.username option[value=' + name + ']');
-   // if (option.length == 0) {
-   //   $('div.username select').append($('<option>', {
-   //     value: name, label: color, html: name
-   //   }));
- //   }
-
- //   $('div.username option[value=' + name + ']').attr('selected', 'selected');
-
   }
 });

coinmanager/coinc/static/coinc/styles.css

@@ -170,22 +170,6 @@ div.found {
   clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
 }
 
-div.username {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 70px;
-  line-height: 70px;
-  background-color: white;
-  text-align: center;
-  z-index: 1;
-}
-
-div#username {
-  display: none;
-}
-
 .form-control {
   display: inline-block !important;
   width: auto;
@@ -204,18 +188,31 @@ div#username {
   background-color: rgba(0,0,0,0.4);
 }
 
+div#controlbar {
+  padding: 8px;
+  bottom: 0;
+  height: 52px;
+}
+
+div#controlbar, div#advanced_options {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  text-align: center;
+  z-index: 1;
+}
+
 div#advanced_options {
   border-top: 1px solid gray;
   position: fixed;
   left: 0;
-  bottom: 70px;
+  bottom: 52px;
   width: 100%;
-  height: 70px;
-  /*line-height: 70px;*/
   background-color: white;
   text-align: center;
   z-index: 1;
-  /*display: none;*/
+  display: none;
 }
 
 div#advanced_options > label {
@@ -224,6 +221,6 @@ div#advanced_options > label {
   margin: 0;
 }
 
-input#circulation {
+input#circulation, input#datetime {
   width: 100px;
 }

coinmanager/coinc/templates/coinc/controlbar.html

@@ -1,4 +1,4 @@
-<div id="advanced_options">
+<div id="advanced_options" class="fixed-bottom">
   <label for="circulation">
     <input id="circulation" type="text" value="Auflage">
   </label>
@@ -18,9 +18,10 @@
     <input id="exists" type="checkbox">
     Existiert nicht
   </label>
-
 </div>
-<div class="username">
+
+
+<div id="controlbar" class="fixed-bottom">
   <label for="found" id="found_label">
     <input id="found" type="checkbox" checked="checked">
   </label>
@@ -31,19 +32,14 @@
     {% endfor %}
     </select>
   </label>
-
+  <label for="datetime">
-  <label for="datetime_now">
+    <input type="text" name="datetime" id="datetime" value="{% now 'd.m.Y' %}">
-    <input type="radio" name="datetime" id="datetime_now" checked="checked">
-    jetzt
-  </label>
-  <label for="datetime_custom">
-    <input type="radio" name="datetime" id="datetime_custom">
-    Datum
   </label>
   <button id="show_advanced_options" class="btn btn-info">+ Mehr</button>
   <button id="show_add_user" class="btn btn-info">+ Name</button>
 </div>
 
+
 <div id="modal_add_user" class="modal-container">
 <div class="modal-dialog" role="document">
   <div class="modal-content">

coinmanager/coinc/templates/coinc/country.html

@@ -1,6 +1,6 @@
 {% if single_country %}
 	{% include 'header.html' with title=country.name %}
-	{% include 'coinc/username.html' with users=users %}
+	{% include 'coinc/controlbar.html' with users=users %}
 {% endif %}
     <table>
       <thead>

coinmanager/coinc/templates/coinc/index.html

@@ -1,5 +1,5 @@
 {% include 'header.html' with title='Münzsammlung' %}
-{% include 'coinc/username.html' with users=users %}
+{% include 'coinc/controlbar.html' with users=users %}
     {% if countrys %}
       {% include 'coinc/filter_country.html' with countrys=countrys %}
       {% for country in countrys %}

coinmanager/coinc/templates/footer.html

@@ -1,2 +1,3 @@
+    </div>
   </body>
 </html>

coinmanager/coinc/templates/header.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <!--
 
+  coinc - a simple coinmanager
+
   Copyright (C) 2020 willipink.eu
   Author Moritz Münch moritzmuench@mailbox.org
 
@@ -23,9 +25,12 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ title }}</title> {% load static %}
-    <script src="{% static 'coinc/main.js' %}" type="module"></script>
     <script src="{% static 'coinc/jquery.min.js' %}" type="text/javascript"></script>
+    <script src="{% static 'coinc/jquery-ui.min.js' %}" type="text/javascript"></script>
+    <script src="{% static 'coinc/main.js' %}" type="module"></script>
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/bootstrap.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'coinc/jquery-ui.min.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/styles.css' %}">
   </head>
   <body>
+    <div class="container-fluid">