Skip to content

Commit 2ef0aa6

Browse files
mathertelmathertel
committed
using the u-toast custom element
1 parent a9a92ae commit 2ef0aa6

File tree

3 files changed

+60
-116
lines changed

3 files changed

+60
-116
lines changed

‎board.htm

+6
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
<link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" defer />
1919
<script src="/micro.js" defer></script>
2020

21+
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
22+
<script src="u-toast.js"></script>
23+
2124
<style>
2225
svg.setconfig {
2326
position: absolute;
@@ -47,6 +50,8 @@
4750
border-color: red;
4851
}
4952
</style>
53+
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
54+
<script src="u-toast.js"></script>
5055
</head>
5156

5257
<body>
@@ -64,6 +69,7 @@ <h1>Board</h1>
6469
</div>
6570

6671
<main class="panel"></main>
72+
<u-toast></u-toast>
6773

6874
<div id="u-templates" style="display:none">
6975

‎log.htm

+39-32
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Log output</title>
88
<link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" />
9-
9+
1010
<link rel="icon" type="image/png" href="/favicon48.png" sizes="48x48">
1111
<meta name="application-name" content="Ding" />
1212
<meta name="msapplication-config" content="/browserconfig.xml" />
@@ -16,16 +16,13 @@
1616
<meta name="mobile-web-app-capable" content="yes" />
1717
<link rel="manifest" href="/site.webmanifest" />
1818
<meta name="theme-color" content="#ffffff" />
19-
19+
2020
<script src="micro.js"></script>
21-
<style>
22-
.flex-container {
23-
display: flex;
24-
flex-direction: column;
25-
height: 100vh;
26-
padding: 1rem;
27-
}
2821

22+
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
23+
<script src="u-toast.js"></script>
24+
25+
<style>
2926
pre.code {
3027
padding: 0.2em;
3128
font-size: 0.75rem;
@@ -36,30 +33,31 @@
3633
overflow-x: hidden;
3734
overflow-y: scroll;
3835
}
36+
3937
</style>
38+
4039
</head>
4140

4241
<body style="margin:0;padding:0">
43-
<div class="flex-container">
44-
<div class="u-header">
45-
<svg class="icon">
46-
<use href="./icons.svg#log" />
47-
</svg>
48-
<h1>Log output</h1>
49-
</div>
50-
51-
<div class="u-navbar">
52-
<a href="/">Home</a>
53-
<a href="/board.htm">Board</a>
54-
<a href="/microide.htm">IDE</a>
55-
<a href="/log.htm">Log</a>
56-
</div>
57-
58-
<pre class="code" style="flex-grow:1" id="logtext"></pre>
42+
<div class="u-header">
43+
<h1>Log output</h1>
44+
</div>
45+
<div class="u-navbar">
46+
<a href="/">Home</a>
47+
<a href="/board.htm">Board</a>
48+
<a href="/microide.htm">IDE</a>
49+
<a href="/log.htm">Log</a>
50+
<span class="gap"></span>
51+
<button id="clearButton">clear</button>
5952
</div>
53+
<pre class="code" id="logtext"></pre>
54+
<u-toast></u-toast>
6055

6156
<script>
57+
var clearObj = document.getElementById('clearButton');
6258
var logTextObj = document.getElementById('logtext');
59+
var toastObj = document.querySelector('u-toast');
60+
6361
var lastText = "";
6462

6563
function appendLog(logtext) {
@@ -76,27 +74,36 @@ <h1>Log output</h1>
7674
}
7775

7876
fetch('/log_old.txt')
79-
.then(function (result) {
77+
.then(function(result) {
8078
return (result.text());
81-
}).then(function (txt) {
79+
}).then(function(txt) {
8280
appendLog(txt);
8381
return (fetch('/log.txt'));
84-
}).then(function (result) {
82+
}).then(function(result) {
8583
return (result.text());
86-
}).then(function (txt) {
84+
}).then(function(txt) {
8785
appendLog(txt);
8886
});
8987

9088
function updateLog() {
9189
fetch('/log.txt')
92-
.then(function (result) {
93-
return (result.text())
94-
}).then(function (txt) {
90+
.then(function(result) {
91+
return (result.text());
92+
}).then(function(txt) {
9593
appendLog(txt);
9694
});
9795
}
9896

9997
window.setInterval(updateLog, 1000);
98+
99+
clearObj.addEventListener('click', async () => {
100+
toastObj.info('deleting log files...');
101+
await fetch("/log_2.txt", { method: 'DELETE' });
102+
await fetch("/log_1.txt", { method: 'DELETE' });
103+
toastObj.info('log files deleted.');
104+
105+
});
106+
100107
</script>
101108

102109
</body>

‎microide.htm

+15-84
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<!-- no web site meta data here -->
1111
<link Content-Type="text/css" href="iotstyle.css" rel="stylesheet" />
1212
<script src="micro.js"></script>
13+
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
14+
<script src="u-toast.js"></script>
1315
<style>
1416
#files {
1517
border: solid 1px black;
@@ -58,33 +60,6 @@
5860
width: 100%;
5961
}
6062

61-
#dropzone {
62-
color: black;
63-
background-color: #dddd88;
64-
padding: 0.6rem;
65-
border: 1px dashed black;
66-
}
67-
68-
#progress {
69-
position: absolute;
70-
top: 0.6rem;
71-
right: 0.1rem;
72-
width: 300px;
73-
height: 1.4rem;
74-
border: 0.1rem solid black;
75-
opacity: 1;
76-
pointer-events: none;
77-
background-color: white;
78-
}
79-
80-
#progress.fadeout {
81-
transition-delay: 2s;
82-
transition-property: opacity;
83-
transition-duration: 1s;
84-
transition-timing-function: linear;
85-
opacity: 0;
86-
}
87-
8863
#checker {
8964
min-width: 3rem;
9065
text-align: center;
@@ -136,16 +111,13 @@
136111

137112
<body style="margin: 0; padding: 0">
138113
<div class="grid-container" style="padding: 1rem">
139-
<progress id="progress" class="fadeout" max="1" value="0"></progress>
140-
141114
<div class="u-header">
142115
<svg class="icon">
143116
<use href="./icons.svg#ide" />
144117
</svg>
145118
<h1>HomeDing IDE</h1>
146119

147120
<span style="flex-grow: 1"></span>
148-
<div id="dropzone">Drop here.</div>
149121
</div>
150122

151123
<div class="u-navbar">
@@ -183,11 +155,12 @@ <h3 style="display: inline-block; margin: 0">
183155
<pre style="grid-column: 2" class="code" contenteditable id="content" autocomplete="off" autocorrect="off"
184156
autocapitalize="off" spellcheck="false"></pre>
185157
</div>
158+
<u-toast></u-toast>
186159

187160
<script>
188161
const filesObj = document.getElementById('files');
189162
const contentObj = document.getElementById('content');
190-
const progressObj = document.getElementById('progress');
163+
const toastObj = document.querySelector('u-toast');
191164

192165
const activeFileObj = document.getElementById('activeFile');
193166
const checkerObj = document.getElementById('checker');
@@ -325,41 +298,20 @@ <h3 style="display: inline-block; margin: 0">
325298

326299
// start uploading file content
327300
function startUpload(filename, contentType, content) {
328-
progressObj.classList.remove('fadeout');
329-
301+
toastObj.info(`Uploading ${filename}`);
330302
const formData = new FormData();
331303
const blob = new Blob([content], {
332304
type: contentType,
333305
});
334306
formData.append(filename, blob, filename);
335307

336-
const objHTTP = new XMLHttpRequest();
337-
objHTTP.open('POST', '/');
338-
339-
if (objHTTP.upload) {
340-
objHTTP.upload.addEventListener('progress', function(e) {
341-
progressObj.max = e.total;
342-
progressObj.value = e.loaded;
343-
});
344-
} // if
345-
346-
objHTTP.addEventListener('readystatechange', function(p) {
347-
if (
348-
objHTTP.readyState === 4 &&
349-
objHTTP.status >= 200 &&
350-
objHTTP.status < 300
351-
) {
352-
window.setTimeout(handleReloadFS, 200);
353-
progressObj.classList.add('fadeout');
354-
} // if
308+
fetch('/', { method: 'POST', body: formData }).then(function() {
309+
toastObj.info(`done.`);
355310
});
356-
objHTTP.send(formData);
357311
}
358312

359313
// save file from editor back to server.
360314
function handleSave() {
361-
progressObj.value = 0;
362-
progressObj.max = 1;
363315
thisFile = window.prompt('Upload File:', thisFile);
364316
if (thisFile !== undefined)
365317
startUpload(thisFile, 'text/html', contentObj.innerText);
@@ -398,46 +350,25 @@ <h3 style="display: inline-block; margin: 0">
398350

399351
// files was dropped on dropzone
400352
function drop(e) {
401-
progressObj.classList.remove('fadeout');
402-
progressObj.value = 0;
403-
progressObj.max = 1;
404353
e.stopPropagation();
405354
e.preventDefault();
406355

407356
const dtFiles = e.dataTransfer.files;
357+
toastObj.info(`Uploading ${dtFiles.length} files...`);
408358

409359
const formData = new FormData();
410360
const path = getPath();
411361
for (let i = 0; i < dtFiles.length; i++) {
412362
formData.append('file', dtFiles[i], path + dtFiles[i].name);
413363
}
414-
415-
const xmlHttp = new XMLHttpRequest();
416-
417-
xmlHttp.upload.addEventListener('progress', function(e) {
418-
progressObj.max = e.total;
419-
progressObj.value = e.loaded;
420-
});
421-
422-
xmlHttp.addEventListener('readystatechange', function(p) {
423-
if (
424-
xmlHttp.readyState === 4 &&
425-
xmlHttp.status >= 200 &&
426-
xmlHttp.status < 300
427-
) {
428-
window.setTimeout(handleReloadFS, 100);
429-
progressObj.classList.add('fadeout');
430-
// fade progress
431-
} // if
364+
fetch('/', { method: 'POST', body: formData }).then(function() {
365+
toastObj.info(`done.`);
432366
});
433-
xmlHttp.open('POST', '/');
434-
xmlHttp.send(formData);
435367
}
436368

437-
const box = document.getElementById('dropzone');
438-
box.addEventListener('dragenter', dragHelper, false);
439-
box.addEventListener('dragover', dragHelper, false);
440-
box.addEventListener('drop', drop, false);
369+
filesObj.addEventListener('dragenter', dragHelper, false);
370+
filesObj.addEventListener('dragover', dragHelper, false);
371+
filesObj.addEventListener('drop', drop, false);
441372

442373
window.addEventListener('DOMContentLoaded', handleReloadFS);
443374
window.addEventListener('hashchange', handleReloadFS);
@@ -484,12 +415,12 @@ <h3 style="display: inline-block; margin: 0">
484415
// eslint-disable-next-line @typescript-eslint/no-this-alias
485416
var scope = this;
486417
this.disabled = true;
487-
DelayPromise(90) // give some time to display progress stuff
418+
DelayPromise(20) // give some time to display progress stuff
488419
.then(function() {
489420
return fetch('/api/reboot');
490421
})
491422
.then(function() {
492-
return DelayPromise(90);
423+
return DelayPromise(20);
493424
})
494425
.finally(function(result) {
495426
scope.disabled = false;

0 commit comments

Comments
 (0)