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 loginMessage = document.getElementById('loginMessage');
const logoutButton = document.getElementById('logoutButton'); const logoutButton = document.getElementById('logoutButton');
const taskForm = document.getElementById('taskForm'); const taskForm = document.getElementById('taskForm');
const hamburgerButton = document.getElementById('hamburgerButton'); const sidenav = document.querySelector('.sidenav');
const menuContent = document.getElementById('menuContent');
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'); console.error('One or more elements are missing in the DOM');
return; return;
} }
// Toggle the hamburger menu // Initialize Materialize components
hamburgerButton.addEventListener('click', function() { M.Sidenav.init(sidenav);
menuContent.classList.toggle('show'); M.Datepicker.init(document.querySelectorAll('.datepicker'), {
format: 'yyyy-mm-dd',
defaultDate: new Date(),
setDefaultDate: true,
firstDay: 1
}); });
// Check if user is already logged in // Check if user is already logged in
@@ -130,6 +133,7 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
const data = await response.json(); const data = await response.json();
document.getElementById('responseMessage').textContent = data.message; document.getElementById('responseMessage').textContent = data.message;
taskForm.reset(); // Reset the form after saving the task
} catch (error) { } catch (error) {
if (error.status === 401) { if (error.status === 401) {
sessionStorage.removeItem('loggedIn'); sessionStorage.removeItem('loggedIn');
@@ -149,6 +153,7 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
await db.add('tasks', taskData); await db.add('tasks', taskData);
document.getElementById('responseMessage').textContent = "Task saved offline!"; document.getElementById('responseMessage').textContent = "Task saved offline!";
taskForm.reset(); // Reset the form after saving the task
} catch (error) { } catch (error) {
document.getElementById('responseMessage').textContent = "Error saving task offline!"; document.getElementById('responseMessage').textContent = "Error saving task offline!";
console.error('Error saving task offline:', error); 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 // Load tags from server and initialize autocomplete
function loadTags() { function loadTags() {
fetch('/get-tags') fetch('/get-tags')

62
public/index.html
View File

@@ -17,12 +17,12 @@
<h1 class="center-align">Logga in</h1> <h1 class="center-align">Logga in</h1>
<form id="loginForm"> <form id="loginForm">
<div class="input-field"> <div class="input-field">
<label for="username">Användarnamn:</label> <input type="text" id="username" placeholder="Användarnamn" required>
<input type="text" id="username" placeholder="Username" required> <label for="username">Användarnamn</label>
</div> </div>
<div class="input-field"> <div class="input-field">
<label for="password">Lösenord:</label> <input type="password" id="password" placeholder="Lösenord" required>
<input type="password" id="password" placeholder="Password" required> <label for="password">Lösenord</label>
</div> </div>
<button class="btn waves-effect waves-light" type="submit">Login</button> <button class="btn waves-effect waves-light" type="submit">Login</button>
</form> </form>
@@ -31,49 +31,43 @@
<div id="appContainer" class="container" style="display:none;"> <div id="appContainer" class="container" style="display:none;">
<h1 class="center-align">TODO</h1> <h1 class="center-align">TODO</h1>
<div class="menu"> <nav style="display:none;">
<button class="hamburger" id="hamburgerButton">&#9776;</button> <div class="nav-wrapper">
<div class="menu-content" id="menuContent"> <a href="#" class="brand-logo">Menu</a>
<button id="logoutButton" class="btn waves-effect waves-light">Logout</button> <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>
</div> </nav>
<ul class="sidenav" id="mobile-demo">
<li><a id="logoutButton">Logout</a></li>
</ul>
<form id="taskForm"> <form id="taskForm">
<div class="input-field"> <div class="input-field">
<label for="subject">Uppgift:</label> <input type="text" id="subject" placeholder="Uppgift" required autocomplete="off">
<input type="text" id="subject" placeholder="Subject" required autocomplete="off"> <label for="subject">Uppgift</label>
</div> </div>
<div class="input-field"> <div class="input-field">
<label for="description">Beskrivning:</label> <textarea id="description" class="materialize-textarea" placeholder="Beskrivning"></textarea>
<textarea id="description" class="materialize-textarea" placeholder="Description"></textarea> <label for="description">Beskrivning</label>
</div> </div>
<div class="input-field"> <div class="input-field">
<label for="scheduled">Datum:</label> <input type="text" id="scheduled" class="datepicker" required>
<input type="date" id="scheduled" lang="sv-SE" required> <label for="scheduled">Planerat datum</label>
</div> </div>
<div class="input-field"> <div class="input-field">
<label for="tags">Taggar (separera med komma):</label> <input type="text" id="tags" placeholder="Taggar">
<input type="text" id="tags" class="autocomplete" placeholder="Tags" autocomplete="off"> <label for="tags">Taggar</label>
</div> </div>
<button class="btn waves-effect waves-light" type="submit">Save Task</button>
<button class="btn waves-effect waves-light" type="submit">Spara</button> <p id="responseMessage"></p>
</form> </form>
<p id="responseMessage" class="center-align"></p>
</div> </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</body> </body>
</html> </html>

9
public/style.css
View File

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