Skip to content

Commit 48b7c7f

Browse files
ewowiewowi
committed
rename UI components to renderer/widget
Front-end ======== - MultiInput to FieldRenderer - Array / MultiRow to RowRenderer - FileEdit to FileEditWidget - EditObject to EditRowWidget Back-End ======== - App_DATE: YYYYMMDD - ModuleIO: gpio: ledPins - Nodes: use header
1 parent e5558af commit 48b7c7f

File tree

16 files changed

+11570
-11560
lines changed

16 files changed

+11570
-11560
lines changed

‎docs/components.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -161,20 +161,20 @@ This modal is based on [svelte-modals](https://svelte-modals.mattjennings.io/) w
161161

162162
<img width="30" src="https://github.com/user-attachments/assets/b0e8af99-ed76-422a-8bd1-bfbd9e0f4c44"/>
163163

164-
### MultiInput
164+
### FieldRenderer
165165

166166
Support for html input widgets including text, number, range, checkbox and pad (multiple buttons in 2D array layout)
167167

168-
### Array
168+
### RowRenderer
169169

170-
* Show an array of objects
171-
* Summary and editor
170+
* Show multiple rows of objects
171+
* Summary and zoom
172172
* Recursive
173-
* An array can have an array e.g. multiple nodes with multiple controls per node
174-
* Uses MultiInput
173+
* A row renderer can have a row renderer e.g. multiple nodes with multiple controls per node
174+
* Uses FieldRenderer
175175
* Used data and definition rest apis
176176

177-
### FileEdit
177+
### FileEditWidget
178178

179179
Arguments
180180

‎docs/develop/modules.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ It might be arguable that readonly variables are not stored in state data.
144144

145145
### UI
146146
* [Module.svelte](https://github.com/MoonModules/MoonLight/blob/main/interface/src/routes/moonbase/module/Module.svelte) will deal with the UI
147-
* [MultiInput.svelte](https://github.com/MoonModules/MoonLight/blob/main/interface/src/lib/components/moonbase/MultiInput.svelte) is used by Module.svelte to display the right UI widget based on what is defined in the definition json
147+
* [FieldRenderer.svelte](https://github.com/MoonModules/MoonLight/blob/main/interface/src/lib/components/moonbase/FieldRenderer.svelte) is used by Module.svelte to display the right UI widget based on what is defined in the definition json
148148
* Modifications done in [menu.svelte](https://github.com/MoonModules/MoonLight/blob/main/interface/src/routes/menu.svelte) do identify a module by href and not by title alone
149149

150150
### Example of json

‎docs/moonbase/filemanager.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44

55
* Navigate through folders
66
* create files and folders
7-
* edit and upload files (see FileEdit)
7+
* edit and upload files (see FileEditWidget)
88
* Option to show hidden files (files starting with . e.g. .config)

‎docs/moonbase/inputoutput.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ For each board the following presets are defined:
7575
* On new ESP32-P4 Nano boards, the WiFi coprocessor needs to be updated first to a recent version, currently ESP-Hosted v2.0.17, see the link in the [MoonLight Installer](../../gettingstarted/installer/)
7676
* After install, select the **MHC P4 Nano Shield** board preset to have the pins assigned correctly.
7777
* Assuming 100W LED power; change if needed.
78-
* Switch1: (set also the switches on the board)
78+
* Switch1: (also set the switches on the board)
7979
* off (default): 16 LED pins.
8080
* On: 8 LED pins, 4 RS-485 pins and 4 exposed pins
8181
* Switch2:

interface/src/lib/components/moonbase/EditObject.svelte renamed to interface/src/lib/components/moonbase/EditRowWidget.svelte

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1+
<!--
2+
@title MoonBase
3+
@file EditRowWidget.svelte
4+
@repo https://github.com/MoonModules/MoonLight, submit changes to this file as PRs
5+
@Authors https://github.com/MoonModules/MoonLight/commits/main
6+
@Copyright © 2025 Github MoonLight Commit Authors
7+
@license GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
8+
@license For non GPL-v3 usage, commercial licenses must be purchased. Contact us for more information.
9+
-->
10+
111
<script lang="ts">
212
import { modals } from 'svelte-modals';
313
import { fly } from 'svelte/transition';
414
import { slide } from 'svelte/transition';
515
import { cubicOut } from 'svelte/easing';
616
import Cancel from '~icons/tabler/x';
717
8-
import MultiInput from '$lib/components/moonbase/MultiInput.svelte';
9-
import MultiRow from '$src/lib/components/moonbase/MultiRow.svelte';
18+
import FieldRenderer from '$lib/components/moonbase/FieldRenderer.svelte';
19+
import RowRenderer from '$src/lib/components/moonbase/RowRenderer.svelte';
1020
1121
interface Props {
1222
property: any;
@@ -51,27 +61,27 @@
5161
{#each property.n as propertyN}
5262
{#if propertyN.type == 'array'}
5363
<label for={propertyN.name}>{propertyN.name}</label>
54-
<MultiRow
64+
<RowRenderer
5565
property={propertyN}
5666
bind:data={dataEditable}
5767
definition={localDefinition}
5868
{onChange}
5969
{changeOnInput}
60-
></MultiRow>
70+
></RowRenderer>
6171
{:else if propertyN.type == 'controls'}
6272
{#each dataEditable[propertyN.name] as control}
6373
<!-- e.g. dE["controls"] -> {"name":"xFrequency","type":"slider","default":64,"p":1070417419,"value":64} -->
64-
<MultiInput property={control} bind:value={control.value} {onChange} {changeOnInput}
65-
></MultiInput>
74+
<FieldRenderer property={control} bind:value={control.value} {onChange} {changeOnInput}
75+
></FieldRenderer>
6676
{/each}
6777
{:else}
6878
<div>
69-
<MultiInput
79+
<FieldRenderer
7080
property={propertyN}
7181
bind:value={dataEditable[propertyN.name]}
7282
{onChange}
7383
{changeOnInput}
74-
></MultiInput>
84+
></FieldRenderer>
7585
</div>
7686
{/if}
7787
{/each}

interface/src/lib/components/moonbase/MultiInput.svelte renamed to interface/src/lib/components/moonbase/FieldRenderer.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
@title MoonBase
3-
@file MultiInput.svelte
3+
@file FieldRenderer.svelte
44
@repo https://github.com/MoonModules/MoonLight, submit changes to this file as PRs
55
@Authors https://github.com/MoonModules/MoonLight/commits/main
66
@Copyright © 2025 Github MoonLight Commit Authors
@@ -12,7 +12,7 @@
1212

1313
<script lang="ts">
1414
import { onDestroy } from 'svelte';
15-
import FileEdit from '$lib/components/moonbase/FileEdit.svelte';
15+
import FileEditWidget from '$lib/components/moonbase/FileEditWidget.svelte';
1616
import { initCap, getTimeAgo } from '$lib/stores/moonbase_utilities';
1717
1818
export let property: any;
@@ -35,7 +35,7 @@
3535
}, 1000);
3636
3737
onDestroy(() => {
38-
console.log('MultiInput clearing interval');
38+
console.log('FieldRenderer clearing interval');
3939
clearInterval(interval);
4040
});
4141
@@ -126,7 +126,7 @@
126126
{/each}
127127
</select>
128128
{#if property.type == 'selectFile'}
129-
<FileEdit path={value} showEditor={false} />
129+
<FileEditWidget path={value} showEditor={false} />
130130
{/if}
131131
{:else if property.type == 'checkbox'}
132132
<input

interface/src/lib/components/moonbase/FileEdit.svelte renamed to interface/src/lib/components/moonbase/FileEditWidget.svelte

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!--
22
@title MoonBase
3-
@file FileEdit.svelte
3+
@file FileEditWidget.svelte
44
@repo https://github.com/MoonModules/MoonLight, submit changes to this file as PRs
55
@Authors https://github.com/MoonModules/MoonLight/commits/main
6-
@Doc https://moonmodules.org/MoonLight/components/#fileedit
6+
@Doc https://moonmodules.org/MoonLight/components/#FileEditWidget
77
@Copyright © 2025 Github MoonLight Commit Authors
88
@license GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
99
@license For non GPL-v3 usage, commercial licenses must be purchased. Contact us for more information.
@@ -20,7 +20,7 @@
2020
import { notifications } from '$lib/components/toasts/notifications';
2121
import Collapsible from '$lib/components/Collapsible.svelte';
2222
import { onMount } from 'svelte';
23-
import MultiInput from '$lib/components/moonbase/MultiInput.svelte';
23+
import FieldRenderer from '$lib/components/moonbase/FieldRenderer.svelte';
2424
2525
let { path = "", showEditor = true, newItem = false, isFile = true } = $props();
2626
@@ -179,11 +179,11 @@
179179
<div class="divider my-0"></div>
180180

181181
<div>
182-
<MultiInput property={{name:"Name", type:"text"}} bind:value={editableFile.name}
182+
<FieldRenderer property={{name:"Name", type:"text"}} bind:value={editableFile.name}
183183
onChange={() => {
184184
changed = true;
185185
}}>
186-
</MultiInput>
186+
</FieldRenderer>
187187
<label class="label" for="name">
188188
<span class="text-error {formErrors.name ? '' : 'hidden'}"
189189
>Name must be between 3 and 32 characters long</span
@@ -192,20 +192,20 @@
192192
</div>
193193
{#if isFile}
194194
<div>
195-
<MultiInput property={{name:"Contents", type:"textarea"}} bind:value={editableFile.contents}
195+
<FieldRenderer property={{name:"Contents", type:"textarea"}} bind:value={editableFile.contents}
196196
onChange={(event) => {
197197
editableFile.contents = event.target.value;
198198
changed = true;
199199
}}>
200-
</MultiInput>
200+
</FieldRenderer>
201201
</div>
202202
<div>
203-
<MultiInput property={{name:"Upload", type:"file"}} bind:value={editableFile.contents}
203+
<FieldRenderer property={{name:"Upload", type:"file"}} bind:value={editableFile.contents}
204204
onChange={(event) => {
205205
uploadFile(event);
206206
changed = true;
207207
}}>
208-
</MultiInput>
208+
</FieldRenderer>
209209
</div>
210210
{/if}
211211
<div class="flex flex-wrap justify-end gap-2">

interface/src/lib/components/moonbase/MultiRow.svelte renamed to interface/src/lib/components/moonbase/RowRenderer.svelte

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
@title MoonBase
3-
@file MultiInput.svelte
3+
@file RowRenderer.svelte
44
@repo https://github.com/MoonModules/MoonLight, submit changes to this file as PRs
55
@Authors https://github.com/MoonModules/MoonLight/commits/main
66
@Copyright © 2025 Github MoonLight Commit Authors
@@ -22,10 +22,10 @@
2222
import Delete from '~icons/tabler/trash';
2323
import { initCap } from '$lib/stores/moonbase_utilities';
2424
25-
import EditObject from './EditObject.svelte';
25+
import EditRowWidget from './EditRowWidget.svelte';
2626
import { modals } from 'svelte-modals';
2727
import Grip from '~icons/tabler/grip-vertical';
28-
import MultiInput from './MultiInput.svelte';
28+
import FieldRenderer from './FieldRenderer.svelte';
2929
import { isNumber } from 'chart.js/helpers';
3030
3131
let { property, data = $bindable(), definition, onChange, changeOnInput } = $props();
@@ -82,7 +82,7 @@
8282
8383
function handleEdit(propertyName: string, itemToEdit: any) {
8484
console.log('handleEdit', propertyName);
85-
modals.open(EditObject as any, {
85+
modals.open(EditRowWidget as any, {
8686
property,
8787
localDefinition,
8888
title: initCap(propertyName),
@@ -178,14 +178,14 @@
178178

179179
<!-- Search Filter -->
180180
{#if findItemInDefinition?.filter != null}
181-
<MultiInput
181+
<FieldRenderer
182182
property={propertyFilter}
183183
bind:value={data[property.name + '_filter']}
184184
noPrompts={false}
185185
onChange={(event) => {
186186
onChange(event);
187187
}}
188-
></MultiInput>
188+
></FieldRenderer>
189189
{#if data[property.name + '_filter']}
190190
<div class="text-sm text-base-content/60 mt-1 ml-1">
191191
{filteredItems.length} of {data[property.name].length} items
@@ -214,14 +214,14 @@
214214
return index < 3 || propertyN.show === true;
215215
}) as propertyN}
216216
{#if propertyN.type != 'array' && propertyN.type != 'controls' && propertyN.type != 'password'}
217-
<MultiInput
217+
<FieldRenderer
218218
property={propertyN}
219219
bind:value={itemWrapper.item[propertyN.name]}
220220
noPrompts={true}
221221
onChange={(event) => {
222222
onChange(event);
223223
}}
224-
></MultiInput>
224+
></FieldRenderer>
225225
{/if}
226226
{/each}
227227
<!-- Show nr of controls -->

‎interface/src/routes/moonbase/filemanager/FileManager.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@
3030
import { onMount, onDestroy } from 'svelte';
3131
import { socket } from '$lib/stores/socket';
3232
import { tick } from 'svelte';
33-
import FileEdit from '$lib/components/moonbase/FileEdit.svelte';
33+
import FileEditWidget from '$lib/components/moonbase/FileEditWidget.svelte';
3434
import Help from '~icons/tabler/help';
35-
import MultiInput from '$lib/components/moonbase/MultiInput.svelte';
35+
import FieldRenderer from '$lib/components/moonbase/FieldRenderer.svelte';
3636
3737
let filesState: any = $state({});;
3838
let folderList: FilesState[] = $state([]); //all files in a folder
@@ -271,7 +271,7 @@
271271
transition:slide|local={{ duration: 300, easing: cubicOut }}
272272
>
273273
{#if showEditor}
274-
<FileEdit
274+
<FileEditWidget
275275
newItem={newItem}
276276
path = {path}
277277
isFile = {editableFile.isFile}
@@ -364,11 +364,11 @@
364364
</div>
365365
</div>
366366
</div>
367-
<MultiInput property={{name:"showHidden", type:"checkbox"}} bind:value={filesState.showHidden}
367+
<FieldRenderer property={{name:"showHidden", type:"checkbox"}} bind:value={filesState.showHidden}
368368
onChange={() => {
369369
postFilesState({"showHidden":filesState.showHidden});
370370
}}>
371-
</MultiInput>
371+
</FieldRenderer>
372372
{/await}
373373
</div>
374374
{/if}

‎interface/src/routes/moonbase/module/Module.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
import Router from '~icons/tabler/router';
88
import Help from '~icons/tabler/help';
99
// import Cancel from '~icons/tabler/x';
10-
import MultiInput from '$lib/components/moonbase/MultiInput.svelte';
10+
import FieldRenderer from '$lib/components/moonbase/FieldRenderer.svelte';
1111
import { socket } from '$lib/stores/socket';
12-
import MultiRow from '$src/lib/components/moonbase/MultiRow.svelte';
12+
import RowRenderer from '$src/lib/components/moonbase/RowRenderer.svelte';
1313
import {initCap} from '$lib/stores/moonbase_utilities';
1414
1515
let definition: any = $state([]);
@@ -200,11 +200,11 @@
200200
{#each definition as property}
201201
{#if property.type != "rows"}
202202
<div>
203-
<MultiInput property={property} bind:value={data[property.name]} onChange={inputChanged} changeOnInput={!modeWS}></MultiInput>
203+
<FieldRenderer property={property} bind:value={data[property.name]} onChange={inputChanged} changeOnInput={!modeWS}></FieldRenderer>
204204
</div>
205205
{:else if property.type == "rows"}
206206
<!-- e.g. definition: [name:"nodes", n: [name: ,,, name:"on", name:"controls", n:[]]]] -->
207-
<MultiRow property={property} bind:data={data} definition={definition} onChange={inputChanged} changeOnInput={!modeWS}></MultiRow>
207+
<RowRenderer property={property} bind:data={data} definition={definition} onChange={inputChanged} changeOnInput={!modeWS}></RowRenderer>
208208
{/if}
209209
{/each}
210210
</div>

0 commit comments

Comments
 (0)