-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
154 lines (124 loc) · 6.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rick's guitar inventory</title>
<link rel="stylesheet" href="styles/mystyle.css">
</head>
<body>
<h1>Rick's guitar inventory</h1>
<div class="header">
<div>
<button type="button" class="button" id="addGuitarButton">Add guitar</button>
<button type="button" class="button" id="showAllGuitarsButton">Show all guitars</button>
</div>
<form id="snSearchForm">
<input type="search" id="snField" class="inputField" placeholder="Search serial number" required>
<button type="submit" class="button">Search</button>
</form>
</div>
<!-- Panel starts here -->
<aside class="searchPanel" id="searchPanel">
<span class="panelText" id="panelText">A D V A N C E D S E A R C H</span>
<form id="searchForm" class="searchForm">
<div class="closeCross" id="closeCross">X</div>
<label class="searchFormLabel" for="builder">Builder</label><input type="text" id="builder"
class="searchFormField">
<label class="searchFormLabel" for="model">Model</label><input type="text" id="model"
class="searchFormField">
<label class="searchFormLabel" for="type">Type</label><input type="text" id="type" class="searchFormField">
<label class="searchFormLabel" for="backwood">Backwood</label><input type="text" id="backwood"
class="searchFormField">
<label class="searchFormLabel" for="topwood">Topwood</label><input type="text" id="topwood"
class="searchFormField">
<label class="searchFormLabel" for="price">Price</label><input type="number" step="0.50" id="price"
class="searchFormField">
<br><br>
<div class="searchFormPanel">
<button type="reset" class="searchFormButton">Reset</button>
<button type="submit" class="searchFormButton">Apply</button>
</div>
</form>
</aside>
<!-- Panel ends here -->
<!-- Add guitar dialog starts -->
<dialog id="guitarDialog">
<form method="dialog" id="guitarDialogForm">
<fieldset>
<legend>Add new guitar</legend>
<label for="snfield">S/N:</label><input type="text" class="inputField dialogField" id="snfield" placeholder="Type in serial number" required>
<label for="builderfield">Builder: </label><input type="text" class="inputField dialogField" id="builderfield" placeholder="Type in builder name" required>
<label for="modelfield">Model: </label><input type="text" class="inputField dialogField" id="modelfield" placeholder="Type in model name" required>
<label for="typefield">Type: </label><input type="text" class="inputField dialogField" id="typefield" placeholder="Type in guitar type" required>
<label for="backwoodfield">Backwood: </label><input type="text" class="inputField dialogField" id="backwoodfield" placeholder="Type in backwood tree sort" required>
<label for="topwoodfield">Topwood: </label><input type="text" class="inputField dialogField" id="topwoodfield" placeholder="Type in topwood tree sort" required>
<label for="pricefield">Price: </label><input type="number" class="inputField dialogField" id="pricefield" placeholder="Type in guitar price" required>
<br><br>
<div class="dialogBtnsPanel">
<button type="button" id="cancelButton" class="button">Cancel</button>
<button type="submit" id="saveButton" class="button"> Save </button>
</div>
</fieldset>
</form>
</dialog>
<!-- Add guitar dialog end -->
<!-- Delete confirmation dialog start -->
<dialog id="confirmDialog">
<form method="dialog" id="confirmDialogForm">
<fieldset>
<legend>Delete guitar?</legend>
Do you really want to delete this guitar?
<br><br>
<div class="dialogBtnsPanel">
<button type="submit" class="button">Yes</button>
<button type="button" class="button" id="cancelConfirmBtn">No</button>
</div>
</fieldset>
</form>
</dialog>
<!-- Delete confirmation dialog end -->
<!-- Hidden form field -->
<form>
<input type="hidden" id="hiddenSnField">
</form>
<table class="tablelist">
<thead>
<tr>
<th>Serial Number</th>
<th>Builder</th>
<th>Model</th>
<th>Type</th>
<th>Backwood</th>
<th>Topwood</th>
<th>Price ($)</th>
<th>Action</th>
</tr>
</thead>
<tbody id="searchResult"></tbody>
</table>
<div id="snackbar">Some message will arrive</div>
<script type="module">
import Model from "./models/model.js"
import Controller from "./controllers/controller.js"
import View from "./views/view.js"
window.onload = function () {
const model = new Model();
const controller = new Controller();
const view = new View(controller);
controller.initialize(model, view);
fetch("https://mortenbonderup.github.io/guitars/guitars.json")
.then(function (data) {
return data.json();
})
.then(function (post) {
model.initialize(post.guitars);
})
.catch(function (error) {
console.log("Service is not available: " + error);
})
}
</script>
</body>
</html>