moritz/coinmanager
1
0
Fork 0
Code Issues 22 Pull Requests Releases Wiki Activity

fix #26: use new modal system

Browse Source
This commit is contained in:
koksnuss 2020-05-13 14:15:25 +02:00
parent 2db0b203f7
commit 61c7332386
2 changed files with 79 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
coinmanager/coinc/static/coinc/main.js
View File

@ -28,8 +28,7 @@ let settings = {
buy_only: false, buy_only: false,
checked: false, checked: false,
ec: false, ec: false,
exists: true exists: true }
}
// //
@ -46,11 +45,9 @@ function escape_html (string) {
"'": ''', "'": ''',
'/': '/', '/': '/',
'`': '`', '`': '`',
'=': '=' '=': '=' };
};
return String(string).replace(/[&<>"'`=\/]/g, function (s) { return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entity_map[s]; return entity_map[s]; });
});
} }
/* return a datetime YYYY.MM.DD */ /* return a datetime YYYY.MM.DD */
@ -64,7 +61,6 @@ function get_datetime() {
// manage user login // manage user login
function render_login(name, color) { function render_login(name, color) {
new Cookie('coinc-name', name) new Cookie('coinc-name', name)
render_login_color(color); render_login_color(color);
@ -81,8 +77,8 @@ function render_login(name, color) {
// manage login colors // manage login colors
function render_login_color(color) { function render_login_color(color) {
new Cookie('coinc-color', color); new Cookie('coinc-color', color);
if ($('nav.navbar').css('display') == 'block') { if ($('nav.navbar').css('display') == 'block') {
$('nav.navbar').prop('style', 'background-color:' + color + ' !important; display: block;'); $('nav.navbar').prop('style', 'background-color:' + color + ' !important; display: block;');
} else { } else {
@ -103,6 +99,7 @@ function render_found() {
found_on = get_datetime(); found_on = get_datetime();
} }
$('#found_on').val(found_on); $('#found_on').val(found_on);
} else { } else {
save_settings(); save_settings();
$('#found_by option[selected=selected]').html(''); $('#found_by option[selected=selected]').html('');
@ -145,21 +142,24 @@ function render_response(data, td, set) {
/* add or update marker (and name) if found */ /* add or update marker (and name) if found */
if (set['found'] && set['found_by'] && set['exists']) { if (set['found'] && set['found_by'] && set['exists']) {
div_class = set['found_by']; div_class = set['found_by'];
$(td).find('div.coin span').html('').html('✔'); $(td).find('div.coin span').html('').html('✔');
/* add/update name */ /* add/update name */
if ([201, 202, 203].includes(data['value'])) { if ([201, 202, 203].includes(data['value'])) {
let c = String(value).substring(2,3); let c = String(value).substring(2,3);
if ('name' in data) { if ('name' in data) {
let name = escape_html(data['name']);
/* look for div.special123_name */ /* look for div.special123_name */
let name = escape_html(data['name']);
let div_special_name = $(td).find('div.special' + c + '_name'); let div_special_name = $(td).find('div.special' + c + '_name');
if (div_special_name.length == 0) { if (div_special_name.length == 0) {
/* append div if not found */ /* append div if not found */
$(td).append('<div class="special' + c + '_name three_lines">' + name + '</div>'); $(td).append('<div class="special' + c + '_name three_lines">' + name + '</div>');
} else if (div_special_name.length == 1) { } else if (div_special_name.length == 1) {
/* only insert inner html */ /* only insert inner html */
@ -175,8 +175,7 @@ function render_response(data, td, set) {
/* remove marker if not exists */ /* remove marker if not exists */
if (!set['exists'] || !set['found']) { if (!set['exists'] || !set['found']) {
$(td).find('div.coin span').html(''); $(td).find('div.coin span').html(''); }
}
/* apply td styles */ /* apply td styles */
$(td).removeClass(); $(td).removeClass();
@ -192,8 +191,7 @@ function render_response(data, td, set) {
function save_settings() { function save_settings() {
let checkboxes = $('#found, #buy_only, #checked, #ec, #exists').map(function() { let checkboxes = $('#found, #buy_only, #checked, #ec, #exists').map(function() {
return { [$(this).prop('id')]: $(this).prop('checked') } return { [$(this).prop('id')]: $(this).prop('checked') } }).get();
}).get();
for (let box of checkboxes) { for (let box of checkboxes) {
for (let item in box) { settings[item] = box[item]; } for (let item in box) { settings[item] = box[item]; }
} }
@ -278,13 +276,14 @@ $(document).ready(function() {
add_coin_name(args); add_coin_name(args);
} }
/* make a POST request to ./add/coin */
function add_coin_name(args, response='') { function add_coin_name(args, response='') {
let data = args['data']; let data = args['data'];
let td = args['td']; let td = args['td'];
if (response) { if (response) {
data['name'] = response['name'].trim().substring(0, 79); data['name'] = response['name'].trim().substring(0, 79); }
}
$(td).css('cursor', 'progress'); $(td).css('cursor', 'progress');
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: 'add/coin', url: 'add/coin',
@ -302,7 +301,6 @@ $(document).ready(function() {
} }
}); });
} }
}); });
}); });
}); });
@ -319,9 +317,7 @@ $(document).ready(function() {
// button #advanced_options // button #advanced_options
$('#show_advanced_options').click(function() { $('#show_advanced_options').click(function() {
$('#advanced_options').slideToggle(); $('#advanced_options').slideToggle(); });
});
// //
@ -330,106 +326,70 @@ $(document).ready(function() {
// checkbox #found // checkbox #found
$('#found').change(function() { $('#found').change(function() {
render_found(); render_found(); });
// checkbox #exists
$('#exists').change(function() {
if (this.checked === true) {
save_settings();
// remove values
$('#found_by, #found_on, #circulation').each(function() {
$(this).val(''); });
// disable settings
$('#found, #buy_only, #checked, #ec').each(function() {
$(this).prop('checked', false); });
$('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
$(this).prop('disabled', 'disabled'); });
// checkbox #exists not checked
} else {
// restore values
$('#found_by').val(settings['found_by']);
$('#found_on').val(settings['found_on']);
$('#circulation').val(settings['circulation']);
// restore settings
$('#found_now, #found, #buy_only, #checked, #ec').each(function() {
let setting = $(this).prop('id');
$(this).prop('checked', settings[setting]); });
// enable settings
$('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
$(this).prop('disabled', ''); });
render_found();
}
}); });
// checkbox #exists // select username on change
$('#exists').change(function() { $('nav.navbar select').on('change', function() {
let color = $('nav.navbar option[value=' + this.value + ']').attr('color');
$('nav.navbar option[selected=selected]').removeAttr('selected');
render_login(this.value, color); });
if (this.checked === true) { // datepicker TODO make it nicer
$.datepicker.setDefaults( $.datepicker.regional['de'] );
// save settings $('input[name=found_on]').datepicker({
save_settings(); defaultDate: new Date(),
dateFormat: 'dd.mm.yy' });
// remove values
$('#found_by, #found_on, #circulation').each(function() {
$(this).val('');
});
// disable settings
$('#found, #buy_only, #checked, #ec').each(function() {
$(this).prop('checked', false);
});
$('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
$(this).prop('disabled', 'disabled');
});
// checkbox #exists not checked
} else {
// restore values
$('#found_by').val(settings['found_by']);
$('#found_on').val(settings['found_on']);
$('#circulation').val(settings['circulation']);
// restore settings
$('#found_now, #found, #buy_only, #checked, #ec').each(function() {
let setting = $(this).prop('id');
$(this).prop('checked', settings[setting]);
});
// enable settings
$('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
$(this).prop('disabled', '');
});
// do post processing
render_found();
}
});
// select username on change
$('nav.navbar select').on('change', function() {
let color = $('nav.navbar option[value=' + this.value + ']').attr('color');
$('nav.navbar option[selected=selected]').removeAttr('selected');
render_login(this.value, color);
});
// datepicker TODO make it nicer
$.datepicker.setDefaults( $.datepicker.regional['de'] );
$('input[name=found_on]').datepicker({
defaultDate: new Date(),
dateFormat: 'dd.mm.yy'
});
//
// Modals
//
// hide modal add user
function hide_modal(modal_id) { $('#' + modal_id).fadeOut('fast'); }
// modal #add_user // modal #add_user
$('#show_add_user').click(function() { $('#show_add_user').click(function() {
$('#modal_add_user').fadeIn('fast'); let args = '';
let modal = new Modal('add_user', add_user, args);
modal.show();
$(document).on('click', function(event) { function add_user(args='', response='') {
if ($('#modal_add_user').is(':visible')) { console.log(response);
if ($(event.target).attr('id') === 'modal_add_user') { hide_modal(); } let name = encodeURIComponent(response['name']
} .trim().substring(0, 19).replace(' ', '-'));
}); let color = encodeURIComponent(response['color']
.trim().substring(0, 9 ).replace(' ', '-'));
// detect ESC keypress
$(document).keypress(function(event) {
if (event.keyCode == 27) { // ESC is pressed
hide_modal();
$(document).off('keypress');
}
});
// button #close_modal_add_user
$('#close_modal_add_user').click(function() { hide_modal(); });
// button #add_user
$('#add_user').click(function() {
let name = encodeURIComponent($('#text_user')
.val().trim().substring(0, 19).replace(' ', '-'));
let color = encodeURIComponent($('#text_color')
.val().trim().substring(0, 9 ).replace(' ', '-'));
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
@ -438,19 +398,16 @@ $(document).ready(function() {
success: function(response) { success: function(response) {
if (response.status === 0) { if (response.status === 0) {
$('#response').fadeOut('fast');
hide_modal();
render_login(name, color); render_login(name, color);
detach('add_user');
} else { } else {
$('#response').html(response.message); $('#response').html(response.message);
$('#response').css('color', 'red'); $('#response').css('color', 'red');
} }
} }
}); });
}); }
}); });
// end modal #add_user
// //

10
coinmanager/coinc/templates/coinc/controlbar.html
View File

@ -56,28 +56,28 @@
</nav> </nav>
<!-- modal add_user --> <!-- modal add_user -->
<div id="modal_add_user" class="modal-container"> <div id="add_user" class="modal-container">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Name 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"> <button id="add_user_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label for="text_user">Name</label> <label for="text_user">Name</label>
<input type="text" name="user" id="text_user" class="form-control"> <input type="text" name="name" id="add_user_name" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="text_color">Farbe</label> <label for="text_color">Farbe</label>
<input type="text" name="color" id="text_color" class="form-control"> <input type="text" name="color" id="add_user_color" class="form-control">
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<span id="response"></span> <span id="response"></span>
<button type="button" id="add_user" class="btn btn-primary">+ Name hinzufügen</button> <button type="button" id="add_user_action" class="btn btn-primary">+ Name hinzufügen</button>
</div> </div>
</div> </div>
</div> </div>