svatbonet/wireframe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upravy v programu a rozpoctu

Browse Source
This commit is contained in:
Michal Kváček
2018-12-10 23:23:43 +01:00
parent c7b98c8313
commit 9b4b7e86a6
10 changed files with 285 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
-1
View File
@@ -29,4 +29,3 @@ function requireAll(r) {
}
requireAll (require.context ('./src/assets/js', true, /\.js$/));
src/app.js
+74 -5
View File
@@ -86,6 +86,7 @@ var templateData = {
budget: [
{
name: "Rozlucka se svobodou",
limit: 20000,
items: [
{
name: "Polozka 1",
@@ -123,6 +124,21 @@ function renderTemplate(req, res) {
var urlSegment = url.replace (/[^a-z0-9_]/, '');
var viewsRoot = app.get ('views');
for (var budget in templateData.budget) {
console.log(typeof templateData.budget[budget]);
if (typeof templateData.budget[budget] == 'undefined') {
templateData.budget.splice (budget, 1);
continue;
}
for (var item in templateData.budget[budget].items) {
if (typeof templateData.budget[budget].items[item] == 'undefined') {
templateData.budget[budget].items.splice (item, 1);
}
}
}
templateData.queryString = req.query;
templateData.page = urlSegment;
@@ -188,15 +204,18 @@ app.post ('/editor/album', function (req, res) {
app.post ('/budget/groups', function (req, res) {
var groups = req.body.group;
var limits = req.body.limit;
for (var i in groups) {
if (typeof templateData.budget[i] == 'undefined') {
templateData.budget[i] = {
name: groups[i],
limit: limits[i],
items: []
}
} else {
templateData.budget[i].name = groups[i];
templateData.budget[i].limit = limits[i];
}
}
@@ -211,7 +230,7 @@ app.post ('/budget/groups', function (req, res) {
});
app.post ('/budget/add_item', function (req, res) {
console.log (req.body);
var items = req.body.name.length;
var newGroupsMap = {};
@@ -225,7 +244,7 @@ app.post ('/budget/add_item', function (req, res) {
var newGroupName = req.body.group_name[i];
if (typeof newGroupsMap[newGroupName] == 'undefined') {
templateData.budget.push ({name: newGroupName, items: []});
templateData.budget.push ({name: newGroupName, limit: 10000, items: []});
newGroupsMap[newGroupName] = templateData.budget.length;
@@ -253,19 +272,49 @@ app.post ('/budget/add_item', function (req, res) {
});
app.post ('/budget/add_item_in_group', function (req, res) {
console.log (req.body);
var items = req.body.name.length;
app.get('/budget/detail/:id', function (req, res) {
var group = req.body.group;
templateData.budget[group].limit = req.body.limit;
templateData.budget[group].items = [];
for (var i = 0; i < items; i++) {
var itemName = req.body.name[i];
var price = req.body.price[i];
var bought = typeof req.body["bought_" + i] == 'undefined' ? false : true;
templateData.budget[group].items.push ({
name: itemName,
price: price,
bought: bought
});
}
var redirectUrl = '/budget';
if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?' + req.body.redirectParams;
}
res.redirect (redirectUrl)
});
app.get ('/budget/detail/:id', function (req, res) {
var detail = templateData.budget[req.params.id];
detail.id = req.params.id;
app.set ('layout', false);
app.set ('views', viewsRootBase);
res.render ('partials/backend/budgetDetail.ejs', detail);
});
app.post ('/budget/bought/:group/:item', function (req, res) {
@@ -281,6 +330,26 @@ app.post ('/budget/bought/:group/:item', function (req, res) {
});
app.get ('/budget/group/:group/delete', function (req, res) {
var group = req.params.group;
delete templateData.budget[group];
res.end ();
});
app.get ('/budget/group/:group/:item/delete', function (req, res) {
var group = req.params.group;
var item = req.params.item;
delete templateData.budget[group].items[item];
res.end ();
});
app.post ('/editor/:page?', function (req, res) {
savePost (req, res);
src/assets/js/deleteButton.js
+33
View File
@@ -21,4 +21,37 @@ $ (document).on ('click', '.js-delete-button', function () {
var target = $ (this).data ('target');
$ (this).closest (target).remove ();
var url = $ (this).data ('href');
if (typeof url != 'undefined') {
$.get (url);
}
});
$ (document).ready (function () {
setInterval (function () {
$ ('.template-container').each (function () {
var $items = $ (this).find ('.template-container__item:not(.existing)');
if ($items.length > 1) {
$items.find ('.js-delete-button').show ();
} else {
$items.find ('.js-delete-button').hide ();
}
$items = $ (this).find ('.template-container__item.existing');
if ($items.length > 1) {
$items.find ('.js-delete-button').show ();
} else {
$items.find ('.js-delete-button').hide ();
}
});
}, 500);
});
src/assets/js/program.js
+17 -65
View File
@@ -1,9 +1,17 @@
$ (document).on ('click', '.js-add-program', function () {
var $template= $($(this).data('template'));
$template.clone().appendTo($template.parent());
var $clone = $template.clone();
renameInputs();
$clone.find('input[type=text]').val("");
$clone.find('input[type=number]').val("");
$clone.find('input[type=checkbox]').attr("checked", false);
$clone.removeClass('existing');
$clone.appendTo($template.parent());
renameInputs($template.parent());
$ ('.select-time').datetimepicker ({
format: 'LT',
@@ -12,80 +20,24 @@ $ (document).on ('click', '.js-add-program', function () {
});
});
function renameInputs() {
var items = $ ('.template-container__item');
function renameInputs($container) {
var items = $container.find ('.template-container__item');
var i = 0;
items.each (function () {
var $rows = $ (this).find ('input,select');
$rows.each (function () {
var name = $ (this).attr ('name');
$ (this).attr ('name', name.replace (/\[[0-9]+\]/g, '[' + i + ']'));
$ (this).attr ('name', $ (this).attr ('name').replace (/\[[0-9]+\]/g, '[' + i + ']'));
$ (this).attr ('name', $ (this).attr ('name').replace (/_[0-9]+/g, '_' + i));
// console.log($ (this).attr ('name'));
});
i++;
});
}
$ (document).on ('click', '.js-sort-events', function () {
var $templateContainer = $ ($ (this).data ('template-container'));
var $templates = $ ($ (this).data ('template'));
sortEvents ($templateContainer, $templates);
$ (this).fadeOut ();
});
function sortEvents($container, $templates) {
var elements = $templates.get ();
$container.children().remove();
elements.sort (function (a, b) {
// console.log (a);
var timeA = $ (a).find ('.select-time').val ();
var timeB = $ (b).find ('.select-time').val ();
return timeA > timeB ? 1 : -1;
});
$container.append (elements);
renameInputs ();
}
function checkEvents($container, $templates) {
var lastTime = null;
var orderCorrect = true;
$templates.each (function () {
var time = $ (this).find ('.select-time').val ();
if (time < lastTime) {
// console.log ($(this).find('.select-time').attr('name')+": "+time + " < " + lastTime);
orderCorrect = false;
}
lastTime = time;
});
if (!orderCorrect) {
$ ('.js-sort-events').fadeIn ();
} else {
$ ('.js-sort-events').fadeOut ();
}
}
$ (document).ready (function () {
setInterval (function () {
var $templateContainer = $ ('.template-container');
var $templates = $ ('.program-template');
checkEvents ($templateContainer, $templates);
}, 1000);
});
$ (document).on ('click', '.js-remove-program', function () {
src/assets/scss/editor/app.scss
-6
View File
@@ -3,12 +3,6 @@
@import "timeline";
@import "gallery";
.item-template:first-child, .program-template:first-child, .template:first-child {
.js-remove-program {
display: none;
}
}
.sort-handle:hover {
cursor: move;
}
src/views/backend/budget.ejs
+64 -33
View File
@@ -22,6 +22,7 @@
<a href="javascript:void(0);" data-toggle="modal" data-target="#addGroup">Přidat</a>
</div>
<% } else { %>
<% console.log(budget) %>
<% for (var i in budget) { %>
<!--<div class="col-md-4">-->
<div class="card boxes__item budget" style="min-width: 25%; margin: 10px;" data-id="<%= i %>">
@@ -29,12 +30,13 @@
<h3><%= budget[i].name %></h3>
</div>
<div class="card-body">
<input type="hidden" class="totalPrice" value="<%= budget[i].limit %>" />
<% if (budget[i].items.length > 0) { %>
<table class="table table-bordered table-striped table-hover">
<tbody>
<% for (var j in budget[i].items) { %>
<% var item = budget[i].items[j]; %>
<tr class="budget__item" <%= (j >= 4 ? 'hidden' : '') %>>
<td>
@@ -66,7 +68,7 @@
</div>
<div class="card-footer">
CELKEM <span class="totalPrice"></span> Kč
CELKEM <%= budget[i].limit %> Kč
<div class="progress">
<div class="progress-bar" role="progressbar">
@@ -77,8 +79,10 @@
<!--</div>-->
<% } %>
<% } %>
</div>
<% include ../partials/backend/modals/addItem.ejs %>
<% include ../partials/backend/modals/addItem.ejs %>
<% include ../partials/backend/modals/addGroup.ejs %>
<% include ../partials/backend/modals/budgetGroup.ejs %>
@@ -96,56 +100,83 @@
method: 'get',
success: function (response) {
modal.find ('.modal-body').html (response);
reinitBudgetProgressBars();
}
});
})
function recalculateGroup($group) {
var items = $group.find ('.budget__item');
var priceTotal = 0, priceBought = 0;
$ ('.modal').on ('hide.bs.modal', function (event) {
$ ('.boxes__container').load ('/budget .boxes__container', function () {
reinitBudgetProgressBars ();
});
});
items.each (function () {
var bought = $ (this).find ('input[type=checkbox]');
function recalculateGroup($group) {
var items = $group.find ('.budget__item');
var priceTotal = $group.find ('.totalPrice').val (), priceEstimation = 0, priceBought = 0;
var value = parseInt (bought.val ());
items.each (function () {
var bought = $ (this).find ('input[type=checkbox]');
priceTotal += value;
if (bought.is (':checked')) {
priceBought += value;
}
});
var value = parseInt (bought.val ());
var remainingPercentage = priceBought / priceTotal * 100;
var progressBarClass;
if ($(this).find ('.price_field').length != 0) {
value = parseInt ($(this).find ('.price_field').val ());
}
if (remainingPercentage < 25) {
progressBarClass = 'progress-bar-success';
} else if (remainingPercentage < 50) {
progressBarClass = 'progress-bar-info';
} else if (remainingPercentage < 80) {
progressBarClass = 'progress-bar-warning';
} else {
progressBarClass = 'progress-bar-danger';
priceEstimation += value;
if (bought.is (':checked')) {
priceBought += value;
}
});
var remainingPercentage = priceBought / priceTotal * 100;
var progressBarClass;
if (remainingPercentage < 25) {
progressBarClass = 'progress-bar-success';
} else if (remainingPercentage < 50) {
progressBarClass = 'progress-bar-info';
} else if (remainingPercentage < 80) {
progressBarClass = 'progress-bar-warning';
} else {
progressBarClass = 'progress-bar-danger';
}
$group.find ('.totalPrice').text (priceTotal);
$group.find ('.progress-bar').text ("Zbývá " + (priceTotal - priceBought) + " Kč")
var diff = (priceTotal - priceBought);
var progressBarText = "Zbývá " + diff + " Kč";
if (diff < 0) {
progressBarText = "Přečerpáno " + (diff * -1)+" Kč";
}
$group.find ('.progress-bar').text (progressBarText)
.css ('width', (remainingPercentage) + "%")
.attr ('class', '')
.addClass ('progress-bar')
.addClass (progressBarClass);
$group.find('.estimatedPrice').text(priceEstimation+" Kč");
$group.find('.realPrice').text(priceBought+" Kč");
if (priceTotal == 0) {
$group.find ('.card-footer').hide ();
}
}
$ (document).ready (function () {
$ ('.budget').each (function () {
recalculateGroup ($ (this));
});
});
function reinitBudgetProgressBars() {
$ ('.budget').each (function () {
recalculateGroup ($ (this));
});
}
$ (document).ready (reinitBudgetProgressBars);
$ (document).on ('change', '.totalPrice', reinitBudgetProgressBars);
$ (document).on ('change', '.price_field', reinitBudgetProgressBars);
$ (document).on ('change', 'input[type=checkbox]', function () {
@@ -159,7 +190,7 @@
method: 'post',
data: 'bought=' + $ (this).is (':checked')
});
});
</script>
</div>
src/views/partials/backend/budgetDetail.ejs
+76 -61
View File
@@ -1,75 +1,90 @@
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Koupeno</th>
<th>Jméno</th>
<th>Cena</th>
<th></th>
</tr>
</thead>
<tbody class="item-in-group-template-container draggable-container">
<div class="budget" data-id="<%= id %>">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Koupeno</th>
<th>Jméno</th>
<th>Cena</th>
<th></th>
</tr>
</thead>
<tbody class="item-in-group-template-container template-container draggable-container">
<input type="hidden" name="group" value="<%= id %>">
<% for (var i in items) { %>
<tr class="budget-item-template draggable template-container__item">
<td class="text-center" style="width: 30px;">
<input type="checkbox" class="" name="bought[<%= i %>]" value="1">
<% for (var i in items) { %>
<tr class="budget-item-template draggable template-container__item budget__item existing">
<td class="text-center" style="width: 30px;">
</td>
<td>
<input type="text" name="name[<%= i %>" class="form-control" value="<%= items[i].name %>" >
</td>
<td style="width: 25%">
<input type="checkbox" name="bought_<%= i %>" data-id="<%= i %>"
<% if (items[i].bought) { %> checked
<% } %>value="1">
</td>
<td>
<input type="text" name="name[<%= i %>]" class="form-control" value="<%= items[i].name %>">
</td>
<td style="width: 25%">
<div class="input-group">
<input type="number" data-step="100" min="0" required value="<%= items[i].price %>" name="price[<%= i %>]" class="form-control">
<div class="input-group-append">
<span class="input-group-text">Kč</span>
<div class="input-group">
<input type="number" data-step="100" min="0" required value="<%= items[i].price %>" name="price[<%= i %>]" class="price_field form-control">
<div class="input-group-append">
<span class="input-group-text">Kč</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<a href="javascript:void(0);" class="js-delete-button" data-target="tr">
<i class="fa fa-trash"></i>
</a>
</td>
<td class="text-right">
<a href="javascript:void(0);" data-href="/budget/group/<%= id %>/<%= i %>/delete" class="js-delete-button" data-target="tr">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<% } %>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<a href="javascript:void(0);" class="btn btn-outline-secondary js-add-program" data-template=".budget-item-template:last-child"><i class="fa fa-plus"></i>
Přidat položku</a>
</td>
</tr>
<% } %>
</tfoot>
</table>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<a href="javascript:void(0);" class="btn btn-outline-secondary js-add-program" data-template=".budget-item-template:last-child"><i class="fa fa-plus"></i>
Přidat položku</a>
</td>
</tr>
</tfoot>
</table>
<div class="row justify-content-center">
<div class="col-md-8 m-3 text-center"><strong>Limit pro skupinu: 25 000 Kč</strong>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:90%">
Zbývá 870 Kč
<div class="row justify-content-center">
<div class="col-md-8 m-3 text-center">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">Limit pro skupinu</span>
</div>
<input type="number" data-step="100" min="0" required value="<%= limit %>" name="limit" class="totalPrice form-control">
<div class="input-group-append">
<span class="input-group-text">Kč</span>
</div>
</div>
</div> </div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-secondary text-center">
<h3>Aktuální náklady</h3>
<h2>12 500 Kč</h2>
</div>
</div>
<div class="col">
<div class="alert alert-secondary text-center">
<h3>Celkové náklady</h3>
<h2>23 500 Kč</h2>
<div class="row my-3">
<div class="col">
<div class="progress" style="height: 3rem">
<div class="progress-bar"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-secondary text-center"><h3>Aktuální náklady</h3>
<h2 class="realPrice"></h2>
</div>
</div>
<div class="col">
<div class="alert alert-secondary text-center">
<h3>Celkové náklady</h3>
<h2 class="estimatedPrice"></h2>
</div>
</div>
</div>
</div>
src/views/partials/backend/modals/addGroup.ejs
+17 -1
View File
@@ -17,15 +17,31 @@
<thead>
<tr>
<th>Název skupiny</th>
<th>Limit</th>
</tr>
</thead>
<tbody class="template-container draggable-container">
<% for (var i in budget) { %>
<tr class="add-group-template draggable template-container__item">
<tr class="add-group-template draggable template-container__item existing">
<td>
<input type="text" class="form-control" name="group[<% i %>]" value="<%= budget[i].name %>">
</td>
<td style="width: 25%">
<div class="input-group">
<input type="number" data-step="100" min="0" required name="limit[<% i %>]" value="<%= budget[i].limit %>" class="form-control">
<div class="input-group-append">
<span class="input-group-text">Kč</span>
</div>
</div>
</td>
<td class="text-right">
<a href="javascript:void(0);" data-href="/budget/group/<%= i %>/delete" data-target="tr" class="js-delete-button"><i class="fa fa-fw fa-trash"></i></a>
</td>
</tr>
<% } %>
src/views/partials/backend/modals/budgetGroup.ejs
+1 -1
View File
@@ -8,7 +8,7 @@
</button>
</div>
<form action="/budget/groups" method="post">
<form action="/budget/add_item_in_group" method="post">
<input type="hidden" name="redirectParams" value="ok=groupSaved">
src/views/partials/program.ejs
+3 -5
View File
@@ -7,10 +7,10 @@
<th></th>
</tr>
</thead>
<tbody class="template-container">
<tbody class="template-container draggable-container">
<% for(var i in program) { %>
<tr class="program-template template-container__item">
<tr class="program-template template-container__item existing draggable sort-handle">
<td style="position: relative">
<input type="text" class="form-control time select-time" size="4" name="program[<%= i %>][time][]" value="<%= program[i]['time'] %>" placeholder="11:00">
</td>
@@ -26,7 +26,7 @@
<input type="text" class="form-control program-description" name="program[<%= i %>][title][]" value="<%= program[i]['title'] %>">
</td>
<td>
<a href="javascript:void(0);" class="js-remove-program"><i class="fa fa-2x fa-fw fa-trash"></i></a>
<a href="javascript:void(0);" class="js-delete-button"><i class="fa fa-fw fa-trash"></i></a>
</td>
</tr>
@@ -37,8 +37,6 @@
<tr>
<td colspan="4">
<a href="javascript:void(0);" class="btn btn-outline-secondary js-add-program" data-template=".program-template:last-child"><i class="fa fa-plus"></i> Přidat akci</a>
<a href="javascript:void(0);" class="btn btn-outline-secondary js-sort-events" style="display: none" data-template-container=".template-container" data-template=".program-template"><i class="fa fa-sort-numeric-asc"></i> Seřadit akce chronologicky</a>
</td>
</tr>
</tfoot>