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

Castecne funkcni rozpocet

Browse Source
This commit is contained in:
Michal Kváček
2018-12-06 15:16:00 +01:00
parent faf0a9c642
commit c7b98c8313
8 changed files with 397 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+128 -5
View File
@@ -83,6 +83,33 @@ var templateData = {
} }
], ],
albumsCount: 0, albumsCount: 0,
budget: [
{
name: "Rozlucka se svobodou",
items: [
{
name: "Polozka 1",
bought: false,
price: 1200
},
{
name: "Polozka 2",
bought: false,
price: 1200
},
{
name: "Polozka 3",
bought: true,
price: 1200
},
{
name: "Polozka 4",
bought: false,
price: 1200
},
]
}
]
}; };
/** /**
@@ -140,31 +167,127 @@ app.post ('/:page?', function (req, res) {
var redirectUrl = '/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page); var redirectUrl = '/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page);
if (typeof req.body.redirectParams !== 'undefined') { if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?'+req.body.redirectParams; redirectUrl += '?' + req.body.redirectParams;
} }
res.redirect (redirectUrl) res.redirect (redirectUrl)
}); });
app.post('/editor/album', function (req, res) { app.post ('/editor/album', function (req, res) {
templateData.albumsCount ++; templateData.albumsCount++;
var redirectUrl = '/editor/gallery_detail'; var redirectUrl = '/editor/gallery_detail';
if (typeof req.body.redirectParams !== 'undefined') { if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?'+req.body.redirectParams; redirectUrl += '?' + req.body.redirectParams;
} }
res.redirect (redirectUrl) res.redirect (redirectUrl)
}); });
app.post ('/budget/groups', function (req, res) {
var groups = req.body.group;
for (var i in groups) {
if (typeof templateData.budget[i] == 'undefined') {
templateData.budget[i] = {
name: groups[i],
items: []
}
} else {
templateData.budget[i].name = groups[i];
}
}
var redirectUrl = '/budget';
if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?' + req.body.redirectParams;
}
res.redirect (redirectUrl)
});
app.post ('/budget/add_item', function (req, res) {
var items = req.body.name.length;
var newGroupsMap = {};
for (var i = 0; i < items; i++) {
var group = req.body.group[i];
var itemName = req.body.name[i];
var price = req.body.price[i];
if (group == 'new') {
var newGroupName = req.body.group_name[i];
if (typeof newGroupsMap[newGroupName] == 'undefined') {
templateData.budget.push ({name: newGroupName, items: []});
newGroupsMap[newGroupName] = templateData.budget.length;
group = templateData.budget.length - 1;
} else {
group = newGroupsMap[newGroupName];
}
}
templateData.budget[group].items.push ({
name: itemName,
price: price,
bought: false
});
}
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];
app.set ('layout', false);
app.set ('views', viewsRootBase);
res.render ('partials/backend/budgetDetail.ejs', detail);
});
app.post ('/budget/bought/:group/:item', function (req, res) {
var group = req.params.group;
var item = req.params.item;
templateData.budget[group].items[item].bought = (req.body.bought == 'true' ? true : false);
console.log (templateData.budget[group]);
res.end ();
});
app.post ('/editor/:page?', function (req, res) { app.post ('/editor/:page?', function (req, res) {
savePost (req, res); savePost (req, res);
var redirectUrl = '/editor/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page); var redirectUrl = '/editor/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page);
if (typeof req.body.redirectParams !== 'undefined') { if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?'+req.body.redirectParams; redirectUrl += '?' + req.body.redirectParams;
} }
res.redirect (redirectUrl) res.redirect (redirectUrl)
src/assets/js/program.js
+1 -1
View File
@@ -17,7 +17,7 @@ function renameInputs() {
var i = 0; var i = 0;
items.each (function () { items.each (function () {
var $rows = $ (this).find ('input'); var $rows = $ (this).find ('input,select');
$rows.each (function () { $rows.each (function () {
var name = $ (this).attr ('name'); var name = $ (this).attr ('name');
$ (this).attr ('name', name.replace (/\[[0-9]+\]/g, '[' + i + ']')); $ (this).attr ('name', name.replace (/\[[0-9]+\]/g, '[' + i + ']'));
src/assets/scss/editor/app.scss
+1 -1
View File
@@ -3,7 +3,7 @@
@import "timeline"; @import "timeline";
@import "gallery"; @import "gallery";
.program-template:first-child, .template:first-child { .item-template:first-child, .program-template:first-child, .template:first-child {
.js-remove-program { .js-remove-program {
display: none; display: none;
} }
src/views/backend/budget.ejs
+144 -164
View File
@@ -1,185 +1,165 @@
<div class="heading-budget my-3 col-md-12"> <div class="heading-budget my-3 col-md-12">
<h1>Správa rozpočtu</h1> <h1>Správa rozpočtu</h1>
<a href="#addItem" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addItem"> <a href="#addItem" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addItem">
Přidat položky Přidat položky
</a> </a>
<a href="#addGroup" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addGroup"> <a href="#addGroup" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addGroup">
Upravit skupiny Upravit skupiny
</a> </a>
</div> </div>
<%- include('../partials/notification.ejs', {parameter: "newGroup", notifiactionText: "Skupina úspěšně vytvořena."})%> <%- 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: "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: "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="boxes__container text-center justify-content-center col-md-12 row row-space">
<div class="col-md-4"> <% if (budget.length == 0) { %>
<div class="card boxes__item"> <div class="alert alert-info">
<div class="card-header"> Zatím tu nejsou žádná data.
<h3> <a href="javascript:void(0);" data-toggle="modal" data-target="#addGroup">Přidat</a>
Rozlučka se svobodou </h3> </div>
</div> <% } else { %>
<div class="card-body"> <% 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"> <% if (budget[i].items.length > 0) { %>
<tbody> <table class="table table-bordered table-striped table-hover">
<tbody>
<tr> <% for (var j in budget[i].items) { %>
<td> <% var item = budget[i].items[j]; %>
<div class="checkbox"> <tr class="budget__item" <%= (j >= 4 ? 'hidden' : '') %>>
<label><input type="checkbox" value=""></label> <td>
</div> <input type="checkbox" class="budget-item-<%= i %>-<%= j %>" data-id="<%= j %>" value="<%= item.price %>" <%= item.bought ? 'checked' : '' %>>
</td> </td>
<td>Položka 1</td> <td><%= item.name %></td>
<td>1300 Kč</td> <td><%= item.price %> Kč</td>
</tr> </tr>
<% } %>
<tr> </tbody>
<td> </table>
<div class="checkbox">
<label><input type="checkbox" value=""></label>
</div>
</td>
<td>Položka 2</td>
<td>4500 Kč</td>
</tr>
<tr> <% if (budget[i].items.length > 4) { %>
<td> <p>
<div class="checkbox"> + Dalších <%= budget[i].items.length - 4 %> položek </p>
<label><input type="checkbox" value=""></label> <% } %>
</div>
</td>
<td>Položka 3</td>
<td>340 Kč</td>
</tr>
</tbody> <a href="javascript:void(0);" data-toggle="modal" data-id="<%= i %>" data-target="#budgetGroup" class="btn btn-block btn-outline-secondary">
</table> <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"> <% } else { %>
<i class="fa fa-info"></i> Detail <div class="alert alert-info">
</a> Zatím tu nejsou žádná data.
<a href="javascript:void(0);" data-toggle="modal" data-target="#addItem">Přidat</a>
</div>
<% } %>
</div> </div>
<div class="card-footer"> <div class="card-footer">
CELKEM 6140 Kč CELKEM <span class="totalPrice"></span> Kč
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:90%"> <div class="progress-bar" role="progressbar">
Zbývá 870 Kč
</div>
</div> </div>
</div> </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>
<% include ../partials/backend/modals/addItem.ejs %> <% include ../partials/backend/modals/addItem.ejs %>
<% include ../partials/backend/modals/addGroup.ejs %> <% include ../partials/backend/modals/addGroup.ejs %>
<% include ../partials/backend/modals/budgetGroup.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>
src/views/partials/backend/budgetDetail.ejs
+75
View File
@@ -0,0 +1,75 @@
<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">
<% 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">
</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>
</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>
</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>
<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>
</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>
</div>
</div>
src/views/partials/backend/modals/addGroup.ejs
+8 -42
View File
@@ -7,7 +7,7 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<form method="post"> <form method="post" action="/budget/groups">
<div class="modal-body"> <div class="modal-body">
@@ -16,52 +16,18 @@
<table class="table table-bordered table-striped table-hover"> <table class="table table-bordered table-striped table-hover">
<thead> <thead>
<tr> <tr>
<!--<th></th>-->
<th>Název skupiny</th> <th>Název skupiny</th>
<th>Limit</th>
</tr> </tr>
</thead> </thead>
<tbody class="template-container draggable-container"> <tbody class="template-container draggable-container">
<tr class="add-group-template draggable template-container__item"> <% for (var i in budget) { %>
<!--<td>--> <tr class="add-group-template draggable template-container__item">
<!--<i class="fa fa-fw fa-ellipsis-v sort-handle"></i>--> <td>
<!--</td>--> <input type="text" class="form-control" name="group[<% i %>]" value="<%= budget[i].name %>">
<td><input type="text" class="form-control" name="name[0]" value="Rozlučka se svobodou"> </td>
</td> </tr>
<td style="width: 25%"> <% } %>
<div class="input-group">
<input type="number" step="1000" min="1000" name="price[0]" class="form-control" value="50000">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Kč</span>
</div>
</div>
</td>
</tr>
<tr class="add-group-template draggable template-container__item">
<!--<td>-->
<!--<i class="fa fa-fw fa-ellipsis-v sort-handle"></i>-->
<!--</td>-->
<td>
<input type="text" class="form-control" name="name[1]" value="Rozlučka se svobodou - nevěsta">
</td>
<td style="width: 25%">
<div class="input-group">
<input type="number" name="price[1]" step="1000" min="1000" class="form-control" value="50000">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Kč</span>
</div>
</div>
</td>
</tr>
</tbody> </tbody>
<tfoot> <tfoot>
src/views/partials/backend/modals/addItem.ejs
+39 -10
View File
@@ -7,7 +7,7 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<form method="post"> <form method="post" action="/budget/add_item">
<div class="modal-body"> <div class="modal-body">
@@ -20,31 +20,40 @@
<td>Název položky</td> <td>Název položky</td>
<td>Cena</td> <td>Cena</td>
<td>Skupiny</td> <td>Skupiny</td>
<td></td>
</tr> </tr>
</thead> </thead>
<tbody class="item-template-container draggable-container"> <tbody class="item-template-container draggable-container">
<tr class="item-template draggable template-container__item"> <tr class="item-template draggable template-container__item">
<td> <td>
<input type="text" class="form-control" name="name[0]"></td> <input type="text" class="form-control" name="name[0]" required></td>
<td style="width: 25%"> <td style="width: 25%">
<div class="input-group"> <div class="input-group">
<input type="number" data-step="100" min="0" name="price[0]" class="form-control"> <input type="number" data-step="100" min="0" required name="price[0]" class="form-control">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Kč</span> <span class="input-group-text">Kč</span>
</div> </div>
</div> </div>
</td> </td>
<td> <td>
<select name="group[0]" class="form-control"> <select name="group[0]" class="form-control group-select" required>
<option>-- vyberte skupinu --</option> <% for (var i in budget) { %>
<option>Rozlučka se svobodou</option> <option value="<%= i %>"><%= budget[i].name %></option>
<option>Svatební hostina</option> <% } %>
<option>Svatební cesta</option>
<option value="new">-- Nová --</option>
</select> </select>
<input type="text" name="group_name[0]" placeholder="Nová skupina" class="form-control new-group-name">
</td>
<td>
<a href="javascript:void(0);" class="js-remove-program"><i class="fa fa-fw fa-trash"></i></a>
</td> </td>
</tr> </tr>
@@ -71,4 +80,24 @@
</div> </div>
</div> </div>
</div> </div>
<script>
function toggleNewGroupInput($e) {
if ($e.val () == 'new') {
$e.parent ().find ('.new-group-name').show ().attr ('required', true).focus();
} else {
$e.parent ().find ('.new-group-name').hide ().attr ('required', false);
}
}
$ (document).ready (function () {
$ ('.group-select').each (function () {
toggleNewGroupInput ($ (this));
});
});
$ (document).on('change', '.group-select', function () {
toggleNewGroupInput ($ (this));
});
</script>
src/views/partials/backend/modals/budgetGroup.ejs
+1 -71
View File
@@ -8,84 +8,14 @@
</button> </button>
</div> </div>
<form method="post"> <form action="/budget/groups" method="post">
<input type="hidden" name="redirectParams" value="ok=groupSaved"> <input type="hidden" name="redirectParams" value="ok=groupSaved">
<div class="modal-body"> <div class="modal-body">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Koupeno</th>
<th>Jméno</th>
<th>Cena</th>
<th></th>
</tr>
</thead>
<tbody class="item-in-group-template-container draggable-container">
<% for (var i = 1; i < 10; i++) { %>
<tr class="budget-item-template draggable template-container__item">
<td style="width: 30px" class="sort-handle">
<i class="fa fa-fw fa-ellipsis-v"></i>
</td>
<td class="text-center" style="width: 30px;">
<input type="checkbox" name="bought[<%= i %>]" value="1">
</td>
<td>
<span class="edit-inline">Položka <%= i %></span>
</td>
<td>
<span class="edit-inline"><%= i * 100 %></span> Kč
</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>
</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>
<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>
</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>
</div>
</div>
</div> </div>