-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
148 lines (136 loc) · 6.42 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
<!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="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/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>
</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: 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>
<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 src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.find.min.js"></script>
<script src="shoppinglist.js"></script>
</body>
</html>