287 lines
13 KiB
HTML
287 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Digital Assets List{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4">
|
|
<h1 class="mt-4">Digital Assets</h1>
|
|
<ol class="breadcrumb mb-4">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="/assets">Digital Assets</a></li>
|
|
<li class="breadcrumb-item active">All Assets</li>
|
|
</ol>
|
|
|
|
<!-- Filters -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="fas fa-filter me-1"></i>
|
|
Filter Assets
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<label for="assetTypeFilter" class="form-label">Asset Type</label>
|
|
<select class="form-select" id="assetTypeFilter">
|
|
<option value="all">All Types</option>
|
|
<option value="NFT">NFT</option>
|
|
<option value="Token">Token</option>
|
|
<option value="RealEstate">Real Estate</option>
|
|
<option value="Commodity">Commodity</option>
|
|
<option value="Share">Share</option>
|
|
<option value="Bond">Bond</option>
|
|
<option value="IntellectualProperty">Intellectual Property</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="statusFilter" class="form-label">Status</label>
|
|
<select class="form-select" id="statusFilter">
|
|
<option value="all">All Statuses</option>
|
|
<option value="Active">Active</option>
|
|
<option value="Locked">Locked</option>
|
|
<option value="ForSale">For Sale</option>
|
|
<option value="Transferred">Transferred</option>
|
|
<option value="Archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="valuationFilter" class="form-label">Valuation</label>
|
|
<select class="form-select" id="valuationFilter">
|
|
<option value="all">All Valuations</option>
|
|
<option value="under1000">Under $1,000</option>
|
|
<option value="1000to10000">$1,000 - $10,000</option>
|
|
<option value="10000to100000">$10,000 - $100,000</option>
|
|
<option value="over100000">Over $100,000</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="searchInput" class="form-label">Search</label>
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Search by name or description">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<button id="applyFilters" class="btn btn-primary">Apply Filters</button>
|
|
<button id="resetFilters" class="btn btn-secondary">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assets Table -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fas fa-table me-1"></i>
|
|
All Digital Assets
|
|
</div>
|
|
<div>
|
|
<a href="/assets/create" class="btn btn-primary btn-sm">
|
|
<i class="fas fa-plus"></i> Create New Asset
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover" id="assetsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
<th>Owner</th>
|
|
<th>Valuation</th>
|
|
<th>Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for asset in assets %}
|
|
<tr class="asset-row"
|
|
data-type="{{ asset.asset_type }}"
|
|
data-status="{{ asset.status }}"
|
|
data-valuation="{% if asset.current_valuation %}{{ asset.current_valuation }}{% else %}0{% endif %}">
|
|
<td>
|
|
{% if asset.image_url %}
|
|
<img src="{{ asset.image_url }}" alt="{{ asset.name }}" class="asset-thumbnail me-2">
|
|
{% endif %}
|
|
{{ asset.name }}
|
|
</td>
|
|
<td>{{ asset.asset_type }}</td>
|
|
<td>
|
|
{% if asset.status == "Active" %}
|
|
<span class="badge bg-success">{{ asset.status }}</span>
|
|
{% elif asset.status == "For Sale" %}
|
|
<span class="badge bg-warning">{{ asset.status }}</span>
|
|
{% elif asset.status == "Locked" %}
|
|
<span class="badge bg-secondary">{{ asset.status }}</span>
|
|
{% elif asset.status == "Transferred" %}
|
|
<span class="badge bg-info">{{ asset.status }}</span>
|
|
{% elif asset.status == "Archived" %}
|
|
<span class="badge bg-danger">{{ asset.status }}</span>
|
|
{% else %}
|
|
<span class="badge bg-primary">{{ asset.status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ asset.owner_name }}</td>
|
|
<td>
|
|
{% if asset.current_valuation %}
|
|
{{ asset.valuation_currency }}{{ asset.current_valuation }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ asset.created_at }}</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="/assets/{{ asset.id }}" class="btn btn-sm btn-primary">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
{% if asset.status == "Active" %}
|
|
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#statusModal" data-asset-id="{{ asset.id }}">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Change Modal -->
|
|
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="statusModalLabel">Change Asset Status</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="statusForm" method="post" action="">
|
|
<div class="mb-3">
|
|
<label for="newStatus" class="form-label">New Status</label>
|
|
<select class="form-select" id="newStatus" name="status">
|
|
<option value="Active">Active</option>
|
|
<option value="Locked">Locked</option>
|
|
<option value="ForSale">For Sale</option>
|
|
<option value="Transferred">Transferred</option>
|
|
<option value="Archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="saveStatusBtn">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Status modal functionality
|
|
const statusModal = document.getElementById('statusModal');
|
|
if (statusModal) {
|
|
statusModal.addEventListener('show.bs.modal', function(event) {
|
|
const button = event.relatedTarget;
|
|
const assetId = button.getAttribute('data-asset-id');
|
|
const form = document.getElementById('statusForm');
|
|
form.action = `/assets/${assetId}/status/`;
|
|
});
|
|
|
|
const saveStatusBtn = document.getElementById('saveStatusBtn');
|
|
saveStatusBtn.addEventListener('click', function() {
|
|
const form = document.getElementById('statusForm');
|
|
const newStatus = document.getElementById('newStatus').value;
|
|
form.action = form.action + newStatus;
|
|
form.submit();
|
|
});
|
|
}
|
|
|
|
// Filtering functionality
|
|
const applyFilters = document.getElementById('applyFilters');
|
|
if (applyFilters) {
|
|
applyFilters.addEventListener('click', function() {
|
|
filterAssets();
|
|
});
|
|
}
|
|
|
|
const resetFilters = document.getElementById('resetFilters');
|
|
if (resetFilters) {
|
|
resetFilters.addEventListener('click', function() {
|
|
document.getElementById('assetTypeFilter').value = 'all';
|
|
document.getElementById('statusFilter').value = 'all';
|
|
document.getElementById('valuationFilter').value = 'all';
|
|
document.getElementById('searchInput').value = '';
|
|
filterAssets();
|
|
});
|
|
}
|
|
|
|
const searchInput = document.getElementById('searchInput');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('keyup', function(event) {
|
|
if (event.key === 'Enter') {
|
|
filterAssets();
|
|
}
|
|
});
|
|
}
|
|
|
|
function filterAssets() {
|
|
const typeFilter = document.getElementById('assetTypeFilter').value;
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const valuationFilter = document.getElementById('valuationFilter').value;
|
|
const searchText = document.getElementById('searchInput').value.toLowerCase();
|
|
|
|
const rows = document.querySelectorAll('#assetsTable tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
const type = row.getAttribute('data-type');
|
|
const status = row.getAttribute('data-status');
|
|
const valuation = parseFloat(row.getAttribute('data-valuation'));
|
|
const name = row.querySelector('td:first-child').textContent.toLowerCase();
|
|
|
|
let typeMatch = typeFilter === 'all' || type === typeFilter;
|
|
let statusMatch = statusFilter === 'all' || status === statusFilter;
|
|
let searchMatch = searchText === '' || name.includes(searchText);
|
|
|
|
let valuationMatch = true;
|
|
if (valuationFilter === 'under1000') {
|
|
valuationMatch = valuation < 1000;
|
|
} else if (valuationFilter === '1000to10000') {
|
|
valuationMatch = valuation >= 1000 && valuation < 10000;
|
|
} else if (valuationFilter === '10000to100000') {
|
|
valuationMatch = valuation >= 10000 && valuation < 100000;
|
|
} else if (valuationFilter === 'over100000') {
|
|
valuationMatch = valuation >= 100000;
|
|
}
|
|
|
|
if (typeMatch && statusMatch && valuationMatch && searchMatch) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.asset-thumbnail {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|