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
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>