-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
185 lines (171 loc) · 8.15 KB
/
index.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="iconfont/material-icons.css">
<link rel="stylesheet" href="../node_modules/materialize-css/dist/css/materialize.min.css">
<link rel="stylesheet" href="shoppinglist.css">
<title>Shopping List | Electron | PouchDB</title>
</head>
<body>
<!-- banner -->
<header class="navbar-fixed">
<nav id="nav" class="primary-color">
<div class="nav-wrapper">
<span class="brand-logo left">
<a href="#" onclick="showList(); return false" class="goback"><i class="material-icons">arrow_back</i></a>
<span id="header-title">Shopping Lists</span>
</span>
<!-- settings button -->
<a href="#" onclick="showSettingsModal(); return false" class="right settings"><i class="material-icons">settings</i></a>
<a href="#" onclick="showSettingsModal(); return false" class="right settings"><i class="material-icons secondary-text lighter">error</i></a>
</div>
</nav>
</header>
<!-- content area -->
<main>
<div id="shopping-lists">
<!-- shopping lists get inserted here -->
</div>
<ul id="shopping-list-items" class="collection">
<!-- shopping list items get inserted here -->
</ul>
<!-- add more stuff button -->
<button id="add-button" class="btn-floating btn-large secondary-color right" onclick="showAddModal()">
<i class="material-icons">add</i>
</button>
</main>
<!-- modal: add a shopping list form -->
<div class="modal bottom-sheet list-bottom-sheet">
<form id="shopping-list-add" class="col s12 white" onsubmit="shopper.add(event); return false">
<div class="modal-content">
<h5>Create a Shopping List</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" placeholder="Enter a title for the shopping list" required />
</div>
<input name="type" type="hidden" value="list">
</div>
</div>
<div class="modal-footer primary-color">
<button class="btn-flat" type="button" onclick="closeModal()">Cancel</button>
<button class="btn-flat" type="submit">Add</button>
</div>
</form>
</div>
<!-- modal: add a shopping list item form -->
<div class="modal bottom-sheet item-bottom-sheet">
<form id="shopping-list-item-add" class="col s12 white" onsubmit="shopper.add(event); return false">
<div class="modal-content">
<h5>Add an Item</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" placeholder="Enter an item to add to the shopping list" required />
</div>
<input name="type" type="hidden" value="item">
</div>
</div>
<div class="modal-footer primary-color">
<button class="btn-flat" type="button" onclick="closeModal()">Cancel</button>
<button class="btn-flat" type="submit">Add</button>
</div>
</form>
</div>
<!-- modal: add a shopping list settings form -->
<div class="modal top-sheet settings-top-sheet">
<form id="shopping-list-settings" class="col s12 white" onsubmit="shopper.settings(event); return false">
<div class="modal-content">
<h5>Shopping Lists Settings</h5>
<div class="row">
<div class="input-field col s12">
<span class="primary-text darker">Enter a fully qualified URL (including username and password) to a remote IBM Cloudant, Apache CouchDB, or PouchDB database to sync your shopping list.</span>
<input name="remoteDB" type="url" class="validate" placeholder="https://username:password@localhost:5984/database" />
<div class="chip"></div>
</div>
</div>
</div>
<div class="modal-footer secondary-color">
<button class="btn-flat" type="button" onclick="closeModal()">Cancel</button>
<button class="btn-flat" type="submit">Sync</button>
</div>
</form>
</div>
<!-- modal: overlay -->
<div class="modal-overlay" onclick="closeModal()"></div>
<!-- template: shopping list -->
<script type="text/template" id="shopping-list-template">
<div class="list-view collapsible">
<div class="card-content" onclick="showList('{{_id}}', '{{title}}', event)">
<span class="card-title activator">{{title}}
<button class="btn-flat more-btn right" onclick="toggle('{{_sanitizedid}}', event)"><i class="material-icons">more_vert</i></button>
</span>
</div>
<div class="card-action">
<input type="checkbox" id="checked-list-{{_sanitizedid}}" name="checked-list-{{_sanitizedid}}" {{_checked}} disabled />
<label for="checked-list-{{_sanitizedid}}">0 items in list</label>
</div>
</div>
<div class="list-edit collapsible closed">
<form id="form-{{_sanitizedid}}" class="col s12 white" onsubmit="shopper.update('{{_id}}', event); return false">
<div class="card-content">
<span class="card-title">
<button id="close-{{_sanitizedid}}" type="button" class="btn-flat more-btn right" onclick="toggle('{{_sanitizedid}}', event)"><i class="material-icons">close</i></button>
</span>
<h5>Edit Shopping List</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" value="{{title}}" placeholder="{{title}}" required />
</div>
</div>
</div>
<div class="card-action">
<button class="btn-flat" type="button" onclick="shopper.remove('{{_id}}')">Remove</button>
<button class="btn-flat" type="submit">Update</button>
</div>
</form>
</div>
</script>
<!-- template: shopping list item -->
<script type="text/template" id="shopping-list-item-template">
<div class="item-view collapsible">
<input type="checkbox" id="checked-item-{{_sanitizedid}}" name="checked-item-{{_sanitizedid}}" {{_checked}} onclick="shopper.update('{{_id}}')" value="{{title}}" />
<label for="checked-item-{{_sanitizedid}}">{{title}}</label>
<button class="btn-flat more-btn right" onclick="toggle('{{_sanitizedid}}', event)"><i class="material-icons">more_vert</i></button>
</div>
<div class="item-edit collapsible closed">
<form id="form-{{_sanitizedid}}" class="col s12 tertiary lighter" onsubmit="shopper.update('{{_id}}', event); return false">
<div>
<span class="card-title">
<button id="close-{{_sanitizedid}}" type="button" class="btn-flat more-btn right" onclick="toggle('{{_sanitizedid}}', event)"><i class="material-icons">close</i></button>
</span>
<h5>Edit Item</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" value="{{title}}" placeholder="{{title}}" required />
</div>
</div>
</div>
<div class="card-action">
<button class="btn-flat" type="button" onclick="shopper.remove('{{_id}}')">Remove</button>
<button class="btn-flat" type="submit">Update</button>
</div>
</form>
</div>
</script>
<!-- javascript goodies -->
<script>
const onlineStatusUpdate = function () {
if (navigator.onLine) {
document.body.className = document.body.className.replace('shopping-list-offline', '').trim()
} else {
document.body.className += ' shopping-list-offline'
}
}
window.addEventListener('online', onlineStatusUpdate)
window.addEventListener('offline', onlineStatusUpdate)
onlineStatusUpdate()
</script>
<script src="shoppinglist.js"></script>
</body>
</html>