add restricted areas management

CVHS-student-sites · May 1, 2024 · 31c6d44 · 31c6d44
1 parent f496bdf
commit 31c6d44
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 68 deletions.
diff --git a/src/lib/services/admin/mainApi.js b/src/lib/services/admin/mainApi.js
@@ -2,17 +2,15 @@ import axios from "axios";
 
 export async function fetchOverviewData() {
     const response = await fetch('https://locker-api.cvapps.net/admin/management/get-statistics', {
-        method: 'get',
-        credentials: 'include'
+        method: 'get', credentials: 'include'
     });
 
     return await response.json();
 }
 
 export async function fetchEnabledGrades() {
     const response = await fetch('https://locker-api.cvapps.net/admin/management/grade-restrictions', {
-        method: 'get',
-        credentials: 'include'
+        method: 'get', credentials: 'include'
     });
 
     return await response.json();
@@ -38,4 +36,29 @@ export async function fetchLockerData() {
     } catch (error) {
         throw error; // Rethrow the error to handle it elsewhere if needed
     }
+}
+
+export async function fetchAreaRestrictions() {
+    try {
+        const response = await axios.get('https://locker-api.cvapps.net/admin/management/area-restrictions', {
+            withCredentials: true
+        });
+        return response.data;
+    } catch (error) {
+        throw error; // Rethrow the error to handle it elsewhere if needed
+    }
+}
+
+export async function postAreaRestrictions(data) {
+    try {
+        const response = await axios.post('https://locker-api.cvapps.net/admin/management/area-restrictions',
+            data
+            , {
+                withCredentials: true
+            }
+        );
+        return response.data;
+    } catch (error) {
+        throw error; // Rethrow the error to handle it elsewhere if needed
+    }
 }
diff --git a/src/routes/(admin)/admin/manage/+page.svelte b/src/routes/(admin)/admin/manage/+page.svelte
@@ -9,7 +9,11 @@
 <div class="main">
     <div class="grid-container">
         <div class="grid-item">
-            <BuildingEdit />
+            <div class="subcont-main">
+                <div class="subcont-title">Area Restrictions</div>
+                <BuildingEdit/>
+            </div>
+
         </div>
 
         <div class="grid-item">
@@ -18,31 +22,31 @@
                 <div class="import-cont">
                     <div class="form">
                         <form
-                            action="https://locker-api.cvapps.net/admin/lockerUpload"
-                            method="post"
-                            enctype="multipart/form-data"
+                                action="https://locker-api.cvapps.net/admin/lockerUpload"
+                                enctype="multipart/form-data"
+                                method="post"
                         >
                             <input
-                                type="file"
-                                name="csvFile"
-                                accept=".csv"
-                                required
+                                    accept=".csv"
+                                    name="csvFile"
+                                    required
+                                    type="file"
                             />
                             <button type="submit">Upload Locker</button>
                         </form>
                     </div>
 
                     <div class="form">
                         <form
-                            action="https://locker-api.cvapps.net/admin/userUpload"
-                            method="post"
-                            enctype="multipart/form-data"
+                                action="https://locker-api.cvapps.net/admin/userUpload"
+                                enctype="multipart/form-data"
+                                method="post"
                         >
                             <input
-                                type="file"
-                                name="csvFile"
-                                accept=".csv"
-                                required
+                                    accept=".csv"
+                                    name="csvFile"
+                                    required
+                                    type="file"
                             />
                             <button type="submit">Upload User</button>
                         </form>
@@ -78,21 +82,18 @@
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(2, 1fr);
         gap: 10px;
-        min-height: 0; 
+        min-height: 0;
         min-width: 0;
     }
 
     .grid-item {
-        background-color: #1b2c42;
-        /*background-color: #131821;*/
+        /*background-color: #1b2c42;*/
+        background-color: #18181b;
         border-radius: 10px;
-        padding: 8px 12px;
+        padding: 8px 8px;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: start;
-        text-align: center;
         min-width: 0;
         min-height: 0;
     }
@@ -108,7 +109,7 @@
         height: 100%;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: start;
         flex-direction: column;
         gap: 5px;
         padding: 5px;

diff --git a/src/routes/(admin)/admin/manage/BuildingEdit.svelte b/src/routes/(admin)/admin/manage/BuildingEdit.svelte
@@ -1,49 +1,55 @@
 <script>
     import Switch from "$lib/components/global/Switch.svelte";
+    import {onMount} from "svelte";
+    import {Stretch} from "svelte-loading-spinners";
+    import {fetchAreaRestrictions, postAreaRestrictions} from "$lib/services/admin/mainApi.js";
 
-    const areas = {
-        building_1000: {
-            floor_1: false,
-            floor_3: false,
-        },
-        building_2000: {
-            floor_1: false,
-            floor_2: false,
-            floor_3: false,
-        },
-        building_5000: {
-            floor_2: false,
-            floor_3: false,
-        },
-        building_7000: {
-            floor_1: false,
-            floor_2: false,
-            floor_3: false,
-        },
-    };
+    let showData = false;
+    let areas;
+    let initialAreas;
+
+    async function fetchData() {
+        areas = await fetchAreaRestrictions();
+        initialAreas = JSON.stringify(areas); // Store initial state as a string
+        showData = true;
+    }
+
+    onMount(fetchData);
+
+    $: {
+        if (showData && JSON.stringify(areas) !== initialAreas) {
+
+            postAreaRestrictions(areas);
+            initialAreas = JSON.stringify(areas);
+        }
+    }
 </script>
 
-<div class="area-restrictions-cont">
-    {#each Object.keys(areas) as building}
-        <div class="building">
-            <div class="area-restrictions-title">
-                Building {building.split("_")[1]}
-            </div>
-            {#each Object.keys(areas[building]) as floor}
-                <div class="floor">
-                    <div class="area-restrictions-title">
-                        Floor {floor.split("_")[1]}
-                    </div>
-                    <Switch
-                        bind:checked={areas[building][floor]}
-                        fontSize={24}
-                        design="slider"
-                    />
+{#if showData}
+    <div class="area-restrictions-cont">
+        {#each Object.keys(areas) as building}
+            <div class="building">
+                <div class="area-restrictions-title">
+                    Building {building.split("_")[1]}
                 </div>
-            {/each}
-        </div>
-    {/each}
-</div>
+                {#each Object.keys(areas[building]) as floor}
+                    <div class="floor">
+                        <div class="area-restrictions-title">
+                            Floor {floor.split("_")[1]}
+                        </div>
+                        <Switch
+                                bind:checked={areas[building][floor]}
+                                fontSize={12}
+                                design="slider"
+                        />
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
+{:else}
+    <Stretch size="60" color="#577db2" unit="px" duration="1s"/>
+{/if}
 
 <style>
     .area-restrictions-cont {
@@ -55,14 +61,25 @@
         gap: 10px;
     }
 
+    .area-restrictions-cont::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .area-restrictions-cont {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+
     .building {
         display: flex;
         flex-direction: column;
         width: 100%;
         box-sizing: border-box;
         border-radius: 5px;
         gap: 5px;
-        background-color: #00284d;
+        /*background-color: #00284d;*/
+        border: 2px dotted #00284d;
         padding: 5px;
     }