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,
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);
if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?'+req.body.redirectParams;
redirectUrl += '?' + req.body.redirectParams;
}
res.redirect (redirectUrl)
});
app.post('/editor/album', function (req, res) {
templateData.albumsCount ++;
app.post ('/editor/album', function (req, res) {
templateData.albumsCount++;
var redirectUrl = '/editor/gallery_detail';
if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?'+req.body.redirectParams;
redirectUrl += '?' + req.body.redirectParams;
}
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) {
savePost (req, res);
var redirectUrl = '/editor/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page);
if (typeof req.body.redirectParams !== 'undefined') {
redirectUrl += '?'+req.body.redirectParams;
redirectUrl += '?' + req.body.redirectParams;
}
res.redirect (redirectUrl)
src/assets/js/program.js
+1 -1
View File
@@ -17,7 +17,7 @@ function renameInputs() {
var i = 0;
items.each (function () {
var $rows = $ (this).find ('input');
var $rows = $ (this).find ('input,select');
$rows.each (function () {
var name = $ (this).attr ('name');
$ (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 "gallery";
.program-template:first-child, .template:first-child {
.item-template:first-child, .program-template:first-child, .template:first-child {
.js-remove-program {
display: none;
}
src/views/backend/budget.ejs
+144 -164
View File
@@ -9,177 +9,157 @@
</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">
<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>
<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" value=""></label>
</div>
</td>
<td>Položka 3</td>
<td>340 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 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>
</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">
<% 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="#addItem">Přidat</a>
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">
</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>
<% 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>
<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>
<% } %>
</tbody>
</table>
<% if (budget[i].items.length > 4) { %>
<p>
+ Dalších <%= budget[i].items.length - 4 %> položek </p>
<% } %>
<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>
<% } 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>
<% include ../partials/backend/modals/addItem.ejs %>
<% include ../partials/backend/modals/addGroup.ejs %>
<% include ../partials/backend/modals/budgetGroup.ejs %>
</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>-->
<% } %>
<% } %>
<% 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>
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
+4 -38
View File
@@ -7,7 +7,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<form method="post">
<form method="post" action="/budget/groups">
<div class="modal-body">
@@ -16,52 +16,18 @@
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<!--<th></th>-->
<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">
<!--<td>-->
<!--<i class="fa fa-fw fa-ellipsis-v sort-handle"></i>-->
<!--</td>-->
<td><input type="text" class="form-control" name="name[0]" value="Rozlučka se svobodou">
</td>
<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>
<input type="text" class="form-control" name="group[<% i %>]" value="<%= budget[i].name %>">
</td>
</tr>
<% } %>
</tbody>
<tfoot>
src/views/partials/backend/modals/addItem.ejs
+38 -9
View File
@@ -7,7 +7,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<form method="post">
<form method="post" action="/budget/add_item">
<div class="modal-body">
@@ -20,31 +20,40 @@
<td>Název položky</td>
<td>Cena</td>
<td>Skupiny</td>
<td></td>
</tr>
</thead>
<tbody class="item-template-container draggable-container">
<tr class="item-template draggable template-container__item">
<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%">
<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">
<span class="input-group-text" id="basic-addon2">Kč</span>
<span class="input-group-text">Kč</span>
</div>
</div>
</td>
<td>
<select name="group[0]" class="form-control">
<option>-- vyberte skupinu --</option>
<option>Rozlučka se svobodou</option>
<option>Svatební hostina</option>
<option>Svatební cesta</option>
<select name="group[0]" class="form-control group-select" required>
<% for (var i in budget) { %>
<option value="<%= i %>"><%= budget[i].name %></option>
<% } %>
<option value="new">-- Nová --</option>
</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>
</tr>
@@ -72,3 +81,23 @@
</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>
</div>
<form method="post">
<form action="/budget/groups" method="post">
<input type="hidden" name="redirectParams" value="ok=groupSaved">
<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>