From 041af66c8b216ec59beda9c69da154ba4b96ad80 Mon Sep 17 00:00:00 2001 From: koksnuss Date: Tue, 12 May 2020 20:49:10 +0200 Subject: [PATCH] fix #2 --- coinmanager/coinc/static/coinc/main.js | 115 ++++++++++----- .../coinc/static/coinc/modules/modal.mjs | 95 ++++++++++++ coinmanager/coinc/static/coinc/styles.css | 135 +++++++++++++++--- coinmanager/coinc/templates/coinc/coin.html | 8 +- .../coinc/templates/coinc/controlbar.html | 23 +++ .../coinc/templates/coinc/country.html | 6 +- coinmanager/coinc/templates/coinc/year.html | 2 +- coinmanager/coinc/views.py | 17 ++- 8 files changed, 334 insertions(+), 67 deletions(-) create mode 100644 coinmanager/coinc/static/coinc/modules/modal.mjs diff --git a/coinmanager/coinc/static/coinc/main.js b/coinmanager/coinc/static/coinc/main.js index 6d4790f..d352ab5 100644 --- a/coinmanager/coinc/static/coinc/main.js +++ b/coinmanager/coinc/static/coinc/main.js @@ -18,6 +18,7 @@ import { Cookie } from './modules/cookie.mjs'; +import { Modal, detach } from './modules/modal.mjs'; let settings = { found: true, @@ -101,9 +102,10 @@ function render_found() { // update table cell according to settings -function render_response(td, set) { +function render_response(data, td, set) { let td_class = ''; let div_class = ''; + let value = Number($(td).attr('value')); if (!set['exists']) { td_class = 'noexist'; @@ -111,7 +113,7 @@ function render_response(td, set) { td_class = 'buy_only'; } else if (set['circulation'] && set['circulation'] < 1500000 && set['circulation'] != 0) { td_class = 'rare'; - } else if ([10, 20, 50].includes(Number($(td).attr('value')))) { + } else if ([10, 20, 50].includes(value)) { td_class = 'brass'; } else if (set['found'] && set['found_by']) { td_class = 'found'; @@ -123,17 +125,38 @@ function render_response(td, set) { td_class += ' checked'; } + /* add or update marker (and name) if found */ if (set['found'] && set['found_by'] && set['exists']) { div_class = set['found_by']; $(td).find('div.coin span').html('').html('x'); + if ('name' in data) { + console.log(data['name']); + let c = String(value).substring(2,3); + let div_special_name = $(td).find('div.special' + c + '_name'); + console.log(div_special_name); + if (div_special_name.length == 0) { + $(td).append('
' + data['name'] + '
'); + } else if (div_special_name.length == 1) { + div_special_name.html(data['name']); + } + } } + + /* remove marker if not exists */ if (!set['exists'] || !set['found']) { $(td).find('div.coin span').html(''); } + + /* apply td styles */ $(td).removeClass(); $(td).addClass('coin ' + td_class); + + /* apply div overlay styles */ $(td).find('div[type=overlay]').removeClass(); $(td).find('div[type=overlay]').addClass('found ' + div_class); + + + //TODO add text to Sondermünzen :)) } @@ -187,50 +210,68 @@ $(document).ready(function() { $(this).click(function() { save_settings(); - let csrf_token = $('input[name=csrfmiddlewaretoken]').val(); - let value = $(this).attr('value'); - let year = Number($(this).parent('tr').attr('name')); -// TODO fix this before the end of 2098 - year += (year == 99) ? 1900 : 2000; - let country = $(this).parents('table').attr('name'); - let stamp = $(this).parent('tr').attr('stamp'); - let name = '' - let found_by = (settings['found'] === true) ? settings['found_by'] : '' - let found_on = (settings['found'] === true) ? settings['found_on'] : '' - let circulation = (settings['circulation'] == 'Auflage') ? 0 : settings['circulation']; + let csrf_token = $('input[name=csrfmiddlewaretoken]').val(); + let value = Number($(this).attr('value')); + let year = Number($(this).parent('tr').attr('name')); + year += (year == 99) ? 1900 : 2000; // TODO fix this before the end of 2098 + let country = $(this).parents('table').attr('name'); + let stamp = $(this).parent('tr').attr('stamp'); + let found_by = (settings['found']) ? settings['found_by'] : '' + let found_on = (settings['found']) ? settings['found_on'] : '' + let circulation = (settings['circulation'] == 'Auflage') ? 0 : settings['circulation'] if (settings['exists'] === false) { circulation = 0; } let data = { csrfmiddlewaretoken: csrf_token, - value: value, - year: year, - country: country, - stamp: stamp, - name: name, - found_by: found_by, - found_on: found_on, + value: value, + year: year, + country: country, + stamp: stamp, + found_by: found_by, + found_on: found_on, circulation: circulation, - buy_only: settings['buy_only'], - checked: settings['checked'], - ec: settings['ec'], - exists: settings['exists'] + buy_only: settings['buy_only'], + checked: settings['checked'], + ec: settings['ec'], + exists: settings['exists'] } - $.ajax({ - type: 'POST', - url: 'add/coin', + let args = { data: data, - dataType: 'json', - td: this, - success: function(response) { - if (response.status === 0) { - render_response(this.td, settings); - } else { - alert(response.message); - } + td: this + } + + if ([201, 202, 203].includes(value)) { + let modal = new Modal('add_coin_name', add_coin_name, args); + modal.show(); + } else { + add_coin_name(args); + } + + function add_coin_name(args, response='') { + let data = args['data']; + let td = args['td']; + if (response) { + data['name'] = response['name']; } - }); + $.ajax({ + type: 'POST', + url: 'add/coin', + data: data, + dataType: 'json', + td: td, + success: function(response) { + if (response.status === 0) { + render_response(data, this.td, settings); + detach('add_coin_name'); + } else { + alert(response.message); + } + } + }); + } + }); }); }); @@ -324,7 +365,7 @@ $(document).ready(function() { // // hide modal add user - function hide_modal() { $('#modal_add_user').fadeOut('fast'); } + function hide_modal(modal_id) { $('#' + modal_id).fadeOut('fast'); } // modal #add_user $('#show_add_user').click(function() { diff --git a/coinmanager/coinc/static/coinc/modules/modal.mjs b/coinmanager/coinc/static/coinc/modules/modal.mjs new file mode 100644 index 0000000..82fdc93 --- /dev/null +++ b/coinmanager/coinc/static/coinc/modules/modal.mjs @@ -0,0 +1,95 @@ +/* + + 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 . */ + + + +/* create a modal dialog */ +class Modal { + + constructor(modal, callback, callback_arguments) { + + this.modal = modal; + this.callback = callback; + this.callback_arguments = callback_arguments; + + $('#' + this.modal + '_show') + .bind('click', {this: this}, function(event) { + event.data.this.show(); + }); + } + + + /* show the modal dialog */ + show() { + + $('#' + this.modal).fadeIn('fast'); + + /* close modal on click outside of modal */ + $(document) + .bind('click', {this: this}, function(event) { + let scope = event.data.this + if ($('#' + scope.modal).is(':visible')) { + if ($(event.target).attr('id') === scope.modal) { + hide(scope.modal); + } + } + }); + + /* close modal on keypress ESC */ + $(document) + .bind('keypress', {this: this}, function(event) { + if (event.keyCode == 27) { + hide(event.data.this.modal); + $(document).off('keypress'); + } + }); + + /* close modal on button #_close */ + $('#' + this.modal + '_close') + .bind('click', {this: this}, function(event) { + hide(event.data.this.modal); + }); + + /* trigger callback on button #_action */ + $('#' + this.modal + '_action') + .bind('click', {this: this}, function(event) { + let scope = event.data.this; + let response = {}; + $('#' + scope.modal + ' input[type=text]').each(function() { + response[$(this).attr('name')] = $(this).val(); + }).get(); + scope.callback(scope.callback_arguments, response); + }); + } + +} + +/* hide the modal dialog */ +function hide(modal) { + $('#' + modal).fadeOut('fast'); +} + +/* detach all eventTypes */ +function detach(modal) { + hide(modal); + $('#' + modal + '_action').off('click'); + $('#' + modal + '_close').off('click'); + $(document).off('keypress click'); +} + +export { Modal, detach, hide }; diff --git a/coinmanager/coinc/static/coinc/styles.css b/coinmanager/coinc/static/coinc/styles.css index 08b5ea6..b04a3aa 100644 --- a/coinmanager/coinc/static/coinc/styles.css +++ b/coinmanager/coinc/static/coinc/styles.css @@ -48,8 +48,6 @@ img.country { table { border-collapse: collapse; - width: 360px; - table-layout: fixed; white-space: nowrap; margin-bottom: 63px !important; } @@ -60,7 +58,7 @@ th { } tr { - height: 30px; + height: 40px; } td { @@ -88,21 +86,21 @@ thead > tr:nth-child(2) > th:after { z-index: 1020; left: 0; top: -1px; - width: 30px; - height: 32px; + width: 40px; + height: 42px; + line-height: 40px; border-top: 1px solid gray; border-left: 1px solid gray; border-bottom: 2px solid black; } -thead > tr:nth-child(2) > th:last-child:after { - border-right: 1px solid gray; -} - +tr:nth-child(2) > th:nth-child(10):after { content: '201'; } +tr:nth-child(2) > th:nth-child(11):after { content: '202'; } +tr:nth-child(2) > th:nth-child(12):after { content: '203'; } +tr:nth-child(2) > th:last-child:after { border-right: 1px solid gray; } thead > tr:nth-child(2) > th, table > tbody > tr > td { text-align: center; - font-size: 0.8rem; font-weight: normal; } @@ -114,19 +112,11 @@ tbody > tr > td { tbody > tr > td > div.coin { position: relative; z-index: 1000; - height: 30px; - width: 30px; + height: 40px; + width: 40px; text-align: inherit; - line-height: 30px; -} - -div.found { - position: absolute; - z-index: 1001; - top: 0; - height:30px; - width:30px; - clip-path: polygon(100% 70%, 100% 100%, 70% 100%); + line-height: 40px; + float: left; } td > * { @@ -134,6 +124,107 @@ td > * { overflow: hidden; } +div.found { + position: absolute; + z-index: 1001; + top: 0; + height:40px; + width:40px; + clip-path: polygon(100% 70%, 100% 100%, 70% 100%); +} + +div.three_lines { + font-size: 0.8rem !important; + line-height: 13px !important; +} +div.two_lines { + font-size: 0.9rem !important; + line-height: 20px !important; +} + +div.special1_name, div.special2_name, div.special3_name { + display: none; + height: 40px; + width: 150px; + font-size: 1rem; + font-weight: 400; + line-height: 40px; + color: black; + text-align: left; + word-wrap: anywhere; + word-break: break-all; + white-space: break-spaces; +} + +/* smallest view 12 * 40 = 480px */ +@media (max-width: 654px) { + table { width: 360px; } + tr:nth-child(2) > th { width: 30px; } + tr:nth-child(2) > th:after { width: 30px; } + tbody > tr > td > div.coin { + height: 30px; + width: 30px; + line-height: 30px; + } + div.found { + height: 30px; + width: 30px; + } + tr { height: 30px; } + thead > tr:nth-child(2) > th:after { + height: 32px; + width: 30px; + line-height:30px; + } + thead > tr:nth-child(2) > th, tbody > tr > td { font-size: 0.8rem; } +} + +/* 1st special coin: 11 * 40 + 200 = 640px */ +@media (min-width: 655px) { + table { width: 640px; } + tr:nth-child(2) > th:nth-child(10) { + width: 200px; + text-align: left; + } + tr:nth-child(2) > th:nth-child(10):after { + width: 200px; + padding-left: 5px; + content: 'Sondermünze 1'; + } + div.special1_name { display: block; } +} + +/* 2nd special coin 10 * 40 + 400 = 800px */ +@media (min-width: 815px) { + table { width: 800px; } + tr:nth-child(2) > th:nth-child(11) { + width: 200px; + text-align: left; + } + tr:nth-child(2) > th:nth-child(11):after { + width: 200px; + padding-left: 5px; + content: 'Sondermünze 2'; + } + div.special2_name { display: block; } +} + +/* 3rd special coin 9 * 40 + 600 = 960px */ +@media (min-width: 975px) { + table { width: 960px; } + tr:nth-child(2) > th:nth-child(12) { + width: 200px; + text-align: left; + } + tr:nth-child(2) > th:nth-child(12):after { + width: 200px; + padding-left: 5px; + content: 'Sondermünze 3'; + } + div.special3_name { display: block; } +} + + .buy_only { background-color: #dd7e6b; diff --git a/coinmanager/coinc/templates/coinc/coin.html b/coinmanager/coinc/templates/coinc/coin.html index a94bff2..0d41f6a 100644 --- a/coinmanager/coinc/templates/coinc/coin.html +++ b/coinmanager/coinc/templates/coinc/coin.html @@ -1 +1,7 @@ -
{{ marker }}
+
{{ marker }}
+ {% if name %} + {% if value == 201 %}
{{ name }}
{% endif %} + {% if value == 202 %}
{{ name }}
{% endif %} + {% if value == 203 %}
{{ name }}
{% endif %} + {% endif %} + diff --git a/coinmanager/coinc/templates/coinc/controlbar.html b/coinmanager/coinc/templates/coinc/controlbar.html index e73a64e..dbd4935 100644 --- a/coinmanager/coinc/templates/coinc/controlbar.html +++ b/coinmanager/coinc/templates/coinc/controlbar.html @@ -84,3 +84,26 @@ div.{{ user.name }} { + + diff --git a/coinmanager/coinc/templates/coinc/country.html b/coinmanager/coinc/templates/coinc/country.html index 4812504..74182cb 100644 --- a/coinmanager/coinc/templates/coinc/country.html +++ b/coinmanager/coinc/templates/coinc/country.html @@ -22,9 +22,9 @@ 50 100 200 - 201 - 202 - 203 + + + diff --git a/coinmanager/coinc/templates/coinc/year.html b/coinmanager/coinc/templates/coinc/year.html index 44e98e5..f252e1f 100644 --- a/coinmanager/coinc/templates/coinc/year.html +++ b/coinmanager/coinc/templates/coinc/year.html @@ -1,5 +1,5 @@ {% for stamp in year %} -
{{ stamp }}{{ year_short }}
+
{{ stamp }}{{ year_short }}
{% for value in values %}{% show_coin country year_short stamp value %}{% endfor %} {% endfor %}{% ifnotequal year|length 1 %} diff --git a/coinmanager/coinc/views.py b/coinmanager/coinc/views.py index bf1eeae..fb8fd9f 100644 --- a/coinmanager/coinc/views.py +++ b/coinmanager/coinc/views.py @@ -175,11 +175,21 @@ def show_coin(country, year, stamp, value): div_class = f"found {coin.found_by}" marker = 'x' + name = coin.name if coin.name else '' + special_class = '' + if name: + if len(name) >= 26 and len(name) <= 52: + special_class = 'two_lines' + elif len(name) > 53: + special_class = 'three_lines' + return { + 'value': value, 'marker': marker, + 'name': name, 'td_class': td_class, 'div_class': div_class, - 'value': value, + 'special_class': special_class } @@ -256,7 +266,7 @@ def add_coin(request): return response(1, f"Die Prägerei '{stamp}' existiert nicht.") stamp = None - exists = True if request.POST['exists'] == 'true' else False + exists = True if request.POST['exists'] == 'true' else False if not exists: name = '' found_by = None @@ -267,8 +277,9 @@ def add_coin(request): ec = False else: + name = request.POST['name'] if request.POST['name'] else '' try: - name = str(request.POST['name']) + name = str(name) except Exception as e: return response(1, f"Der Münzenname '{name}' ist kein gültiger Name. {e}")