Files
RetirementCalculator/src/views/assets.ejs
T

73 lines
3.3 KiB
Plaintext

<%- include("./partials/fileHeader") %>
<%- include("./partials/header") %>
<main class="pt-26">
<%- include("./partials/createAsset", { icons: icons }) %>
<% if (errMessage != "") { %>
<div class="max-w-md mx-auto mb-10 rounded-lg shadow-md text-white font-bold bg-red-400 py-4 text-center"><%= errMessage %></div>
<% } %>
<!-- 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">
<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 -->
<%- new Intl.NumberFormat('en-US', { style: 'currency', currency: geoData.currency ? geoData.currency : 'CAD' }).format(assets.reduce((total, e) => total + e.value, 0)) %>
</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">
<!-- list each asset and create hidden popup modal for view/edit -->
<section class="mt-6">
<% if (assets.length == 0) { %>
<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.
</div>
<% } %>
<% assets.forEach((asset) => { %>
<%- include("./partials/assetPreview", { asset: asset }); %>
<%- include("./partials/assetDelete", { asset: asset }); %>
<%- include("./partials/assetModify", { asset: asset }); %>
<% }) %>
</section>
</main>
<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 assets = <%- JSON.stringify(assets) %>;
assets.forEach((asset) => {
lockAsset(asset._id, asset.icon);
});
</script>
<%- include("./partials/navBar") %>
<%- include("./partials/scriptLoader") %>
<%- include("./partials/footer") %>