112 lines
5.5 KiB
Plaintext
112 lines
5.5 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="my-2 mx-4 md:max-w-md 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-lg font-medium">Assets:</h1>
|
|
<h1 class="text-lg font-medium"><%= assets.length %></h1>
|
|
</div>
|
|
<div class="flex flex-row justify-between text-right mt-6">
|
|
<h1 class="text-lg font-medium">Total Value:</h1>
|
|
<h1 class="text-lg font-medium">
|
|
<!-- 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(totalUserAssetValue) %>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-6 md:w-md md:mx-auto px-4 flex flex-row justify-between">
|
|
<button
|
|
id="dropdown-filters-button"
|
|
value=""
|
|
data-dropdown-toggle="dropdown-filters"
|
|
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-blue-600 hover:bg-blue-700 focus:outline-none cursor-pointer"
|
|
type="button"
|
|
>
|
|
<span class="inline-flex items-center">
|
|
All Assets
|
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div id="dropdown-filters" class="overflow-y-auto h-40 z-10 hidden divide-y divide-gray-100 rounded-lg shadow-sm w-32 bg-gray-700">
|
|
<ul id="dropdown-filters-ul" class="py-2 text-sm text-gray-200" aria-labelledby="dropdown-filters-button">
|
|
<li>
|
|
<button onclick="selectFilter(this)" type="button" value="all" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
|
|
<span class="inline-flex items-center">All Assets</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button onclick="selectFilter(this)" type="button" value="other" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
|
|
<span class="inline-flex items-center">Other Assets</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button onclick="selectFilter(this)" type="button" value="saving" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
|
|
<span class="inline-flex items-center">Savings Assets</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button onclick="selectFilter(this)" type="button" value="stock" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
|
|
<span class="inline-flex items-center">Stocks Assets</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<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-blue-600
|
|
hover:bg-blue-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="my-6 mx-4">
|
|
<% 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") %>
|