fix #2
This commit is contained in:
koksnuss
parent
5d088f0461
commit
041af66c8b
@ -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('<div class="special' + c + '_name three_lines">' + data['name'] + '</div>');
|
||||
} 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 :))
|
||||
}
|
||||
|
||||
|
||||
@ -188,16 +211,14 @@ $(document).ready(function() {
|
||||
save_settings();
|
||||
|
||||
let csrf_token = $('input[name=csrfmiddlewaretoken]').val();
|
||||
let value = $(this).attr('value');
|
||||
let value = Number($(this).attr('value'));
|
||||
let year = Number($(this).parent('tr').attr('name'));
|
||||
// TODO fix this before the end of 2098
|
||||
year += (year == 99) ? 1900 : 2000;
|
||||
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 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 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; }
|
||||
|
||||
@ -207,7 +228,6 @@ $(document).ready(function() {
|
||||
year: year,
|
||||
country: country,
|
||||
stamp: stamp,
|
||||
name: name,
|
||||
found_by: found_by,
|
||||
found_on: found_on,
|
||||
circulation: circulation,
|
||||
@ -217,20 +237,41 @@ $(document).ready(function() {
|
||||
exists: settings['exists']
|
||||
}
|
||||
|
||||
let args = {
|
||||
data: data,
|
||||
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: this,
|
||||
td: td,
|
||||
success: function(response) {
|
||||
if (response.status === 0) {
|
||||
render_response(this.td, settings);
|
||||
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() {
|
||||
|
||||
95
coinmanager/coinc/static/coinc/modules/modal.mjs
Normal file
95
coinmanager/coinc/static/coinc/modules/modal.mjs
Normal file
@ -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 <http://www.gnu.org/licenses/>. */
|
||||
|
||||
|
||||
|
||||
/* 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 #<modal_name>_close */
|
||||
$('#' + this.modal + '_close')
|
||||
.bind('click', {this: this}, function(event) {
|
||||
hide(event.data.this.modal);
|
||||
});
|
||||
|
||||
/* trigger callback on button #<modal_name>_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 };
|
||||
@ -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;
|
||||
|
||||
@ -1 +1,7 @@
|
||||
<td class="coin {{ td_class }}" value="{{ value }}"><div class="coin"><span>{{ marker }}</span><div class="{{ div_class }}" type="overlay"></div></div></td>
|
||||
<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 == 202 %}<div class="special2_name {{ special_class }}">{{ name }}</div>{% endif %}
|
||||
{% if value == 203 %}<div class="special3_name {{ special_class }}">{{ name }}</div>{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
@ -84,3 +84,26 @@ div.{{ user.name }} {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add_coin_name" class="modal-container">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Sondermünze</h5>
|
||||
<button id="add_coin_name_close" 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="add_coin_name_name">Name</label>
|
||||
<input type="text" name="name" id="add_coin_name_name" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<span id="response"></span>
|
||||
<button type="button" id="add_coin_name_action" class="btn btn-primary">+ Münze hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
<th class="brass">50</th>
|
||||
<th>100</th>
|
||||
<th>200</th>
|
||||
<th>201</th>
|
||||
<th>202</th>
|
||||
<th>203</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% for stamp in year %} <tr name="{{ year_short }}" stamp="{{ stamp }}">
|
||||
<td class="year"><div class="">{{ stamp }}{{ year_short }}</div></td>
|
||||
<td class="year"><div class="coin">{{ stamp }}{{ year_short }}</div></td>
|
||||
{% for value in values %}{% show_coin country year_short stamp value %}{% endfor %} </tr>{% endfor %}{% ifnotequal year|length 1 %}
|
||||
<tr>
|
||||
<td class="spacer" colspan="12"></td>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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}")
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user