update/assets page and creation forms

src/public/scripts/selectAssetForm.js

@@ -0,0 +1,31 @@
+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} assetId
+ */
+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

@@ -14,7 +14,21 @@ module.exports = (middleware, users) => {
     });
 
     router.get('/assets', (req, res) => {
-        res.render('assets', { user: req.user });
+        let assets = [
+            {
+                name: "hello my name is braeden! abc!",
+                value: 1123.50,
+            },
+            {
+                name: "asset 2",
+                value: 321.05,
+            },
+            {
+                name: "asset 3",
+                value: 666,
+            },
+        ];
+        res.render('assets', { user: req.user, assets: assets });
         return res.status(status.Ok);
     });
 

src/views/assets.ejs

@@ -2,8 +2,179 @@
 <%- include("./partials/header") %>
 
 <main>
-    The Assets Page
+
+    <!-- Create Asset popup Modal -->
+    <dialog id="create-asset-modal" class="w-lg mx-auto bg-white p-8 mt-10 rounded-lg shadow-md">
+        <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">
+                    Cancel
+                </button>
+            </form>
+        </div>
+
+        <div class="my-4">
+            <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">
+                    <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">
+                    <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">
+                    <span class="ml-2 text-sm text-gray-700">Stocks</span>
+                </label>
+            </div>
+        </div>
+
+        <!-- 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">
+
+            <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" 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">
+
+            <label for="value" class="block text-sm font-medium text-gray-700 mt-2">Asset Value</label>
+            <input required placeholder="CAD" min="0" id="value" type="number" name="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">
+
+            <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Date of Purchase</label>
+            <input required type="date" id="purchaseDate" name="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">
+
+            <label for="description" class="block text-sm font-medium text-gray-700 mt-2">Description</label>
+            <textarea maxlength="240" id="description" 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"></textarea>
+
+            <div class="mt-6 flex flex-row justify-between">
+                <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">
+                    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">
+                    Create
+                </button>
+            </div>
+        </form>
+
+        <!-- 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="savings" name="assetType" 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" 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">
+
+            <label for="value" class="block text-sm font-medium text-gray-700 mt-2">Savings Value</label>
+            <input required placeholder="CAD" min="0" id="value" type="number" name="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">
+
+            <div class="mt-6 flex flex-row justify-between">
+                <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">
+                    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">
+                    Create
+                </button>
+            </div>
+        </form>
+
+        <!-- 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">
+
+
+            <label for="stockTicker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker</label>
+            <input required id="stockTicker" type="text" name="stockTicker" 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">
+
+            <label for="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share</label>
+            <input required placeholder="CAD" min="0" id="price" type="number" name="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">
+
+            <label for="quantity" class="block text-sm font-medium text-gray-700 mt-2">Quantity of Shares</label>
+            <input required type="number" min="1" id="quantity" name="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">
+
+            <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Date of Purchase</label>
+            <input required type="date" id="purchaseDate" name="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">
+
+            <div class="mt-6 flex flex-row justify-between">
+                <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">
+                    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">
+                    Create
+                </button>
+            </div>
+        </form>
+    </dialog>
+
+    <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">
+                <h1 class="text-2xl font-bold tracking-tight leading-none">Assets:</h1>
+                <h1 class="text-xl font-medium tracking-tight leading-none"><%= assets.length %></h1>
+            </div>
+            <div class="flex flex-row justify-between text-right mt-6">
+                <h1 class="text-2xl font-bold tracking-tight leading-none">Total Value:</h1>
+                <h1 class="text-xl font-medium tracking-tight leading-none">
+                    <!-- sum of assets array values and formated as proper dollar amount -->
+                    $<%= assets.reduce((total, e) => total + e.value, 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) %>
+                </h1>
+            </div>
+        </div>
+
+        <div class="w-md my-6 max-w-md mx-auto px-4 flex flex-row justify-between">
+            <a href="/home" 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">
+                Back to Dashboard
+            </a>
+            <button 
+                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"
+                onclick="document.getElementById('create-asset-modal').showModal()"
+            >
+                Add New Asset
+            </button>
+        </div>
+    </section>
+
+    <hr class="h-px my-8 bg-gray-500 border-0 mx-10">
+
+    <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>
+        <% } %>
+        <% 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">
+                    <div class="flex flex-row justify-between">
+                        <div class="mx-2">Icon</div>
+                        <div class="mx-2"><h3><%= asset.name %></h3></div>
+                    </div>
+                    <div>
+                        <h3><strong>
+                            $<%= asset.value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) %>
+                        </strong></h3>
+                    </div>
+                </div>
+            </a>
+        <% }) %>
+    </section>
 </main>
 
+<script src="/static/scripts/selectAssetForm.js"></script>
+
 <%- include("./partials/navBar") %>
 <%- include("./partials/footer") %>