Use spaces
This commit is contained in:
@ -42,101 +42,101 @@ function createReconcilationTransaction() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<h1 class="inline">
|
||||
{{ accounts.CurrentAccount?.Name }}
|
||||
</h1>
|
||||
<EditAccount />
|
||||
</div>
|
||||
<div class="grid grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<h1 class="inline">
|
||||
{{ accounts.CurrentAccount?.Name }}
|
||||
</h1>
|
||||
<EditAccount />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
|
||||
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
|
||||
Working:
|
||||
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
|
||||
</span>
|
||||
<div
|
||||
class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
|
||||
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
|
||||
Working:
|
||||
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
|
||||
</span>
|
||||
|
||||
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
|
||||
Cleared:
|
||||
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
|
||||
</span>
|
||||
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
|
||||
Cleared:
|
||||
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
|
||||
v-if="!transactions.Reconciling"
|
||||
@click="transactions.Reconciling = true">
|
||||
Reconciled:
|
||||
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
|
||||
</span>
|
||||
<span
|
||||
class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
|
||||
v-if="!transactions.Reconciling"
|
||||
@click="transactions.Reconciling = true">
|
||||
Reconciled:
|
||||
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
|
||||
</span>
|
||||
|
||||
<span v-if="transactions.Reconciling" class="contents">
|
||||
<Button
|
||||
@click="submitReconcilation"
|
||||
class="bg-blue-500 p-1 whitespace-nowrap flex-1">
|
||||
My current balance is
|
||||
<Currency :value="transactions.ReconcilingBalance" />
|
||||
</Button>
|
||||
<span v-if="transactions.Reconciling" class="contents">
|
||||
<Button
|
||||
@click="submitReconcilation"
|
||||
class="bg-blue-500 p-1 whitespace-nowrap flex-1">
|
||||
My current balance is
|
||||
<Currency :value="transactions.ReconcilingBalance" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
@click="createReconcilationTransaction"
|
||||
class="bg-orange-500 p-1 whitespace-nowrap flex-1">
|
||||
No, it's:
|
||||
<Input
|
||||
class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
|
||||
type="number"
|
||||
v-model="TargetReconcilingBalance" />
|
||||
(Difference
|
||||
<Currency
|
||||
:value="transactions.ReconcilingBalance - TargetReconcilingBalance" />)
|
||||
</Button>
|
||||
<Button
|
||||
class="bg-red-500 p-1 flex-1"
|
||||
@click="cancelReconcilation"
|
||||
>Cancel</Button
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
@click="createReconcilationTransaction"
|
||||
class="bg-orange-500 p-1 whitespace-nowrap flex-1">
|
||||
No, it's:
|
||||
<Input
|
||||
class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
|
||||
type="number"
|
||||
v-model="TargetReconcilingBalance" />
|
||||
(Difference
|
||||
<Currency
|
||||
:value="transactions.ReconcilingBalance - TargetReconcilingBalance" />)
|
||||
</Button>
|
||||
<Button
|
||||
class="bg-red-500 p-1 flex-1"
|
||||
@click="cancelReconcilation"
|
||||
>Cancel</Button
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr class="font-bold">
|
||||
<td class="hidden md:block" style="width: 90px;">Date</td>
|
||||
<td style="max-width: 150px;">Payee</td>
|
||||
<td style="max-width: 200px;">Category</td>
|
||||
<td>Memo</td>
|
||||
<td class="text-right">Amount</td>
|
||||
<td style="width: 80px;">
|
||||
<Input
|
||||
v-if="transactions.Reconciling"
|
||||
type="checkbox"
|
||||
@input="setReconciled" />
|
||||
</td>
|
||||
</tr>
|
||||
<TransactionInputRow
|
||||
class="hidden md:table-row"
|
||||
:budgetid="budgetid"
|
||||
:accountid="accountid" />
|
||||
<TransactionRow
|
||||
v-for="(transaction, index) in transactions.TransactionsList"
|
||||
:key="transaction.ID"
|
||||
:transactionid="transaction.ID"
|
||||
:index="index" />
|
||||
</table>
|
||||
<div class="md:hidden">
|
||||
<Modal>
|
||||
<template v-slot:placeholder>
|
||||
<Button
|
||||
class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
|
||||
>+</Button
|
||||
>
|
||||
</template>
|
||||
<TransactionInputRow
|
||||
class="grid grid-cols-2"
|
||||
:budgetid="budgetid"
|
||||
:accountid="accountid" />
|
||||
</Modal>
|
||||
</div>
|
||||
<table>
|
||||
<tr class="font-bold">
|
||||
<td class="hidden md:block" style="width: 90px;">Date</td>
|
||||
<td style="max-width: 150px;">Payee</td>
|
||||
<td style="max-width: 200px;">Category</td>
|
||||
<td>Memo</td>
|
||||
<td class="text-right">Amount</td>
|
||||
<td style="width: 80px;">
|
||||
<Input
|
||||
v-if="transactions.Reconciling"
|
||||
type="checkbox"
|
||||
@input="setReconciled" />
|
||||
</td>
|
||||
</tr>
|
||||
<TransactionInputRow
|
||||
class="hidden md:table-row"
|
||||
:budgetid="budgetid"
|
||||
:accountid="accountid" />
|
||||
<TransactionRow
|
||||
v-for="(transaction, index) in transactions.TransactionsList"
|
||||
:key="transaction.ID"
|
||||
:transactionid="transaction.ID"
|
||||
:index="index" />
|
||||
</table>
|
||||
<div class="md:hidden">
|
||||
<Modal>
|
||||
<template v-slot:placeholder>
|
||||
<Button
|
||||
class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
|
||||
>+</Button
|
||||
>
|
||||
</template>
|
||||
<TransactionInputRow
|
||||
class="grid grid-cols-2"
|
||||
:budgetid="budgetid"
|
||||
:accountid="accountid" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
@ -8,9 +8,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="budget-item">
|
||||
<button>Clear database</button>
|
||||
<p>This removes all data and starts from scratch. Not undoable!</p>
|
||||
</div>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="budget-item">
|
||||
<button>Clear database</button>
|
||||
<p>This removes all data and starts from scratch. Not undoable!</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,59 +22,59 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
|
||||
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black">
|
||||
<div class="flex flex-col mt-14 md:mt-0">
|
||||
<span
|
||||
class="m-2 p-1 px-3 h-10 overflow-hidden"
|
||||
:class="[ExpandMenu ? 'text-2xl' : 'text-md']">
|
||||
<router-link to="/dashboard" style="font-size:150%"
|
||||
>⌂</router-link
|
||||
>
|
||||
{{ CurrentBudgetName }}
|
||||
</span>
|
||||
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
|
||||
<router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'"
|
||||
>Budget</router-link
|
||||
>
|
||||
<br />
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
|
||||
</span>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>On-Budget Accounts</span>
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="OnBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div
|
||||
v-for="account in OnBudgetAccounts"
|
||||
class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>Off-Budget Accounts</span>
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="OffBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div
|
||||
v-for="account in OffBudgetAccounts"
|
||||
class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<!--
|
||||
<div
|
||||
:class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
|
||||
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black">
|
||||
<div class="flex flex-col mt-14 md:mt-0">
|
||||
<span
|
||||
class="m-2 p-1 px-3 h-10 overflow-hidden"
|
||||
:class="[ExpandMenu ? 'text-2xl' : 'text-md']">
|
||||
<router-link to="/dashboard" style="font-size:150%"
|
||||
>⌂</router-link
|
||||
>
|
||||
{{ CurrentBudgetName }}
|
||||
</span>
|
||||
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
|
||||
<router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'"
|
||||
>Budget</router-link
|
||||
>
|
||||
<br />
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
|
||||
</span>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>On-Budget Accounts</span>
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="OnBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div
|
||||
v-for="account in OnBudgetAccounts"
|
||||
class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>Off-Budget Accounts</span>
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="OffBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div
|
||||
v-for="account in OffBudgetAccounts"
|
||||
class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<!--
|
||||
<li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>Closed Accounts</span>
|
||||
@ -82,15 +82,15 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
|
||||
+ Add Account
|
||||
</li>
|
||||
-->
|
||||
<!--<li>
|
||||
<!--<li>
|
||||
<router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
|
||||
</li>-->
|
||||
<li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
|
||||
<router-link :to="'/budget/' + CurrentBudgetID + '/settings'"
|
||||
>Budget-Settings</router-link
|
||||
>
|
||||
</li>
|
||||
<!--<li><router-link to="/admin">Admin</router-link></li>-->
|
||||
</div>
|
||||
</div>
|
||||
<li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
|
||||
<router-link :to="'/budget/' + CurrentBudgetID + '/settings'"
|
||||
>Budget-Settings</router-link
|
||||
>
|
||||
</li>
|
||||
<!--<li><router-link to="/admin">Admin</router-link></li>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -75,79 +75,79 @@ function assignedChanged(e : Event, category : Category){
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
|
||||
<span
|
||||
>Available balance:
|
||||
<Currency
|
||||
:value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
|
||||
/></span>
|
||||
<div>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
|
||||
><<</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
|
||||
>Current Month</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
|
||||
>>></router-link
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5"
|
||||
id="content">
|
||||
<span class="hidden sm:block"></span>
|
||||
<span class="hidden lg:block text-right">Leftover</span>
|
||||
<span class="hidden sm:block text-right">Assigned</span>
|
||||
<span class="hidden sm:block text-right">Activity</span>
|
||||
<span class="hidden sm:block text-right">Available</span>
|
||||
<template v-for="group in GroupsForMonth">
|
||||
<span
|
||||
class="text-lg font-bold mt-2"
|
||||
@click="toggleGroup(group)"
|
||||
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span
|
||||
>
|
||||
<Currency
|
||||
:value="group.AvailableLastMonth"
|
||||
class="hidden lg:block mt-2"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<Currency
|
||||
:value="group.Assigned"
|
||||
class="hidden sm:block mx-2 mt-2 text-right"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<Currency
|
||||
:value="group.Activity"
|
||||
class="hidden sm:block mt-2"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<Currency
|
||||
:value="group.Available"
|
||||
class="mt-2"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<template
|
||||
v-for="category in GetCategories(group.Name)"
|
||||
v-if="getGroupState(group)">
|
||||
<span
|
||||
class="whitespace-nowrap overflow-hidden"
|
||||
>{{ category.Name }}</span
|
||||
>
|
||||
<Currency
|
||||
:value="category.AvailableLastMonth"
|
||||
class="hidden lg:block" />
|
||||
<Input
|
||||
type="number"
|
||||
v-model="category.Assigned"
|
||||
@input="(evt) => assignedChanged(evt, category)"
|
||||
class="hidden sm:block mx-2 text-right" />
|
||||
<Currency :value="category.Activity" class="hidden sm:block" />
|
||||
<Currency
|
||||
:value="accountStore.GetCategoryAvailable(category)" />
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
|
||||
<span
|
||||
>Available balance:
|
||||
<Currency
|
||||
:value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
|
||||
/></span>
|
||||
<div>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
|
||||
><<</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
|
||||
>Current Month</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
|
||||
>>></router-link
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5"
|
||||
id="content">
|
||||
<span class="hidden sm:block"></span>
|
||||
<span class="hidden lg:block text-right">Leftover</span>
|
||||
<span class="hidden sm:block text-right">Assigned</span>
|
||||
<span class="hidden sm:block text-right">Activity</span>
|
||||
<span class="hidden sm:block text-right">Available</span>
|
||||
<template v-for="group in GroupsForMonth">
|
||||
<span
|
||||
class="text-lg font-bold mt-2"
|
||||
@click="toggleGroup(group)"
|
||||
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span
|
||||
>
|
||||
<Currency
|
||||
:value="group.AvailableLastMonth"
|
||||
class="hidden lg:block mt-2"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<Currency
|
||||
:value="group.Assigned"
|
||||
class="hidden sm:block mx-2 mt-2 text-right"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<Currency
|
||||
:value="group.Activity"
|
||||
class="hidden sm:block mt-2"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<Currency
|
||||
:value="group.Available"
|
||||
class="mt-2"
|
||||
positive-class="text-slate-500"
|
||||
negative-class="text-red-700 dark:text-red-400" />
|
||||
<template
|
||||
v-for="category in GetCategories(group.Name)"
|
||||
v-if="getGroupState(group)">
|
||||
<span
|
||||
class="whitespace-nowrap overflow-hidden"
|
||||
>{{ category.Name }}</span
|
||||
>
|
||||
<Currency
|
||||
:value="category.AvailableLastMonth"
|
||||
class="hidden lg:block" />
|
||||
<Input
|
||||
type="number"
|
||||
v-model="category.Assigned"
|
||||
@input="(evt) => assignedChanged(evt, category)"
|
||||
class="hidden sm:block mx-2 text-right" />
|
||||
<Currency :value="category.Activity" class="hidden sm:block" />
|
||||
<Currency
|
||||
:value="accountStore.GetCategoryAvailable(category)" />
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,19 +11,19 @@ const BudgetsList = useSessionStore().BudgetsList;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Budgets</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card v-for="budget in BudgetsList">
|
||||
<router-link
|
||||
v-bind:to="'/budget/'+budget.ID+'/budgeting'"
|
||||
class="contents">
|
||||
<!--<svg class="w-24"></svg>-->
|
||||
<p class="w-24 text-center text-6xl"></p>
|
||||
<span class="text-lg"
|
||||
>{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span
|
||||
>
|
||||
</router-link>
|
||||
</Card>
|
||||
<NewBudget />
|
||||
</div>
|
||||
<h1>Budgets</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card v-for="budget in BudgetsList">
|
||||
<router-link
|
||||
v-bind:to="'/budget/'+budget.ID+'/budgeting'"
|
||||
class="contents">
|
||||
<!--<svg class="w-24"></svg>-->
|
||||
<p class="w-24 text-center text-6xl"></p>
|
||||
<span class="text-lg"
|
||||
>{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span
|
||||
>
|
||||
</router-link>
|
||||
</Card>
|
||||
<NewBudget />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="font-bold" id="content">
|
||||
Willkommen bei Budgeteer, der neuen App für's Budget!
|
||||
</div>
|
||||
<div class="container col-md-4" id="login">
|
||||
<router-link to="/login">Login</router-link> or
|
||||
<router-link to="/login">register</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold" id="content">
|
||||
Willkommen bei Budgeteer, der neuen App für's Budget!
|
||||
</div>
|
||||
<div class="container col-md-4" id="login">
|
||||
<router-link to="/login">Login</router-link> or
|
||||
<router-link to="/login">register</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,27 +28,27 @@ function formSubmit(e: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.user"
|
||||
placeholder="Username"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="password"
|
||||
v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
class="bg-blue-300 rounded-lg p-2 w-48">
|
||||
Login
|
||||
</button>
|
||||
<p>
|
||||
New user?
|
||||
<router-link to="/register">Register</router-link> instead!
|
||||
</p>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.user"
|
||||
placeholder="Username"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="password"
|
||||
v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
class="bg-blue-300 rounded-lg p-2 w-48">
|
||||
Login
|
||||
</button>
|
||||
<p>
|
||||
New user?
|
||||
<router-link to="/register">Register</router-link> instead!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -28,32 +28,32 @@ function formSubmit(e: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.name"
|
||||
placeholder="Name"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.email"
|
||||
placeholder="Email"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="password"
|
||||
v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
class="bg-blue-300 rounded-lg p-2 w-48">
|
||||
Register
|
||||
</button>
|
||||
<p>
|
||||
Existing user?
|
||||
<router-link to="/login">Login</router-link> instead!
|
||||
</p>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.name"
|
||||
placeholder="Name"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.email"
|
||||
placeholder="Email"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="password"
|
||||
v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
class="bg-blue-300 rounded-lg p-2 w-48">
|
||||
Register
|
||||
</button>
|
||||
<p>
|
||||
Existing user?
|
||||
<router-link to="/login">Login</router-link> instead!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -75,79 +75,79 @@ function ynabExport() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Clear Budget</h2>
|
||||
<p>
|
||||
This removes transactions and assignments to start from
|
||||
scratch. Accounts and categories are kept. Not undoable!
|
||||
</p>
|
||||
<div>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Clear Budget</h2>
|
||||
<p>
|
||||
This removes transactions and assignments to start from
|
||||
scratch. Accounts and categories are kept. Not undoable!
|
||||
</p>
|
||||
|
||||
<Button class="bg-red-500 py-2" @click="clearBudget"
|
||||
>Clear budget</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Delete Budget</h2>
|
||||
<p>
|
||||
This deletes the whole bugdet including all transactions,
|
||||
assignments, accounts and categories. Not undoable!
|
||||
</p>
|
||||
<Button class="bg-red-500 py-2" @click="deleteBudget"
|
||||
>Delete budget</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">
|
||||
Fix all historic negative category-balances
|
||||
</h2>
|
||||
<p>
|
||||
This restores YNABs functionality, that would substract any
|
||||
overspent categories' balances from next months inflows.
|
||||
</p>
|
||||
<Button class="bg-orange-500 py-2" @click="cleanNegative"
|
||||
>Fix negative</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Import YNAB Budget</h2>
|
||||
<Button class="bg-red-500 py-2" @click="clearBudget"
|
||||
>Clear budget</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Delete Budget</h2>
|
||||
<p>
|
||||
This deletes the whole bugdet including all transactions,
|
||||
assignments, accounts and categories. Not undoable!
|
||||
</p>
|
||||
<Button class="bg-red-500 py-2" @click="deleteBudget"
|
||||
>Delete budget</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">
|
||||
Fix all historic negative category-balances
|
||||
</h2>
|
||||
<p>
|
||||
This restores YNABs functionality, that would substract any
|
||||
overspent categories' balances from next months inflows.
|
||||
</p>
|
||||
<Button class="bg-orange-500 py-2" @click="cleanNegative"
|
||||
>Fix negative</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Import YNAB Budget</h2>
|
||||
|
||||
<div>
|
||||
<label for="transactions_file">
|
||||
Transaktionen:
|
||||
<input
|
||||
type="file"
|
||||
@change="gotTransactions"
|
||||
accept="text/*" />
|
||||
</label>
|
||||
<br />
|
||||
<label for="assignments_file">
|
||||
Budget:
|
||||
<input
|
||||
type="file"
|
||||
@change="gotAssignments"
|
||||
accept="text/*" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="transactions_file">
|
||||
Transaktionen:
|
||||
<input
|
||||
type="file"
|
||||
@change="gotTransactions"
|
||||
accept="text/*" />
|
||||
</label>
|
||||
<br />
|
||||
<label for="assignments_file">
|
||||
Budget:
|
||||
<input
|
||||
type="file"
|
||||
@change="gotAssignments"
|
||||
accept="text/*" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="bg-blue-500 py-2"
|
||||
:disabled="filesIncomplete"
|
||||
@click="ynabImport"
|
||||
>Importieren</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Export as YNAB TSV</h2>
|
||||
<Button
|
||||
class="bg-blue-500 py-2"
|
||||
:disabled="filesIncomplete"
|
||||
@click="ynabImport"
|
||||
>Importieren</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Export as YNAB TSV</h2>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<Button class="bg-blue-500 py-2" @click="ynabExport"
|
||||
>Export</Button
|
||||
>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<Button class="bg-blue-500 py-2" @click="ynabExport"
|
||||
>Export</Button
|
||||
>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user