130 lines
7.1 KiB
Plaintext
130 lines
7.1 KiB
Plaintext
@using Microsoft.AspNetCore.Authorization
|
|
@{
|
|
ViewData["Title"] = "Budget";
|
|
@attribute [Authorize(Roles = "Budget")]
|
|
}
|
|
<div ng-app="budgetApp" ng-controller="BudgetController" class="budget-page" ng-init="loadBudget()">
|
|
<div class="budget-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
|
|
<div class="month-nav-bar" style="display: flex; align-items: center; gap: 10px; position: relative;">
|
|
<button class="nav-button" ng-click="previousMonth()">←</button>
|
|
<span class="month-label" ng-click="showMonthPicker = !showMonthPicker" style="cursor: pointer;">
|
|
{{ selectedMonthName }} {{ selectedYear }}
|
|
</span>
|
|
<button class="nav-button" ng-click="nextMonth()">→</button>
|
|
|
|
<div class="month-picker-dropdown" ng-show="showMonthPicker" style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: white; border: 1px solid #ccc; padding: 10px; border-radius: 8px; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
|
|
<select ng-model="tempMonth" ng-options="month for month in monthNames" style="margin-bottom: 8px;"></select><br>
|
|
<input type="number" ng-model="tempYear" placeholder="År" style="width: 100%; margin-bottom: 8px;" />
|
|
<button class="nav-button" ng-click="applyMonthSelection()">Välj</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-container" ng-class="{ 'open': menuOpen }">
|
|
<button class="icon-button" ng-click="toggleMenu($event)">
|
|
<i class="fa fa-ellipsis-v"></i>
|
|
</button>
|
|
<div class="dropdown-menu" ng-show="menuOpen">
|
|
<button ng-click="copyPreviousMonthSafe()">Kopiera föregående månad</button>
|
|
|
|
<button ng-click="deleteMonth(); menuOpen = false;" class="danger">Ta bort hela månaden</button>
|
|
<button ng-click="createNewCategory(); menuOpen = false;">Lägg till ny kategori</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-cards" ng-if="budget && budget.categories.length > 0" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0;">
|
|
<div class="summary-card income">Totalt inkomst<br><strong>{{ getTotalIncome() | number:0 }}</strong></div>
|
|
<div class="summary-card expense">Total utgift<br><strong>({{ getTotalExpense() | number:0 }})</strong></div>
|
|
<div class="summary-card savings">Sparande<br><strong>{{ getTotalSaving() | number:0 }}</strong></div>
|
|
<div class="summary-card leftover">Pengar kvar<br><strong>{{ getLeftover() | number:0 }}</strong></div>
|
|
</div>
|
|
|
|
<div class="budget-grid" ng-if="budget && budget.categories">
|
|
<div class="budget-card"
|
|
ng-repeat="cat in budget.categories"
|
|
style="--cat-color: {{cat.color}};"
|
|
draggable-category
|
|
category="cat"
|
|
on-category-drop="handleCategoryDrop(data, targetCategory)">
|
|
|
|
<div class="card-header" style="background-color: {{cat.color}};">
|
|
<div class="header-left" ng-if="!cat.editing">{{ cat.name }}</div>
|
|
<input class="header-edit" type="text" ng-model="cat.name" ng-if="cat.editing" />
|
|
<input class="color-edit" type="color" ng-model="cat.color" ng-if="cat.editing" />
|
|
<div class="header-actions">
|
|
<button class="icon-button" ng-click="cat.editing ? saveCategory(cat) : cat.editing = true">
|
|
<i ng-class="{'fa fa-check': cat.editing, 'fa fa-pencil': !cat.editing}"></i>
|
|
</button>
|
|
<button class="icon-button" ng-if="cat.editing" ng-click="cancelCategoryEdit(cat)">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<button class="icon-button" ng-if="cat.editing" ng-click="cat.allowDrag = !cat.allowDrag" title="Flytt av kategori">
|
|
<i class="fa" ng-class="cat.allowDrag ? 'fa-unlock' : 'fa-lock'"></i>
|
|
</button>
|
|
<button class="icon-button danger" ng-if="cat.editing" ng-click="deleteCategory(cat)">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div ng-repeat="item in cat.items track by item.id">
|
|
<div drop-placeholder
|
|
category="cat"
|
|
index="$index"
|
|
on-drop-item="handleItemPreciseDrop(data, cat, $index)">
|
|
</div>
|
|
<div class="item-row"
|
|
draggable-item
|
|
item="item"
|
|
category="cat"
|
|
on-item-drop="handleItemDrop(event, data, cat)"
|
|
ng-class="{ dragging: dragInProgress && draggedItemId === item.id }">
|
|
<i class="fa fa-grip-lines" ng-show="cat.editing" style="opacity: 0.5; padding-right: 6px;"></i>
|
|
|
|
<input type="text" ng-model="item.name" ng-if="cat.editing" />
|
|
<span ng-if="!cat.editing">{{ item.name }}</span>
|
|
|
|
<input type="number" ng-model="item.amount" ng-if="cat.editing" />
|
|
<span class="amount" ng-if="!cat.editing">{{ item.amount | number:0 }}</span>
|
|
|
|
<button class="icon-button danger" ng-if="cat.editing" ng-click="deleteItem(cat, item)">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div drop-fallback
|
|
ng-if="cat.editing"
|
|
category="cat"
|
|
on-drop-item="handleItemPreciseDrop(data, targetCategory, targetIndex)">
|
|
</div>
|
|
|
|
<div class="item-row add-row" ng-if="cat.editing">
|
|
<i class="fa fa-plus" style="padding-right: 6px; opacity: 0.7;"></i>
|
|
<input type="text" ng-model="cat.newItemName" placeholder="Ny post" />
|
|
<input type="number" ng-model="cat.newItemAmount" placeholder="Belopp" />
|
|
<button class="icon-button" ng-click="addItem(cat)"><i class="fa fa-plus"></i></button>
|
|
</div>
|
|
|
|
<div class="item-row total-row">
|
|
<div>Summa</div>
|
|
<div class="amount">{{ getCategorySum(cat) | number:0 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="no-data" ng-if="!loading && budget && budget.categories.length === 0">
|
|
Det finns ingen budgetdata för vald månad ({{ selectedMonth }}/{{ selectedYear }}).
|
|
<button ng-click="copyPreviousMonthSafe()">[Test] Kopiera föregående</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="~/css/budget.css" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
|
|
<script src="~/js/budget.js"></script>
|
|
<script src="~/js/budget-dragdrop.js"></script> |