#30: auto fill special coin name if it already exists

coinmanager/coinc/static/coinc/main.js

@@ -267,11 +267,13 @@ $(document).ready(function() {
 
                 let args = {
                     data: data,
-                    td:   this
+                    td:   this }
-                }
+
+                let name = $(this).find('div.special_name').html();
+                let input = (name) ? {name: name} : null
 
                 if ([201, 202, 203].includes(value) && data['exists']) {
-                    let modal = new Modal('add_coin_name', add_coin_name, args);
+                    let modal = new Modal('add_coin_name', add_coin_name, args, input);
                     modal.show();
                 } else {
                     add_coin_name(args);
@@ -381,8 +383,7 @@ $(document).ready(function() {
 
     // modal #add_user
     $('#show_add_user').click(function() {
-        let args = '';
+        let modal = new Modal('add_user', add_user);
-        let modal = new Modal('add_user', add_user, args);
         modal.show();
 
         function add_user(args='', response='') {

coinmanager/coinc/static/coinc/modules/modal.mjs

@@ -21,15 +21,26 @@
 /* create a modal dialog */
 class Modal {
 
-    constructor(modal, callback, callback_arguments) {
+    constructor(div, callback, callback_arguments=null, input=null) {
 
-        this.modal = modal;
+        this.div = '#' + div;
         this.callback = callback;
         this.callback_arguments = callback_arguments;
+        this.input = input;
+        let self = this;
 
-        $('#' + this.modal + '_show')
+        if (this.input) {
-            .bind('click', {this: this}, function(event) {
+            $(this.div + ' input[type=text]').each(function() {
-                event.data.this.show();
+                let name = $(this).prop('name');
+                if (name in self.input) {
+                    $(this).val(self.input[name]);
+                }
+            });
+        }
+
+        $(this.div + '_show')
+            .bind('click', function(event) {
+                self.show();
         });
     }
 
@@ -37,51 +48,52 @@ class Modal {
     /* show the modal dialog */
     show() {
 
-        $('#' + this.modal).fadeIn('fast');
+        let self = this;
+
+        $(this.div).fadeIn('fast');
 
         /* close modal on click outside of modal */
         $(document)
-            .bind('click', {this: this}, function(event) {
+            .bind('click', function(event) {
-                let scope = event.data.this
+                if ($(self.div).is(':visible')) {
-                if ($('#' + scope.modal).is(':visible')) {
+                    if ($(event.target).attr('id') == self.div.substring(1)) {
-                    if ($(event.target).attr('id') === scope.modal) {
+                        hide(self.div);
-                        hide(scope.modal);
                     }
                 }
             });
 
         /* close modal on keypress ESC, send modal on keypress ENTER */
         $(document)
-            .bind('keypress', {this: this}, function(event) {
+            .bind('keypress', function(event) {
                 if (event.keyCode == 27) {
-                    hide(event.data.this.modal);
+                    hide(self.div);
                     $(document).off('keypress');
                 } else if (event.keyCode == 13) {
-                    event.data.this.submit();
+                    self.submit();
                 }
             });
 
         /* close modal on button #<modal_name>_close */
-        $('#' + this.modal + '_close')
+        $(this.div + '_close')
-            .bind('click', {this: this}, function(event) {
+            .bind('click', function(event) {
-                hide(event.data.this.modal);
+                hide(self.div);
             });
 
         /* trigger callback on button #<modal_name>_action */
-        $('#' + this.modal + '_action')
+        $(this.div + '_action')
-            .bind('click', {this: this}, function(event) {
+            .bind('click', function(event) {
-                event.data.this.submit();
+                self.submit();
             });
 
         /* focus first input text element */
-        $('#' + this.modal + ' input:text:visible:first').focus();
+        $(this.div + ' input:text:visible:first').focus();
     }
 
 
     /*submit modal */
     submit() {
         let response = {};
-        $('#' + this.modal + ' input[type=text]').each(function() {
+        $(this.div + ' input[type=text]').each(function() {
             response[$(this).attr('name')] = $(this).val();
         });
         this.callback(this.callback_arguments, response);
@@ -90,17 +102,17 @@ class Modal {
 }
 
 /* hide the modal dialog */
-function hide(modal) {
+function hide(div) {
-    $('#' + modal).fadeOut('fast');
+    $(div).fadeOut('fast');
 }
 
 /* detach all eventTypes */
-function detach(modal) {
+function detach(div) {
-    hide(modal);
+    hide(div);
-    $('#' + modal + '_action').off('click');
+    $(div + '_action').off('click');
-    $('#' + modal + '_close').off('click');
+    $(div + '_close').off('click');
     $(document).off('keypress click');
-    $('#' + modal + ' input:text:visible').each(function() {
+    $(div + ' input:text:visible').each(function() {
         $(this).val(''); });
 }
 

coinmanager/coinc/static/coinc/styles.css

@@ -327,9 +327,7 @@ div.found {
 
 /* special coins */
 
-div.special1_name,
+div.special_name {
-div.special2_name,
-div.special3_name {
     display: none;
     height: 40px;
     width: 146px;

coinmanager/coinc/templates/coinc/coin.html

@@ -1,7 +1,7 @@
           <td class="coin {{ td_class }}" value="{{ value }}"><div class="coin"><span>{{ marker }}</span><div class="{{ div_class }}" type="overlay"></div></div>
           {% if name %}
-            {% if value == 201 %}<div class="special1_name {{ special_class }}">{{ name }}</div>{% endif %}
+            {% if value == 201 %}<div class="special_name special1_name {{ special_class }}">{{ name }}</div>{% endif %}
-            {% if value == 202 %}<div class="special2_name {{ special_class }}">{{ name }}</div>{% endif %}
+            {% if value == 202 %}<div class="special_name special2_name {{ special_class }}">{{ name }}</div>{% endif %}
-            {% if value == 203 %}<div class="special3_name {{ special_class }}">{{ name }}</div>{% endif %}
+            {% if value == 203 %}<div class="special_name special3_name {{ special_class }}">{{ name }}</div>{% endif %}
           {% endif %}
           </td>