thomascole/BudgetApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Many many changes

Browse Source
This commit is contained in:
Thomas Cole 2022-10-12 21:09:42 -04:00
parent 2a080ffc31
commit 4dd4c22db6
14 changed files with 315 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte</title>
<title>Budgetly</title>
</head>
<body>
<div id="app"></div>

24
src/App.svelte
View File

@ -1,28 +1,36 @@
<script>
import Router from 'svelte-spa-router';
import { replace } from 'svelte-spa-router';
import { isAuthed } from './store';
import Nav from './lib/Nav.svelte';
import Home from './routes/Home.svelte';
import NotFound from './routes/NotFound.svelte';
import Budgets from './routes/Budgets.svelte';
import Settings from './routes/Settings.svelte';
import Timeline from './routes/Timeline.svelte'
import Login from './routes/Login.svelte';
import Logout from './routes/Logout.svelte';
import { onMount } from 'svelte';
const routes = {
'/': Home,
'/timeline': Timeline,
"/budgets": Budgets,
'/settings': Settings,
'/login': Login,
'/logout': Logout,
'*': NotFound,
}
onMount(()=> {
console.log($isAuthed)
if(!$isAuthed){
replace('/login')
}
})
</script>
<style>
<Router {routes}/>
</style>
<Nav/>
<main class="responsive">
<Router {routes}/>
</main>

78
src/fakeData.js Normal file
View File

@ -0,0 +1,78 @@
export const FAKE_BUDGET_ITEMS = [
{
"key":"Eating Out",
"amount":200,
"currencyFormat": "usd",
"isEnabled": true,
"entries":[
{
"name": "Test Entry",
"amount": 20,
"description": "Extra info if wanted",
"date": 1665610094149
},
{
"name": "Test Entry 2",
"amount": 12.38,
"description": "Some other thing",
"date": 1665610095000
},
],
},
{
"key":"Gasoline",
"amount":400,
"currencyFormat": "usd",
"isEnabled": true,
"entries":[
{
"name": "Fill up",
"amount": 50,
"description": "",
"date": 1665610094149
}
],
},
{
"key":"Third Item",
"amount":10,
"currencyFormat": "usd",
"isEnabled": true,
"entries":[
{
"name": "OVERSPEND",
"amount": 500,
"description": "",
"date": 1665610094149
}
],
},
{
"key":"Third Item",
"amount":10,
"currencyFormat": "usd",
"isEnabled": true,
"entries":[
{
"name": "OVERSPEND",
"amount": 500,
"description": "",
"date": 1665610094149
}
],
},
{
"key":"Third Item",
"amount":10,
"currencyFormat": "usd",
"isEnabled": true,
"entries":[
{
"name": "OVERSPEND",
"amount": 500,
"description": "",
"date": 1665610094149
}
],
},
]

8
src/layouts/BaseLayout.svelte Normal file
View File

@ -0,0 +1,8 @@
<script>
import Nav from '../lib/Nav.svelte';
</script>
<Nav/>
<main class="responsive">
<slot></slot>
</main>

4
src/layouts/NoNavLayout.svelte Normal file
View File

@ -0,0 +1,4 @@
<main class="responsive max">
<slot />
</main>

33
src/lib/Nav.svelte
View File

@ -2,11 +2,12 @@
import {link} from 'svelte-spa-router'
import { activeNav } from '../store';
let activeitem = 0;
activeNav.subscribe(value => {
activeitem = value;
console.log(activeitem)
})
let activeitem = $activeNav;
function updateActiveItem(num){
activeNav.set(num)
}
</script>
<style>
@ -19,23 +20,21 @@
</style>
<nav class="m l left">
<!-- svelte-ignore a11y-missing-attribute -->
<a>
<img class="circle" src="/favicon.png" alt="Favicon">
</a>
<a href="/" class:active="{activeitem === 0}" on:click={()=>activeitem = 0} use:link>
<img class="circle" src="/vite.svg" alt="Favicon">
<a href="/" class:active="{activeitem === 0}" on:click={()=>updateActiveItem(0)} use:link>
<i>home</i>
<span>Home</span>
</a>
<a href="/budgets" class:active="{activeitem === 1}" on:click={()=>activeitem = 1} use:link>
<a href="/budgets" class:active="{activeitem === 1}" on:click={()=>updateActiveItem(1)} use:link>
<i>payments</i>
<span>Budgets</span>
</a>
<a href="/timeline" class:active="{activeitem === 2}" on:click={()=>activeitem = 2} use:link>
<a href="/timeline" class:active="{activeitem === 2}" on:click={()=>updateActiveItem(2)} use:link>
<i>timeline</i>
<span>Spending</span>
</a>
<a href="/settings" class:active="{activeitem === 3}" on:click={()=>activeitem = 3} use:link>
<a href="/settings" class:active="{activeitem === 3}" on:click={()=>updateActiveItem(3)} use:link>
<i>settings</i>
<span>Settings</span>
</a>
@ -50,19 +49,19 @@
<nav class="s bottom">
<a href="/" class:active="{activeitem === 0}" on:click={()=>activeitem = 0} use:link>
<a href="/" class:active="{activeitem === 0}" on:click={()=>updateActiveItem(0)} use:link>
<i>home</i>
<span>Home</span>
</a>
<a href="/budgets" class:active="{activeitem === 1}" on:click={()=>activeitem = 1} use:link>
<a href="/budgets" class:active="{activeitem === 1}" on:click={()=>updateActiveItem(1)} use:link>
<i>payments</i>
<span>Budgets</span>
</a>
<a href="/timeline" class:active="{activeitem === 2}" on:click={()=>activeitem = 2} use:link>
<a href="/timeline" class:active="{activeitem === 2}" on:click={()=>updateActiveItem(2)} use:link>
<i>timeline</i>
<span>Spending</span>
</a>
<a href="/settings" class:active="{activeitem === 3}" on:click={()=>activeitem = 3} use:link>
<a href="/settings" class:active="{activeitem === 3}" on:click={()=>updateActiveItem(3)} use:link>
<i>settings</i>
<span>Settings</span>
</a>

47
src/routes/Budgets.svelte
View File

@ -1,7 +1,46 @@
<script>
import BaseLayout from "../layouts/BaseLayout.svelte";
import { FAKE_BUDGET_ITEMS } from "../fakeData";
</script>
<div>
Budgets
</div>
<BaseLayout>
<nav>
<h5>Budget Items</h5>
</nav>
<div class="space" />
<hr />
<article class="responsive">
<table class="border medium-space">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
<th />
</tr>
</thead>
<tbody>
{#each FAKE_BUDGET_ITEMS as ITEM}
<tr>
<td>{ITEM.key}</td>
<td>{ITEM.amount}</td>
<td>
<nav class="right-align">
<button class="none">
<i>more_vert</i>
<div class="dropdown left no-wrap">
<!-- svelte-ignore a11y-missing-attribute -->
<a>Edit</a>
<!-- svelte-ignore a11y-missing-attribute -->
<a>Disable</a>
<!-- svelte-ignore a11y-missing-attribute -->
<a>Delete</a>
</div>
</button>
</nav>
</td>
</tr>
{/each}
</tbody>
</table>
</article>
</BaseLayout>

8
src/routes/Home.svelte
View File

@ -1,6 +1,10 @@
<script>
import BaseLayout from "../layouts/BaseLayout.svelte";
</script>
<div>
<BaseLayout>
<div>
Home
</div>
</div>
</BaseLayout>

50
src/routes/Login.svelte Normal file
View File

@ -0,0 +1,50 @@
<script>
import { replace } from 'svelte-spa-router';
import { isAuthed } from '../store';
import NoNavLayout from '../layouts/NoNavLayout.svelte';
function doLogin(){
replace("/");
isAuthed.set(true);
}
</script>
<NoNavLayout>
<article class="absolute middle center">
<img class="responsive small" src="/vite.svg" alt="">
<h4>Budgetly Login</h4>
<p>Username:</p>
<div class="field border">
<input type="text">
</div>
<p>Password:</p>
<div class="field border">
<input type="text">
</div>
<button class="responsive" on:click={doLogin}>
<i>login</i>
<span>Login</span>
</button>
<br>
<br>
<hr>
<br>
<button class="border">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="">
<span>Login with Google</span>
</button>
<button class="border">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="">
<span>Login with Github</span>
</button>
</article>
</NoNavLayout>

7
src/routes/Logout.svelte Normal file
View File

@ -0,0 +1,7 @@
<script>
import { resetStore } from '../store';
import {replace} from 'svelte-spa-router';
resetStore();
replace("/login");
</script>

10
src/routes/NotFound.svelte
View File

@ -1,4 +1,10 @@
<article class="padding absolute middle center">
<script>
import NoNavLayout from "../layouts/NoNavLayout.svelte";
</script>
<NoNavLayout>
<article class="padding absolute middle center">
<h4>Uh Oh...</h4>
<div>We can't find that right now.</div>
</article>
</article>
</NoNavLayout>

8
src/routes/Settings.svelte
View File

@ -1,8 +1,10 @@
<script>
import BaseLayout from "../layouts/BaseLayout.svelte";
</script>
<div>
<BaseLayout>
<div>
Settings
</div>
</div>
</BaseLayout>

65
src/routes/Timeline.svelte
View File

@ -1,6 +1,65 @@
<script>
import BaseLayout from "../layouts/BaseLayout.svelte";
import { FAKE_BUDGET_ITEMS } from "../fakeData";
let items = FAKE_BUDGET_ITEMS;
let filterText = "";
function filter() {
items = FAKE_BUDGET_ITEMS.filter((obj) => {
return obj.key.toLowerCase().includes(filterText);
});
console.log(items);
}
</script>
<div>
timeline
</div>
<BaseLayout>
<nav class="">
<h5>Spending Timeline</h5>
<div class="max" />
<div class="field label suffix border">
<input type="text" bind:value={filterText} on:input={filter} />
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>Search</label>
<i>search</i>
</div>
</nav>
<div class="space" />
<hr />
{#each items as ITEM}
<article class="responsive">
<h5>{ITEM.key}</h5>
<p>Spent: $0</p>
<p>Remaining: $0</p>
<table class="border">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{#each ITEM.entries as entry}
<tr>
<td>
<!-- svelte-ignore a11y-missing-attribute -->
<a>
{entry.name}
<div class="tooltip bottom">{entry.description}</div>
</a>
</td>
<td>{entry.amount}</td>
<td>
{new Date(entry.date).toLocaleDateString() +
", " +
new Date(entry.date).toLocaleTimeString()}
</td>
</tr>
{/each}
</tbody>
</table>
</article>
{/each}
</BaseLayout>

7
src/store.js
View File

@ -1,4 +1,9 @@
import { writable } from 'svelte/store';
export const DARK_THEME_PREF = writable(true);
export const isAuthed = writable(false);
export const activeNav = writable(0);
export function resetStore() {
isAuthed.set(false);
activeNav.set(0);
}