update/modify + delete assets

src/public/scripts/assetManager.js

@@ -0,0 +1,90 @@
+const assetForms = [
+    "create-other-asset-form",
+    "create-saving-asset-form",
+    "create-stock-asset-form"
+];
+
+/**
+ * selectAssetForm changes which form is displayed
+ * to create specified assets.
+ * @param {string} assetFormId
+ */
+function selectAssetForm(assetFormId) {
+    for (let i = 0; i < assetForms.length; i++) {
+        if (assetForms[i] == assetFormId) {
+            document.getElementById(assetFormId).style.display = "block";
+        } else {
+            document.getElementById(assetForms[i]).style.display = "none";
+        }
+    }
+}
+
+/**
+ * resetRadio to default to other asset type.
+ */
+function resetRadio() {
+    document.getElementById("asset-other").checked = true;
+    document.getElementById("asset-saving").checked = false;
+    document.getElementById("asset-stock").checked = false;
+}
+
+const assetKeys = {
+    other: [
+        "name",
+        "value",
+        "description",
+        "purchaseDate",
+    ],
+    saving: [
+        "name",
+        "value",
+    ],
+    stock: [
+        "ticker",
+        "price",
+        "quantity",
+        "purchaseDate",
+    ],
+}
+
+/**
+ * lockAsset prevents edits to asset view modal
+ * @param {string} assetId
+ */
+function lockAsset(assetId) {
+    document.getElementById(`${assetId}-form`).reset();
+
+    const type = document.getElementById(`type-${assetId}`).value;
+
+    assetKeys[type].forEach((key) => {
+        document.getElementById(`${key}-${assetId}`).disabled = true;
+    });
+
+    document.getElementById(`save-${assetId}`).disabled = true;
+    document.getElementById(`save-${assetId}`).classList.remove("cursor-pointer");
+    document.getElementById(`save-${assetId}`).classList.add("cursor-not-allowed");
+
+    document.getElementById(`edit-${assetId}`).innerHTML = "Edit";
+    document.getElementById(`edit-${assetId}`).onclick = () => { unlockAsset(assetId) };
+}
+
+/**
+ * unlockAsset allows edits to asset view modal
+ * @param {string} assetId
+ */
+function unlockAsset(assetId) {
+    const type = document.getElementById(`type-${assetId}`).value;
+
+    assetKeys[type].forEach((key) => {
+        document.getElementById(`${key}-${assetId}`).disabled = false;
+    });
+
+    document.getElementById(`save-${assetId}`).disabled = false;
+    document.getElementById(`save-${assetId}`).classList.remove("cursor-not-allowed");
+    document.getElementById(`save-${assetId}`).classList.add("cursor-pointer");
+
+    document.getElementById(`edit-${assetId}`).innerHTML = "Cancel changes";
+    document.getElementById(`edit-${assetId}`).onclick = () => { lockAsset(assetId) };
+}
+
+resetRadio();

src/public/scripts/selectAssetForm.js

@@ -1,31 +0,0 @@
-const assetForms = [
-  "create-other-asset-form",
-  "create-saving-asset-form",
-  "create-stock-asset-form"
-];
-
-/**
- * selectAssetForm changes which form is displayed
- * to create specified assets.
- * @param {string} assetFormId
- */
-function selectAssetForm(assetFormId) {
-  for (let i = 0; i < assetForms.length; i++) {
-    if (assetForms[i] == assetFormId) {
-      document.getElementById(assetFormId).style.display = "block";
-    } else {
-      document.getElementById(assetForms[i]).style.display = "none";
-    }
-  }
-}
-
-/**
- * resetRadio to default to other asset type.
- */
-function resetRadio() {
-  document.getElementById("asset-other").checked = true;
-  document.getElementById("asset-saving").checked = false;
-  document.getElementById("asset-stock").checked = false;
-}
-
-resetRadio();

src/router/user.js

@@ -1,8 +1,57 @@
 const status = require("../util/statuses");
-const bcrypt = require('bcrypt');
+const ObjectId = require('mongodb').ObjectId;
+const bcrypt = require("bcrypt");
 const joi = require("joi");
 const salt = 12;
 
+/**
+ * getAssetSchema returns correct joi object
+ * to validate req.body depending on asset type
+ * @param {string} type of asset
+ * @returns {joi.object} schema
+ */
+const getAssetSchema = (type) => {
+    let assetSchema;
+
+    switch (type) {
+        case "other":
+            assetSchema = joi.object({
+                ownerId: joi.string().alphanum().required(),
+                type: joi.string().valid("other", "stock", "saving").required(),
+                name: joi.string().alphanum().min(3).max(30).required(),
+                value: joi.number().min(0).required(),
+                purchaseDate: joi.date().required(),
+                description: joi.string().alphanum().max(240),
+                id: joi.string().alphanum(), // May be passed when updating existing asset
+            });
+            break;
+        case "saving":
+            assetSchema = joi.object({
+                ownerId: joi.string().alphanum().required(),
+                type: joi.string().valid("other", "stock", "saving").required(),
+                name: joi.string().alphanum().min(3).max(30).required(),
+                value: joi.number().min(0).required(),
+                id: joi.string().alphanum(), // May be passed when updating existing asset
+            });
+            break;
+        case "stock":
+            assetSchema = joi.object({
+                ownerId: joi.string().alphanum().required(),
+                type: joi.string().valid("other", "stock", "saving").required(),
+                ticker: joi.string().alphanum().min(3).max(5).required(),
+                price: joi.number().min(0).required(),
+                quantity: joi.number().min(1).required(),
+                purchaseDate: joi.date().required(),
+                id: joi.string().alphanum(), // May be passed when updating existing asset
+            });
+            break;
+        default:
+            return null;
+    };
+
+    return assetSchema;
+}
+
 /**
  * @param {function} middleware handler
  * @param {MongoClient.collection} users db collection
@@ -169,43 +218,14 @@ module.exports = (middleware, users, assets) => {
 
     router.post("/createAsset", async (req, res) => {
         // Create asset, each asset has different data structure based on type
-        const type = req.body.assetType;
-        let assetSchema;
+        const type = req.body.type;
+        const assetSchema = getAssetSchema(type);
 
-        switch (type) {
-            case "other":
-                assetSchema = joi.object({
-                    ownerId: joi.string().alphanum().required(),
-                    type: joi.string().valid("other", "stock", "saving").required(),
-                    name: joi.string().alphanum().min(3).max(30).required(),
-                    value: joi.number().min(0).required(),
-                    purchaseDate: joi.date().required(),
-                    description: joi.string().alphanum().max(240),
-                });
-                break;
-            case "saving":
-                assetSchema = joi.object({
-                    ownerId: joi.string().alphanum().required(),
-                    type: joi.string().valid("other", "stock", "saving").required(),
-                    name: joi.string().alphanum().min(3).max(30).required(),
-                    value: joi.number().min(0).required(),
-                });
-                break;
-            case "stock":
-                assetSchema = joi.object({
-                    ownerId: joi.string().alphanum().required(),
-                    type: joi.string().valid("other", "stock", "saving").required(),
-                    ticker: joi.string().alphanum().min(3).max(5).required(),
-                    price: joi.number().min(0).required(),
-                    quantity: joi.number().min(1).required(),
-                    purchaseDate: joi.date().required(),
-                });
-                break;
-            default:
+        if (!assetSchema) {
             console.error("Modified asset type, rejected");
             req.session.errMessage = "Invalid input";
             return res.status(status.BadRequest).redirect("/assets");
-        };
+        }
 
         const valid = assetSchema.validate(req.body);
 
@@ -227,9 +247,8 @@ module.exports = (middleware, users, assets) => {
             newAsset.name = `${newAsset.ticker} Stock`;
         }
         newAsset.value = parseFloat(newAsset.value);
-        newAsset.type = type;
 
-        assets.insertOne(newAsset, (err, result) => {
+        assets.insertOne(newAsset, (err, _) => {
             if (err) {
                 console.error("Error creating asset: ", err);
                 req.session.errMessage = "Internal server error";
@@ -241,5 +260,90 @@ module.exports = (middleware, users, assets) => {
         return res.status(status.Ok).redirect("/assets");
     });
 
+    router.post("/updateAsset", async (req, res) => {
+        const type = req.body.type;
+        const assetSchema = getAssetSchema(type);
+
+        if (!assetSchema) {
+            console.error("Modified asset type, rejected");
+            req.session.errMessage = "Invalid input";
+            return res.status(status.BadRequest).redirect("/assets");
+        }
+        
+        const valid = assetSchema.validate(req.body);
+
+        if (valid.err) {
+            req.session.errMessage = "Invalid input",
+            res.status(status.BadRequest);
+            return res.redirect("/assets");
+        }
+
+        if (req.body.ownerId != req.session.user._id) {
+            req.session.errMessage = "Cannot change asset owner",
+            res.status(status.BadRequest);
+            return res.redirect("/assets");
+        }
+
+        let update = { ...req.body, updatedAt: new Date() };
+        if (type == "stock") {
+            update.quantity = parseInt(update.quantity);
+            update.price = parseFloat(update.price)
+            update.value = update.quantity * update.price;
+            update.name = `${update.ticker} Stock`;
+        }
+        update.value = parseFloat(update.value);
+        delete update.id
+        
+        assets.updateOne(
+            { "_id": new ObjectId(req.body.id) },
+            { $set: update },
+        ).then((result) => { 
+            if (result.matchedCount === 0) {
+                console.log(`Asset not found: ${req.body.id}`);
+                req.session.errMessage = "Unable to update asset";
+                return res.status(status.NotFound).redirect("/assets");
+            }
+            if (result.modifiedCount === 0 && result.matchedCount === 1) {
+                console.log(`Asset data unchanged (already up-to-date): ${req.body.id}`);
+            }
+        
+            req.session.errMessage = ""; 
+            return res.status(status.Ok).redirect("/assets"); 
+    
+        }).catch((err) => { 
+            console.error("Error updating asset: ", err);
+            req.session.errMessage = "An error occurred while saving your information. Please try again.";
+            return res.status(status.InternalServerError).redirect("/assets"); 
+        });
+    });
+
+    router.post("/deleteAsset", (req, res) => {
+        const id = new ObjectId(req.body.id);
+
+        assets.deleteOne(
+            { "_id": id }
+        ).then((result) => { 
+            if (result.deletedCount === 0) {
+                console.log(`Asset not found: ${req.body.id}`);
+                req.session.errMessage = "Unable to delete asset";
+                return res.status(status.NotFound).redirect("/assets");
+            }
+
+            if (!result.acknowledged) {
+                console.error("Error updating asset: ", err);
+                req.session.errMessage = "An error occurred while saving your information. Please try again.";
+                return res.status(status.InternalServerError).redirect("/assets");
+            }
+        
+            req.session.errMessage = ""; 
+            return res.status(status.Ok).redirect("/assets"); 
+    
+        }).catch((err) => { 
+            console.error("Error updating asset: ", err);
+            req.session.errMessage = "An error occurred while saving your information. Please try again.";
+            return res.status(status.InternalServerError).redirect("/assets");
+        });
+    });
+
     return router;
 };

src/views/assets.ejs

@@ -8,7 +8,11 @@
         <div class="flex flex-row justify-between">
             <h2 class="text-lg font-bold mb-2">Create New Asset</h2>
             <form method="dialog">
-                <button onclick="document.getElementById('create-asset-form').reset()" type="submit" class="text-center py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <button 
+                    onclick="document.getElementById('create-asset-form').reset()"
+                    type="submit"
+                    class="text-center py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Cancel
                 </button>
             </form>
@@ -18,15 +22,15 @@
             <label class="block text-sm font-medium text-gray-700">Asset Type</label>
             <div class="mt-1 space-x-4">
                 <label class="inline-flex items-center">
-                    <input checked onclick="selectAssetForm('create-other-asset-form')" id="asset-other" type="radio" name="assetType" value="other" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                    <input checked onclick="selectAssetForm('create-other-asset-form')" id="asset-other" type="radio" name="type" value="other" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 cursor-pointer">
                     <span class="ml-2 text-sm text-gray-700">Other Assets</span>
                 </label>
                 <label class="inline-flex items-center">
-                    <input onclick="selectAssetForm('create-saving-asset-form')" id="asset-saving" type="radio" name="assetType" value="saving" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                    <input onclick="selectAssetForm('create-saving-asset-form')" id="asset-saving" type="radio" name="type" value="saving" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 cursor-pointer">
                     <span class="ml-2 text-sm text-gray-700">Savings</span>
                 </label>
                 <label class="inline-flex items-center">
-                    <input onclick="selectAssetForm('create-stock-asset-form')" id="asset-stock" type="radio" name="assetType" value="stock" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                    <input onclick="selectAssetForm('create-stock-asset-form')" id="asset-stock" type="radio" name="type" value="stock" class="form-radio h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500 cursor-pointer">
                     <span class="ml-2 text-sm text-gray-700">Stocks</span>
                 </label>
             </div>
@@ -35,7 +39,7 @@
         <!-- Create other asset form -->
         <form method="POST" action="/createAsset" id="create-other-asset-form">
             <input style="display: none;" value="<%= user._id %>" name="ownerId" type="text">
-            <input style="display: none;" value="other" name="assetType" type="text">
+            <input style="display: none;" value="other" name="type" type="text">
 
             <label for="name" class="block text-sm font-medium text-gray-700 mt-2">Asset Name</label>
             <input required id="name" type="text" name="name" minlength="3" maxlength="30" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
@@ -53,10 +57,14 @@
                 <button 
                     type="reset"
                     onclick="document.getElementById('create-other-asset-form').reset()"
-                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Clear
                 </button>
-                <button type="submit" class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <button 
+                    type="submit"
+                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Create
                 </button>
             </div>
@@ -65,7 +73,7 @@
         <!-- Create savings asset form -->
         <form style="display: none;" method="POST" action="/createAsset" id="create-saving-asset-form">
             <input style="display: none;" value="<%= user._id %>" name="ownerId" type="text">
-            <input style="display: none;" value="saving" name="assetType" type="text">
+            <input style="display: none;" value="saving" name="type" type="text">
 
             <label for="name" class="block text-sm font-medium text-gray-700 mt-2">Savings Name</label>
             <input required id="name" type="text" name="name" minlength="3" maxlength="30" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
@@ -77,10 +85,14 @@
                 <button 
                     type="reset"
                     onclick="document.getElementById('create-saving-asset-form').reset()"
-                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Clear
                 </button>
-                <button type="submit" class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <button 
+                    type="submit" 
+                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Create
                 </button>
             </div>
@@ -89,7 +101,7 @@
         <!-- Create stock asset form -->
         <form style="display: none;" method="POST" action="/createAsset" id="create-stock-asset-form">
             <input style="display: none;" value="<%= user._id %>" name="ownerId" type="text">
-            <input style="display: none;" value="stock" name="assetType" type="text">
+            <input style="display: none;" value="stock" name="type" type="text">
 
             <label for="ticker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker</label>
             <input required id="ticker" type="text" name="ticker" minlength="3" maxlength="5" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
@@ -107,16 +119,21 @@
                 <button 
                     type="reset"
                     onclick="document.getElementById('create-stock-asset-form').reset()"
-                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Clear
                 </button>
-                <button type="submit" class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <button 
+                    type="submit"
+                    class="text-center w-sm py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                >
                     Create
                 </button>
             </div>
         </form>
     </dialog>
 
+    <!-- Main display -->
     <section>
         <div class="mt-8 max-w-md mx-auto bg-white px-8 py-6 rounded-lg shadow-md flex flex-col justify-center">
             <div class="flex flex-row justify-between text-right">
@@ -147,17 +164,21 @@
 
     <hr class="h-px my-8 bg-gray-500 border-0 mx-10">
 
+    <!-- list each asset and create hidden popup modal for view/edit -->
     <section class="mt-6">
         <% if (assets.length == 0) { %>
-            <a href="#">
-            <div class="max-w-md mx-auto mb-10 rounded-lg shadow-md text-white font-bold bg-red-400 py-4 text-center">
-                You have no assets, create a new asset above.
-            </div>
-            </a>
+            <button 
+                class="max-w-md mx-auto mb-10 rounded-lg shadow-md text-white font-bold bg-red-400 py-4 text-center"
+                onclick="document.getElementById('create-asset-modal').showModal()"
+            >
+                You have no assets, create a new asset.
+            </button>
         <% } %>
         <% assets.forEach((asset) => { %>
-            <a href="#">
-                <div class="px-4 py-4 mt-4 max-w-md mx-auto bg-white rounded-lg shadow-md flex flex-row justify-between">
+            <!-- Clickable asset list item -->
+            <div class="mt-4 max-w-md mx-auto bg-white rounded-lg shadow-md">
+                <button onclick="document.getElementById('<%= asset._id %>-modal').showModal()" style="width: 100%; height: 100%;" class="px-4 py-4 cursor-pointer">
+                    <div class="flex flex-row justify-between">
                         <div class="flex flex-row justify-between">
                             <div class="mx-2">Icon</div>
                             <div class="mx-2"><h3><%= asset.name %></h3></div>
@@ -168,12 +189,157 @@
                             </strong></h3>
                         </div>
                     </div>
-            </a>
+                </button>
+            </div>
+
+            <!-- Confirm delete asset modal -->
+            <dialog id="<%= asset._id %>-delete-modal" class="w-lg mx-auto bg-transparent p-8 mt-10 rounded-lg shadow-md">
+                <div class="relative p-4 w-full max-w-md h-full md:h-auto">
+                    <!-- Modal content -->
+                    <div class="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
+                        <form method="dialog">
+                            <button type="submit" class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
+                                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                                <span class="sr-only">Close modal</span>
+                            </button>
+                        </form>
+                        <svg class="text-gray-400 dark:text-gray-500 w-11 h-11 mb-3.5 mx-auto" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
+                        <p class="mb-4 text-gray-500 dark:text-gray-300">Are you sure you want to delete this item?</p>
+                        <div class="flex justify-center items-center space-x-4">
+                            <div style="width: 100%;">
+                                <form method="dialog" style="width: 100%;">
+                                    <button
+                                        type="submit" 
+                                        class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+                                    >
+                                        No, cancel
+                                    </button>
+                                </form>
+                            </div>
+                            <div style="width: 100%;">
+                                <form method="POST" action="/deleteAsset">
+                                    <input id="id-delete-<%= asset._id %>" name="id" type="text" hidden value="<%= asset._id %>">
+                                    <button 
+                                        type="submit" 
+                                        class="py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
+                                    >
+                                        Yes, I'm sure
+                                    </button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </dialog>
+
+            <!-- View/edit popup modal for asset -->
+            <dialog id="<%= asset._id %>-modal" class="w-lg mx-auto bg-white p-8 mt-10 rounded-lg shadow-md">
+                <div class="flex flex-row justify-between">
+                    <div style="width: 45%;">
+                        <form method="dialog" style="width: 100%;">
+                            <button
+                                style="width: 100%;"
+                                onclick="lockAsset('<%= asset._id %>')" 
+                                type="submit" 
+                                class="text-center w-sm py-2 py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  cursor-pointer"
+                            >
+                                Close
+                            </button>
+                        </form>
+                    </div>
+                    <div style="width: 45%;">
+                        <button
+                            style="width: 100%;"
+                            type="submit" 
+                            class="text-center w-sm py-2 py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 cursor-pointer"
+                            onclick="document.getElementById('<%= asset._id %>-delete-modal').showModal()"
+                        >
+                            Delete
+                        </button>
+                    </div>
+                </div>
+                <br>
+
+                <div class="flex flex-row justify-between">
+                    <div>
+                        ICON
+                    </div>
+                    <div>
+                        <button
+                            id="edit-<%= asset._id %>"
+                            onclick="unlockAsset('<%= asset._id %>')"
+                            class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  cursor-pointer"
+                        >
+                            Edit
+                        </button>
+                    </div>
+                </div>
+
+                <form id="<%= asset._id %>-form" method="POST" action="/updateAsset">
+                    <input id="type-<%= asset._id %>" name="type" type="text" hidden value="<%= asset.type %>">
+                    <input id="id-<%= asset._id %>" name="id" type="text" hidden value="<%= asset._id %>">
+                    <input id="ownerId-<%= asset.ownerId %>" name="ownerId" type="text" hidden value="<%= asset.ownerId %>">
+
+                    <% if (asset.type != "stock") { %>
+                        <label for="name" class="block text-sm font-medium text-gray-700 mt-6">Name</label>
+                        <input id="name-<%= asset._id %>" disabled type="text" name="name" value="<%= asset.name %>" class="mt-1 mb-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                    <% } else { %>
+                        <label for="ticker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker</label>
+                        <input id="ticker-<%= asset._id %>" disabled type="text" name="ticker" value="<%= asset.ticker %>" class="mt-1 mb-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                    <% } %>
+
+                    <hr class="h-px mt-6 mb-4 bg-gray-500 border-0 mx-10">
+
+                    <% if (asset.type != "stock") { %>
+                        <label for="value" class="block text-sm font-medium text-gray-700">Value</label>
+                        <input id="value-<%= asset._id %>" disabled type="number" name="value" value="<%= asset.value %>" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                    <% } else { %>
+                        <label for="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share</label>
+                        <input id="price-<%= asset._id %>" disabled type="number" name="price" value="<%= asset.price %>" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                        
+                        <label for="quantity" class="block text-sm font-medium text-gray-700 mt-2">Quantity of Shares</label>
+                        <input id="quantity-<%= asset._id %>" disabled type="number" name="quantity" value="<%= asset.quantity %>" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                    <% } %>
+
+                    <% if (asset.type == "other") { %>
+                        <label for="description" class="block text-sm font-medium text-gray-700 mt-2">Description</label>
+                        <textarea disabled maxlength="240" id="description-<%= asset._id %>" name="description" rows="4" cols="50" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none"><%= asset.description %></textarea>
+                    <% } %>
+
+                    <% if (asset.type != "saving") { %>
+                        <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Purchased on</label>
+                        <input id="purchaseDate-<%= asset._id %>" disabled type="date" name="purchaseDate" value="<%= asset.purchaseDate %>" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none">
+                    <% } %>
+
+                    <br>
+                    <small class="block text-sm font-medium text-gray-700">Last Modified: <%= asset.updatedAt %></small>
+                    <br>
+
+                    <div>
+                        <button id="save-<%= asset._id %>" disabled type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-not-allowed">
+                            Save
+                        </button>
+                    </div>
+                </form>
+            </dialog>
         <% }) %>
     </section>
 </main>
 
-<script src="/static/scripts/selectAssetForm.js"></script>
+<div class="mt-20"></div>
+
+<script src="/static/scripts/assetManager.js"></script>
+<script>
+    // Ensure all assets popup modals are locked and reset on page load
+    let assetIds = [];
+    <% assets.forEach((asset) => { %>
+        assetIds.push("<%= asset._id %>");
+    <% }) %>
+    // EJS or JS may say this is an error above.
+    // I assure you its not, just leave it be.
+
+    assetIds.forEach((id) => lockAsset(id));
+</script>
 
 <%- include("./partials/navBar") %>
 <%- include("./partials/footer") %>