interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Add content to table screen

Browse source
This commit is contained in:
sthag 2026-02-17 21:53:06 +01:00
parent 6c5bf2e54d
commit d04e0e3174
1 changed files with 19 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

22
source/screens/demo/examples/ui/table.liquid
View file

@ -43,7 +43,10 @@ tags:
<th scope="col">Number</th> <th scope="col">Number</th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Description</th> <th scope="col">Description</th>
<th scope="col">Amount</th>
<th scope="col">Unit</th>
<th scope="col">Price</th> <th scope="col">Price</th>
<th scope="col">Sum</th>
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
</thead> </thead>
@ -68,6 +71,15 @@ tags:
<td> <td>
<textarea class="fit" name="description" cols="64" rows="2"></textarea> <textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td> </td>
<td><input name="amount" type="number"></td>
<td>
<select name="units">
<option value="">None</option>
<option value="piece">Piece(s)</option>
<option value="hour">Hour(s)</option>
</select>
</td>
<td class="unit"></td>
<td class="unit"></td> <td class="unit"></td>
<td class="io"> <td class="io">
<nav> <nav>
@ -116,7 +128,6 @@ tags:
const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}); const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
const content = document.querySelector('main.io section > table'); const content = document.querySelector('main.io section > table');
// const content = document.getElementById('content');
const tbodyPosition = document.getElementById('positions'); const tbodyPosition = document.getElementById('positions');
tbodyPosition.addEventListener('click', (event) => { tbodyPosition.addEventListener('click', (event) => {
@ -140,6 +151,9 @@ tags:
const j = i % placeholderNames.length; const j = i % placeholderNames.length;
const k = randomIntFrom(0, placeholderContents.length - 1); const k = randomIntFrom(0, placeholderContents.length - 1);
const amount = randomIntFrom(1, 100);
const price = randomFloatFrom(1, 10000, 2);
const sum = amount * price;
tr.setAttribute('data-id', i); tr.setAttribute('data-id', i);
th.textContent = i + 1; th.textContent = i + 1;
@ -147,8 +161,10 @@ tags:
td[3].textContent = placeholderNames[j]; td[3].textContent = placeholderNames[j];
// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]); // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
td[4].firstElementChild.textContent = placeholderContents[k]; td[4].firstElementChild.textContent = placeholderContents[k];
// td[5].textContent = randomIntFrom(1, i).toString(); td[5].firstElementChild.value = amount;
td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2)); td[5].firstElementChild.style.width = '4em';
td[7].textContent = currencyEuro.format(price);
td[8].textContent = currencyEuro.format(sum);
tbodyPosition.appendChild(clone); tbodyPosition.appendChild(clone);
} }