Castecne funkcni rozpocet
This commit is contained in:
Michal Kváček
+144
-164
@@ -1,185 +1,165 @@
|
||||
<div class="heading-budget my-3 col-md-12">
|
||||
<h1>Správa rozpočtu</h1>
|
||||
|
||||
<a href="#addItem" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addItem">
|
||||
Přidat položky
|
||||
</a>
|
||||
<a href="#addGroup" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addGroup">
|
||||
Upravit skupiny
|
||||
</a>
|
||||
<a href="#addItem" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addItem">
|
||||
Přidat položky
|
||||
</a>
|
||||
<a href="#addGroup" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addGroup">
|
||||
Upravit skupiny
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<%- include('../partials/notification.ejs', {parameter: "newGroup", notifiactionText: "Skupina úspěšně vytvořena."})%>
|
||||
<%- include('../partials/notification.ejs', {parameter: "newItems", notificationText: "Položky úspěšně vloženy."})%>
|
||||
<%- include('../partials/notification.ejs', {parameter: "groupSaved", notificationText: "Položky ve skupině úspěšně upraveny."})%>
|
||||
<%- include('../partials/notification.ejs', {parameter: "newGroup", notifiactionText: "Skupina úspěšně vytvořena."}) %>
|
||||
<%- include('../partials/notification.ejs', {parameter: "newItems", notificationText: "Položky úspěšně vloženy."}) %>
|
||||
<%- include('../partials/notification.ejs', {parameter: "groupSaved", notificationText: "Položky ve skupině úspěšně upraveny."}) %>
|
||||
|
||||
|
||||
<div class="boxes__container text-center justify-content-center col-md-12 row row-space">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card boxes__item">
|
||||
<div class="card-header">
|
||||
<h3>
|
||||
Rozlučka se svobodou </h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if (budget.length == 0) { %>
|
||||
<div class="alert alert-info">
|
||||
Zatím tu nejsou žádná data.
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-target="#addGroup">Přidat</a>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<% 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 %>">
|
||||
<div class="card-header">
|
||||
<h3><%= budget[i].name %></h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<table class="table table-bordered table-striped table-hover">
|
||||
<tbody>
|
||||
<% if (budget[i].items.length > 0) { %>
|
||||
<table class="table table-bordered table-striped table-hover">
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 1</td>
|
||||
<td>1300 Kč</td>
|
||||
</tr>
|
||||
<% for (var j in budget[i].items) { %>
|
||||
<% var item = budget[i].items[j]; %>
|
||||
<tr class="budget__item" <%= (j >= 4 ? 'hidden' : '') %>>
|
||||
<td>
|
||||
<input type="checkbox" class="budget-item-<%= i %>-<%= j %>" data-id="<%= j %>" value="<%= item.price %>" <%= item.bought ? 'checked' : '' %>>
|
||||
</td>
|
||||
<td><%= item.name %></td>
|
||||
<td><%= item.price %> Kč</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 2</td>
|
||||
<td>4500 Kč</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 3</td>
|
||||
<td>340 Kč</td>
|
||||
</tr>
|
||||
<% if (budget[i].items.length > 4) { %>
|
||||
<p>
|
||||
+ Dalších <%= budget[i].items.length - 4 %> položek </p>
|
||||
<% } %>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-id="<%= i %>" data-target="#budgetGroup" class="btn btn-block btn-outline-secondary">
|
||||
<i class="fa fa-info"></i> Detail
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-target="#budgetGroup" class="btn btn-block btn-outline-secondary">
|
||||
<i class="fa fa-info"></i> Detail
|
||||
</a>
|
||||
<% } else { %>
|
||||
<div class="alert alert-info">
|
||||
Zatím tu nejsou žádná data.
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-target="#addItem">Přidat</a>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
CELKEM 6140 Kč
|
||||
<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>
|
||||
<div class="card-footer">
|
||||
CELKEM <span class="totalPrice"></span> Kč
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card boxes__item">
|
||||
<div class="card-header">
|
||||
<h3>
|
||||
Svatební hostina </h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered table-striped table-hover">
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" checked="checked" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 1</td>
|
||||
<td>1300 Kč</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 2</td>
|
||||
<td>4500 Kč</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" checked="checked" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 3</td>
|
||||
<td>3100 Kč</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 4</td>
|
||||
<td>3400 Kč</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" checked="checked" value=""></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Položka 5</td>
|
||||
<td>2000 Kč</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-target="#budgetGroup" class="btn btn-block btn-outline-secondary">
|
||||
<i class="fa fa-info"></i> Detail
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
CELKEM 12800 Kč
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:80%">
|
||||
Zbývá: 6000 Kč
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if (typeof queryString.ok !== 'undefined' && queryString.ok == "newGroup") { %>
|
||||
<div class="col-md-4">
|
||||
<div class="card boxes__item">
|
||||
<div class="card-header">
|
||||
<h3>
|
||||
Svatební cesta </h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="alert alert-info">
|
||||
Zatím tu nejsou žádná data. <a href="javascript:void(0);" data-toggle="modal" data-target="#addItem">Přidat</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
CELKEM 1740 Kč
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:45%">
|
||||
Zbývá: 4260 Kč
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</div>-->
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<% include ../partials/backend/modals/addItem.ejs %>
|
||||
<% include ../partials/backend/modals/addGroup.ejs %>
|
||||
<% include ../partials/backend/modals/budgetGroup.ejs %>
|
||||
<% include ../partials/backend/modals/addItem.ejs %>
|
||||
<% include ../partials/backend/modals/addGroup.ejs %>
|
||||
<% include ../partials/backend/modals/budgetGroup.ejs %>
|
||||
|
||||
<script>
|
||||
|
||||
$ ('#budgetGroup').on ('show.bs.modal', function (event) {
|
||||
var button = $ (event.relatedTarget);
|
||||
var id = button.data ('id');
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var modal = $ (this);
|
||||
|
||||
$.ajax ({
|
||||
url: '/budget/detail/' + id,
|
||||
method: 'get',
|
||||
success: function (response) {
|
||||
modal.find ('.modal-body').html (response);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function recalculateGroup($group) {
|
||||
var items = $group.find ('.budget__item');
|
||||
var priceTotal = 0, priceBought = 0;
|
||||
|
||||
items.each (function () {
|
||||
var bought = $ (this).find ('input[type=checkbox]');
|
||||
|
||||
var value = parseInt (bought.val ());
|
||||
|
||||
priceTotal += 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č")
|
||||
.css ('width', (remainingPercentage) + "%")
|
||||
.attr ('class', '')
|
||||
.addClass ('progress-bar')
|
||||
.addClass (progressBarClass);
|
||||
|
||||
if (priceTotal == 0) {
|
||||
$group.find ('.card-footer').hide ();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$ (document).ready (function () {
|
||||
$ ('.budget').each (function () {
|
||||
recalculateGroup ($ (this));
|
||||
});
|
||||
});
|
||||
|
||||
$ (document).on ('change', 'input[type=checkbox]', function () {
|
||||
|
||||
var $group = $ (this).closest ('.budget');
|
||||
var groupId = $group.data ('id');
|
||||
var itemId = $ (this).data ('id');
|
||||
recalculateGroup ($group);
|
||||
|
||||
$.ajax ({
|
||||
url: '/budget/bought/' + groupId + "/" + itemId,
|
||||
method: 'post',
|
||||
data: 'bought=' + $ (this).is (':checked')
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user