Render wallet items and view them

nfoert · Aug 21, 2024 · 3df151b · 3df151b
1 parent 271c9b9
commit 3df151b
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 29 deletions.
diff --git a/cardie/main/templates/home.html b/cardie/main/templates/home.html
@@ -54,11 +54,6 @@
 
             <div id="home-wallet" x-show="!cards" x-transition> 
                 <p class="ui_text_subheader_left"><i class="ph-bold ph-wallet"></i> My Wallet</p>
-
-                <div class="ui_status_info">
-                    <i class="ph-bold ph-info ui_status_icon"></i>
-                    <p class="ui_status_text">Your Wallet is coming soon!</p>
-                </div>
             </div>
 
             <div id="home-cards" x-show="cards" x-transition>

diff --git a/cardie/static/main/scripts/card_view/card_view.js b/cardie/static/main/scripts/card_view/card_view.js
@@ -39,21 +39,36 @@ async function render_card_view() {
 }
 
 function show_cardview_status() {
-    if (username == JSON.parse(cardview_json)["author"]) {
+    try {
+        var from_wallet_param = new URL(window.location.href).searchParams.get("from_wallet");
+    } catch {
+        var from_wallet_param = false;
+    }
+
+    if (from_wallet_param) {
         document.querySelector("#cardview_bottom_createaccount").style.display = "none";
         document.querySelector("#cardview_bottom_save").style.display = "none";
-        document.querySelector("#cardview_bottom_owned").style.display = "block";
-
-    } else if (username) {
-        document.querySelector("#cardview_bottom_createaccount").style.display = "none";
-        document.querySelector("#cardview_bottom_save").style.display = "block";
         document.querySelector("#cardview_bottom_owned").style.display = "none";
-    
+
     } else {
-        document.querySelector("#cardview_bottom_createaccount").style.display = "block";
-        document.querySelector("#cardview_bottom_save").style.display = "none";
-        document.querySelector("#cardview_bottom_owned").style.display = "none";
+        if (username == JSON.parse(cardview_json)["author"]) {
+            document.querySelector("#cardview_bottom_createaccount").style.display = "none";
+            document.querySelector("#cardview_bottom_save").style.display = "none";
+            document.querySelector("#cardview_bottom_owned").style.display = "block";
+
+        } else if (username) {
+            document.querySelector("#cardview_bottom_createaccount").style.display = "none";
+            document.querySelector("#cardview_bottom_save").style.display = "block";
+            document.querySelector("#cardview_bottom_owned").style.display = "none";
+
+        } else {
+            document.querySelector("#cardview_bottom_createaccount").style.display = "block";
+            document.querySelector("#cardview_bottom_save").style.display = "none";
+            document.querySelector("#cardview_bottom_owned").style.display = "none";
+        }
     }
+
+
 }
 
 async function save_to_wallet() {

diff --git a/cardie/static/main/scripts/home/home.js b/cardie/static/main/scripts/home/home.js
@@ -93,6 +93,62 @@ function create_home_card(uuid, name) {
     document.querySelector("#home-cards").appendChild(div);
 }
 
+function create_wallet_card(uuid, name) {
+    let div = document.createElement("div");
+    div.classList.add("home_card");
+
+    let view_button = document.createElement("button");
+    view_button.classList.add("ui_button_icon");
+    view_button.classList.add("home_wallet_view_button")
+
+    let view_button_icon = document.createElement("i");
+    view_button_icon.className = "ph-bold ph-arrow-circle-right";
+
+    view_button.appendChild(view_button_icon);
+    view_button.addEventListener("click", (event) => home_wallet_view(event));
+
+    let remove_button = document.createElement("button");
+    remove_button.classList.add("ui_button_icon");
+    remove_button.classList.add("home_wallet_remove_button")
+
+    let remove_button_icon = document.createElement("i");
+    remove_button_icon.className = "ph-bold ph-trash";
+
+    remove_button.appendChild(remove_button_icon);
+    remove_button.addEventListener("click", (event) => home_wallet_remove(event));
+
+    let text_div = document.createElement("div");
+    text_div.classList.add("home_card_text");
+
+    let text_name = document.createElement("p");
+    text_name.classList.add("home_card_text_name");
+    text_name.innerText = name;
+
+    let text_uuid = document.createElement("p");
+    text_uuid.classList.add("home_card_text_uuid");
+    text_uuid.innerText = uuid;
+
+    text_div.appendChild(text_name);
+    text_div.appendChild(text_uuid);
+
+    div.appendChild(text_div);
+    div.appendChild(view_button);
+    div.appendChild(remove_button);
+
+    div.setAttribute("open", false);
+
+    document.querySelector("#home-wallet").appendChild(div);
+}
+
+function home_wallet_view(event) {
+    let uuid = event.target.closest(".home_card").querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText;
+    window.location.href = server_ip + "/card" + `?uuid=${uuid}&from_wallet=true`;
+}
+
+async function home_wallet_remove(event) {
+
+}
+
 async function list_cards() {
     const response = await fetch(server_ip + "/listcards", {
         method: "POST",
@@ -141,7 +197,6 @@ async function get_wallet() {
     });
 
     response.text().then(function (text) {
-        console.log(text)
         if (text == "Request is not a POST request") {
             log("WARNING", text);
             create_notification("There was a problem getting your wallet", text, "warning");
@@ -153,7 +208,10 @@ async function get_wallet() {
 
         } else {
             text = JSON.parse(text);
-            console.log(text)
+
+            for (const card in text) {
+                create_wallet_card(text[card]["uuid"], text[card]["name"]);
+            }
         }
     });
 }
@@ -264,4 +322,5 @@ document.querySelector("#dialog_home_delete_delete").addEventListener("click", a
     });
 });
 
-list_cards();
+list_cards();
+get_wallet();
diff --git a/cardie/staticfiles/main/scripts/card_view/card_view.js b/cardie/staticfiles/main/scripts/card_view/card_view.js
@@ -39,21 +39,36 @@ async function render_card_view() {
 }
 
 function show_cardview_status() {
-    if (username == JSON.parse(cardview_json)["author"]) {
+    try {
+        var from_wallet_param = new URL(window.location.href).searchParams.get("from_wallet");
+    } catch {
+        var from_wallet_param = false;
+    }
+
+    if (from_wallet_param) {
         document.querySelector("#cardview_bottom_createaccount").style.display = "none";
         document.querySelector("#cardview_bottom_save").style.display = "none";
-        document.querySelector("#cardview_bottom_owned").style.display = "block";
-
-    } else if (username) {
-        document.querySelector("#cardview_bottom_createaccount").style.display = "none";
-        document.querySelector("#cardview_bottom_save").style.display = "block";
         document.querySelector("#cardview_bottom_owned").style.display = "none";
-    
+
     } else {
-        document.querySelector("#cardview_bottom_createaccount").style.display = "block";
-        document.querySelector("#cardview_bottom_save").style.display = "none";
-        document.querySelector("#cardview_bottom_owned").style.display = "none";
+        if (username == JSON.parse(cardview_json)["author"]) {
+            document.querySelector("#cardview_bottom_createaccount").style.display = "none";
+            document.querySelector("#cardview_bottom_save").style.display = "none";
+            document.querySelector("#cardview_bottom_owned").style.display = "block";
+
+        } else if (username) {
+            document.querySelector("#cardview_bottom_createaccount").style.display = "none";
+            document.querySelector("#cardview_bottom_save").style.display = "block";
+            document.querySelector("#cardview_bottom_owned").style.display = "none";
+
+        } else {
+            document.querySelector("#cardview_bottom_createaccount").style.display = "block";
+            document.querySelector("#cardview_bottom_save").style.display = "none";
+            document.querySelector("#cardview_bottom_owned").style.display = "none";
+        }
     }
+
+
 }
 
 async function save_to_wallet() {

diff --git a/cardie/staticfiles/main/scripts/home/home.js b/cardie/staticfiles/main/scripts/home/home.js
@@ -93,6 +93,62 @@ function create_home_card(uuid, name) {
     document.querySelector("#home-cards").appendChild(div);
 }
 
+function create_wallet_card(uuid, name) {
+    let div = document.createElement("div");
+    div.classList.add("home_card");
+
+    let view_button = document.createElement("button");
+    view_button.classList.add("ui_button_icon");
+    view_button.classList.add("home_wallet_view_button")
+
+    let view_button_icon = document.createElement("i");
+    view_button_icon.className = "ph-bold ph-arrow-circle-right";
+
+    view_button.appendChild(view_button_icon);
+    view_button.addEventListener("click", (event) => home_wallet_view(event));
+
+    let remove_button = document.createElement("button");
+    remove_button.classList.add("ui_button_icon");
+    remove_button.classList.add("home_wallet_remove_button")
+
+    let remove_button_icon = document.createElement("i");
+    remove_button_icon.className = "ph-bold ph-trash";
+
+    remove_button.appendChild(remove_button_icon);
+    remove_button.addEventListener("click", (event) => home_wallet_remove(event));
+
+    let text_div = document.createElement("div");
+    text_div.classList.add("home_card_text");
+
+    let text_name = document.createElement("p");
+    text_name.classList.add("home_card_text_name");
+    text_name.innerText = name;
+
+    let text_uuid = document.createElement("p");
+    text_uuid.classList.add("home_card_text_uuid");
+    text_uuid.innerText = uuid;
+
+    text_div.appendChild(text_name);
+    text_div.appendChild(text_uuid);
+
+    div.appendChild(text_div);
+    div.appendChild(view_button);
+    div.appendChild(remove_button);
+
+    div.setAttribute("open", false);
+
+    document.querySelector("#home-wallet").appendChild(div);
+}
+
+function home_wallet_view(event) {
+    let uuid = event.target.closest(".home_card").querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText;
+    window.location.href = server_ip + "/card" + `?uuid=${uuid}&from_wallet=true`;
+}
+
+async function home_wallet_remove(event) {
+
+}
+
 async function list_cards() {
     const response = await fetch(server_ip + "/listcards", {
         method: "POST",
@@ -135,6 +191,31 @@ function create_new_card() {
     window.location.href = server_ip + "/editor";
 }
 
+async function get_wallet() {
+    const response = await fetch(server_ip + "/getwallet", {
+        method: "POST",
+    });
+
+    response.text().then(function (text) {
+        if (text == "Request is not a POST request") {
+            log("WARNING", text);
+            create_notification("There was a problem getting your wallet", text, "warning");
+            return false;
+
+        } else if (text == "Not signed in") {
+            log("WARNING", "You're not signed in!");
+            window.location.href = `${server_ip}/authentication`;
+
+        } else {
+            text = JSON.parse(text);
+
+            for (const card in text) {
+                create_wallet_card(text[card]["uuid"], text[card]["name"]);
+            }
+        }
+    });
+}
+
 document.querySelector("#home-top-image").addEventListener("click", (event) => {
     window.location.href = server_ip;
 });
@@ -241,4 +322,5 @@ document.querySelector("#dialog_home_delete_delete").addEventListener("click", a
     });
 });
 
-list_cards();
+list_cards();
+get_wallet();