feat: Content and interaction for table screen

- Add getRandomFormattedString(), toggleColumn() and convertToRomanNumeral() to app
- Update hippie styles
- Add button to toggle index column
- Add select group to autofill numbering

source/code/hippie/app.js

@@ -459,6 +459,66 @@ function getRandomColor() {
 	return color;
 }
 
+function getRandomFormattedString(chars = 2, digits = 6, separator = '-') {
+	const getRandomUppercase = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65);
+	const getRandomDigit = () => Math.floor(Math.random() * 10);
+	let string = '';
+
+	for (let i = 0; i < chars; i++) {
+		string += getRandomUppercase();
+	}
+
+	string += separator;
+
+	for (let i = 0; i < digits; i++) {
+		string += getRandomDigit();
+	}
+
+	return string;
+}
+
+function toggleColumn(table, index) {
+	const rows = table.rows;
+	const isHidden = rows[0].cells[index].classList.contains('di_none');
+
+	for (let i = 0; i < rows.length; i++) {
+		const cell = rows[i].cells[index];
+
+		if (isHidden) {
+			cell.classList.remove('di_none');
+		} else {
+			cell.classList.add('di_none');
+		}
+	}
+}
+
+function convertToRomanNumeral(num) {
+	const romanNumeralMap = [
+		{value: 1000, numeral: 'M'},
+		{value: 900, numeral: 'CM'},
+		{value: 500, numeral: 'D'},
+		{value: 400, numeral: 'CD'},
+		{value: 100, numeral: 'C'},
+		{value: 90, numeral: 'XC'},
+		{value: 50, numeral: 'L'},
+		{value: 40, numeral: 'XL'},
+		{value: 10, numeral: 'X'},
+		{value: 9, numeral: 'IX'},
+		{value: 5, numeral: 'V'},
+		{value: 4, numeral: 'IV'},
+		{value: 1, numeral: 'I'}
+	];
+
+	let result = '';
+	for (let i = 0; i < romanNumeralMap.length; i++) {
+		while (num >= romanNumeralMap[i].value) {
+			result += romanNumeralMap[i].numeral;
+			num -= romanNumeralMap[i].value;
+		}
+	}
+	return result;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

source/screens/demo/examples/ui/table.liquid

@@ -12,9 +12,21 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<button title="add">
+				<button title="Add entry">
 					<i class="bi bi-plus-circle"></i>
 				</button>
+				<button id="tglIndex" title="Toggle index column">
+					<i class="bi bi-hash"></i>
+				</button>
+				<div class="group-input">
+					<select id="sltNum" name="position-number">
+						<option value="" selected>None</option>
+						<option value="numeric">123</option>
+						<option value="latin">ABC</option>
+						<option value="roman">IVX</option>
+					</select>
+					<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
+				</div>
 			</nav>
 			<nav></nav>
 		</header>
@@ -41,12 +53,12 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<button title="drag"><i class="bi bi-grip-horizontal"></i></button>
+				<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
-				<button title="expand"><i class="bi bi-arrows-expand-vertical"></i></button>
+				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
 		</td>
-		<td></td>
+		<td class="pos-num"></td>
-		<td></td>
+		<td class="rigid"></td>
 		<td></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
@@ -55,9 +67,9 @@ tags:
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
-				<button title="event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
-				<button title="note"><i class="bi bi-journal"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
-				<button title="delete"><i class="bi bi-trash"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
 			</nav>
 		</td>
 	</tr>
@@ -97,13 +109,13 @@ tags:
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis condimentum quam, bibendum tristique odio.'
 	];
 
-	const tbody = document.querySelector('main.io section > table');
+	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
-	const template = document.querySelector('#default-row');
 
-	const currencyEuro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
+	const table = document.querySelector('main.io section > table');
+	const rowDef = document.querySelector('#default-row');
 
 	for (let i = 0; i < 256; i++) {
-		const clone = document.importNode(template.content, true);
+		const clone = document.importNode(rowDef.content, true);
 		const tr = clone.querySelector('tr');
 		const th = clone.querySelector('th');
 		const td = clone.querySelectorAll('td');
@@ -113,13 +125,53 @@ tags:
 
 		tr.setAttribute('data-id', i);
 		th.textContent = i + 1;
+		td[2].textContent = getRandomFormattedString();
 		td[3].textContent = placeholderNames[j];
 		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
 		td[4].firstElementChild.textContent = placeholderContents[k];
 		// td[5].textContent = randomIntFrom(1, i).toString();
 		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
 
-		tbody.appendChild(clone);
+		table.appendChild(clone);
 	}
+
+	const selectNum = document.getElementById('sltNum');
+	const buttonPosNum = document.getElementById('setPosNum');
+
+	buttonPosNum.addEventListener('click', () => {
+		const numType = selectNum.value;
+		const cells = document.querySelectorAll('td.pos-num');
+		let num = '';
+
+		for (let i = 0; i < cells.length; i++) {
+			switch (numType) {
+				case 'numeric':
+					num = (i + 1).toString();
+					break;
+				case 'roman':
+					num = convertToRomanNumeral((i + 1)).toString();
+					break;
+				case '':
+				default:
+			}
+
+			cells[i].textContent = num;
+		}
+	});
+
+	const buttonIndex = document.getElementById('tglIndex');
+
+	buttonIndex.addEventListener('click', () => {
+		const cells = table.querySelectorAll('th:first-child');
+		const isHidden = cells[0].classList.contains('di_none');
+
+		for (cell of cells) {
+			if (isHidden) {
+				cell.classList.remove('di_none');
+			} else {
+				cell.classList.add('di_none');
+			}
+		}
+	});
 </script>
 {% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 0623e818a49176ca7516a88943e07a882ba5262d
+Subproject commit 295626eb6ee68fd535fdd5ae891e3b4192e18546