update/add year to car assets

src/public/scripts/assetManager.js

@@ -85,6 +85,8 @@ function lockAsset(assetId, icon) {
         document.getElementById(`${key}-${assetId}`).disabled = true;
     });
 
+    if (icon === "Car" || icon === "Motorcycle") document.getElementById(`year-${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");
@@ -105,6 +107,8 @@ function unlockAsset(assetId, icon) {
         document.getElementById(`${key}-${assetId}`).disabled = false;
     });
 
+    if (icon === "Car" || icon === "Motorcycle") document.getElementById(`year-${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");
@@ -133,6 +137,8 @@ function autoOpenCreate() {
  * @param {string} assetId
  */
 function selectIcon(selectedIcon, assetId="") {
+    toggleYear(selectedIcon.value, assetId);
+    
     document.getElementById(`dropdown-icon-button${assetId != "" ? "-" : ""}${assetId}`).value = selectedIcon.value;
     document.getElementById(`icon${assetId != "" ? "-" : ""}${assetId}`).value = selectedIcon.value
 
@@ -144,5 +150,29 @@ function selectIcon(selectedIcon, assetId="") {
     `;
 }
 
+/**
+ * toggleYear shows or hides year input
+ * @param {string} type of asset
+ */
+function toggleYear(type, assetId="") {
+    if (type === "Car" || type === "Motorcycle") {
+        if (assetId) {
+            document.getElementById(`year-${assetId}`).disabled = false;
+            document.getElementById(`year-modify-${assetId}`).style.display = 'block';
+        } else {
+            document.getElementById('year-input').disabled = false;
+            document.getElementById('year-create').style.display = 'block';
+        }
+    } else {
+        if (assetId) {
+            document.getElementById(`year-${assetId}`).disabled = true;
+            document.getElementById(`year-modify-${assetId}`).style.display = 'none';
+        } else {
+            document.getElementById('year-input').disabled = true;
+            document.getElementById('year-create').style.display = 'none';
+        }
+    }
+}
+
 resetRadio();
 autoOpenCreate();

src/router/user.js

@@ -26,6 +26,7 @@ const getAssetSchema = (type) => {
                 icon: joi.string().alphanum().required(),
                 name: joi.string().alphanum().min(3).max(30).required(),
                 value: joi.number().min(0).required(),
+                year: joi.number().min(1900).max(new Date().getFullYear()),
                 purchaseDate: joi.date().required(),
                 description: joi.string().max(240).min(0),
                 id: joi.string().alphanum(), // May be passed when updating existing asset
@@ -627,6 +628,7 @@ module.exports = (middleware, users, plans, assets) => {
             newAsset.value = newAsset.quantity * newAsset.price;
             newAsset.name = `${newAsset.ticker} Stock`;
         }
+        if (type == "other" && newAsset.year != "") newAsset.year = parseInt(newAsset.year);
         newAsset.value = parseFloat(newAsset.value);
         newAsset.icon = type == "stock" ? "Stock" : type == "saving" ? "Coins" : newAsset.icon;
 
@@ -673,6 +675,7 @@ module.exports = (middleware, users, plans, assets) => {
             update.value = update.quantity * update.price;
             update.name = `${update.ticker} Stock`;
         }
+        if (type == "other" && update.year != "") update.year = parseInt(update.year);
         update.value = parseFloat(update.value);
         delete update.id;
         delete update.userId;

src/views/partials/assetModify.ejs

@@ -120,6 +120,27 @@
                 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"
             >
+
+            <div 
+                id="year-modify-<%= asset._id %>"
+                <% if (asset.icon != "Car" && asset.icon != "Motorcycle") { %>
+                    style="display: none;"
+                <% } %>
+            >
+                <label for="year" class="block text-sm font-medium text-gray-700 mt-2">Year <span class="text-red-500">*</span></label>
+                <input
+                    id="year-<%= asset._id %>"
+                    disabled
+                    required 
+                    placeholder="2000" 
+                    min="1900" 
+                    max="<% new Date().getFullYear() %>" 
+                    type="number"
+                    name="year" 
+                    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"
+                    value="<%= asset.year %>"
+                >
+            </div>
         <% } else { %>
             <label for="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share <span class="text-red-500">*</span></label>
             <input 

src/views/partials/createAsset.ejs

@@ -104,6 +104,21 @@
             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 id="year-create">
+            <label for="year" class="block text-sm font-medium text-gray-700 mt-2">Year <span class="text-red-500">*</span></label>
+            <input
+                id="year-input"
+                disabled
+                required 
+                placeholder="2000" 
+                min="1900" 
+                max="<% new Date().getFullYear() %>" 
+                type="number"
+                name="year" 
+                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>
+
         <label for="value" class="block text-sm font-medium text-gray-700 mt-2">Asset Value <span class="text-red-500">*</span></label>
         <input 
             required