add jquery, add login form, add form to add a user with color

coinmanager/coinc/static/coinc/main.js

@@ -0,0 +1,98 @@
+/*
+
+  Copyright (C) 2020 willipink.eu
+  Author Moritz Münch moritzmuench@mailbox.org
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>. */
+
+
+import { Cookie } from './modules/cookie.mjs';
+
+
+$(document).ready(function() {
+
+
+  function render_login(name, color) {
+    // manage user login
+
+    new Cookie('coinc-name', name)
+    $('label#for_select_usernames').html('Wilkommen zurück');
+    render_login_color(color);
+    let option = $('div.username option[value=' + name + ']');
+
+    if (!option) {
+      $('div.username select').append($('<option>', { value: name, html: name }));
+    }
+
+    $('div.username option[value=' + name + ']').attr('selected', 'selected');
+  }
+
+
+  function render_login_color(color) {
+    // manage login colors
+
+    $('div.username').css('background-color', color);
+    new Cookie('coinc-color', color);
+  }
+
+
+  $('div.username select').on('change', function() {
+
+    color = $('div.username option[value=' + this.value + ']').attr('label');
+    render_login(this.value, color);
+  });
+
+
+  $('button#show_add_user').click(function() {
+
+    $('div#modal_add_user').show('fast');
+    $('button#close_modal_add_user').click(function() {
+
+      $('div#modal_add_user').hide('fast'); }); });
+
+
+  $('button#add_user').click(function() {
+
+    let name = $('input#text_user').val();
+    let color = $('input#text_color').val();
+
+    $.ajax({
+      type: 'GET',
+      dataType: 'json',
+      url: 'add/user/' + name + '/color/' + color,
+      success: function(response) {
+
+        if (response.error) {
+          $('span#response').html(response.message);
+          $('span#response').css('color', 'red');
+
+        } else {
+          $('span#response').css('color', 'black');
+          $('div#modal_add_user').hide('fast');
+          $('span#user_message').hide();
+          render_login(name, color);
+        }
+      }
+    });
+  });
+
+
+  let cookie = new Cookie();
+  let name = cookie.get('coinc-name');
+  let color = cookie.get('coinc-color');
+
+  if (name != '') {
+    render_login(name, color);
+  }
+});

coinmanager/coinc/static/coinc/modules/cookie.mjs

@@ -0,0 +1,70 @@
+/*
+
+  Copyright (C) 2020 willipink.eu
+  Author Moritz Münch moritzmuench@mailbox.org
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>. */
+
+
+class Cookie {
+
+  constructor(cookie_name='', value='', expire_days=365, path='/') {
+    // create a new cookie if cookie_name and value are set
+
+    if (cookie_name !== '' && value !== '') {
+      this.set(cookie_name, value, expire_days, path)
+    }
+  }
+
+
+  set(name, value, expire_days=365, path='/') {
+    // save a cookie
+
+    let date = new Date();
+    date.setTime(date.getTime() + (expire_days * 24 * 60 * 60 * 1000));
+    let expires = 'expires=' + date.toUTCString();
+    document.cookie = name + '=' + value + ';' + expires + ';path=' + path;
+  }
+
+
+  get(cookie_name) {
+    // return a cookie
+
+    let name = cookie_name + '=';
+    let cookies = document.cookie.split(';');
+
+    for (let i = 0; i < cookies.length; i++) {
+      let cookie = cookies[i];
+
+      while (cookie.charAt(0) == ' ') {
+        cookie = cookie.substring(1);
+      }
+
+      if (cookie.indexOf(name) == 0) {
+        return cookie.substring(name.length, cookie.length);
+      }
+    }
+
+    return ''
+  }
+
+
+  delete(name) {
+    // deleta a cookie
+
+    this.set(name, '', -1)
+  }
+}
+
+export { Cookie };

coinmanager/coinc/static/coinc/styles.css

@@ -22,10 +22,6 @@ html, table, tr, td, div {
   padding: 0;
 }
 
-body {
-  margin: 5px;
-}
-
 a, a:hover, a:active, a:visited {
   text-decoration: none;
   color: black !important;
@@ -170,3 +166,39 @@ div.found {
 div.Moritz {
   background-color: red;
 }
+
+div.username {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 70px;
+  background-color:red;
+  line-height: 70px;
+  text-align: center;
+  z-index: 1;
+}
+
+div#username {
+  display: none;
+}
+
+.form-control {
+  display: inline-block !important;
+  width: auto;
+}
+
+.modal-container {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.hide { display: none; }

coinmanager/coinc/templates/coinc/country.html

@@ -1,9 +1,13 @@
-{% include "header.html" with title=country.name %}    <table>
+{% if single_country %}
+	{% include 'header.html' with title=country.name %}
+	{% include 'coinc/username.html' with users=users %}
+{% endif %}
+    <table>
       <thead>
         <tr>
           <th colspan="12">
             <a name="{{ country.name_iso }}"></a>
-            <img class="country" src="/static/coinc/images/{{ country.name_iso}}.png" />
+            <img class="country" src="/static/coinc/images/{{ country.name_iso }}.png" />
             <a href="{% url 'coinc:country' country.name_iso %}">{{ country.name }}</a>{% if country.comment %} - {{ country.comment }}{% endif %}
           </th>
         </tr>
@@ -25,4 +29,6 @@
       <tbody>
 {% for year in country.years %}{% show_year country year %}{% endfor %}      </tbody>
     </table>
-{% include "footer.html" %}
+{% if single_country %}
+	{% include "footer.html" with title="Münzsammlung" %}
+{% endif %}

coinmanager/coinc/templates/coinc/index.html

@@ -1,4 +1,11 @@
-{% include "header.html" with title="Münzsammlung" %}
+{% if not showed_header %}
+	{% include "header.html" with title="Münzsammlung" %}
+	{% url 'bar.html' as showed_header %}
+{% endif %}
+{% if not showed_usernames %}
+	{% include 'coinc/username.html' with users=users %}
+	{% url 'foo.html' as showed_usernames %}
+{% endif %}
     {% if countrys %}
       {% show_navigation countrys %}
       {% for country in countrys %}
@@ -6,4 +13,7 @@
       {% endfor %}
     {% else %}
     <p>Trage zuerst Länder im Adminbereich ein.</p>{% endif %}
-    {% include "footer.html" %}
+{% if not showed_footer %}
+	{% include "footer.html" with title="Münzsammlung" %}
+	{% url 'baz.html' as showed_footer %}
+{% endif %}

coinmanager/coinc/templates/coinc/username.html

@@ -0,0 +1,36 @@
+<div class="username">
+  <label for="select_usernames" id="for_select_usernames">Dein Name</label>
+  <select id="select_usernames" name="username" form="username_form" class="form-control">
+  {% for user in users %}
+    <option value="{{ user.name }}" label="{{ user.color }}">{{ user.name }}</option>
+  {% endfor %}
+  </select>
+  <span id="user_message">&nbsp;Nicht dabei? <button id="show_add_user" class="btn btn-primary">Namen hinzufügen</button></span>
+</div>
+
+<div id="modal_add_user" class="modal-container">
+<div class="modal-dialog" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">Nutzer hinzufügen</h5>
+      <button id="close_modal_add_user" type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="text_user">Name</label>
+        <input type="text" name="user" id="text_user" class="form-control" />
+      </div>
+      <div class="form-group">
+        <label for="text_color">Farbe</label>
+        <input type="text" name="color" id="text_color" class="form-control" />
+      </div>
+    </div>
+    <div class="modal-footer">
+      <span id="response"></span>
+      <button type="button" id="add_user" class="btn btn-primary">+ Name hinzufügen</button>
+    </div>
+  </div>
+</div>
+</div>

coinmanager/coinc/templates/header.html

@@ -23,6 +23,8 @@
     <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>
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/bootstrap.min.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/styles.css' %}">
   </head>

coinmanager/coinc/urls.py

@@ -28,4 +28,5 @@ urlpatterns = [
     path('', views.IndexView.as_view(), name='index'),
     path('statistik', views.statistic, name='statistic'),
     path('<str:country>', views.detail_country, name='country'),
+    path('add/user/<str:username>/color/<str:color>', views.add_user, name='add_user')
 ]

coinmanager/coinc/views.py

@@ -24,8 +24,9 @@ from django.http import HttpResponse
 from django.template import loader
 from django.template.defaultfilters import register
 from django.views import generic
+from django.shortcuts import redirect
 
-from .models import Country, Stamp, Coin
+from .models import Country, Stamp, Coin, User
 
 
 
@@ -42,7 +43,7 @@ class IndexView(generic.ListView):
 def detail_country(request, country):
     template = loader.get_template('coinc/country.html')
     c = Country.objects.get(name_iso=country)
-    return HttpResponse(template.render(show_country(c), request))
+    return HttpResponse(template.render(show_country(c, single_country=True), request))
 
 
 
@@ -53,7 +54,7 @@ def show_navigation(countrys):
 
 
 @register.inclusion_tag('coinc/country.html')
-def show_country(country):
+def show_country(country, single_country=False):
     c = {
         'name_iso': country.name_iso,
         'name': country.name,
@@ -103,7 +104,11 @@ def show_country(country):
 
         stamps_per_year = {}
 
-    return {'country': c}
+    return {
+        'country': c,
+        'single_country': single_country,
+        'users': User.objects.order_by('name').values('name','color')
+    }
 
 
 
@@ -165,6 +170,27 @@ def show_coin(country, year, stamp, value):
     }
 
 
+def add_user(request, username, color):
+    ''' add a user '''
+    error = False
+    message = ''
+
+    if username and color:
+        try:
+            existing_user = User.objects.get(name=username)
+            error = True
+            message = f"'{username}' ist schon vergeben."
+
+        except User.DoesNotExist:
+#             u = User(name=username, color=color)
+#             u.save()
+            message = f"Gespeichert"
+    else:
+        error = True
+        message = 'Du musst einen Namen und Farbe angeben.'
+    import json
+    return HttpResponse(json.dumps({ 'error': error, 'message': message }))
+
 
 # TODO
 def statistic(request):