feat: Update app and windows

- Move setAttributesAccordingToPosition to HippieTaskbar
- Use TimeDisplay inside HippieTaskbar
- Add readJsonFile and loadJson to app
- Initialize taskbar with config from data/windows.json
- Update jshint globals
This commit is contained in:
sthag 2026-04-05 14:20:14 +02:00
parent b67a8a893a
commit 0c16b43ec7
5 changed files with 102 additions and 48 deletions

View file

@ -29,10 +29,7 @@ tags:
<button><i class="bi bi-mic"></i></button>
<button><i class="bi bi-volume-down"></i></button>
</nav>
<div class="clock">
<span id="time">##:##</span>
<br>
</div>
<div class="clock"></div>
<nav>
<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
</nav>
@ -63,20 +60,27 @@ tags:
const start = document.querySelector('[data-action=start]');
const draggableElement = document.getElementById('task-bar');
const placeholderElement = document.getElementById('placeholder');
// TODO: TimeDisplay in HippieTaskbar aufnehmen
const timeElement = document.getElementById('time');
const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
const timeFormat = {hour: '2-digit', minute: '2-digit'};
const timeDisplay = new TimeDisplay(timeElement, timeFormat);
initializeApp();
document.getElementById('setPause').addEventListener('click', () => {
timeDisplay.pause();
console.info('Pause time');
});
document.getElementById('setPlay').addEventListener('click', () => {
timeDisplay.resume();
console.info('Resume time');
});
async function initializeApp() {
try {
const config = await loadJson('/json/windows.json');
// TODO: Elemente in der Klasse selbst erzeugen
const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar);
// TODO: In HippieTaskbar aufnehmen
document.getElementById('setPause').addEventListener('click', () => {
taskBar.time.pause();
console.info('Pause time');
});
document.getElementById('setPlay').addEventListener('click', () => {
taskBar.time.resume();
console.info('Resume time');
});
} catch (error) {
console.error('Failed to initialize app:', error);
}
}
</script>
{% endblock %}