首页 发现 帮助
登录
Liontix
/
Scheduler-Backend
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

added some event listeners and some ux fixes

Liontix 11 月之前
父节点
bce51ffd27
当前提交
a07097e627
共有 12 个文件被更改，包括 103 次插入 和 26 次删除
分列视图 显示文件统计
  1. 14 0
      public/html/appointments.html
  2. 13 0
      public/html/appointmentscreator.html
  3. 5 4
      public/javascripts/appointments.js
  4. 2 2
      public/javascripts/auth.js
  5. 7 4
      public/javascripts/creator-appointments.js
  6. 2 2
      public/javascripts/index.js
  7. 10 0
      public/javascripts/navbar.js
  8. 2 2
      public/javascripts/schedule.js
  9. 1 1
      public/stylesheets/appointments.css
  10. 7 10
      public/stylesheets/create-appointment.css
  11. 39 0
      public/stylesheets/navbar.css
  12. 1 1
      routes/members.js

+ 14 - 0
public/html/appointments.html
查看文件 

@@ -5,10 +5,23 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Appointment Table</title>
 
     <script src="../javascripts/appointments.js" async></script>
 
+    <script src="../javascripts/navbar.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/navbar.css">
 
     <link rel="stylesheet" href="../stylesheets/appointments.css">
 
 </head>
 
 <body>
 
+<nav class="navbar">
 
+    <div class="navbar-brand">Scheduler</div>
 
+    <ul class="navbar-links">
 
+        <li><a href="/html/appointments.html">Appointments</a></li>
 
+        <li><a href="/html/appointmentscreator.html">Create</a></li>
 
+        <li><a href="#" id="logout-button">Logout</a></li>
 
+    </ul>
 
+</nav>
 
+<div class="content">
 
+
 
 <div class="container">
 
+
 
     <h2>Appointments</h2>
 
     <table>
 
         <thead>
 
@@ -31,5 +44,6 @@
 
     <!-- TODO implement redirect -->
 
     <button id="add-appointment">Add Appointment</button>
 
 </div>
 
+</div>
 
 </body>
 
 </html>

+ 13 - 0
public/html/appointmentscreator.html
查看文件 

@@ -4,10 +4,22 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Create Appointment</title>
 
+    <script src="../javascripts/navbar.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/navbar.css">
 
     <link rel="stylesheet" href="../stylesheets/create-appointment.css">
 
     <script src="../javascripts/creator-appointments.js" async></script>
 
 </head>
 
 <body>
 
+
 
+<nav class="navbar">
 
+    <div class="navbar-brand">Scheduler</div>
 
+    <ul class="navbar-links">
 
+        <li><a href="/html/appointments.html">Appointments</a></li>
 
+        <li><a href="/html/appointmentscreator.html">Create</a></li>
 
+        <li><a href="#" id="logout-button">Logout</a></li>
 
+    </ul>
 
+</nav>
 
+<div class="content">
 
 <div class="container">
 
     <h2>Create Appointment</h2>
 
     <div id="appointment-form">
 
@@ -40,5 +52,6 @@
 
         <p id="appointment-success"></p>
 
     </div>
 
 </div>
 
+</div>
 
 </body>
 
 </html>

+ 5 - 4
public/javascripts/appointments.js
查看文件 

@@ -3,6 +3,11 @@
 
 let last_clicked = "";
 
 let click_counter = 0;
 
 
+// Call the function to render data
 
+window.addEventListener("load", async function () {
 
+    await fetchAppointments();
 
+});
 
+
 
 // Function to format time as HH:MM
 
 function formatTime(date) {
 
     const hours = date.getUTCHours().toString().padStart(2, '0');
 
@@ -120,9 +125,5 @@ async function fetchAppointments() {
 
     renderAppointments(js);
 
 }
 
 
-// Call the function to render data
 
-window.onload = async function () {
 
-    await fetchAppointments();
 
-}

+ 2 - 2
public/javascripts/auth.js
查看文件 

@@ -6,7 +6,7 @@ const errorMessageParagraph = document.getElementById("login-error");
 
 const submitButtonLogin = document.getElementById("btn-login");
 
 const submitButtonRegister = document.getElementById("btn-register");
 
 
-window.onload = function () {
 
+window.addEventListener("load", function () {
 
     submitButtonLogin.addEventListener("click", async function () {
 
         await login();
 
     })
 
@@ -14,7 +14,7 @@ window.onload = function () {
 
     submitButtonRegister.addEventListener("click", async function () {
 
         await register();
 
     })
 
-}
 
+});
 
 
 async function sendAuthRequest(type) {
 
     console.log(emailInput.value);

+ 7 - 4
public/javascripts/creator-appointments.js
查看文件 

@@ -10,12 +10,12 @@ const endDateInput = document.getElementById('endDate');
 
 const placeInput = document.getElementById('place');
 
 
 
-window.onload = async function() {
 
+window.addEventListener("load", async function() {
 
     document.getElementById("appointment-btn").addEventListener('click', async () => {
 
         await createAppointment();
 
     })
 
-
 
-}
 
+    console.log(titleInput.value);
 
+});
 
 
 async function fetchWithToken(url, options) {
 
     const authToken = localStorage.getItem('token');
 
@@ -56,8 +56,11 @@ async function createAppointment() {
 
         appointmentSuccessParagraph.innerText = "";
 
         appointmentErrorParagraph.innerText = js["message"];
 
     } else {
 
+        const path = `/html/schedule.html?appointment=${js["id"]}`;
 
         appointmentErrorParagraph.innerText = "";
 
-        appointmentSuccessParagraph.innerText = "Appointment created successfully.";
 
+        appointmentSuccessParagraph.innerText = "Appointment created successfully. The share link " +
 
+            "was copied to your clipboard";
 
+        await navigator.clipboard.writeText(`${window.location.origin}${path}`);
 
     }
 
 }

+ 2 - 2
public/javascripts/index.js
查看文件 

@@ -1,5 +1,5 @@
 
 "use strict";
 
 
-window.onload = function() {
 
+window.addEventListener("load", function() {
 
     window.location.replace("/html/appointments.html");
 
-}
 
+});

+ 10 - 0
public/javascripts/navbar.js
查看文件 

@@ -0,0 +1,10 @@
 
+"use strict";
 
+
 
+window.addEventListener("load", function() {
 
+    document.getElementById("logout-button").addEventListener("click", logout);
 
+});
 
+
 
+function logout() {
 
+    window.localStorage.removeItem('token');
 
+    window.location.replace("/html/auth.html");
 
+}

+ 2 - 2
public/javascripts/schedule.js
查看文件 

@@ -5,7 +5,7 @@ const errorParagraph = document.getElementById('appointment-error');
 
 const successParagraph = document.getElementById('appointment-success');
 
 
 
-window.onload = async function () {
 
+window.addEventListener("load", async function () {
 
     document.getElementById("attend-btn").addEventListener("click", async () => {
 
         await attendEvent();
 
     })
 
@@ -16,7 +16,7 @@ window.onload = async function () {
 
     }
 
 
     await getAppointment();
 
-}
 
+});
 
 
 // Function to format time as HH:MM
 
 function formatTime(date) {

+ 1 - 1
public/stylesheets/appointments.css
查看文件 

@@ -1,4 +1,4 @@
 
-body {
 
+.content {
 
     font-family: 'Arial', sans-serif;
 
     background-color: #f4f4f9;
 
     margin: 0;

+ 7 - 10
public/stylesheets/create-appointment.css
查看文件 

@@ -1,17 +1,14 @@
 
-/* General Reset */
 
-* {
 
-    margin: 0;
 
-    padding: 0;
 
-    box-sizing: border-box;
 
-    font-family: Arial, sans-serif;
 
-}
 
-
 
-body {
 
+.content {
 
     display: grid;
 
     place-items: center;
 
-    min-height: 100vh;
 
+    min-height: 80vh;
 
     background-color: #f4f4f9;
 
+
 
     margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    font-family: Arial, sans-serif;
 
+    min-width: 80%;
 
 }
 
 
 .container {

+ 39 - 0
public/stylesheets/navbar.css
查看文件 

@@ -0,0 +1,39 @@
 
+
 
+/* Navbar Styling */
 
+.navbar {
 
+    display: grid;
 
+    grid-template-columns: auto 1fr auto;
 
+    align-items: center;
 
+    background-color: white;
 
+    padding: 10px 20px;
 
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
+    width: 100%;
 
+    max-width: 96%;
 
+    border-radius: 8px;
 
+}
 
+
 
+.navbar-brand {
 
+    font-size: 1.5rem;
 
+    font-weight: bold;
 
+    color: #333;
 
+}
 
+
 
+.navbar-links {
 
+    display: grid;
 
+    grid-template-columns: repeat(4, auto);
 
+    gap: 20px;
 
+    list-style: none;
 
+    justify-self: end;
 
+}
 
+
 
+.navbar-links a {
 
+    text-decoration: none;
 
+    color: #333;
 
+    font-size: 1rem;
 
+    transition: color 0.3s ease;
 
+}
 
+
 
+.navbar-links a:hover {
 
+    color: #6c63ff;
 
+}
 
+

+ 1 - 1
routes/members.js
查看文件 

@@ -47,7 +47,7 @@ router.post('/create', function(req, res, next) {
 
     const newTask = new Appointment({ user, title, description, dueDate, place, startDate, endDate });
 
 
     newTask.save()
 
-        .then(doc => res.json({ "success": true }))
 
+        .then(doc => res.json({ "id": `${doc._id}` }))
 
         .catch(err => res.status(500).json({ 'message': err }));
 
 
 });