Newer
Older
<div class="tools-full-height">
<table class="table table-hover events-table" id="events-table">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>on website</th>
<th>spots</th>
<th>signups</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- modal for creating new events, easier to do it this way than js-->
<div class="modal fade" id="event-modal" role="dialog" data-etag="">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" >×</button>
<h4 class="modal-title" id="event-modal-title"></h4>
<div class="form-group">
<label for="title_de">Title</label>
<input type="text" class="form-control" id="title_de"></input>
</div>
<div class="form-group">
<label for="description_de">Description</label>
<textarea type="text" class="form-control" rows="3" id="description_de"></textarea>
</div>
<div class="form-group">
<label for="catchphrase_de">Catchphrase</label>
<input type="text" class="form-control" id="catchphrase_de"></input>
</div>
<!-- <div class="container"> -->
<!-- <div class="col-md-3"> -->
<div class="form-group">
<label for="time_start">Start Time</label>
<div class="input-group date" id="time_start">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<!-- </div> -->
<!-- <div class="col-md-3"> -->
<div class="form-group">
<label for="time_end">End Time</label>
<div class="input-group date" id="time_end">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
<div class="form-group">
<label for="time_start">Start Advertising</label>
<div class="input-group date" id="time_advertising_start">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<!-- </div> -->
<!-- <div class="col-md-3"> -->
<div class="form-group">
<label for="time_end">End Advertising</label>
<div class="input-group date" id="time_advertising_end">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
<label class="checkbox-inline">
<input type="checkbox" id="signup-required" value="">No Signup
</label>
<label class="checkbox-inline">
<input type="checkbox" id="no-signup-limit" value="">No Signup Limit
</label>
<div class="form-group">
<label for="spots">Spots</label>
<input type="number" class="form-control" min="-1" id="spots"></input>
</div>
<!-- <div class="container"> -->
<!-- <div class="col-md-3"> -->
<div class="form-group">
<label for="time_register_start">Start of Registration</label>
<div class="input-group date" id="time_register_start">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
</span>
</div>
</div>
<!-- </div> -->
<!-- <div class="col-md-3"> -->
<div class="form-group">
<label for="time_register_end">End of Registration</label>
<div class="input-group date" id="time_register_end">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
<label class="checkbox-inline">
<input type="checkbox" id="allow_email_signup" value="">Only amiv Members
</label>
<div class="form-group">
<label for="location">Location</label>
<input type="text" class="form-control" id="location"></input>
</div>
<div class="form-group">
<input type="number" class="form-control" min="0" id="price"></input>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="show_website" value="">Show on Webstite (requires banner image and title)
</label>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="show_infoscreen" value="">Show ond Infoscreen (requires infoscreen image)
</label>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="show_announce" value="">Show in Announce (requires stuff)
</label>
</div>
<div class="form-group">
<label for="price">Priority [1-10]</label>
<input type="number" class="form-control" min="0" id="priority" value=5></input>
</div>
<div class="form-group">
<label for="description_de">Additional Fields (JSON schema)</label>
<textarea type="text" class="form-control" rows="3" id="additional_fields"></textarea>
</div>
<button type="button" class "btn" data-toggle="collapse" data-target="#english-collapse">show english fields</button>
<div id="english-collapse" class="collapse">
<div class="form-group">
<label for="title_en">Title english</label>
<input type="text" class="form-control" id="title_en"></input>
</div>
<div class="form-group">
<label for="description_en">Description english</label>
<textarea type="text" class="form-control" rows="3" id="description_en"></textarea>
</div>
<div class="form-group">
<label for="catchphrase_en">Catchphrase english</label>
<input type="text" class="form-control" id="catchphrase_en"></input>
</div>
</div>
<!-- <input type="submit"> -->
</form>
<div class="modal-footer" id="event-modal-footer">
<!-- footer content here -->
.events-table-wrapper {
position: relative;
}
.events-table-wrapper>div {
overflow: auto;
}
margin-bottom: 10px;
}
.users-sidebar {
background: #fff;
}
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
showInTable: ['title_de', 'time_start', 'show_website', 'spots', 'signup_count'],
curEventData: null,
// Page
page: {
max: Number.MAX_VALUE,
cur: function() {
return parseInt(tools.mem.session.get('curPage'));
},
set: function(num) {
num = parseInt(num);
if (num > 0 && num < events.page.max + 1)
tools.mem.session.set('curPage', num);
$('.events-cur-page-cont').html(events.page.cur());
events.get();
},
inc: function() {
events.page.set(events.page.cur() + 1);
},
dec: function() {
events.page.set(events.page.cur() - 1);
}
},
//Sorting
sort: {
cur: function() {
return tools.mem.session.get('curSort');
},
set: function(sort) {
tools.mem.session.set('curSort', sort);
events.get();
},
inv: function() {
var tmp = events.sort.cur();
if (tmp.charAt(0) == '-')
events.sort.set(tmp.slice(1));
else
events.sort.set('-' + tmp);
}
},
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
//Searching
search: {
cur: function() {
return tools.mem.session.get('search');
},
set: function(dom, val) {
tools.mem.session.set('search', dom + '==' + val);
events.page.set(1);
},
clr: function() {
tools.mem.session.set('search', '');
events.page.set(1);
},
},
get: function() {
$('#wheel-logo').css('transform', 'rotate(360deg)');
console.log('getting events...');
amivcore.events.GET({
data: {
'max_results': '50',
page: events.page.cur(),
sort: events.sort.cur(),
where: events.search.cur(),
}
}, function(ret) {
console.log(ret);
if (ret === undefined || ret['_items'].length == 0) {
tools.log('No Data', 'w');
// Clear table from previous contentent
$('.events-table tbody').html('');
return;
}
events.meta = ret['_meta'];
events.page.max = Math.ceil(events.meta.total / events.meta.max_results);
$('.events-page-max-cont').html(events.page.max);
// Clear table from previous contentent
$('.events-table tbody').html('');
for (var n in ret['_items']) {
var tmp = '';
events.showInTable.forEach(function(i) {
tmp += '<td>' + ret['_items'][n][i] + '</td>';
});
$('.events-table tbody').append('<tr data-id="' + ret['_items'][n]['_id'] + '">' + tmp + '</tr>');
}
$('.events-table tbody tr').click(events.showDetails);
$('#wheel-logo').css('transform', 'rotate(0deg)');
});
createEvent: function() {
$("#event-modal-title").text("Create Event");
$('#event-modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary" onclick="events.submitNewEvent()">Submit</button>');
$('#event-modal').modal('show');
},
//show details of an event in a modal
//TODO: fill the more beautiful event-modal
somethingChanged = false;
console.log($(this).attr('data-id'));
amivcore.events.GET({
id: $(this).attr('data-id')
}, function(ret) {
curEventData = ret;
console.log(curEventData);
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
$("#event-modal-title").text("Edit Event");
$('#event-modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary" onclick="events.inspectEvent()">update</button><button type="button" class="btn btn-danger" onclick="events.deleteEvent(' + etag +')">Delete</button>');
var etag = ret['_etag'];
$('#event-modal').attr('data-etag', etag);
//fill fields of the form with content that has the same ID
$('#event-modal-form').find('input, textarea').val(function (index, value) {
return ret[this.id];
});
//array of elements that are represented by checkboxes
var booleanEventData = ['signup-required', 'no-signup-limit', 'allow_email_signup', 'show_website', 'show_infoscreen', 'show_announce'];
for (i = 0; i < booleanEventData.length; i++){
$("#" + booleanEventData[i]).prop('checked', ret[booleanEventData[i]]);
}
//set the datepickers
$('#event-modal').modal('show');
var dateEventData = ['time_start', 'time_end', 'time_register_start', 'time_register_end', 'time_advertising_start', 'time_advertising_end'];
for (i = 0; i < dateEventData.length; i++){
if (ret[dateEventData[i]] != null){
$('#' + dateEventData[i]).data("DateTimePicker").date(new Date(ret[dateEventData[i]]));
}
}
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
// var tmp = '<table class="table table-hover events-edit-table" data-etag="' + ret['_etag'] + '"><tbody>';
// for (var cur in ret) {
// if (cur.charAt(0) != '_' && cur != 'signups')
// tmp += '<tr><td>' + cur + '</td><td contenteditable>' + ret[cur] + '</td></tr>'
// }
// tmp += '</tbody></table>';
//
// tools.modal({
// head: ret.title_de,
// body: tmp,
// button: {
// 'Delete': {
// type: 'danger',
// close: false,
// callback: function() {
// if (confirm("Delete " + ret.title_de + "?") == true) {
// amivcore.events.DELETE({
// id: curEventData.id,
// header: {
// 'If-Match': $('.events-edit-table').attr('data-etag')
// }
// }, function(response) {
// console.log(response);
// });
// events.get();
// tools.log('Event deleted', 'w');
// tools.modalClose();
// } else {
// tools.log('Event not Deleted', 'i');
// }
// }
// },
// 'Signups': {
// type: 'info',
// close: false,
// callback: function() {
// events.showSignups(curEventData);
// }
// },
// 'Update': {
// type: 'success',
// close: false,
// callback: events.inspectEvent
// }
// }
// });
deleteEvent: function(etag) {
console.log('delete triggered');
if (confirm("Delete " + curEventData.title_de + "?") == true) {
amivcore.events.DELETE({
id: curEventData.id,
header: {
// 'If-Match': $('#event-modal').attr('data-etag')
'If-Match': etag
}
}, function(response) {
console.log(response);
});
events.get();
tools.log('Event deleted', 'w');
tools.modalClose();
} else {
tools.log('Event not Deleted', 'i');
}
},
/*showDetails: function() {
amivcore.events.GET({
id: $(this).attr('data-id')
}, function(ret) {
curEventData = ret;
console.log(curEventData);
for (var attr in curEventData) {
$('#' + attr).val(curEventData[attr]);
}
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
});
},*/
showSignups: function(curEventData) {
var tmp = '<table class="table table-hover events-edit-table" data-etag="' + curEventData['_etag'] + '"><tbody>';
for (var user in curEventData['signups']) {
tmp += '<tr><td>' + user + '</td><td contenteditable>' + curEventData['signups'][cur] + '</td></tr>';
}
tmp += '</tbody></table>';
tools.modal({
head: curEventData.title_de,
body: tmp,
button: {
'Update': {
type: 'success',
close: false
//callback
}
}
});
},
inspectEvent: function() {
var newEventData = {};
$('.events-edit-table tr').each(function() {
newEventData[$(this).children('td:nth-child(1)').html()] = $(this).children('td:nth-child(2)').html();
});
var changed = false,
curEventDataChanged = {};
for (var i in newEventData) {
if (newEventData[i] != String(curEventData[i])) {
changed = true;
curEventDataChanged[i] = newEventData[i];
}
}
console.log(curEventDataChanged);
if (changed) {
//workaround to get booleans and ints working
for (var i in curEventDataChanged) {
if (!isNaN(curEventDataChanged[i])) curEventDataChanged[i] = parseInt(curEventDataChanged[i]);
if (curEventDataChanged[i] === 'null' || curEventDataChanged[i] === '') curEventDataChanged[i] = null;
if (curEventDataChanged[i] === 'true') curEventDataChanged[i] = true;
if (curEventDataChanged[i] === 'false') curEventDataChanged[i] = false;
}
console.log(curEventDataChanged);
amivcore.events.PATCH({
'If-Match': $('.events-edit-table').attr('data-etag')
},
data: curEventDataChanged
}, function(ret) {
if (!ret.hasOwnProperty('_status') || ret['_status'] != 'OK')
tools.log(JSON.stringify(ret.responseJSON['_issues']), 'e');
else {
// console.log(ret);
tools.log('Event Updated', 's');
events.get();
tools.modalClose();
});
}
},
submitNewEvent: function() {
console.log("submitting new event");
var newEvent = {
data: {}
};
newEvent["data"]["title_de"] = setNullIfEmpty($("#title_de").val());
newEvent["data"]["description_de"] = setNullIfEmpty($("#description_de").val());
newEvent["data"]["catchphrase_de"] = setNullIfEmpty($("#catchphrase_de").val());
if (!($("#time_start").data("DateTimePicker").date() == null)) {
newEvent["data"]["time_start"] = $("#time_start").data("DateTimePicker").date();
}
if (!($("#time_end").data("DateTimePicker").date() == null)) {
newEvent["data"]["time_end"] = $("#time_end").data("DateTimePicker").date();
}
if (!($("#time_advertising_start").data("DateTimePicker").date() == null)) {
newEvent["data"]["time_advertising_start"] = $("#time_advertising_start").data("DateTimePicker").date();
}
if (!($("#time_end").data("DateTimePicker").date() == null)) {
newEvent["data"]["time_advertising_end"] = $("#time_advertising_end").data("DateTimePicker").date();
}
if (!$("#signup-required").is(":checked")) {
if ($("#no-signup-limit").is(":checked")) {
newEvent["data"]["spots"] = 0;
if ($("#spots").val() === "") {
tools.log("Please specify a number of Spots", "e");
return;
}
newEvent["data"]["spots"] = parseInt($("#spots").val());
if (!($("#time_register_start").data("DateTimePicker").date() == null)) {
newEvent["data"]["time_register_start"] = $("#time_register_start").data("DateTimePicker").date();
} else {
tools.log('field "Start of Registration" required', 'e');
return;
}
if (!($("#time_register_end").data("DateTimePicker").date() == null)) {
newEvent["data"]["time_register_end"] = $("#time_register_end").data("DateTimePicker").date();
} else {
tools.log('field "End of Registration" required', 'e');
return;
}
} else {
newEvent["data"]["allow_email_signup"] = $("#allow_email_signup").is(':checked');
newEvent["data"]["location"] = setNullIfEmpty($("#location").val());
if (!($("#price").val() === "")) {
newEvent["data"]["price"] = Math.floor((parseFloat($("#price").val()) * 100));
}
newEvent["data"]["show_website"] = $("#show_website").is(':checked');
newEvent["data"]["show_infoscreen"] = $("#show_infoscreen").is(':checked');
newEvent["data"]["show_announce"] = $("#show_announce").is(':checked');
newEvent["data"]["priority"] = (parseInt($("#priority").val()));
newEvent["data"]["additional_fields"] = setNullIfEmpty($("#additional_fields").val());
newEvent["data"]["title_en"] = setNullIfEmpty($("#title_en").val());
newEvent["data"]["description_en"] = setNullIfEmpty($("#description_en").val());
newEvent["data"]["catchphrase_en"] = setNullIfEmpty($("#catchphrase_en").val());
console.log(newEvent);
console.log(JSON.stringify(newEvent));
var response = amivcore.events.POST(newEvent, function(ret) {
if (!ret.hasOwnProperty('_status') || ret['_status'] != 'OK')
tools.log(JSON.stringify(ret.responseJSON['_issues']), 'e');
else {
tools.log('Event Added', 's');
$('#event-modal').modal('hide');
$("#event-modal-form").trigger('reset');
events.get();
}
});
console.log(response);
//setting up the date time picker
$(function() {
$('#time_start').datetimepicker({
$('#time_end').datetimepicker({
locale: "de",
useCurrent: false, //Important! See issue #1075aa
sideBySide: true
});
$('#time_advertising_start').datetimepicker({
locale: "de",
sideBySide: true
});
$('#time_advertising_end').datetimepicker({
locale: "de",
useCurrent: false, //Important! See issue #1075aa
sideBySide: true
$('#time_register_start').datetimepicker({
});
$('#time_register_end').datetimepicker({
locale: "de",
useCurrent: false, //Important! See issue #107534
sideBySide: true
});
$("#time_register_start").on("dp.change", function(e) {
$('#time_register_end').data("DateTimePicker").minDate(e.date);
});
$("#time_register_end").on("dp.change", function(e) {
$('#time_register_start').data("DateTimePicker").maxDate(e.date);
});
$("#time_advertising_start").on("dp.change", function(e) {
$('#time_advertising_end').data("DateTimePicker").minDate(e.date);
});
$("#time_advertising_end").on("dp.change", function(e) {
$('#time_advertising_start').data("DateTimePicker").maxDate(e.date);
});
$("#time_start").on("dp.change", function(e) {
$('#time_end').data("DateTimePicker").minDate(e.date);
});
$("#time_end").on("dp.change", function(e) {
$('#time_start').data("DateTimePicker").maxDate(e.date);
});
$('#signup-required').click(function() {
$('#no-signup-limit').attr('disabled', this.checked);
$('#spots').attr('disabled', this.checked);
$('#time_register_end>input').attr('disabled', this.checked);
$('#time_register_start>input').attr('disabled', this.checked);
$('#no-signup-limit').click(function() {
$('#spots').attr('disabled', this.checked);
tools.ui.menu({
'<span class="glyphicon glyphicon-plus" data-toggle="tooltip" aria-hidden="true" title="Create new Event" data-placement="bottom"></span>': {
},
'<span class="glyphicon glyphicon-refresh" aria-hidden="true" data-toggle="tooltip" title="Refresh" data-placement="bottom"></span>': {
callback: events.get
},
'<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>': {
callback: events.page.dec
},
'<span class="events-cur-page-cont" aria-hidden="true"></span> / <span class="events-page-max-cont" aria-hidden="true"></span>': {
callback: function() {
tools.modal({
head: 'Go To Page:',
body: '<div class="form-group"><input type="number" value="' + events.page.cur() + '" class="form-control events-go-page"></div>',
button: {
'Go': {
type: 'success',
close: true,
callback: function() {
events.page.set($('.events-go-page').val());
},
}
}
});
},
'<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>': {
callback: events.page.inc
},
'<span class="glyphicon glyphicon-sort" aria-hidden="true" data-toggle="tooltip" title="Sort" data-placement="bottom"></span>': {
callback: function() {
var tmp = '<div class="form-group"><select class="form-control events-sort-select">';
var cur = events.sort.cur();
['_id', 'title_de', 'description_de', 'time_start', 'time_register_start', 'time_end', 'time_register_end', 'show_website', 'show_announce', 'show_infoscreen', 'price', '_updated', 'location'].forEach(function(i) {
tmp += '<option value="' + i + '"' + ((i == cur) ? ' selected' : '') + '>⇡ ' + i + '</option>';
tmp += '<option value="-' + i + '"' + (('-' + i == cur) ? ' selected' : '') + '>⇣ ' + i + '</option>';
});
tmp += '</select></div>';
tools.modal({
head: 'Sort',
body: tmp,
button: {
'Sort': {
type: 'success',
close: true,
callback: function() {
events.sort.set($('.events-sort-select').val());
}
}
}
});
}
},
'<span class="glyphicon glyphicon-search" aria-hidden="true" data-toggle="tooltip" title="Search" data-placement="bottom"></span>': {
callback: function() {
var tmp = '<div class="form-group"><select class="form-control events-search-select">';
var cur = events.search.cur();
if (cur === null || cur == '')
cur = '';
else
cur = cur.split('==')[1];
['_id', 'title_de', 'description_de', 'title_en', 'description_en', 'time_start', 'time_register_start', 'time_end', 'time_register_end', 'show_website', 'show_announce', 'show_infoscreen', 'price', '_updated', 'location']
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
.forEach(
function(i) {
tmp += '<option value="' + i + '"' + ((i == cur) ? ' selected' : '') + '>' + i + '</option>';
});
tmp += '</select><br><input type="text" value="' + cur + '" class="form-control events-search-val"></div>';
tools.modal({
head: 'Search',
body: tmp,
button: {
'Clear': {
type: 'warning',
close: true,
callback: events.search.clr,
},
'Search': {
type: 'success',
close: true,
callback: function() {
events.search.set($('.events-search-select').val(), $('.events-search-val').val());
}
},
}
})
}
}
});
if (events.page.cur() === null || isNaN(events.page.cur()))
events.page.set(1);
else
events.page.set(events.page.cur());
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
$('#event-modal-form').on('keyup change', 'input, select, textarea, span ', function(){
console.log('changed shit');
events.somethingChanged = true;
});
function setNullIfEmpty(formData) {
if (formData === "") {
return null;
}
return formData;