hostbasket/actix_mvc_app/src/views/assets/list.html
2025-04-22 15:36:40 +02:00

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 %}