init projectmycelium
This commit is contained in:
320
src/views/marketplace/gateways.html
Normal file
320
src/views/marketplace/gateways.html
Normal file
@@ -0,0 +1,320 @@
|
||||
{% extends "marketplace/layout.html" %}
|
||||
|
||||
{% block title %}Project Mycelium - Mycelium Gateways{% endblock %}
|
||||
|
||||
{% block marketplace_content %}
|
||||
<div class="my-4">
|
||||
<h1>Mycelium Gateways</h1>
|
||||
<p class="lead">Connect to the internet securely through the Mycelium network.</p>
|
||||
|
||||
<!-- Filter and Search Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Filter Gateways</h5>
|
||||
<form class="row g-3" id="filterForm" method="GET">
|
||||
<div class="col-md-3">
|
||||
<label for="locationFilter" class="form-label">Location</label>
|
||||
<select name="location" id="locationFilter" class="form-select">
|
||||
<option value="">All Locations</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Austria">Austria</option>
|
||||
<option value="Switzerland">Switzerland</option>
|
||||
<option value="Netherlands">Netherlands</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="France">France</option>
|
||||
<option value="UK">UK</option>
|
||||
<option value="Canada">Canada</option>
|
||||
<option value="USA">USA</option>
|
||||
<option value="Japan">Japan</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="speedFilter" class="form-label">Minimum Speed</label>
|
||||
<select name="bandwidth_mbps" id="speedFilter" class="form-select">
|
||||
<option value="">Any</option>
|
||||
<option value="100">100+ Mbps</option>
|
||||
<option value="500">500+ Mbps</option>
|
||||
<option value="1000">1+ Gbps</option>
|
||||
<option value="2500">2.5+ Gbps</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="minPriceFilter" class="form-label">Min Price ($)</label>
|
||||
<input type="number" name="min_price" id="minPriceFilter" class="form-control"
|
||||
value="" placeholder="0" min="0" step="1">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="maxPriceFilter" class="form-label">Max Price ($)</label>
|
||||
<input type="number" name="max_price" id="maxPriceFilter" class="form-control"
|
||||
value="" placeholder="300" min="0" step="1">
|
||||
</div>
|
||||
<div class="col-md-6 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-primary me-2">Apply Filters</button>
|
||||
<a href="/marketplace/gateways" class="btn btn-outline-secondary">Clear</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available Gateways Section -->
|
||||
<div class="row">
|
||||
{% if gateway_products and gateway_products | length > 0 %}
|
||||
{% for product_data in gateway_products %}
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="marketplace-item">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h4 class="mb-0">
|
||||
<a href="/products/{{ product_data.product.id }}" class="text-decoration-none text-dark">
|
||||
{{ product_data.product.name }}
|
||||
</a>
|
||||
</h4>
|
||||
{% if product_data.product.metadata.featured %}
|
||||
<span class="badge bg-warning">Featured</span>
|
||||
{% elif product_data.product.availability == "Available" %}
|
||||
<span class="badge bg-success">Available</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ product_data.product.availability }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Gateway Status -->
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="gateway-status-indicator bg-success me-2" title="Online"></div>
|
||||
<span>Online -
|
||||
{% if product_data.product.attributes.uptime_sla %}
|
||||
{{ product_data.product.attributes.uptime_sla.value }}
|
||||
{% else %}
|
||||
99.9%
|
||||
{% endif %}
|
||||
uptime in last 30 days
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Product Specifications -->
|
||||
<div class="row mb-3">
|
||||
{% if product_data.product.attributes.bandwidth_mbps %}
|
||||
<div class="col-md-6">
|
||||
<div class="spec-item">
|
||||
<i class="bi bi-speedometer me-2"></i>
|
||||
<span>Speed: {{ product_data.product.attributes.bandwidth_mbps.value }} Mbps</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if product_data.product.attributes.uptime_sla %}
|
||||
<div class="col-md-6">
|
||||
<div class="spec-item">
|
||||
<i class="bi bi-shield-check me-2"></i>
|
||||
<span>SLA: {{ product_data.product.attributes.uptime_sla.value }} Uptime</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Additional Info -->
|
||||
<div class="row mb-3">
|
||||
{% if product_data.product.metadata.location %}
|
||||
<div class="col-md-6">
|
||||
<div class="spec-item">
|
||||
<i class="bi bi-geo-alt me-2"></i>
|
||||
<span>Location: {{ product_data.product.metadata.location }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-md-6">
|
||||
<div class="spec-item">
|
||||
<i class="bi bi-clock-history me-2"></i>
|
||||
<span>Provider: {{ product_data.product.provider_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="mb-4">{{ product_data.product.description | truncate(length=120) }}</p>
|
||||
|
||||
<!-- Features (if available in tags) -->
|
||||
{% if product_data.product.metadata.tags and product_data.product.metadata.tags | length > 0 %}
|
||||
<div class="mb-3">
|
||||
<h6>Features:</h6>
|
||||
<ul class="small">
|
||||
{% for tag in product_data.product.metadata.tags %}
|
||||
<li>{{ tag | title }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Price and Actions -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="price-container">
|
||||
<span class="text-muted">Price:</span>
|
||||
<span class="text-primary fw-bold">{{ product_data.formatted_price }}</span>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success btn-sm buy-now-btn"
|
||||
data-product-id="{{ product_data.product.id }}"
|
||||
data-product-name="{{ product_data.product.name }}"
|
||||
data-unit-price="{{ product_data.price.display_amount }}"
|
||||
data-currency="{{ product_data.price.display_currency }}"
|
||||
data-category="gateways">
|
||||
<i class="bi bi-lightning-fill me-1"></i>Buy Now
|
||||
</button>
|
||||
<button class="btn btn-outline-primary btn-sm add-to-cart-btn"
|
||||
data-product-id="{{ product_data.product.id }}"
|
||||
data-product-name="{{ product_data.product.name }}"
|
||||
data-unit-price="{{ product_data.price.display_amount }}"
|
||||
data-currency="{{ product_data.price.display_currency }}">
|
||||
<i class="bi bi-cart-plus me-1"></i>Add to Cart
|
||||
</button>
|
||||
<a href="/products/{{ product_data.product.id }}" class="btn btn-outline-secondary btn-sm">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-router display-1 text-muted"></i>
|
||||
<h4 class="mt-3">No Gateways Available</h4>
|
||||
<p class="text-muted">Check back later for new gateway services.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Gateway Configuration Guide -->
|
||||
<div class="card mt-5">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">How to Configure Your Gateway</h3>
|
||||
<p>Connecting your applications to a Mycelium Gateway is simple:</p>
|
||||
|
||||
<ol>
|
||||
<li>Choose a gateway from the options above</li>
|
||||
<li>Click the "Configure" button to start the setup process</li>
|
||||
<li>Register or select a <a href="/marketplace/names">Mycelium Name</a> for your gateway</li>
|
||||
<li>Configure domain routing and access controls</li>
|
||||
<li>Connect your application by updating the configuration with the provided Mycelium address</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-info mt-3">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
Need help setting up your gateway? <a href="/marketplace/services">Our technical experts</a> can assist with configuration and optimization.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if pagination and pagination.total_pages > 1 %}
|
||||
<nav aria-label="Gateway pages" class="mt-4">
|
||||
<ul class="pagination justify-content-center">
|
||||
<!-- Previous Page -->
|
||||
<li class="page-item {% if not pagination.has_previous %}disabled{% endif %}">
|
||||
{% if pagination.has_previous %}
|
||||
<a class="page-link" href="?page={{ pagination.previous_page }}">Previous</a>
|
||||
{% else %}
|
||||
<span class="page-link" tabindex="-1" aria-disabled="true">Previous</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<!-- Page 1 -->
|
||||
<li class="page-item {% if pagination.current_page == 0 %}active{% endif %}">
|
||||
{% if pagination.current_page == 0 %}
|
||||
<span class="page-link">1</span>
|
||||
{% else %}
|
||||
<a class="page-link" href="?page=0">1</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<!-- Page 2 (if exists) -->
|
||||
{% if pagination.total_pages > 1 %}
|
||||
<li class="page-item {% if pagination.current_page == 1 %}active{% endif %}">
|
||||
{% if pagination.current_page == 1 %}
|
||||
<span class="page-link">2</span>
|
||||
{% else %}
|
||||
<a class="page-link" href="?page=1">2</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page 3 (if exists) -->
|
||||
{% if pagination.total_pages > 2 %}
|
||||
<li class="page-item {% if pagination.current_page == 2 %}active{% endif %}">
|
||||
{% if pagination.current_page == 2 %}
|
||||
<span class="page-link">3</span>
|
||||
{% else %}
|
||||
<a class="page-link" href="?page=2">3</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page 4 (if exists) -->
|
||||
{% if pagination.total_pages > 3 %}
|
||||
<li class="page-item {% if pagination.current_page == 3 %}active{% endif %}">
|
||||
{% if pagination.current_page == 3 %}
|
||||
<span class="page-link">4</span>
|
||||
{% else %}
|
||||
<a class="page-link" href="?page=3">4</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page 5 (if exists) -->
|
||||
{% if pagination.total_pages > 4 %}
|
||||
<li class="page-item {% if pagination.current_page == 4 %}active{% endif %}">
|
||||
{% if pagination.current_page == 4 %}
|
||||
<span class="page-link">5</span>
|
||||
{% else %}
|
||||
<a class="page-link" href="?page=4">5</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Next Page -->
|
||||
<li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
|
||||
{% if pagination.has_next %}
|
||||
<a class="page-link" href="?page={{ pagination.next_page }}">Next</a>
|
||||
{% else %}
|
||||
<span class="page-link" tabindex="-1" aria-disabled="true">Next</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Results Info -->
|
||||
<div class="text-center text-muted mt-2">
|
||||
Showing page {{ pagination.current_page + 1 }} of {{ pagination.total_pages }}
|
||||
({{ pagination.total_count }} total gateways)
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.gateway-status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gateway-status-indicator.bg-success {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.gateway-status-indicator.bg-warning {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.gateway-status-indicator.bg-danger {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/static/js/marketplace-category.js"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user