-
Notifications
You must be signed in to change notification settings - Fork 0
/
settings.html
102 lines (102 loc) · 5.66 KB
/
settings.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#1da1f2">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<title>xPense</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/mdb.min.css">
<link rel="stylesheet" href="/css/sweetalert2-material.min.css">
<link rel="stylesheet" href="/css/xpense.css">
<!-- Libraries -->
<script src="/lib/mdb.min.js"></script>
<script src="/lib/turbo.es5-umd.min.js"></script>
<script src="/lib/sweetalert2.min.js"></script>
<script src="/lib/download.min.js"></script>
<script src="/lib/indexeddb-export-import.min.js"></script>
<script src="/lib/dexie.min.js"></script>
<script src="/lib/vue.global.prod.js"></script>
<!-- Applications -->
<script src="/js/helpers.js"></script>
<script src="/js/storage.js"></script>
<script src="/js/index.js"></script>
<script src="/js/history.js"></script>
<script src="/js/settings.js"></script>
<script src="/js/turbo.js"></script>
</head>
<body>
<div id="settings" class="container content">
<div class="row align-items-center py-3 mb-3 border-bottom">
<div class="col-4 offset-4">
<h1 class="text-center mb-0">xPense</h1>
</div>
<div id="pwa-prompt" class="col-4 text-end d-none">
<a href="javascript:void(0)" onclick="promptPWA()" class="btn btn-outline-primary" data-mdb-ripple-color="dark">Install</a>
</div>
</div>
<form v-on:submit.prevent="submit" class="mb-5">
<h4 class="mb-3">Settings</h4>
<div class="form-floating mb-3">
<input v-model="name" placeholder="Stranger" type="text" class="form-control" autocomplete="off" maxlength="15" required>
<label class="form-label">First Name</label>
</div>
<div class="form-floating mb-3">
<input v-model="currency" placeholder="Rp" type="text" class="form-control" autocomplete="off" minlength="1" maxlength="3">
<label class="form-label">Currency Prefix</label>
</div>
<div class="form-floating mb-3">
<select v-model="separator" class="form-select">
<option value="id">Dot (1.000)</option>
<option value="us">Comma (1,000)</option>
</select>
<label class="form-label">Thousand Separator</label>
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</div>
</form>
<div class="row mb-5">
<h4 class="mb-3">Backup/Restore</h4>
<p>The data are stored in your device's local storage. If you want to move your data between devices, you need to export and import the data manually.</p>
<div class="col d-grid">
<a href="javascript:void(0)" class="btn btn-primary btn-lg" v-on:click="exportData" download>Backup</a>
</div>
<div class="col d-grid">
<label for="restore-input" class="btn btn-primary btn-lg">Restore</label>
<input id="restore-input" type="file" v-on:change="importData" accept=".json">
</div>
</div>
<div class="row mb-5">
<h4 class="mb-3">Source Code</h4>
<p><a href="https://github.com/irfanfadilah/xpense" target="_blank">GitHub</a></p>
</div>
</div>
<ul class="nav fixed-bottom justify-content-around border-top p-2 bg-white">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/" data-turbo-action="replace">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/history" data-turbo-action="replace">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-clock-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/settings" data-turbo-action="replace">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
</svg>
</a>
</li>
</ul>
</body>
</html>