wireframe/src/views/backend/budget.ejs

<div class="heading-budget my-3 col-md-12">
    <h1>Správa rozpočtu</h1>

    <% if (budget.length > 0) { %>
        <a href="#addGroup" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addGroup">
            Nastavit skupiny výdajů
        </a>

        <a href="#addItem" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addItem">
            Přidat položku do skupiny
        </a>

        <% } else { %>
        <a href="#addGroup" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addGroup">
            Přidat skupinu výdajů
        </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."}) %>


<div class="boxes__container text-center justify-content-center col-md-12 row row-space">

    <% 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 { %>
        <% 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 %>">
                <div class="card-header">
                    <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>
                                        <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-group-id="<%= i %>" data-target="#addItem">Přidat</a>
                        </div>
                    <% } %>

                </div>
                <div class="card-footer">
                    CELKEM <%= budget[i].limit %> Kč
                    <div class="progress">
                        <div class="progress-bar" role="progressbar">

                        </div>
                    </div>
                </div>
            </div>
            <!--</div>-->
        <% } %>
    <% } %>
</div>


 <% include ../partials/backend/modals/addItem.ejs %>
    <% include ../partials/backend/modals/addGroup.ejs %>
    <% include ../partials/backend/modals/budgetGroup.ejs %>

    <script>

		 $('#addItem').on('show.bs.modal', function (event) {
				var button = $ (event.relatedTarget);
				var id = button.data ('group-id');

				var $modal = $(this);

				$modal.find('select.group-select').val(id);
         });

		 $ ('#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);
					 reinitBudgetProgressBars();
				 }
			 });
		 })

			$ ('.modal').on ('hide.bs.modal', function (event) {
				$ ('.boxes__container').load ('/budget .boxes__container', function () {
					reinitBudgetProgressBars ();
				});
			});

			function recalculateGroup($group) {
				var items = $group.find ('.budget__item');
				var priceTotal = $group.find ('.totalPrice').val (), priceEstimation = 0, priceBought = 0;

				items.each (function () {
					var bought = $ (this).find ('input[type=checkbox]');

					var value = parseInt (bought.val ());

					if ($(this).find ('.price_field').length != 0) {
						value = parseInt ($(this).find ('.price_field').val ());
					}

					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';
			 }

				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 ();
			 }

		 }

		 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 () {

			 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>