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

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

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

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

@ -56,28 +56,28 @@
</nav>
<!-- 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-content">
<div class="modal-header">
<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>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<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 class="form-group">
<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 class="modal-footer">
<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>