272 lines
13 KiB
HTML
272 lines
13 KiB
HTML
{% 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 %}
|