From 8eb6b3a12d935c4e663542a74cc5954c49126069 Mon Sep 17 00:00:00 2001
From: birdpump <birdpump@gmail.com>
Date: Tue, 21 May 2024 13:02:32 -0700
Subject: [PATCH] update register selection

---
 src/routes/(app)/register/store.js            |  4 +-
 src/routes/(app)/register/views/Final.svelte  | 61 +++++++++++++++++--
 .../(app)/register/views/Selection.svelte     | 49 ++++++++++++++-
 src/routes/(app)/register/views/View2.svelte  |  2 +-
 4 files changed, 107 insertions(+), 9 deletions(-)

diff --git a/src/routes/(app)/register/store.js b/src/routes/(app)/register/store.js
index a80206e..89c7097 100644
--- a/src/routes/(app)/register/store.js
+++ b/src/routes/(app)/register/store.js
@@ -9,4 +9,6 @@ export const selectedLocation = writable({});
 export const registrationData = writable({});
 export const studentId1 = writable();
 export const studentId2 = writable();
-export const singleLocker = writable(false);
\ No newline at end of file
+export const singleLocker = writable(false);
+
+export const editMode = writable(false);
\ No newline at end of file
diff --git a/src/routes/(app)/register/views/Final.svelte b/src/routes/(app)/register/views/Final.svelte
index 396fa54..314eb16 100644
--- a/src/routes/(app)/register/views/Final.svelte
+++ b/src/routes/(app)/register/views/Final.svelte
@@ -5,7 +5,7 @@
     import {quartOut} from "svelte/easing";
     import {submitLockers} from "$lib/services/app/mainApi.js";
 
-    import {singleLocker, registrationData, studentId1, studentId2, selectedLocation, pageView} from "../store.js";
+    import {singleLocker, registrationData, studentId1, studentId2, selectedLocation, pageView, editMode} from "../store.js";
     import {goto} from "$app/navigation";
 
 
@@ -41,6 +41,7 @@
 
     function back(){
         pageView.set(1);
+        editMode.set(true);
     }
 
 </script>
@@ -93,11 +94,14 @@
         text-align: left;
         font-size: 14px;
         color: var(--text);
-        margin-bottom: 8px;
+        margin-top: 16px;
     }
 
     .selection-div {
         width: 352px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     .submit {
@@ -107,7 +111,7 @@
         border: none;
         border-radius: 4px;
         font-weight: bold;
-        margin-top: 20px;
+        margin-top: 4px;
         cursor: pointer;
         transition-duration: 150ms;
         color: var(--text);
@@ -117,6 +121,39 @@
         background-color: #577db2;
     }
 
+    .item {
+        /*background-color: green;*/
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        gap: 15px;
+    }
+
+    .data-cont {
+        height: 40px;
+        width: 90px;
+        background-color: #17171c;
+        border-radius: 10px;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        border: 2px solid #005cb3;
+    }
+
+    .text {
+        color: #d6d6d6;
+        font-size: 24px;
+    }
+
+    .expand {
+        display: flex;
+        gap: 10px;
+        flex-direction: column;
+    }
+
     .material-symbols-outlined {
         color: #d6d6d6;
         width: 24px;
@@ -160,10 +197,24 @@
     <div class="box">
         <div class="box-cont">
             <div class="box-header">Confirm Locker Selection</div>
-            <div class="small-text">Your locker is assigned randomly</div>
-            <div class="selection-div">
 
+            <div class="selection-div">
+                <div class="expand">
+                    <div class="item">
+                        <div class="data-cont">{$selectedLocation.building}</div>
+                        <div class="text">Building</div>
+                    </div>
+                    <div class="item">
+                        <div class="data-cont">{$selectedLocation.floor}</div>
+                        <div class="text">Floor</div>
+                    </div>
+                    <div class="item">
+                        <div class="data-cont">{$selectedLocation.level}</div>
+                        <div class="text">Level</div>
+                    </div>
+                </div>
             </div>
+            <div class="small-text">Your locker is assigned randomly</div>
 
             <button class="submit" on:click={next}>{buttonMessage}</button>
             <button class="submit" on:click={back}>Go back to locker selection</button>
diff --git a/src/routes/(app)/register/views/Selection.svelte b/src/routes/(app)/register/views/Selection.svelte
index 2c43964..3761ee6 100644
--- a/src/routes/(app)/register/views/Selection.svelte
+++ b/src/routes/(app)/register/views/Selection.svelte
@@ -3,7 +3,7 @@
     import {writable} from "svelte/store";
     import {slide} from "svelte/transition";
     import {quartOut} from "svelte/easing";
-    import {singleLocker, studentId1, studentId2, selectedLocation, pageView} from "../store.js";
+    import {singleLocker, studentId1, studentId2, selectedLocation, pageView, editMode} from "../store.js";
     import {fetchAvailableLockers} from "$lib/services/app/mainApi.js";
 
     import Select from "$lib/components/app/Select.svelte";
@@ -17,14 +17,51 @@
     let data2 = [];
     let data3 = [];
 
+    if(!$editMode){
+        selectedLocation.set({
+            building: "",
+            floor: "",
+            level: ""
+        })
+    }
+
+    // let value1 = $selectedLocation.building.toString();
+    // let value2 = $selectedLocation.floor.toString();
+    // let value3 = $selectedLocation.level.toString();
+
     let value1;
     let value2;
     let value3;
 
+    let lab1;
+    let lab2;
+    let lab3;
+
+    // $: if(!load1 && !load2 && !load3){
+    //     console.log("loading")
+    //     console.log($editMode);
+    //     if ($editMode) {
+    //         console.log(value1);
+    //         value1.label = selectedLocation.building;
+    //         value2.label = selectedLocation.floor;
+    //         value3.label = selectedLocation.level;
+    //     }
+    // }
+
     async function fetchData() {
         areas = await fetchAvailableLockers();
         // Update data1 based on fetched areas
         data1 = Object.keys(areas);
+
+        // console.log($editMode);
+        // if ($editMode) {
+        //     console.log($selectedLocation)
+        //     value1.value = $selectedLocation.building.toString();
+        //     value2.value = $selectedLocation.floor.toString();
+        //     value3.value = $selectedLocation.level.toString();
+        // }
+
+
     }
 
     async function next() {
@@ -36,7 +73,15 @@
         if (value3.label === "Single") singleLocker.set(true);
 
         console.log($selectedLocation);
-        pageView.set(2);
+
+        if ($editMode) {
+            pageView.set(4);
+            editMode.set(false);
+
+        } else {
+            pageView.set(2);
+        }
+
     }
 
     onMount(async () => {
diff --git a/src/routes/(app)/register/views/View2.svelte b/src/routes/(app)/register/views/View2.svelte
index ee357fe..12f4524 100644
--- a/src/routes/(app)/register/views/View2.svelte
+++ b/src/routes/(app)/register/views/View2.svelte
@@ -101,7 +101,7 @@
     }
 
     .stat-div {
-        width: 352px;
+        width: 100%;
     }
 
     .stat-1-subcont-1 {