Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better usage limit and deletion warnings

Browse Source
This commit is contained in:
Kobe
2025-06-06 09:44:23 +02:00
parent 51cea567ca
commit f6abdb5c63
2 changed files with 88 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
templates/components/usage_limits.html
View File

@@ -1,67 +1,93 @@
{% from 'common/macros.html' import format_size %}
{% macro usage_limits(usage_stats) %}
<div class="masonry-card" style="width: 100%;">
<div class="masonry-card">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h5 class="card-title mb-0"><i class="fas fa-chart-line me-2"></i>Usage Limits</h5>
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0"><i class="fas fa-chart-pie me-2"></i>Usage Limits</h5>
</div>
<!-- Rooms Progress -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-door-open me-2 icon-primary"></i>
<span class="text-muted">Rooms:</span>
<div class="d-flex flex-column">
<!-- Rooms Progress -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-door-open me-2 icon-primary"></i>
<span class="text-muted">Rooms:</span>
<i class="fas fa-info-circle ms-2"
style="color: var(--primary-light);"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Maximum number of document rooms you can create."></i>
</div>
<div class="fw-bold text-primary">{{ usage_stats.current_rooms }} / {{ usage_stats.max_rooms }}</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ usage_stats.rooms_percentage }}%; background-color: var(--secondary-color);"
aria-valuenow="{{ usage_stats.rooms_percentage }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="fw-bold text-primary">{{ usage_stats.current_rooms }} / {{ usage_stats.max_rooms }}</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ usage_stats.rooms_percentage }}%; background-color: var(--secondary-color);"
aria-valuenow="{{ usage_stats.rooms_percentage }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<!-- Conversations Progress -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-comments me-2 icon-primary"></i>
<span class="text-muted">Conversations:</span>
<!-- Conversations Progress -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-comments me-2 icon-primary"></i>
<span class="text-muted">Conversations:</span>
<i class="fas fa-info-circle ms-2"
style="color: var(--primary-light);"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Maximum number of conversations you can create."></i>
</div>
<div class="fw-bold text-primary">{{ usage_stats.current_conversations }} / {{ usage_stats.max_conversations }}</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ usage_stats.conversations_percentage }}%; background-color: var(--secondary-color);"
aria-valuenow="{{ usage_stats.conversations_percentage }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="fw-bold text-primary">{{ usage_stats.current_conversations }} / {{ usage_stats.max_conversations }}</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ usage_stats.conversations_percentage }}%; background-color: var(--secondary-color);"
aria-valuenow="{{ usage_stats.conversations_percentage }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<!-- Storage Progress -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-hdd me-2 icon-primary"></i>
<span class="text-muted">Storage:</span>
<!-- Storage Progress -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-hdd me-2 icon-primary"></i>
<span class="text-muted">Storage:</span>
<i class="fas fa-info-circle ms-2"
style="color: var(--primary-light);"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="We do not limit the amount of storage you can use, to provide an optimal experience for your team and clients. You will be asked to upgrade if you exceed these limits."></i>
</div>
<div class="fw-bold text-primary">{{ format_size(usage_stats.current_storage) }} / {{ format_size(usage_stats.max_storage) }}</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ usage_stats.storage_percentage }}%; background-color: var(--secondary-color);"
aria-valuenow="{{ usage_stats.storage_percentage }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="fw-bold text-primary">{{ format_size(usage_stats.current_storage) }} / {{ format_size(usage_stats.max_storage) }}</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ usage_stats.storage_percentage }}%; background-color: var(--secondary-color);"
aria-valuenow="{{ usage_stats.storage_percentage }}"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Initialize all tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
});
</script>
{% endmacro %}