forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: add forms to webamp input configurator
+142
-2
+142
-2
src/themes/webamp/configurators/input/element.js
+142
-2
src/themes/webamp/configurators/input/element.js
···
10
10
class InputConfig extends DiffuseElement {
11
11
constructor() {
12
12
super();
13
+
13
14
this.attachShadow({ mode: "open" });
14
15
}
15
16
17
+
// EVENTS
18
+
19
+
/**
20
+
* @param {Event} event
21
+
*/
22
+
#addOpenSubsonicServer = (event) => {
23
+
event.preventDefault();
24
+
console.log("TODO");
25
+
};
26
+
27
+
/**
28
+
* @param {Event} event
29
+
*/
30
+
#addS3Bucket = (event) => {
31
+
event.preventDefault();
32
+
console.log("TODO");
33
+
};
34
+
16
35
// RENDER
17
36
18
37
/**
···
29
48
display: flex;
30
49
flex-direction: column;
31
50
height: 100%;
51
+
}
52
+
53
+
fieldset {
54
+
margin-bottom: var(--element-spacing);
32
55
}
33
56
34
57
.window {
···
68
91
69
92
#tabbed:has(#opensubsonic-tab:checked) #opensubsonic-contents { display: block }
70
93
#tabbed:has(#s3-tab:checked) #s3-contents { display: block }
94
+
95
+
/* FORMS */
96
+
97
+
input, select, textarea {
98
+
flex: 1;
99
+
}
71
100
</style>
72
101
73
102
<div id="tabbed">
···
85
114
</label>
86
115
</li>
87
116
</menu>
117
+
88
118
<div class="window" role="tabpanel">
89
119
<!-- Opensubsonic -->
90
120
<div class="window-body" id="opensubsonic-contents">
91
-
<p>TODO: Opensubsonic form</p>
121
+
<fieldset>
122
+
<legend>Added servers</legend>
123
+
124
+
<p>TODO</p>
125
+
</fieldset>
126
+
127
+
<form @submit="${this.#addOpenSubsonicServer}">
128
+
<fieldset>
129
+
<legend>Server details</legend>
130
+
131
+
<div class="field-row">
132
+
<label for="opensubsonic-host">Host domain:*</label>
133
+
<input id="opensubsonic-host" type="text" required />
134
+
</div>
135
+
136
+
<div class="field-row">
137
+
<label for="opensubsonic-tls">Use HTTPS/TLS:</label>
138
+
<select id="opensubsonic-tls">
139
+
<option value="true" selected>Yes</option>
140
+
<option value="false">No</option>
141
+
</select>
142
+
</div>
143
+
144
+
<p>
145
+
Either provide a username & password combination:
146
+
</p>
147
+
148
+
<div class="field-row">
149
+
<label for="opensubsonic-username">Username:</label>
150
+
<input id="opensubsonic-username" type="text" />
151
+
</div>
152
+
153
+
<div class="field-row">
154
+
<label for="opensubsonic-password">Password:</label>
155
+
<input id="opensubsonic-password" type="password" />
156
+
</div>
157
+
158
+
<p>
159
+
Or an API key:
160
+
</p>
161
+
162
+
<div class="field-row">
163
+
<label for="opensubsonic-apikey">API key:</label>
164
+
<input id="opensubsonic-apikey" type="text" />
165
+
</div>
166
+
167
+
<p>
168
+
* are required fields.
169
+
</p>
170
+
</fieldset>
171
+
172
+
<p>
173
+
<input type="submit" value="Add server" />
174
+
</p>
175
+
</form>
92
176
</div>
93
177
94
178
<!-- S3 -->
95
179
<div class="window-body" id="s3-contents">
96
-
<p>TODO: S3 form</p>
180
+
<fieldset>
181
+
<legend>Added buckets</legend>
182
+
183
+
<p>TODO</p>
184
+
</fieldset>
185
+
186
+
<form @submit="${this.#addS3Bucket}">
187
+
<fieldset>
188
+
<legend>Bucket details</legend>
189
+
190
+
<div class="field-row">
191
+
<label for="access-key-input">Access Key:*</label>
192
+
<input type="text" id="access-key-input" required />
193
+
</div>
194
+
195
+
<div class="field-row">
196
+
<label for="secret-key-input">Secret Key:*</label>
197
+
<input type="password" id="secret-key-input" required />
198
+
</div>
199
+
200
+
<div class="field-row">
201
+
<label for="bucket-name-input">Bucket Name:*</label>
202
+
<input type="text" id="bucket-name-input" required />
203
+
</div>
204
+
205
+
<div class="field-row">
206
+
<label for="s3-host-input">Host:</label>
207
+
<input
208
+
type="text"
209
+
id="s3-host-input"
210
+
placeholder="s3.amazonaws.com"
211
+
/>
212
+
</div>
213
+
214
+
<div class="field-row">
215
+
<label for="region-input">Region:</label>
216
+
<input
217
+
type="text"
218
+
id="region-input"
219
+
placeholder="us-east-1"
220
+
/>
221
+
</div>
222
+
223
+
<div class="field-row">
224
+
<label for="path-input">Path:</label>
225
+
<input type="text" id="path-input" />
226
+
</div>
227
+
228
+
<p>
229
+
* are required fields.
230
+
</p>
231
+
</fieldset>
232
+
233
+
<p>
234
+
<input type="submit" value="Add bucket" />
235
+
</p>
236
+
</form>
97
237
</div>
98
238
</div>
99
239
</div>