Invario/Inventarsystem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

feat: enhance calendar loading experience with skeleton UI

Browse Source
This commit is contained in:
Aiirondev
2026-05-30 14:46:22 +02:00
parent adc2bad3fb
commit fbcc3b4522
2 changed files with 122 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/modules/database/termine.py
+13 -5
View File
@@ -22,6 +22,14 @@ from Web.modules.database.settings import MongoClient
from bson.objectid import ObjectId
import datetime
def _get_tenant_db(client):
try:
from tenant import get_tenant_db
return get_tenant_db(client)
except Exception:
return client[cfg.MONGODB_DB]
def _active_record_query(extra_query=None):
"""Build a query that excludes logically deleted records."""
base_query = {'Deleted': {'$ne': True}}
@@ -33,7 +41,7 @@ def _active_record_query(extra_query=None):
def add(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght: int, user: str, mail: list=[], note:str="", calendar_enabled: bool=False):
try:
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
db = client[cfg.MONGODB_DB]
db = _get_tenant_db(client)
items = db['appointments']
item = {
@@ -68,7 +76,7 @@ def get_item(id):
"""
try:
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
db = client[cfg.MONGODB_DB]
db = _get_tenant_db(client)
items = db['appointments']
item = items.find_one(_active_record_query({'_id': ObjectId(id)}))
client.close()
@@ -90,7 +98,7 @@ def update(id,slots_used: list):
"""
try:
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
db = client[cfg.MONGODB_DB]
db = _get_tenant_db(client)
items = db['appointments']
update_data = {
@@ -124,7 +132,7 @@ def remove_slot(id, date_start_time, name):
"""
try:
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
db = client[cfg.MONGODB_DB]
db = _get_tenant_db(client)
items = db['appointments']
# Attempt to pull the exact element (stored as an array/tuple)
@@ -152,7 +160,7 @@ def remove(id):
"""
try:
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
db = client[cfg.MONGODB_DB]
db = _get_tenant_db(client)
items = db['appointments']
result = items.delete_one({'_id': ObjectId(id)})
Web/templates/terminplan.html
+109 -2
View File
@@ -41,7 +41,37 @@
</label>
</div>
<div id="calendar"></div>
<div class="calendar-stage">
<div id="calendar-skeleton" class="calendar-skeleton" aria-hidden="true">
<div class="skeleton-toolbar">
<span class="skeleton-pill"></span>
<span class="skeleton-pill"></span>
<span class="skeleton-pill"></span>
</div>
<div class="skeleton-grid">
<div class="skeleton-day-header"></div>
<div class="skeleton-day-header"></div>
<div class="skeleton-day-header"></div>
<div class="skeleton-day-header"></div>
<div class="skeleton-day-header"></div>
<div class="skeleton-day-header"></div>
<div class="skeleton-day-header"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
<div class="skeleton-slot"></div>
</div>
</div>
<div id="calendar"></div>
</div>
<!-- Modal for new bookings -->
<div id="booking-modal" class="modal">
@@ -254,7 +284,6 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize calendar
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [FullCalendar.dayGridPlugin, FullCalendar.timeGridPlugin],
initialView: 'timeGridDay',
locale: 'de',
headerToolbar: false, // We're using our custom header
@@ -281,6 +310,12 @@ document.addEventListener('DOMContentLoaded', function() {
minute: '2-digit',
hour12: false
},
loading: function(isLoading) {
const skeleton = document.getElementById('calendar-skeleton');
if (skeleton) {
skeleton.classList.toggle('is-hidden', !isLoading);
}
},
selectAllow: function(info) {
const startHour = info.start.getHours();
const endHour = info.end.getHours();
@@ -452,6 +487,10 @@ document.addEventListener('DOMContentLoaded', function() {
// Render calendar
try {
const calendarSkeleton = document.getElementById('calendar-skeleton');
if (calendarSkeleton) {
calendarSkeleton.classList.remove('is-hidden');
}
calendar.render();
setCalendarView(activeCalendarView);
@@ -1259,6 +1298,74 @@ document.addEventListener('DOMContentLoaded', function() {
padding: 20px;
}
.calendar-stage {
position: relative;
min-height: 620px;
}
.calendar-skeleton {
position: absolute;
inset: 0;
z-index: 5;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 252, 0.96));
padding: 20px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.calendar-skeleton.is-hidden {
display: none;
}
.skeleton-toolbar {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.skeleton-pill,
.skeleton-day-header,
.skeleton-slot {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #e9eef5 0%, #f7f9fc 50%, #e9eef5 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-pill {
width: 90px;
height: 34px;
border-radius: 999px;
}
.skeleton-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.skeleton-day-header {
height: 28px;
border-radius: 10px;
}
.skeleton-slot {
height: 72px;
border-radius: 14px;
}
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.calendar-header {
margin-bottom: 20px;
}