finish: add/manage users

coinmanager/coinc/static/coinc/main.js

@@ -23,16 +23,19 @@ import { Cookie } from './modules/cookie.mjs';
 $(document).ready(function() {
 
 
-  function render_login(name, color) {
+  function render_login(input_name, input_color) {
     // manage user login
 
+    let color = decodeURIComponent(input_color);
+    let name = decodeURIComponent(input_name);
     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.length == 0) {
-    if (!option) {
+      $('div.username select').append($('<option>', {
-      $('div.username select').append($('<option>', { value: name, html: name }));
+        value: name, label: color, html: name
+      }));
     }
 
     $('div.username option[value=' + name + ']').attr('selected', 'selected');
@@ -42,8 +45,13 @@ $(document).ready(function() {
   function render_login_color(color) {
     // manage login colors
 
-    $('div.username').css('background-color', color);
     new Cookie('coinc-color', color);
+    $('div.username').css('background-color', color);
+  }
+
+
+  function hide_modal() {
+    $('div#modal_add_user').fadeOut('fast');
   }
 
 
@@ -55,38 +63,53 @@ $(document).ready(function() {
 
 
   $('button#show_add_user').click(function() {
+    $('div#modal_add_user').fadeIn('fast');
 
-    $('div#modal_add_user').show('fast');
+    $(document).on('click', function(event) {
-    $('button#close_modal_add_user').click(function() {
+      if ($('div#modal_add_user').is(':visible')) {
-
+        let target = $(event.target);
-      $('div#modal_add_user').hide('fast'); }); });
+        if (target.attr('id') === 'modal_add_user') {
-
+          hide_modal();
-
-  $('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);
         }
       }
     });
-  });
 
+    $(document).keypress(function(event) {
+      if (event.keyCode == 27) { // ESC is pressed
+        hide_modal();
+        $(document).off('keypress');
+      }
+    });
+
+    $('button#close_modal_add_user').click(function() {
+      hide_modal();
+    });
+
+    $('button#add_user').click(function() {
+
+      let name = encodeURIComponent($('input#text_user').val());
+      let color = encodeURIComponent($('input#text_color').val());
+
+      $.ajax({
+        type: 'GET',
+        dataType: 'json',
+        url: 'add/user/' + name + '/color/' + color,
+        success: function(response) {
+
+          if (response.status === 0) {
+            $('span#response').fadeOut('fast');
+            hide_modal();
+            render_login(name, color);
+
+          } else {
+            $('span#response').html(response.message);
+            $('span#response').css('color', 'red');
+          }
+        }
+      });
+    });
+
+  });
 
   let cookie = new Cookie();
   let name = cookie.get('coinc-name');

coinmanager/coinc/static/coinc/styles.css

@@ -173,7 +173,6 @@ div.username {
   bottom: 0;
   width: 100%;
   height: 70px;
-  background-color:red;
   line-height: 70px;
   text-align: center;
   z-index: 1;

coinmanager/coinc/templates/coinc/username.html

@@ -1,18 +1,18 @@
 <div class="username">
-  <label for="select_usernames" id="for_select_usernames">Dein Name</label>
+  <label for="select_usernames" id="for_select_usernames">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>
+  <span id="user_message"><button id="show_add_user" class="btn btn-info">+ 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>
+      <h5 class="modal-title">Name 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>

coinmanager/coinc/views.py

@@ -18,6 +18,7 @@
 
 
 
+from json import dumps
 from datetime import datetime
 
 from django.http import HttpResponse
@@ -107,7 +108,7 @@ def show_country(country, single_country=False):
     return {
         'country': c,
         'single_country': single_country,
-        'users': User.objects.order_by('name').values('name','color')
+        'users': User.objects.order_by('id').values('name','color')
     }
 
 
@@ -172,24 +173,23 @@ def show_coin(country, year, stamp, value):
 
 def add_user(request, username, color):
     ''' add a user '''
-    error = False
+    status = 0
     message = ''
 
     if username and color:
         try:
             existing_user = User.objects.get(name=username)
-            error = True
+            status = 1
             message = f"'{username}' ist schon vergeben."
 
         except User.DoesNotExist:
-#             u = User(name=username, color=color)
+            User.objects.create(name=username, color=color)
-#             u.save()
+            message = 'success'
-            message = f"Gespeichert"
     else:
-        error = True
+        status = 1
         message = 'Du musst einen Namen und Farbe angeben.'
-    import json
+
-    return HttpResponse(json.dumps({ 'error': error, 'message': message }))
+    return HttpResponse(dumps({ 'status': status, 'message': message }))
 
 
 # TODO