rwda ui implementation
This commit is contained in:
Timur Gordon
271
actix_mvc_app/src/views/assets/create.html
Normal file
271
actix_mvc_app/src/views/assets/create.html
Normal file
@@ -0,0 +1,271 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Create New Digital Asset{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid px-4">
|
||||
<h1 class="mt-4">Create New Digital Asset</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">Create New Asset</li>
|
||||
</ol>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-plus-circle me-1"></i>
|
||||
Asset Details
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="createAssetForm" method="post" action="/assets/create">
|
||||
<!-- Basic Information -->
|
||||
<div class="mb-4">
|
||||
<h5>Basic Information</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="asset_type" class="form-label">Asset Type</label>
|
||||
<select class="form-select" id="asset_type" name="asset_type" required>
|
||||
{% for type_value, type_label in asset_types %}
|
||||
<option value="{{ type_value }}">{{ type_label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="3" required></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="image_url" class="form-label">Image URL (optional)</label>
|
||||
<input type="url" class="form-control" id="image_url" name="image_url">
|
||||
<div class="form-text">URL to an image representing this asset</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="external_url" class="form-label">External URL (optional)</label>
|
||||
<input type="url" class="form-control" id="external_url" name="external_url">
|
||||
<div class="form-text">URL to an external resource for this asset</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blockchain Information -->
|
||||
<div class="mb-4">
|
||||
<h5>Blockchain Information (optional)</h5>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="has_blockchain_info" name="has_blockchain_info">
|
||||
<label class="form-check-label" for="has_blockchain_info">
|
||||
This asset has blockchain information
|
||||
</label>
|
||||
</div>
|
||||
<div id="blockchainInfoSection" style="display: none;">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="blockchain" class="form-label">Blockchain</label>
|
||||
<input type="text" class="form-control" id="blockchain" name="blockchain">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="token_id" class="form-label">Token ID</label>
|
||||
<input type="text" class="form-control" id="token_id" name="token_id">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="contract_address" class="form-label">Contract Address</label>
|
||||
<input type="text" class="form-control" id="contract_address" name="contract_address">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="owner_address" class="form-label">Owner Address</label>
|
||||
<input type="text" class="form-control" id="owner_address" name="owner_address">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="transaction_hash" class="form-label">Transaction Hash (optional)</label>
|
||||
<input type="text" class="form-control" id="transaction_hash" name="transaction_hash">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="block_number" class="form-label">Block Number (optional)</label>
|
||||
<input type="number" class="form-control" id="block_number" name="block_number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Initial Valuation -->
|
||||
<div class="mb-4">
|
||||
<h5>Initial Valuation (optional)</h5>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="has_valuation" name="has_valuation">
|
||||
<label class="form-check-label" for="has_valuation">
|
||||
Add an initial valuation for this asset
|
||||
</label>
|
||||
</div>
|
||||
<div id="valuationSection" style="display: none;">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="value" class="form-label">Value</label>
|
||||
<input type="number" class="form-control" id="value" name="value" step="0.01">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="currency" class="form-label">Currency</label>
|
||||
<input type="text" class="form-control" id="currency" name="currency" value="USD">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="source" class="form-label">Source</label>
|
||||
<input type="text" class="form-control" id="source" name="source">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="valuation_notes" class="form-label">Notes</label>
|
||||
<textarea class="form-control" id="valuation_notes" name="valuation_notes" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="mb-4">
|
||||
<h5>Additional Metadata (optional)</h5>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="has_metadata" name="has_metadata">
|
||||
<label class="form-check-label" for="has_metadata">
|
||||
Add additional metadata for this asset
|
||||
</label>
|
||||
</div>
|
||||
<div id="metadataSection" style="display: none;">
|
||||
<div class="mb-3">
|
||||
<label for="metadata" class="form-label">Metadata (JSON format)</label>
|
||||
<textarea class="form-control" id="metadata" name="metadata" rows="5"></textarea>
|
||||
<div class="form-text">Enter additional metadata in JSON format</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<a href="/assets" class="btn btn-secondary me-md-2">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Create Asset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Toggle blockchain info section
|
||||
const hasBlockchainInfo = document.getElementById('has_blockchain_info');
|
||||
const blockchainInfoSection = document.getElementById('blockchainInfoSection');
|
||||
|
||||
hasBlockchainInfo.addEventListener('change', function() {
|
||||
blockchainInfoSection.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Toggle valuation section
|
||||
const hasValuation = document.getElementById('has_valuation');
|
||||
const valuationSection = document.getElementById('valuationSection');
|
||||
|
||||
hasValuation.addEventListener('change', function() {
|
||||
valuationSection.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Toggle metadata section
|
||||
const hasMetadata = document.getElementById('has_metadata');
|
||||
const metadataSection = document.getElementById('metadataSection');
|
||||
|
||||
hasMetadata.addEventListener('change', function() {
|
||||
metadataSection.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Form validation
|
||||
const form = document.getElementById('createAssetForm');
|
||||
form.addEventListener('submit', function(event) {
|
||||
let isValid = true;
|
||||
|
||||
// Validate required fields
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const description = document.getElementById('description').value.trim();
|
||||
|
||||
if (!name) {
|
||||
isValid = false;
|
||||
document.getElementById('name').classList.add('is-invalid');
|
||||
} else {
|
||||
document.getElementById('name').classList.remove('is-invalid');
|
||||
}
|
||||
|
||||
if (!description) {
|
||||
isValid = false;
|
||||
document.getElementById('description').classList.add('is-invalid');
|
||||
} else {
|
||||
document.getElementById('description').classList.remove('is-invalid');
|
||||
}
|
||||
|
||||
// Validate blockchain info if checked
|
||||
if (hasBlockchainInfo.checked) {
|
||||
const blockchain = document.getElementById('blockchain').value.trim();
|
||||
const tokenId = document.getElementById('token_id').value.trim();
|
||||
const contractAddress = document.getElementById('contract_address').value.trim();
|
||||
const ownerAddress = document.getElementById('owner_address').value.trim();
|
||||
|
||||
if (!blockchain || !tokenId || !contractAddress || !ownerAddress) {
|
||||
isValid = false;
|
||||
if (!blockchain) document.getElementById('blockchain').classList.add('is-invalid');
|
||||
if (!tokenId) document.getElementById('token_id').classList.add('is-invalid');
|
||||
if (!contractAddress) document.getElementById('contract_address').classList.add('is-invalid');
|
||||
if (!ownerAddress) document.getElementById('owner_address').classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
// Validate valuation if checked
|
||||
if (hasValuation.checked) {
|
||||
const value = document.getElementById('value').value.trim();
|
||||
const currency = document.getElementById('currency').value.trim();
|
||||
const source = document.getElementById('source').value.trim();
|
||||
|
||||
if (!value || !currency || !source) {
|
||||
isValid = false;
|
||||
if (!value) document.getElementById('value').classList.add('is-invalid');
|
||||
if (!currency) document.getElementById('currency').classList.add('is-invalid');
|
||||
if (!source) document.getElementById('source').classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
// Validate metadata if checked
|
||||
if (hasMetadata.checked) {
|
||||
const metadata = document.getElementById('metadata').value.trim();
|
||||
|
||||
if (metadata) {
|
||||
try {
|
||||
JSON.parse(metadata);
|
||||
document.getElementById('metadata').classList.remove('is-invalid');
|
||||
} catch (e) {
|
||||
isValid = false;
|
||||
document.getElementById('metadata').classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
event.preventDefault();
|
||||
alert('Please fix the errors in the form before submitting.');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-check-input:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user