fredrik/org-todo-pwa
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navigation and form elements for improved usability and localization

Browse Source
This commit is contained in:
fredrik
2025-01-25 11:21:26 +01:00
parent 09772d859d
commit 1122de442b
3 changed files with 41 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
public/app.js
View File

@@ -17,17 +17,20 @@ document.addEventListener('DOMContentLoaded', function() {
const loginMessage = document.getElementById('loginMessage');
const logoutButton = document.getElementById('logoutButton');
const taskForm = document.getElementById('taskForm');
const hamburgerButton = document.getElementById('hamburgerButton');
const menuContent = document.getElementById('menuContent');
const sidenav = document.querySelector('.sidenav');
if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !hamburgerButton || !menuContent) {
if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !sidenav) {
console.error('One or more elements are missing in the DOM');
return;
}
// Toggle the hamburger menu
hamburgerButton.addEventListener('click', function() {
menuContent.classList.toggle('show');
// Initialize Materialize components
M.Sidenav.init(sidenav);
M.Datepicker.init(document.querySelectorAll('.datepicker'), {
format: 'yyyy-mm-dd',
defaultDate: new Date(),
setDefaultDate: true,
firstDay: 1
});
// Check if user is already logged in
@@ -130,6 +133,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
const data = await response.json();
document.getElementById('responseMessage').textContent = data.message;
taskForm.reset(); // Reset the form after saving the task
} catch (error) {
if (error.status === 401) {
sessionStorage.removeItem('loggedIn');
@@ -149,6 +153,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
await db.add('tasks', taskData);
document.getElementById('responseMessage').textContent = "Task saved offline!";
taskForm.reset(); // Reset the form after saving the task
} catch (error) {
document.getElementById('responseMessage').textContent = "Error saving task offline!";
console.error('Error saving task offline:', error);
@@ -156,19 +161,6 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
// Set tomorrow's date as the default for the date input
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
const tomorrowString = tomorrow.toISOString().split('T')[0];
document.getElementById('scheduled').value = tomorrowString;
// Initialize flatpickr with Swedish locale and Monday as the first day of the week
flatpickr("#scheduled", {
weekNumbers: true, // Show week numbers
firstDayOfWeek: 1 // Start weeks on Monday
});
// Load tags from server and initialize autocomplete
function loadTags() {
fetch('/get-tags')

62
public/index.html
View File

@@ -17,12 +17,12 @@
<h1 class="center-align">Logga in</h1>
<form id="loginForm">
<div class="input-field">
<label for="username">Användarnamn:</label>
<input type="text" id="username" placeholder="Username" required>
<input type="text" id="username" placeholder="Användarnamn" required>
<label for="username">Användarnamn</label>
</div>
<div class="input-field">
<label for="password">Lösenord:</label>
<input type="password" id="password" placeholder="Password" required>
<input type="password" id="password" placeholder="Lösenord" required>
<label for="password">Lösenord</label>
</div>
<button class="btn waves-effect waves-light" type="submit">Login</button>
</form>
@@ -31,49 +31,43 @@
<div id="appContainer" class="container" style="display:none;">
<h1 class="center-align">TODO</h1>
<div class="menu">
<button class="hamburger" id="hamburgerButton">&#9776;</button>
<div class="menu-content" id="menuContent">
<button id="logoutButton" class="btn waves-effect waves-light">Logout</button>
<nav style="display:none;">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Menu</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a id="logoutButton" class="hide-on-med-and-down">Logout</a></li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a id="logoutButton">Logout</a></li>
</ul>
<form id="taskForm">
<div class="input-field">
<label for="subject">Uppgift:</label>
<input type="text" id="subject" placeholder="Subject" required autocomplete="off">
<input type="text" id="subject" placeholder="Uppgift" required autocomplete="off">
<label for="subject">Uppgift</label>
</div>
<div class="input-field">
<label for="description">Beskrivning:</label>
<textarea id="description" class="materialize-textarea" placeholder="Description"></textarea>
<textarea id="description" class="materialize-textarea" placeholder="Beskrivning"></textarea>
<label for="description">Beskrivning</label>
</div>
<div class="input-field">
<label for="scheduled">Datum:</label>
<input type="date" id="scheduled" lang="sv-SE" required>
<input type="text" id="scheduled" class="datepicker" required>
<label for="scheduled">Planerat datum</label>
</div>
<div class="input-field">
<label for="tags">Taggar (separera med komma):</label>
<input type="text" id="tags" class="autocomplete" placeholder="Tags" autocomplete="off">
<input type="text" id="tags" placeholder="Taggar">
<label for="tags">Taggar</label>
</div>
<button class="btn waves-effect waves-light" type="submit">Spara</button>
<button class="btn waves-effect waves-light" type="submit">Save Task</button>
<p id="responseMessage"></p>
</form>
<p id="responseMessage" class="center-align"></p>
</div>
<script src="app.js"></script>
<script>
// Set today's date as the default for the date input
const today = new Date().toISOString().split('T')[0];
document.getElementById('scheduled').value = today;
// Initialize flatpickr with Swedish locale and Monday as the first day of the week
flatpickr("#scheduled", {
weekNumbers: true, // Show week numbers
firstDayOfWeek: 1 // Start weeks on Monday
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
</html>

11
public/style.css
View File

@@ -1,11 +1,5 @@
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
@@ -22,8 +16,7 @@ h1 {
#responseMessage {
text-align: center;
color: green;
}
color: green;}
.menu {
position: relative;
@@ -62,4 +55,4 @@ h1 {
.menu.show .menu-content {
display: block;
}
}