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