Skip to content

Commit af2f18b

Browse files
adrianscheitadrianscheit
committed
Refactor Dom text handling and add success text
1 parent 0f2efc1 commit af2f18b

File tree

3 files changed

+83
-59
lines changed

3 files changed

+83
-59
lines changed

‎pages/index.html‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,16 @@
1111
<style>
1212
.error {
1313
color: #b00;
14-
background-color: #fee;
14+
background-color: #fdd;
15+
}
16+
17+
.success {
18+
color: #0b0;
1519
}
1620

1721
.send {
1822
color: #00b;
19-
background-color: #eef;
23+
background-color: #ddf;
2024
}
2125

2226
table {
@@ -60,59 +64,63 @@
6064
Source code is avaliable here: https://github.com/adrianscheit/web-modbus
6165
</p>
6266
<h2 class="error"></h2>
63-
<form name="serial">
64-
<fieldset>
65-
<legend>Serial connection</legend>
66-
<label>
67-
Modbus mode
68-
<select name="mode" required>
69-
<option>RTU</option>
70-
<option>ASCII</option>
71-
<option disabled>TCP</option>
72-
</select>
73-
</label>
74-
<label>
75-
baudRate
76-
<input type="number" name="baudRate" list="baudRate" min="300" max="10000000" step="1" required />
77-
<datalist id="baudRate">
78-
<option>300</option>
79-
<option>600</option>
80-
<option>1200</option>
81-
<option>2400</option>
82-
<option>4800</option>
83-
<option>9600</option>
84-
<option>14400</option>
85-
<option>19200</option>
86-
<option>38400</option>
87-
<option>57600</option>
88-
<option>76800</option>
89-
<option>115200</option>
90-
<option>128000</option>
91-
<option>125000</option>
92-
<option>230400</option>
93-
<option>250000</option>
94-
<option>256000</option>
95-
<option>460800</option>
96-
<option>500000</option>
97-
<option>921600</option>
98-
<option>1000000</option>
99-
<option>1500000</option>
100-
<option>2000000</option>
101-
<option>5000000</option>
102-
<option>10000000</option>
103-
</datalist>
104-
</label>
105-
<label>
106-
parity
107-
<select name="parity" required>
108-
<option>none</option>
109-
<option>even</option>
110-
<option>odd</option>
111-
</select>
112-
</label>
113-
<input type="submit" />
114-
</fieldset>
115-
</form>
67+
<h2 class="success"></h2>
68+
<section>
69+
<h3>Serial connection</h3>
70+
<form name="serial">
71+
<fieldset>
72+
<legend>Serial connection</legend>
73+
<label>
74+
Modbus mode
75+
<select name="mode" required>
76+
<option>RTU</option>
77+
<option>ASCII</option>
78+
<option disabled>TCP</option>
79+
</select>
80+
</label>
81+
<label>
82+
baudRate
83+
<input type="number" name="baudRate" list="baudRate" min="300" max="10000000" step="1" required />
84+
<datalist id="baudRate">
85+
<option>300</option>
86+
<option>600</option>
87+
<option>1200</option>
88+
<option>2400</option>
89+
<option>4800</option>
90+
<option>9600</option>
91+
<option>14400</option>
92+
<option>19200</option>
93+
<option>38400</option>
94+
<option>57600</option>
95+
<option>76800</option>
96+
<option>115200</option>
97+
<option>128000</option>
98+
<option>125000</option>
99+
<option>230400</option>
100+
<option>250000</option>
101+
<option>256000</option>
102+
<option>460800</option>
103+
<option>500000</option>
104+
<option>921600</option>
105+
<option>1000000</option>
106+
<option>1500000</option>
107+
<option>2000000</option>
108+
<option>5000000</option>
109+
<option>10000000</option>
110+
</datalist>
111+
</label>
112+
<label>
113+
parity
114+
<select name="parity" required>
115+
<option>none</option>
116+
<option>even</option>
117+
<option>odd</option>
118+
</select>
119+
</label>
120+
<input type="submit" />
121+
</fieldset>
122+
</form>
123+
</section>
116124
<section>
117125
<h3>Send frame</h3>
118126
<p>If there is already a master on the bus, this operation can cause a frame colision on the bus.</p>

‎src/dom.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,17 @@ class DomForm<T> {
9090
}
9191
}
9292

93+
class DomText {
94+
private readonly text: Text;
95+
constructor(element: Element) {
96+
this.text = element.appendChild(document.createTextNode(''))
97+
}
98+
99+
setText(text: string): void {
100+
this.text.nodeValue = text;
101+
}
102+
}
103+
93104
interface ConnectionFormData {
94105
mode: 'ASCII' | 'RTU';
95106
baudRate: number;
@@ -105,14 +116,16 @@ interface SendFormData {
105116
}
106117

107118
export class Dom {
108-
private static readonly errorText: Text = document.querySelector('h2.error')!.appendChild(document.createTextNode(''));
119+
private static readonly errorText = new DomText(document.querySelector('h2.error')!);
120+
static readonly successText = new DomText(document.querySelector('h2.success')!);
121+
109122
static reportError(error?: any): void {
110123
console.error(error);
111124
const errorMessage = `Error: ${error}`;
112-
this.errorText.nodeValue = errorMessage;
125+
this.errorText.setText(errorMessage);
113126
}
114127
static clearError(): void {
115-
this.errorText.nodeValue = ``;
128+
this.errorText.setText(``);
116129
}
117130

118131
static readonly serialForm = new DomForm<ConnectionFormData>(document.querySelector('form[name=serial]')!);

‎src/main.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,14 @@ const start = async (serialOptions: SerialOptions, mode: ModeStrategy) => {
3030
try {
3131
const serialPort: SerialPort = await serial.requestPort();
3232
await serialPort.open(serialOptions);
33+
Dom.successText.setText(`Connected successfully`);
3334

3435
send = async (bytes: number[]) => {
3536
const rawFrame = mode.send(bytes);
3637
const writer = serialPort.writable!.getWriter();
3738
await writer.write(rawFrame);
3839
writer.releaseLock();
40+
Dom.successText.setText(`Sent successfully at ${Frame.getDateTime()}`);
3941
}
4042

4143
while (serialPort.readable) {
@@ -54,12 +56,13 @@ const start = async (serialOptions: SerialOptions, mode: ModeStrategy) => {
5456
reader.releaseLock();
5557
}
5658
}
57-
send = undefined;
5859
await serialPort.close();
5960
} catch (e: any) {
6061
Dom.reportError(e.message || e.toString());
6162
} finally {
63+
send = undefined;
6264
Dom.serialForm.setFieldsetDisabled(false);
65+
Dom.successText.setText(``);
6366
}
6467
};
6568

0 commit comments

Comments
 (0)