Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 90da8487f2 | |||
| b1ca358d41 | |||
| 47cba5865d | |||
| 4a776872e0 | |||
| 55a74654db | |||
| 7473334714 | |||
| d746b61a17 | |||
| 440cafb88f | |||
| 9fb56e905c | |||
| 21ad639081 | |||
| 61d726f8f4 | |||
| 2d7cec075c | |||
| fc0fdf8472 |
+327
-404
File diff suppressed because it is too large
Load Diff
@@ -211,6 +211,7 @@ PERMISSION_PRESETS = {
|
|||||||
},
|
},
|
||||||
'pages': {
|
'pages': {
|
||||||
'home': True,
|
'home': True,
|
||||||
|
'home_admin': True,
|
||||||
'tutorial_page': True,
|
'tutorial_page': True,
|
||||||
'my_borrowed_items': True,
|
'my_borrowed_items': True,
|
||||||
'notifications_view': True,
|
'notifications_view': True,
|
||||||
@@ -369,10 +370,10 @@ def update_user_permissions(username, preset_key, action_permissions=None, page_
|
|||||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': update_data})
|
result = users.update_one({'Username': username}, {'$set': update_data})
|
||||||
|
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': update_data})
|
result = users.update_one({'username': username}, {'$set': update_data})
|
||||||
|
|
||||||
client.close()
|
client.close()
|
||||||
return result.matched_count > 0
|
return result.matched_count > 0
|
||||||
@@ -384,7 +385,7 @@ def get_favorites(username):
|
|||||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
|
user = users.find_one({'Username': username}) or users.find_one({'username': username})
|
||||||
client.close()
|
client.close()
|
||||||
if not user:
|
if not user:
|
||||||
return []
|
return []
|
||||||
@@ -399,7 +400,7 @@ def add_favorite(username, item_id):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
users.update_one(
|
users.update_one(
|
||||||
{'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
|
{'$or': [{'Username': username}, {'username': username}]},
|
||||||
{'$addToSet': {'favorites': ObjectId(item_id)}}
|
{'$addToSet': {'favorites': ObjectId(item_id)}}
|
||||||
)
|
)
|
||||||
client.close()
|
client.close()
|
||||||
@@ -414,7 +415,7 @@ def remove_favorite(username, item_id):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
users.update_one(
|
users.update_one(
|
||||||
{'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
|
{'$or': [{'Username': username}, {'username': username}]},
|
||||||
{'$pull': {'favorites': ObjectId(item_id)}}
|
{'$pull': {'favorites': ObjectId(item_id)}}
|
||||||
)
|
)
|
||||||
client.close()
|
client.close()
|
||||||
@@ -496,7 +497,7 @@ def check_nm_pwd(username, password):
|
|||||||
db = client[db_name]
|
db = client[db_name]
|
||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
query = {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]}
|
query = {'$or': [{'Username': username}, {'username': username}]}
|
||||||
user_record = users.find_one(query)
|
user_record = users.find_one(query)
|
||||||
|
|
||||||
if user_record is None:
|
if user_record is None:
|
||||||
@@ -507,8 +508,6 @@ def check_nm_pwd(username, password):
|
|||||||
default_users = client[cfg.MONGODB_DB]['users']
|
default_users = client[cfg.MONGODB_DB]['users']
|
||||||
user_record_fallback = default_users.find_one(
|
user_record_fallback = default_users.find_one(
|
||||||
{'$or': [
|
{'$or': [
|
||||||
{'Username': dp.encrypt_text(username)},
|
|
||||||
{'username': dp.encrypt_text(username)},
|
|
||||||
{'Username': username},
|
{'Username': username},
|
||||||
{'username': username},
|
{'username': username},
|
||||||
]}
|
]}
|
||||||
@@ -711,9 +710,9 @@ def make_admin(username):
|
|||||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
|
result = users.update_one({'Username': username}, {'$set': {'Admin': True}})
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
|
result = users.update_one({'username': username}, {'$set': {'Admin': True}})
|
||||||
client.close()
|
client.close()
|
||||||
return result.matched_count > 0
|
return result.matched_count > 0
|
||||||
|
|
||||||
@@ -723,9 +722,9 @@ def remove_admin(username):
|
|||||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
|
result = users.update_one({'Username': username}, {'$set': {'Admin': False}})
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
|
result = users.update_one({'username': username}, {'$set': {'Admin': False}})
|
||||||
client.close()
|
client.close()
|
||||||
return result.matched_count > 0
|
return result.matched_count > 0
|
||||||
|
|
||||||
@@ -737,7 +736,7 @@ def get_user(username):
|
|||||||
def find_in_db(database_name):
|
def find_in_db(database_name):
|
||||||
db = client[database_name]
|
db = client[database_name]
|
||||||
users = db['users']
|
users = db['users']
|
||||||
return users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)}) or users.find_one({'username': username}) or users.find_one({'Username': username})
|
return users.find_one({'Username': username}) or users.find_one({'username': username}) or users.find_one({'username': username}) or users.find_one({'Username': username})
|
||||||
|
|
||||||
tenant_db, tenant_id = _resolve_request_tenant_db()
|
tenant_db, tenant_id = _resolve_request_tenant_db()
|
||||||
if tenant_db:
|
if tenant_db:
|
||||||
@@ -773,12 +772,12 @@ def update_active_ausleihung(username, id_item, ausleihung):
|
|||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
result = users.update_one(
|
result = users.update_one(
|
||||||
{'Username': dp.encrypt_text(username)},
|
{'Username': username},
|
||||||
{'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
|
{'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
|
||||||
)
|
)
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
users.update_one(
|
users.update_one(
|
||||||
{'username': dp.encrypt_text(username)},
|
{'username': username},
|
||||||
{'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
|
{'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
|
||||||
)
|
)
|
||||||
client.close()
|
client.close()
|
||||||
@@ -791,7 +790,7 @@ def get_active_ausleihung(username):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
|
user = users.find_one({'Username': username}) or users.find_one({'username': username})
|
||||||
client.close()
|
client.close()
|
||||||
|
|
||||||
if not user:
|
if not user:
|
||||||
@@ -806,7 +805,7 @@ def has_active_borrowing(username):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
user = users.find_one({'username': dp.encrypt_text(username)}) or users.find_one({'Username': dp.encrypt_text(username)})
|
user = users.find_one({'username': username}) or users.find_one({'Username': username})
|
||||||
client.close()
|
client.close()
|
||||||
|
|
||||||
if not user:
|
if not user:
|
||||||
@@ -823,9 +822,9 @@ def delete_user(username):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
result = users.delete_one({'username': dp.encrypt_text(username)})
|
result = users.delete_one({'username': username})
|
||||||
if result.deleted_count == 0:
|
if result.deleted_count == 0:
|
||||||
result = users.delete_one({'Username': dp.encrypt_text(username)})
|
result = users.delete_one({'Username': username})
|
||||||
|
|
||||||
client.close()
|
client.close()
|
||||||
return result.deleted_count > 0
|
return result.deleted_count > 0
|
||||||
@@ -840,9 +839,9 @@ def update_active_borrowing(username, item_id, status):
|
|||||||
|
|
||||||
update_data = {'$set': {'active_borrowing': status, 'borrowed_item': item_id if status else None}}
|
update_data = {'$set': {'active_borrowing': status, 'borrowed_item': item_id if status else None}}
|
||||||
|
|
||||||
result = users.update_one({'username': dp.encrypt_text(username)}, update_data)
|
result = users.update_one({'username': username}, update_data)
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
result = users.update_one({'Username': dp.encrypt_text(username)}, update_data)
|
result = users.update_one({'Username': username}, update_data)
|
||||||
|
|
||||||
client.close()
|
client.close()
|
||||||
return result.modified_count > 0
|
return result.modified_count > 0
|
||||||
@@ -856,7 +855,7 @@ def get_name(username):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
|
user = users.find_one({'Username': username}) or users.find_one({'username': username})
|
||||||
client.close()
|
client.close()
|
||||||
|
|
||||||
if not user or not user.get("name"):
|
if not user or not user.get("name"):
|
||||||
@@ -871,7 +870,7 @@ def get_last_name(username):
|
|||||||
db = _get_tenant_db(client)
|
db = _get_tenant_db(client)
|
||||||
users = db['users']
|
users = db['users']
|
||||||
|
|
||||||
user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
|
user = users.find_one({'Username': username}) or users.find_one({'username': username})
|
||||||
client.close()
|
client.close()
|
||||||
|
|
||||||
if not user or not user.get("last_name"):
|
if not user or not user.get("last_name"):
|
||||||
@@ -906,12 +905,12 @@ def update_password(username, new_password):
|
|||||||
hashed_password = hashing(new_password)
|
hashed_password = hashing(new_password)
|
||||||
|
|
||||||
result = users.update_one(
|
result = users.update_one(
|
||||||
{'Username': dp.encrypt_text(username)},
|
{'Username': username},
|
||||||
{'$set': {'Password': hashed_password}}
|
{'$set': {'Password': hashed_password}}
|
||||||
)
|
)
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
result = users.update_one(
|
result = users.update_one(
|
||||||
{'username': dp.encrypt_text(username)},
|
{'username': username},
|
||||||
{'$set': {'Password': hashed_password}}
|
{'$set': {'Password': hashed_password}}
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -933,12 +932,12 @@ def update_user_name(username, name, last_name):
|
|||||||
safe_last_name = dp.encrypt_text(last_name.strip()) if last_name else ''
|
safe_last_name = dp.encrypt_text(last_name.strip()) if last_name else ''
|
||||||
|
|
||||||
result = users.update_one(
|
result = users.update_one(
|
||||||
{'Username': dp.encrypt_text(username)},
|
{'Username': username},
|
||||||
{'$set': {'name': safe_name, 'last_name': safe_last_name}}
|
{'$set': {'name': safe_name, 'last_name': safe_last_name}}
|
||||||
)
|
)
|
||||||
if result.matched_count == 0:
|
if result.matched_count == 0:
|
||||||
result = users.update_one(
|
result = users.update_one(
|
||||||
{'username': dp.encrypt_text(username)},
|
{'username': username},
|
||||||
{'$set': {'name': safe_name, 'last_name': safe_last_name}}
|
{'$set': {'name': safe_name, 'last_name': safe_last_name}}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,752 +0,0 @@
|
|||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
{% block title %}Bibliothek - {{ APP_VERSION }}{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="content-container">
|
|
||||||
<!-- Header Section -->
|
|
||||||
<div class="header-section">
|
|
||||||
<div class="header-title-group">
|
|
||||||
<h1>📚 Bibliothek</h1>
|
|
||||||
<p class="subtitle">Bücher, CDs und weitere Medien</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Search & Filter Section -->
|
|
||||||
<div class="search-filter-section">
|
|
||||||
<input type="text" id="searchInput" placeholder="Nach Titel, Autor, ISBN suchen..." class="search-input">
|
|
||||||
|
|
||||||
<div class="filter-group" id="filterGroup">
|
|
||||||
<button class="filter-btn" id="filterBtn" aria-expanded="false" aria-label="Filter öffnen">
|
|
||||||
🔍 Filter <span class="filter-arrow">▼</span>
|
|
||||||
</button>
|
|
||||||
<div class="filter-dropdown" id="filterDropdown" style="display: none;">
|
|
||||||
<div class="filter-section">
|
|
||||||
<h4>Medientyp</h4>
|
|
||||||
<div class="filter-options">
|
|
||||||
<label><input type="checkbox" class="filter-checkbox" data-filter="type" value="book"> Buch</label>
|
|
||||||
<label><input type="checkbox" class="filter-checkbox" data-filter="type" value="cd"> CD/DVD</label>
|
|
||||||
<label><input type="checkbox" class="filter-checkbox" data-filter="type" value="other"> Sonstige</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="filter-section">
|
|
||||||
<h4>Status</h4>
|
|
||||||
<div class="filter-options">
|
|
||||||
<label><input type="checkbox" class="filter-checkbox" data-filter="status" value="available"> Verfügbar</label>
|
|
||||||
<label><input type="checkbox" class="filter-checkbox" data-filter="status" value="borrowed"> Ausgeliehen</label>
|
|
||||||
<label><input type="checkbox" class="filter-checkbox" data-filter="status" value="reserved"> Reserviert</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button id="clearFiltersBtn" class="button">Filter zurücksetzen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Barcode Scanner -->
|
|
||||||
<button id="scannerBtn" class="scan-button" aria-expanded="false" aria-label="Scanner öffnen">
|
|
||||||
📱 Scanner <span class="scanner-arrow">▼</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scanner Panel -->
|
|
||||||
<div id="qrContainer" class="qr-container" style="display: none;">
|
|
||||||
<div id="qr-reader" style="width: auto; height: 300px;"></div>
|
|
||||||
<span id="qr-result" style="display: none;"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Table Header (only in table mode) -->
|
|
||||||
<div class="library-table-wrapper">
|
|
||||||
<div class="table-header" id="tableHeader" style="display: none;">
|
|
||||||
<div class="table-row">
|
|
||||||
<div class="table-cell title-cell">Titel</div>
|
|
||||||
<div class="table-cell author-cell">Autor/Künstler</div>
|
|
||||||
<div class="table-cell isbn-cell">ISBN/Code</div>
|
|
||||||
<div class="table-cell type-cell">Typ</div>
|
|
||||||
<div class="table-cell status-cell">Status</div>
|
|
||||||
<div class="table-cell actions-cell">Aktionen</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Items Container -->
|
|
||||||
<div id="itemsContainer" class="items-container">
|
|
||||||
{% if library_items %}
|
|
||||||
{% for item in library_items %}
|
|
||||||
<div class="item-card library-item" data-item-id="{{ item._id }}" data-type="{{ item.get('ItemType', 'book') }}" data-status="{{ 'borrowed' if item.get('Verfuegbar') == False else 'available' }}">
|
|
||||||
<!-- Card Mode View -->
|
|
||||||
<div class="item-content card-mode">
|
|
||||||
<div class="item-image-wrapper">
|
|
||||||
{% if item.get('Image') %}
|
|
||||||
<img src="/uploads/{{ item.Image }}" alt="{{ item.Name }}" class="item-image">
|
|
||||||
{% else %}
|
|
||||||
<div class="placeholder-image">📚</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item-details">
|
|
||||||
<h3 class="item-name">{{ item.Name }}</h3>
|
|
||||||
|
|
||||||
{% if item.get('Author') %}
|
|
||||||
<p class="item-author">Von: {{ item.Author }}</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if item.get('ISBN') %}
|
|
||||||
<p class="item-isbn">ISBN: {{ item.ISBN }}</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="item-meta">
|
|
||||||
<span class="item-type">{{ item.get('ItemType', 'Medium') }}</span>
|
|
||||||
<span class="item-status {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
|
|
||||||
{% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Table Mode View -->
|
|
||||||
<div class="item-content table-mode" style="display: none;">
|
|
||||||
<div class="table-row">
|
|
||||||
<div class="table-cell title-cell">
|
|
||||||
<span class="descriptor">Titel:</span>
|
|
||||||
<span class="value">{{ item.Name }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="table-cell author-cell">
|
|
||||||
<span class="descriptor">Autor:</span>
|
|
||||||
<span class="value">{{ item.get('Author', '—') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="table-cell isbn-cell">
|
|
||||||
<span class="descriptor">ISBN:</span>
|
|
||||||
<span class="value">{{ item.get('ISBN', '—') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="table-cell type-cell">
|
|
||||||
<span class="descriptor">Typ:</span>
|
|
||||||
<span class="value">{{ item.get('ItemType', 'Medium') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="table-cell status-cell">
|
|
||||||
<span class="descriptor">Status:</span>
|
|
||||||
<span class="value {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
|
|
||||||
{% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="table-cell actions-cell">
|
|
||||||
<button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Action Buttons (Card Mode) -->
|
|
||||||
<div class="item-actions card-mode" style="display: flex;">
|
|
||||||
<button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
|
|
||||||
{% if item.get('Verfuegbar') == True %}
|
|
||||||
<button class="action-button borrow-btn" data-item-id="{{ item._id }}">Ausleihen</button>
|
|
||||||
{% else %}
|
|
||||||
<button class="action-button return-btn" data-item-id="{{ item._id }}" disabled>Ausgeliehen</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
{% else %}
|
|
||||||
<div class="empty-state">
|
|
||||||
<p>Keine Bibliotheks-Medien gefunden</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Detail Modal -->
|
|
||||||
<div id="detailModal" class="modal" style="display: none;">
|
|
||||||
<div class="modal-content">
|
|
||||||
<button class="modal-close" aria-label="Schließen">✕</button>
|
|
||||||
|
|
||||||
<div class="modal-body" id="modalBody">
|
|
||||||
<!-- Filled by JavaScript -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Borrow Modal -->
|
|
||||||
<div id="borrowModal" class="modal" style="display: none;">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h2>Ausleihen</h2>
|
|
||||||
<form id="borrowForm">
|
|
||||||
<input type="hidden" id="borrowItemId" name="item_id">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="studentIdInput">Schülerausweis-ID (optional):</label>
|
|
||||||
<input type="text" id="studentIdInput" name="student_id" placeholder="Ausweis scannen oder eingeben" class="form-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="borrowDaysInput">Ausleih-Dauer (Tage):</label>
|
|
||||||
<input type="number" id="borrowDaysInput" name="borrow_days" min="1" max="365" class="form-input" value="14">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="button primary-button">Ausleihen</button>
|
|
||||||
<button type="button" class="button cancel-button" onclick="document.getElementById('borrowModal').style.display='none'">Abbrechen</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
|
|
||||||
<script>
|
|
||||||
// View mode persistence
|
|
||||||
const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
|
|
||||||
const MOBILE_LIBRARY_MAX_WIDTH = 900;
|
|
||||||
const MOBILE_LIBRARY_MIN_ITEMS = 24;
|
|
||||||
|
|
||||||
function isMobileViewport() {
|
|
||||||
return window.matchMedia(`(max-width: ${MOBILE_LIBRARY_MAX_WIDTH}px)`).matches;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setViewMode(mode) {
|
|
||||||
localStorage.setItem(LIBRARY_VIEW_MODE_KEY, mode);
|
|
||||||
const container = document.getElementById('itemsContainer');
|
|
||||||
const tableHeader = document.getElementById('tableHeader');
|
|
||||||
const renderedItems = Array.from(container.querySelectorAll('.item-card'));
|
|
||||||
const virtualizationState = window.mobileLibraryVirtualizationState || null;
|
|
||||||
const detachedItems = virtualizationState && virtualizationState.active && Array.isArray(virtualizationState.items)
|
|
||||||
? virtualizationState.items.filter(item => !container.contains(item))
|
|
||||||
: [];
|
|
||||||
const items = [...renderedItems, ...detachedItems.filter(item => !container.contains(item))];
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
const cardContent = item.querySelector('.item-content.card-mode');
|
|
||||||
const cardActions = item.querySelector('.item-actions.card-mode');
|
|
||||||
const tableContent = item.querySelector('.item-content.table-mode');
|
|
||||||
|
|
||||||
if (mode === 'table') {
|
|
||||||
if (cardContent) cardContent.style.display = 'none';
|
|
||||||
if (cardActions) cardActions.style.display = 'none';
|
|
||||||
if (tableContent) tableContent.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
if (cardContent) cardContent.style.display = 'flex';
|
|
||||||
if (cardActions) cardActions.style.display = 'flex';
|
|
||||||
if (tableContent) tableContent.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
tableHeader.style.display = mode === 'table' ? 'block' : 'none';
|
|
||||||
|
|
||||||
document.getElementById('viewModeToggle').classList.toggle('open', mode === 'table');
|
|
||||||
}
|
|
||||||
|
|
||||||
function initMobileWindowedLibraryLoading() {
|
|
||||||
const container = document.getElementById('itemsContainer');
|
|
||||||
if (!container) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!window.mobileLibraryVirtualizationState) {
|
|
||||||
window.mobileLibraryVirtualizationState = {
|
|
||||||
active: false,
|
|
||||||
items: [],
|
|
||||||
topSpacer: null,
|
|
||||||
bottomSpacer: null,
|
|
||||||
averageItemHeight: Math.max(Math.round(window.innerHeight * 0.35), 230),
|
|
||||||
lastStart: -1,
|
|
||||||
lastEnd: -1,
|
|
||||||
framePending: false,
|
|
||||||
scrollListener: null,
|
|
||||||
resizeListener: null,
|
|
||||||
initialized: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const state = window.mobileLibraryVirtualizationState;
|
|
||||||
|
|
||||||
function restoreAllImages() {
|
|
||||||
state.items.forEach(item => {
|
|
||||||
const image = item.querySelector('img.item-image');
|
|
||||||
if (!image) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const originalSrc = image.dataset.mobileSrc || '';
|
|
||||||
if (!image.getAttribute('src') && originalSrc) {
|
|
||||||
image.setAttribute('src', originalSrc);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateImageMemory(startIndex, endIndex) {
|
|
||||||
const imageBuffer = 4;
|
|
||||||
state.items.forEach((item, index) => {
|
|
||||||
const image = item.querySelector('img.item-image');
|
|
||||||
if (!image) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!image.dataset.mobileSrc) {
|
|
||||||
image.dataset.mobileSrc = image.getAttribute('src') || '';
|
|
||||||
}
|
|
||||||
image.loading = 'lazy';
|
|
||||||
image.decoding = 'async';
|
|
||||||
|
|
||||||
const shouldKeepLoaded = index >= startIndex - imageBuffer && index < endIndex + imageBuffer;
|
|
||||||
if (shouldKeepLoaded) {
|
|
||||||
if (!image.getAttribute('src') && image.dataset.mobileSrc) {
|
|
||||||
image.setAttribute('src', image.dataset.mobileSrc);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (image.getAttribute('src')) {
|
|
||||||
image.removeAttribute('src');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderVisibleWindow() {
|
|
||||||
if (!state.active || !state.topSpacer || !state.bottomSpacer) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const viewportHeight = window.innerHeight || 800;
|
|
||||||
const scrollTop = window.scrollY || window.pageYOffset || 0;
|
|
||||||
const renderBuffer = viewportHeight * 1.5;
|
|
||||||
|
|
||||||
let startIndex = Math.max(0, Math.floor((scrollTop - renderBuffer) / state.averageItemHeight));
|
|
||||||
let endIndex = Math.min(state.items.length, Math.ceil((scrollTop + viewportHeight + renderBuffer) / state.averageItemHeight));
|
|
||||||
|
|
||||||
if (endIndex - startIndex < 14) {
|
|
||||||
endIndex = Math.min(state.items.length, startIndex + 14);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (startIndex === state.lastStart && endIndex === state.lastEnd) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
state.lastStart = startIndex;
|
|
||||||
state.lastEnd = endIndex;
|
|
||||||
|
|
||||||
while (state.topSpacer.nextSibling && state.topSpacer.nextSibling !== state.bottomSpacer) {
|
|
||||||
state.topSpacer.nextSibling.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
for (let index = startIndex; index < endIndex; index += 1) {
|
|
||||||
fragment.appendChild(state.items[index]);
|
|
||||||
}
|
|
||||||
container.insertBefore(fragment, state.bottomSpacer);
|
|
||||||
|
|
||||||
let measuredHeightSum = 0;
|
|
||||||
let measuredCount = 0;
|
|
||||||
for (let index = startIndex; index < endIndex; index += 1) {
|
|
||||||
const height = state.items[index].getBoundingClientRect().height;
|
|
||||||
if (height > 0) {
|
|
||||||
measuredHeightSum += height;
|
|
||||||
measuredCount += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (measuredCount > 0) {
|
|
||||||
const measuredAverage = measuredHeightSum / measuredCount;
|
|
||||||
state.averageItemHeight = Math.round((state.averageItemHeight * 3 + measuredAverage) / 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
state.topSpacer.style.height = `${Math.max(0, startIndex * state.averageItemHeight)}px`;
|
|
||||||
state.bottomSpacer.style.height = `${Math.max(0, (state.items.length - endIndex) * state.averageItemHeight)}px`;
|
|
||||||
updateImageMemory(startIndex, endIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
function scheduleWindowRender() {
|
|
||||||
if (!state.active || state.framePending) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
state.framePending = true;
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
state.framePending = false;
|
|
||||||
renderVisibleWindow();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function activateVirtualization() {
|
|
||||||
if (state.active) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Array.isArray(state.items) || state.items.length === 0) {
|
|
||||||
state.items = Array.from(container.querySelectorAll('.library-item'));
|
|
||||||
}
|
|
||||||
if (state.items.length <= MOBILE_LIBRARY_MIN_ITEMS) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
state.topSpacer = document.createElement('div');
|
|
||||||
state.topSpacer.className = 'mobile-window-spacer top';
|
|
||||||
state.bottomSpacer = document.createElement('div');
|
|
||||||
state.bottomSpacer.className = 'mobile-window-spacer bottom';
|
|
||||||
|
|
||||||
state.items.forEach(item => item.remove());
|
|
||||||
container.appendChild(state.topSpacer);
|
|
||||||
container.appendChild(state.bottomSpacer);
|
|
||||||
|
|
||||||
state.lastStart = -1;
|
|
||||||
state.lastEnd = -1;
|
|
||||||
state.framePending = false;
|
|
||||||
state.active = true;
|
|
||||||
|
|
||||||
if (!state.scrollListener) {
|
|
||||||
state.scrollListener = () => scheduleWindowRender();
|
|
||||||
window.addEventListener('scroll', state.scrollListener, { passive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
scheduleWindowRender();
|
|
||||||
}
|
|
||||||
|
|
||||||
function deactivateVirtualization() {
|
|
||||||
if (!state.active) {
|
|
||||||
if (!Array.isArray(state.items) || state.items.length === 0) {
|
|
||||||
state.items = Array.from(container.querySelectorAll('.library-item'));
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.scrollListener) {
|
|
||||||
window.removeEventListener('scroll', state.scrollListener);
|
|
||||||
state.scrollListener = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.topSpacer && state.topSpacer.parentNode === container) {
|
|
||||||
state.topSpacer.remove();
|
|
||||||
}
|
|
||||||
if (state.bottomSpacer && state.bottomSpacer.parentNode === container) {
|
|
||||||
state.bottomSpacer.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
state.items.forEach(item => fragment.appendChild(item));
|
|
||||||
container.appendChild(fragment);
|
|
||||||
|
|
||||||
restoreAllImages();
|
|
||||||
|
|
||||||
state.topSpacer = null;
|
|
||||||
state.bottomSpacer = null;
|
|
||||||
state.lastStart = -1;
|
|
||||||
state.lastEnd = -1;
|
|
||||||
state.framePending = false;
|
|
||||||
state.active = false;
|
|
||||||
|
|
||||||
const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
|
|
||||||
setViewMode(currentMode);
|
|
||||||
}
|
|
||||||
|
|
||||||
function syncVirtualizationWithViewport() {
|
|
||||||
if (!Array.isArray(state.items) || state.items.length === 0) {
|
|
||||||
state.items = Array.from(container.querySelectorAll('.library-item'));
|
|
||||||
}
|
|
||||||
|
|
||||||
const shouldVirtualize = isMobileViewport() && state.items.length > MOBILE_LIBRARY_MIN_ITEMS;
|
|
||||||
if (shouldVirtualize) {
|
|
||||||
activateVirtualization();
|
|
||||||
scheduleWindowRender();
|
|
||||||
} else {
|
|
||||||
deactivateVirtualization();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!state.initialized) {
|
|
||||||
state.resizeListener = () => syncVirtualizationWithViewport();
|
|
||||||
window.addEventListener('resize', state.resizeListener, { passive: true });
|
|
||||||
state.initialized = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
syncVirtualizationWithViewport();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize view mode
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const savedMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
|
|
||||||
setViewMode(savedMode);
|
|
||||||
|
|
||||||
document.getElementById('viewModeToggle').addEventListener('click', function() {
|
|
||||||
const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
|
|
||||||
const newMode = currentMode === 'card' ? 'table' : 'card';
|
|
||||||
setViewMode(newMode);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Details button handlers
|
|
||||||
document.querySelectorAll('.details-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const itemId = this.dataset.itemId;
|
|
||||||
fetch(`/get_item_details/${itemId}`)
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.success) {
|
|
||||||
displayLibraryItemDetail(data.item);
|
|
||||||
document.getElementById('detailModal').style.display = 'flex';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Borrow button handlers
|
|
||||||
document.querySelectorAll('.borrow-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', function() {
|
|
||||||
document.getElementById('borrowItemId').value = this.dataset.itemId;
|
|
||||||
document.getElementById('borrowModal').style.display = 'flex';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Borrow form submit
|
|
||||||
document.getElementById('borrowForm').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const itemId = document.getElementById('borrowItemId').value;
|
|
||||||
const studentId = document.getElementById('studentIdInput').value || null;
|
|
||||||
const borrowDays = document.getElementById('borrowDaysInput').value || 14;
|
|
||||||
|
|
||||||
fetch('/borrow_item', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({
|
|
||||||
item_id: itemId,
|
|
||||||
student_id: studentId,
|
|
||||||
borrow_days: borrowDays
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.success) {
|
|
||||||
alert('Erfolgreich ausgeliehen!');
|
|
||||||
location.reload();
|
|
||||||
} else {
|
|
||||||
alert('Fehler: ' + data.message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Modal close handlers
|
|
||||||
document.querySelectorAll('.modal-close').forEach(btn => {
|
|
||||||
btn.addEventListener('click', function() {
|
|
||||||
this.closest('.modal').style.display = 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close modals on outside click
|
|
||||||
document.querySelectorAll('.modal').forEach(modal => {
|
|
||||||
modal.addEventListener('click', function(e) {
|
|
||||||
if (e.target === this) this.style.display = 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
initMobileWindowedLibraryLoading();
|
|
||||||
});
|
|
||||||
|
|
||||||
function displayLibraryItemDetail(item) {
|
|
||||||
const modalBody = document.getElementById('modalBody');
|
|
||||||
const returnBtn = item.Verfuegbar === false ? `<button class="action-button return-btn" onclick="returnItem('${item._id}')">Zurückgeben</button>` : '';
|
|
||||||
const borrowBtn = item.Verfuegbar === true ? `<button class="action-button borrow-btn" onclick="openBorrowModal('${item._id}')">Ausleihen</button>` : '';
|
|
||||||
|
|
||||||
modalBody.innerHTML = `
|
|
||||||
<h2>${item.Name}</h2>
|
|
||||||
<div class="detail-content">
|
|
||||||
${item.Image ? `<img src="/uploads/${item.Image}" alt="${item.Name}" style="max-width: 200px; margin-bottom: 20px;">` : ''}
|
|
||||||
<p><strong>Autor:</strong> ${item.Author || '—'}</p>
|
|
||||||
<p><strong>ISBN:</strong> ${item.ISBN || '—'}</p>
|
|
||||||
<p><strong>Typ:</strong> ${item.ItemType || 'Medium'}</p>
|
|
||||||
<p><strong>Status:</strong> ${item.Verfuegbar === false ? 'Ausgeliehen' : 'Verfügbar'}</p>
|
|
||||||
${item.User ? `<p><strong>Ausgeliehen von:</strong> ${item.User}</p>` : ''}
|
|
||||||
${item.Beschreibung ? `<p><strong>Beschreibung:</strong> ${item.Beschreibung}</p>` : ''}
|
|
||||||
<div class="modal-actions">
|
|
||||||
${borrowBtn}
|
|
||||||
${returnBtn}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function openBorrowModal(itemId) {
|
|
||||||
document.getElementById('borrowItemId').value = itemId;
|
|
||||||
document.getElementById('borrowModal').style.display = 'flex';
|
|
||||||
document.getElementById('detailModal').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function returnItem(itemId) {
|
|
||||||
if (confirm('Wirklich zurückgeben?')) {
|
|
||||||
fetch('/return_item', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({item_id: itemId})
|
|
||||||
})
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.success) {
|
|
||||||
alert('Erfolgreich zurückgegeben!');
|
|
||||||
location.reload();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter dropdown toggle with auto-close
|
|
||||||
function closeAllFilters() {
|
|
||||||
document.querySelectorAll('.filter-dropdown').forEach(d => d.style.display = 'none');
|
|
||||||
document.getElementById('filterBtn').setAttribute('aria-expanded', 'false');
|
|
||||||
document.getElementById('filterBtn').classList.remove('open');
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('filterBtn').addEventListener('click', function(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
const dropdown = document.getElementById('filterDropdown');
|
|
||||||
const isOpen = dropdown.style.display !== 'none';
|
|
||||||
closeAllFilters();
|
|
||||||
if (!isOpen) {
|
|
||||||
dropdown.style.display = 'block';
|
|
||||||
this.setAttribute('aria-expanded', 'true');
|
|
||||||
this.classList.add('open');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', closeAllFilters);
|
|
||||||
document.getElementById('filterDropdown').addEventListener('click', e => e.stopPropagation());
|
|
||||||
|
|
||||||
// Clear filters
|
|
||||||
document.getElementById('clearFiltersBtn').addEventListener('click', function() {
|
|
||||||
document.querySelectorAll('.filter-checkbox').forEach(c => c.checked = false);
|
|
||||||
closeAllFilters();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Scanner toggle
|
|
||||||
// Scanner state tracking
|
|
||||||
let isScanning = false;
|
|
||||||
|
|
||||||
document.getElementById('scannerBtn').addEventListener('click', function(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
const container = document.getElementById('qrContainer');
|
|
||||||
const isOpen = container.style.display !== 'none';
|
|
||||||
const btn = this;
|
|
||||||
|
|
||||||
if (isOpen) {
|
|
||||||
// Close the scanner
|
|
||||||
container.style.display = 'none';
|
|
||||||
Quagga.stop();
|
|
||||||
isScanning = false;
|
|
||||||
|
|
||||||
btn.classList.remove('open');
|
|
||||||
btn.setAttribute('aria-expanded', 'false');
|
|
||||||
} else {
|
|
||||||
// Open the scanner
|
|
||||||
container.style.display = 'block';
|
|
||||||
btn.classList.add('open');
|
|
||||||
btn.setAttribute('aria-expanded', 'true');
|
|
||||||
|
|
||||||
Quagga.init({
|
|
||||||
inputStream: {
|
|
||||||
name: "Live",
|
|
||||||
type: "LiveStream",
|
|
||||||
// Targets the element where the video stream will inject
|
|
||||||
target: document.querySelector('#qr-reader'),
|
|
||||||
constraints: {
|
|
||||||
width: 640,
|
|
||||||
height: 480,
|
|
||||||
facingMode: "environment" // Forces back camera
|
|
||||||
},
|
|
||||||
},
|
|
||||||
decoder: {
|
|
||||||
// Optimized for 1D barcodes (e.g., student IDs, member cards)
|
|
||||||
readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
|
|
||||||
}
|
|
||||||
}, function(err) {
|
|
||||||
if (err) {
|
|
||||||
console.error("Initialization error:", err);
|
|
||||||
alert("Kamera konnte nicht gestartet werden.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Quagga.start();
|
|
||||||
isScanning = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Single Quagga event listener for successful scans
|
|
||||||
Quagga.onDetected(function(data) {
|
|
||||||
const decodedText = data.codeResult.code;
|
|
||||||
const studentId = String(decodedText || '').trim();
|
|
||||||
|
|
||||||
// Stop scanning immediately to prevent multiple triggers
|
|
||||||
Quagga.stop();
|
|
||||||
isScanning = false;
|
|
||||||
|
|
||||||
// Reset UI states to closed
|
|
||||||
const container = document.getElementById('qrContainer');
|
|
||||||
const btn = document.getElementById('scannerBtn');
|
|
||||||
if (container) container.style.display = 'none';
|
|
||||||
if (btn) {
|
|
||||||
btn.classList.remove('open');
|
|
||||||
btn.setAttribute('aria-expanded', 'false');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Route the scanned data to your input
|
|
||||||
document.getElementById('studentIdInput').value = studentId;
|
|
||||||
alert('Ausweis gescannt: ' + studentId);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.library-item .item-image-wrapper {
|
|
||||||
width: 120px;
|
|
||||||
height: 160px;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-item .placeholder-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 48px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-item .item-author {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #666;
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-item .item-isbn {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #999;
|
|
||||||
font-family: monospace;
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-item .item-type {
|
|
||||||
display: inline-block;
|
|
||||||
background: #e8f0fe;
|
|
||||||
color: #1967d2;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-item .item-status.available {
|
|
||||||
background: #e6f4ea;
|
|
||||||
color: #137333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-item .item-status.borrowed {
|
|
||||||
background: #fce8e6;
|
|
||||||
color: #b3261e;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile: allow horizontal scrolling for table-mode views */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.library-table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.library-table-wrapper .table-row {
|
|
||||||
min-width: 720px; /* allow table to have intrinsic width and be scrolled */
|
|
||||||
}
|
|
||||||
.table-header, .item-content.table-mode {
|
|
||||||
display: block; /* keep rows stacked but allow horizontal scroll */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endblock %}
|
|
||||||
+249
-353
@@ -4,59 +4,60 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<style>
|
<style>
|
||||||
/* The Dark Background Overlay */
|
/* =========================================
|
||||||
|
1. Modals & Overlays
|
||||||
|
========================================= */
|
||||||
.modal {
|
.modal {
|
||||||
|
display: none; /* Managed by JS (none/flex) */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
|
||||||
left: 0;
|
z-index: 1000;
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
/* Display is managed by JS (none/flex) */
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 1000;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The White Modal Box */
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background-color: #fff;
|
position: relative;
|
||||||
padding: 20px;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 600px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
/* Flexbox allows the header to stay fixed while the body scrolls */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 85vh;
|
width: 100%;
|
||||||
|
max-width: 900px; /* Consolidated from conflicting 600px/900px rules */
|
||||||
|
max-height: 90vh;
|
||||||
|
background-color: var(--ui-surface, #fff);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The Close Button */
|
|
||||||
.close {
|
.close {
|
||||||
align-self: flex-end;
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 20px;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: 10px;
|
cursor: pointer;
|
||||||
|
transition: color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close:hover,
|
.close:hover,
|
||||||
.close:focus {
|
.close:focus {
|
||||||
color: #000;
|
color: var(--ui-text, #000);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The Scrollable Content Area */
|
|
||||||
#detailContent {
|
#detailContent {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Library table-only view styles */
|
/* =========================================
|
||||||
|
2. Layout & Headers
|
||||||
|
========================================= */
|
||||||
.library-table-container {
|
.library-table-container {
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -79,13 +80,15 @@
|
|||||||
font-size: 0.95em;
|
font-size: 0.95em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Library search bar */
|
/* =========================================
|
||||||
|
3. Search, Filter & Scan Panels
|
||||||
|
========================================= */
|
||||||
.library-search-bar {
|
.library-search-bar {
|
||||||
margin-bottom: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-search-input {
|
.library-search-input {
|
||||||
@@ -95,10 +98,9 @@
|
|||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
background: white;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scanner panel */
|
|
||||||
.library-scan-panel {
|
.library-scan-panel {
|
||||||
background: var(--ui-surface);
|
background: var(--ui-surface);
|
||||||
border: 1px solid #d9dde4;
|
border: 1px solid #d9dde4;
|
||||||
@@ -129,26 +131,18 @@
|
|||||||
color: #4b5563;
|
color: #4b5563;
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-scan-status.ok {
|
.library-scan-status.ok { color: #1f7a38; }
|
||||||
color: #1f7a38;
|
.library-scan-status.warn { color: #9a6700; }
|
||||||
}
|
.library-scan-status.error { color: #b42318; }
|
||||||
|
|
||||||
.library-scan-status.warn {
|
|
||||||
color: #9a6700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-scan-status.error {
|
|
||||||
color: #b42318;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-scan-reader-wrap {
|
.library-scan-reader-wrap {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
max-width: 460px;
|
||||||
|
background: var(--ui-surface);
|
||||||
border: 1px solid #d9dde4;
|
border: 1px solid #d9dde4;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--ui-surface);
|
|
||||||
max-width: 460px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-scan-reader {
|
.library-scan-reader {
|
||||||
@@ -156,14 +150,15 @@
|
|||||||
min-height: 280px;
|
min-height: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Filters */
|
||||||
.library-filter-toggle-btn {
|
.library-filter-toggle-btn {
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
background: #f0f2f5;
|
background: #f0f2f5;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--ui-text);
|
color: var(--ui-text);
|
||||||
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -178,10 +173,9 @@
|
|||||||
color: #4f46e5;
|
color: #4f46e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Filter panel */
|
|
||||||
.library-filter-panel {
|
.library-filter-panel {
|
||||||
display: none;
|
display: none;
|
||||||
background: white;
|
background: #fff;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@@ -210,10 +204,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter-item label {
|
.filter-item label {
|
||||||
|
margin-bottom: 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: var(--ui-text);
|
color: var(--ui-text);
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-item input,
|
.filter-item input,
|
||||||
@@ -222,7 +216,8 @@
|
|||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background: white;
|
background: #fff;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-item input:focus,
|
.filter-item input:focus,
|
||||||
@@ -236,8 +231,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
border-top: 1px solid #eee;
|
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-buttons .button {
|
.filter-buttons .button {
|
||||||
@@ -246,11 +241,13 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Library table */
|
/* =========================================
|
||||||
|
4. Tables & Data Display
|
||||||
|
========================================= */
|
||||||
.library-items-table {
|
.library-items-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
background: white;
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -266,8 +263,8 @@
|
|||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--ui-text);
|
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
color: var(--ui-text);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
@@ -288,7 +285,6 @@
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table cells */
|
|
||||||
.table-title {
|
.table-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--ui-text);
|
color: var(--ui-text);
|
||||||
@@ -302,26 +298,14 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-available {
|
.status-available { background: #e8f5e9; color: #2e7d32; }
|
||||||
background: #e8f5e9;
|
.status-borrowed { background: #fff3e0; color: #e65100; }
|
||||||
color: #2e7d32;
|
.status-damaged { background: #fee2e2; color: #991b1b; }
|
||||||
}
|
|
||||||
|
|
||||||
.status-borrowed {
|
|
||||||
background: #fff3e0;
|
|
||||||
color: #e65100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-damaged {
|
|
||||||
background: #fee2e2;
|
|
||||||
color: #991b1b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Actions */
|
|
||||||
.table-actions {
|
.table-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-actions .button {
|
.table-actions .button {
|
||||||
@@ -330,26 +314,25 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Empty state */
|
|
||||||
.library-empty-state {
|
.library-empty-state {
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
|
text-align: center;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-empty-state h3 {
|
.library-empty-state h3 {
|
||||||
font-size: 1.3em;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
font-size: 1.3em;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-load-row {
|
.library-load-row {
|
||||||
margin-top: 12px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
flex-wrap: wrap;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-load-hint {
|
.library-load-hint {
|
||||||
@@ -357,54 +340,9 @@
|
|||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small confirmation popup (toast) */
|
/* =========================================
|
||||||
.small-popup {
|
5. Edit Grid Forms
|
||||||
position: fixed;
|
========================================= */
|
||||||
bottom: 24px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: rgba(17, 24, 39, 0.96);
|
|
||||||
color: #fff;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 6px 24px rgba(2,6,23,0.6);
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 90%;
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
.small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
|
|
||||||
.small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
|
|
||||||
.small-popup .close-x { margin-left: 8px; cursor: pointer; font-weight: 700; }
|
|
||||||
|
|
||||||
/* Modal styles */
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background-color: var(--ui-surface);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
max-width: 900px;
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-grid {
|
.edit-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
@@ -416,10 +354,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.edit-grid label {
|
.edit-grid label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-bottom: 4px;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-grid input,
|
.edit-grid input,
|
||||||
@@ -437,37 +375,44 @@
|
|||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
/* =========================================
|
||||||
position: absolute;
|
6. Notifications / Toasts
|
||||||
right: 20px;
|
========================================= */
|
||||||
top: 10px;
|
.small-popup {
|
||||||
font-size: 28px;
|
position: fixed;
|
||||||
font-weight: bold;
|
bottom: 24px;
|
||||||
color: #999;
|
left: 50%;
|
||||||
|
z-index: 2000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 90%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: rgba(17, 24, 39, 0.96);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.95em;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
box-shadow: 0 6px 24px rgba(2,6,23,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
|
||||||
|
.small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
|
||||||
|
|
||||||
|
.small-popup .close-x {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close:hover {
|
/* =========================================
|
||||||
color: var(--ui-text);
|
7. Mobile Responsiveness
|
||||||
}
|
========================================= */
|
||||||
|
|
||||||
/* Mobile responsive */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.library-table-container {
|
.library-table-container { padding: 10px; }
|
||||||
padding: 10px;
|
.library-search-bar { flex-direction: column; }
|
||||||
}
|
.library-search-input { width: 100%; }
|
||||||
|
.library-items-table { font-size: 0.85em; }
|
||||||
.library-search-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-search-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-items-table {
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-items-table th,
|
.library-items-table th,
|
||||||
.library-items-table td {
|
.library-items-table td {
|
||||||
@@ -479,28 +424,24 @@
|
|||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-row {
|
.filter-row,
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-scan-controls {
|
.library-scan-controls {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-scan-reader-wrap {
|
.library-scan-reader-wrap { max-width: 100%; }
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
|
<div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
|
<!-- Search and Filter Toggle -->
|
||||||
|
<!-- Customizable Filter Panel -->
|
||||||
<div class="library-header">
|
<div class="library-header">
|
||||||
<h1>📚 Bibliothek</h1>
|
<h1>📚 Bibliothek</h1>
|
||||||
<p>Bücher, CDs, DVDs und weitere Medien</p>
|
<p>Bücher, CDs, DVDs und weitere Medien</p>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Student card / quick scan workflow -->
|
||||||
<!-- Search and Filter Toggle -->
|
|
||||||
<div class="library-search-bar">
|
<div class="library-search-bar">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -517,16 +458,14 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Customizable Filter Panel -->
|
|
||||||
|
|
||||||
<!-- Student card / quick scan workflow -->
|
|
||||||
<div class="library-scan-panel">
|
|
||||||
<div class="library-scan-controls">
|
<div class="library-scan-controls">
|
||||||
<select id="scanModeSelect" aria-label="Scan-Modus">
|
<select id="scanModeSelect" aria-label="Scan-Modus">
|
||||||
<option value="card_only">Nur Ausweis erfassen</option>
|
<option value="card_only">Nur Ausweis erfassen</option>
|
||||||
<option value="quick_toggle">Schnellmodus: Ausweis + Mediencode</option>
|
<option value="quick_toggle">Schnellmodus: Ausweis + Mediencode</option>
|
||||||
|
<option value="continuous">Dauermodus: 1x Ausweis, dann N Medien</option>
|
||||||
|
<option value="return_only">Nur Rückgabe (nur Mediencode)</option>
|
||||||
</select>
|
</select>
|
||||||
<input type="text" id="activeStudentCard" placeholder="Aktiver Ausweis (gescannt)" >
|
<input type="text" id="activeStudentCard" placeholder="Aktiver Ausweis (gescannt)">
|
||||||
<input type="text" id="manualItemCode" placeholder="Manueller Mediencode (optional)" style="min-width:180px;">
|
<input type="text" id="manualItemCode" placeholder="Manueller Mediencode (optional)" style="min-width:180px;">
|
||||||
<button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
|
<button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
|
||||||
<button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
|
<button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
|
||||||
@@ -534,20 +473,7 @@
|
|||||||
<input type="checkbox" id="keyboardScannerToggle">
|
<input type="checkbox" id="keyboardScannerToggle">
|
||||||
<span style="font-size:0.9em;">Physischer Scanner</span>
|
<span style="font-size:0.9em;">Physischer Scanner</span>
|
||||||
</label>
|
</label>
|
||||||
<label style="display:flex; align-items:center; gap:8px; margin-left:6px;">
|
<button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
|
||||||
<input type="checkbox" id="returnOnlyToggle">
|
|
||||||
<span style="font-size:0.9em;">Nur Rückgabe (nur Mediencode)</span>
|
|
||||||
</label>
|
|
||||||
<button id="manualReturnBtn" class="button" type="button" style="margin-left:6px; background:#10b981;color:white;">Rückgabe per Code</button>
|
|
||||||
</div>
|
|
||||||
<div id="scanStatus" class="library-scan-status">
|
|
||||||
Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
|
|
||||||
</div>
|
|
||||||
<div id="scanReaderWrap" class="library-scan-reader-wrap" style="display: none;">
|
|
||||||
<div id="libraryQrReader" class="library-scan-reader">
|
|
||||||
<div id="library-scanner-container"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="filterPanel" class="library-filter-panel">
|
<div id="filterPanel" class="library-filter-panel">
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
@@ -946,6 +872,32 @@
|
|||||||
setScanStatus('Scanner gestoppt.', 'warn');
|
setScanStatus('Scanner gestoppt.', 'warn');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function isStudentCardBarcode(code) {
|
||||||
|
if (!code) return false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/is_student_card/${encodeURIComponent(code)}`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
// Falls du in Flask CSRF-Protect nutzt, muss der Token mitgesendet werden:
|
||||||
|
'X-CSRFToken': '{{ csrf_token }}',
|
||||||
|
'X-CSRF-Token': '{{ csrf_token }}'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) return false;
|
||||||
|
|
||||||
|
// Wir parsen die Antwort. Flask jsonify({"is_student_card": true/false})
|
||||||
|
const data = await response.json();
|
||||||
|
return data === true || data.is_student_card === true;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler bei der API-Prüfung des Ausweises:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Quagga.onDetected(function(data) {
|
Quagga.onDetected(function(data) {
|
||||||
if (!data || !data.codeResult || !data.codeResult.code) return;
|
if (!data || !data.codeResult || !data.codeResult.code) return;
|
||||||
|
|
||||||
@@ -955,13 +907,6 @@
|
|||||||
const currentCallback = activeScannerCallback;
|
const currentCallback = activeScannerCallback;
|
||||||
stopScanner();
|
stopScanner();
|
||||||
|
|
||||||
const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
|
|
||||||
if (returnOnly) {
|
|
||||||
// direct return flow
|
|
||||||
returnByCode(barcode);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof currentCallback === "function") {
|
if (typeof currentCallback === "function") {
|
||||||
currentCallback(barcode);
|
currentCallback(barcode);
|
||||||
} else {
|
} else {
|
||||||
@@ -988,14 +933,8 @@
|
|||||||
keyboardScanBuffer = '';
|
keyboardScanBuffer = '';
|
||||||
keyboardLastKeyAt = 0;
|
keyboardLastKeyAt = 0;
|
||||||
if (!code) return;
|
if (!code) return;
|
||||||
// If return-only mode is active, attempt direct return
|
|
||||||
const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
|
|
||||||
if (returnOnly) {
|
|
||||||
returnByCode(code);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Process exactly like a camera scan
|
// Process exactly like a camera scan - centralized logic handles the rest!
|
||||||
handleScanSuccess(code);
|
handleScanSuccess(code);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -1014,33 +953,123 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleScanSuccess(decodedText) {
|
function handleScanSuccess(decodedText) {
|
||||||
const scannedCode = normalizeScannedCode(decodedText);
|
const scannedCode = typeof normalizeScannedCode === "function" ? normalizeScannedCode(decodedText) : decodedText;
|
||||||
if (!scannedCode) return;
|
if (!scannedCode) return;
|
||||||
|
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
|
if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
|
||||||
return;
|
return; // Verhindert doppeltes Scannen in kurzer Zeit
|
||||||
}
|
}
|
||||||
lastScanValue = scannedCode;
|
lastScanValue = scannedCode;
|
||||||
lastScanAt = now;
|
lastScanAt = now;
|
||||||
|
|
||||||
|
// Den aktuellen Modus aus dem Dropdown auslesen
|
||||||
const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
|
const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
|
||||||
|
|
||||||
|
// 1. Modus: Nur Rückgabe
|
||||||
|
if (mode === 'return_only') {
|
||||||
|
returnByCode(scannedCode);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Modus: Nur Ausweis
|
||||||
if (mode === 'card_only') {
|
if (mode === 'card_only') {
|
||||||
setActiveStudentCard(scannedCode);
|
setActiveStudentCard(scannedCode);
|
||||||
setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
|
setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 3. Modus: Schnellmodus (1x Ausweis, 1x Buch)
|
||||||
|
if (mode === 'quick_toggle') {
|
||||||
processQuickToggleScan(scannedCode);
|
processQuickToggleScan(scannedCode);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Modus: Dauermodus (1x Ausweis, Nx Bücher)
|
||||||
|
if (mode === 'continuous') {
|
||||||
|
processContinuousScan(scannedCode);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function processContinuousScan(scannedCode) {
|
||||||
|
setScanStatus('Überprüfe Code-Typ...', 'warn');
|
||||||
|
|
||||||
|
const isCard = await isStudentCardBarcode(scannedCode);
|
||||||
|
|
||||||
|
if (isCard) {
|
||||||
|
setActiveStudentCard(scannedCode);
|
||||||
|
setScanStatus(`Neuer Ausweis gesetzt: ${activeStudentCardId}. Bitte Medien scannen.`, 'ok');
|
||||||
|
showSmallConfirm(`Benutzer gewechselt zu: ${activeStudentCardId}`, 'ok');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (document.getElementById('scanModeSelect').value === 'continuous') {
|
||||||
|
startScanner();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!activeStudentCardId) {
|
||||||
|
setScanStatus('Kein Ausweis aktiv! Bitte zuerst einen Schülerausweis scannen.', 'error');
|
||||||
|
showSmallConfirm('Bitte zuerst Ausweis scannen', 'error');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (document.getElementById('scanModeSelect').value === 'continuous') {
|
||||||
|
startScanner();
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setScanStatus('Verarbeite Mediencode...', 'warn');
|
||||||
|
const response = await fetch('/api/library_scan_action', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRFToken': '{{ csrf_token }}',
|
||||||
|
'X-CSRF-Token': '{{ csrf_token }}'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
student_card_id: activeStudentCardId,
|
||||||
|
item_code: scannedCode
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
if (!response.ok || !result.ok) {
|
||||||
|
setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
|
||||||
|
showSmallConfirm(result.message || 'Aktion fehlgeschlagen.', 'error');
|
||||||
|
} else if (result.action === 'borrowed') {
|
||||||
|
setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
|
||||||
|
showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok');
|
||||||
|
} else if (result.action === 'returned') {
|
||||||
|
setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
|
||||||
|
showSmallConfirm(`Zurückgegeben: ${result.item_name}`, 'ok');
|
||||||
|
} else {
|
||||||
|
setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
|
||||||
|
showSmallConfirm(result.message || 'Erfolgreich', 'ok');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabellen-Ansicht aktualisieren
|
||||||
|
if (typeof loadLibraryItems === "function") {
|
||||||
|
await loadLibraryItems();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Continuous scan action failed:', err);
|
||||||
|
setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
|
||||||
|
showSmallConfirm('Fehler im Netzwerk/System', 'error');
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (document.getElementById('scanModeSelect').value === 'continuous') {
|
||||||
|
startScanner();
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function processQuickToggleScan(scannedCode) {
|
async function processQuickToggleScan(scannedCode) {
|
||||||
// 1. Prüfen, ob "Nur Rückgabe"-Modus aktiv ist
|
|
||||||
const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
|
|
||||||
if (returnOnly) {
|
|
||||||
await returnByCode(scannedCode);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
|
// 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
|
||||||
if (!activeStudentCardId) {
|
if (!activeStudentCardId) {
|
||||||
@@ -1148,9 +1177,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const defaultCardId = activeStudentCardId || '';
|
const defaultCardId = activeStudentCardId || '';
|
||||||
const cardId = (window.prompt('Bitte Schülerausweis-ID eingeben:', defaultCardId) || '').trim().toUpperCase();
|
const cardId = (window.prompt('Bitte Bibliotheksausweis-ID eingeben:', defaultCardId) || '').trim().toUpperCase();
|
||||||
if (!cardId) {
|
if (!cardId) {
|
||||||
alert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Schülerausweis-ID erforderlich.');
|
alert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Bibliotheksausweis-ID erforderlich.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1361,7 +1390,7 @@
|
|||||||
if (modeSelect) {
|
if (modeSelect) {
|
||||||
modeSelect.addEventListener('change', () => {
|
modeSelect.addEventListener('change', () => {
|
||||||
if (modeSelect.value === 'quick_toggle' && !activeStudentCardId) {
|
if (modeSelect.value === 'quick_toggle' && !activeStudentCardId) {
|
||||||
setScanStatus('Schnellmodus: zuerst Schülerausweis scannen.', 'warn');
|
setScanStatus('Schnellmodus: zuerst Bibliotheksausweis scannen.', 'warn');
|
||||||
} else if (modeSelect.value === 'card_only') {
|
} else if (modeSelect.value === 'card_only') {
|
||||||
setScanStatus('Nur Ausweis-Modus aktiv.', 'warn');
|
setScanStatus('Nur Ausweis-Modus aktiv.', 'warn');
|
||||||
}
|
}
|
||||||
@@ -1434,111 +1463,30 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const manualReturnBtn = document.getElementById('manualReturnBtn');
|
const manualActionBtn = document.getElementById('manualActionBtn');
|
||||||
const manualItemCode = document.getElementById('manualItemCode');
|
const manualItemCode = document.getElementById('manualItemCode');
|
||||||
if (manualReturnBtn && manualItemCode) {
|
|
||||||
manualReturnBtn.addEventListener('click', async () => {
|
if (manualActionBtn && manualItemCode) {
|
||||||
|
manualActionBtn.addEventListener('click', () => {
|
||||||
const code = (manualItemCode.value || '').trim();
|
const code = (manualItemCode.value || '').trim();
|
||||||
if (!code) {
|
if (!code) {
|
||||||
alert('Bitte einen Mediencode eingeben.');
|
alert('Bitte einen Code eingeben.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
await returnByCode(code);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const editForm = document.getElementById('editLibraryForm');
|
// Leitet den manuellen Code an die zentrale Logik weiter,
|
||||||
if (editForm) {
|
// die prüft, welcher Modus im Dropdown aktiv ist.
|
||||||
editForm.addEventListener('submit', async function (e) {
|
handleScanSuccess(code);
|
||||||
|
|
||||||
|
// Feld nach Eingabe leeren, um direkt den nächsten Code bereitzuhaben
|
||||||
|
manualItemCode.value = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Optional: Auch auf "Enter" im Textfeld reagieren
|
||||||
|
manualItemCode.addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
manualActionBtn.click();
|
||||||
const itemId = document.getElementById('editLibraryItemId').value;
|
|
||||||
const currentItem = libraryItems.find(i => i._id === itemId);
|
|
||||||
if (!currentItem) return;
|
|
||||||
|
|
||||||
const codeInputs = Array.from(document.querySelectorAll('#editLibraryCodesContainer input[data-item-id]'));
|
|
||||||
|
|
||||||
// Daten aus dem Formular sammeln
|
|
||||||
const sharedPayload = {
|
|
||||||
name: document.getElementById('editLibraryName').value,
|
|
||||||
item_type: document.getElementById('editLibraryType').value,
|
|
||||||
isbn: document.getElementById('editLibraryIsbn').value,
|
|
||||||
ort: document.getElementById('editLibraryLocation').value,
|
|
||||||
beschreibung: document.getElementById('editLibraryDescription').value,
|
|
||||||
ansch_jahr: currentItem.Anschaffungsjahr || '',
|
|
||||||
ansch_kost: currentItem.Anschaffungskosten || '',
|
|
||||||
reservierbar: currentItem.Reservierbar !== false,
|
|
||||||
};
|
|
||||||
|
|
||||||
const codeByItemId = new Map(codeInputs.map(input => [input.dataset.itemId, (input.value || '').trim()]));
|
|
||||||
const groupMembers = editLibraryState.groupMembers.length > 0 ? editLibraryState.groupMembers : [currentItem];
|
|
||||||
const isGroupedEdit = Boolean(currentItem.SeriesGroupId) && groupMembers.length > 1;
|
|
||||||
|
|
||||||
// API-Aufruf
|
|
||||||
try {
|
|
||||||
if (isGroupedEdit) {
|
|
||||||
const payload = {
|
|
||||||
series_group_id: currentItem.SeriesGroupId,
|
|
||||||
...sharedPayload,
|
|
||||||
items: groupMembers.map(member => ({
|
|
||||||
id: member._id,
|
|
||||||
code_4: codeByItemId.get(member._id) || ''
|
|
||||||
}))
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch('/update_group', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRFToken': '{{ csrf_token }}',
|
|
||||||
'X-CSRF-Token': '{{ csrf_token }}'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(payload)
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
if (response.ok && result.success) {
|
|
||||||
alert(result.message || 'Gruppe erfolgreich aktualisiert!');
|
|
||||||
closeEditLibraryModal();
|
|
||||||
pagingState.loading = false;
|
|
||||||
await loadLibraryItems();
|
|
||||||
} else {
|
|
||||||
alert(result.message || 'Fehler beim Speichern der Gruppenänderungen.');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const primaryCodeInput = codeInputs[0];
|
|
||||||
const payload = {
|
|
||||||
name: sharedPayload.name,
|
|
||||||
item_type: sharedPayload.item_type,
|
|
||||||
isbn: sharedPayload.isbn,
|
|
||||||
code_4: primaryCodeInput ? primaryCodeInput.value.trim() : (currentItem.Code_4 || currentItem.Code4 || '').trim(),
|
|
||||||
ort: sharedPayload.ort,
|
|
||||||
beschreibung: sharedPayload.beschreibung
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`/api/library_item/${itemId}/update`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRFToken': '{{ csrf_token }}',
|
|
||||||
'X-CSRF-Token': '{{ csrf_token }}'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(payload)
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
if (response.ok && result.ok) {
|
|
||||||
alert(result.message || 'Medium erfolgreich aktualisiert!');
|
|
||||||
closeEditLibraryModal();
|
|
||||||
pagingState.loading = false;
|
|
||||||
await loadLibraryItems();
|
|
||||||
} else {
|
|
||||||
alert(result.message || 'Fehler beim Speichern der Änderungen.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Update failed:', error);
|
|
||||||
alert('Netzwerkfehler beim Aktualisieren des Mediums.');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -1560,58 +1508,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderLibraryGroupCodeFields(groupMembers, currentItemId) {
|
|
||||||
const codesContainer = document.getElementById('editLibraryCodesContainer');
|
|
||||||
const groupWarning = document.getElementById('editLibraryGroupWarning');
|
|
||||||
const groupCount = document.getElementById('editLibraryGroupCount');
|
|
||||||
const groupHint = document.getElementById('editLibraryGroupHint');
|
|
||||||
|
|
||||||
if (!codesContainer) return;
|
|
||||||
|
|
||||||
const items = Array.isArray(groupMembers) ? groupMembers.slice() : [];
|
|
||||||
items.sort((a, b) => (a.SeriesPosition || 0) - (b.SeriesPosition || 0) || String(a.Name || '').localeCompare(String(b.Name || '')));
|
|
||||||
|
|
||||||
editLibraryState.groupMembers = items;
|
|
||||||
|
|
||||||
if (groupWarning) {
|
|
||||||
groupWarning.style.display = items.length > 1 ? 'block' : 'none';
|
|
||||||
}
|
|
||||||
if (groupCount) {
|
|
||||||
const totalCount = items.length || 1;
|
|
||||||
const declaredCount = items[0]?.SeriesCount || totalCount;
|
|
||||||
groupCount.textContent = `${totalCount} / ${declaredCount}`;
|
|
||||||
}
|
|
||||||
if (groupHint) {
|
|
||||||
groupHint.textContent = items.length > 1
|
|
||||||
? 'Jeder Code gehört zu einem eigenen Exemplar. Änderungen werden für alle Codes gespeichert.'
|
|
||||||
: 'Einzelnes Exemplar. Der Code wird direkt gespeichert.';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!items.length) {
|
|
||||||
codesContainer.innerHTML = '<div style="padding:10px 0; color:#6b7280;">Keine Codes geladen.</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
codesContainer.innerHTML = items.map((member, index) => {
|
|
||||||
const codeValue = member.Code_4 || member.Code4 || '';
|
|
||||||
const labelParts = [];
|
|
||||||
if (member.SeriesPosition !== undefined && member.SeriesPosition !== null) {
|
|
||||||
labelParts.push(`Exemplar ${member.SeriesPosition}`);
|
|
||||||
} else {
|
|
||||||
labelParts.push(`Exemplar ${index + 1}`);
|
|
||||||
}
|
|
||||||
if (member._id === currentItemId) {
|
|
||||||
labelParts.push('aktuelles Medium');
|
|
||||||
}
|
|
||||||
return `
|
|
||||||
<div style="display:flex; flex-direction:column; gap:6px; margin-bottom:10px;">
|
|
||||||
<label for="editLibraryCode-${member._id}" style="font-weight:600; font-size:0.9em; color:var(--ui-text);">${escapeHtml(labelParts.join(' · '))}</label>
|
|
||||||
<input id="editLibraryCode-${member._id}" data-item-id="${escapeHtml(member._id)}" value="${escapeHtml(codeValue)}" placeholder="Mediencode" style="width:100%; padding:8px 10px; border:1px solid #d0d7e2; border-radius:6px;">
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
function openEditLibraryItem(itemId) {
|
function openEditLibraryItem(itemId) {
|
||||||
window.location.href = `/item_edit/${itemId}`;
|
window.location.href = `/item_edit/${itemId}`;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -819,7 +819,7 @@
|
|||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button, .damage-button {
|
.ausleihen, .edit-button, .delete-button, .details-button, .schedule-button, .damage-button {
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@@ -942,27 +942,6 @@
|
|||||||
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
|
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Duplicate Button */
|
|
||||||
.duplicate-button {
|
|
||||||
background-color: #6f42c1;
|
|
||||||
color: white;
|
|
||||||
border: 2px solid #6f42c1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duplicate-button:hover {
|
|
||||||
background-color: #5a32a3;
|
|
||||||
border-color: #4e2a8e;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 8px rgba(111, 66, 193, 0.3);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duplicate-button:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-button {
|
.damage-button {
|
||||||
background-color: #fd7e14;
|
background-color: #fd7e14;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -1645,7 +1624,7 @@
|
|||||||
gap: 10px !important;
|
gap: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
|
.ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
min-height: 44px !important;
|
min-height: 44px !important;
|
||||||
padding: 12px 20px !important;
|
padding: 12px 20px !important;
|
||||||
@@ -1777,7 +1756,7 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
|
.ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
min-width: 110px;
|
min-width: 110px;
|
||||||
@@ -1790,7 +1769,7 @@
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
|
.ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
min-width: 95px;
|
min-width: 95px;
|
||||||
@@ -1808,7 +1787,7 @@
|
|||||||
gap: 15px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
|
.ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
@@ -1980,7 +1959,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Standardize form and document buttons */
|
/* Standardize form and document buttons */
|
||||||
.save-button, .cancel-button, .remove-book-cover-button, .remove-duplicate-image-button,
|
.save-button, .cancel-button, .remove-book-cover-button,
|
||||||
.import-book-button, .fetch-isbn-button, .nav-back-button {
|
.import-book-button, .fetch-isbn-button, .nav-back-button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -3465,9 +3444,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
|||||||
{% if current_permissions.actions.get('can_edit', False) %}
|
{% if current_permissions.actions.get('can_edit', False) %}
|
||||||
<button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-card-${item._id}')">Bearbeiten</button>
|
<button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-card-${item._id}')">Bearbeiten</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if current_permissions.actions.get('can_insert', False) %}
|
|
||||||
<button class="duplicate-button" onclick="duplicateItem('${item._id}')">Duplizieren</button>
|
|
||||||
{% endif %}
|
|
||||||
{% if current_permissions.pages.get('admin_school_settings', False) %}
|
{% if current_permissions.pages.get('admin_school_settings', False) %}
|
||||||
${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
|
${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@@ -4244,7 +4220,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
|||||||
: `<button class="ausleihen disabled-button" disabled>Ausgeliehen</button>`
|
: `<button class="ausleihen disabled-button" disabled>Ausgeliehen</button>`
|
||||||
}
|
}
|
||||||
<button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-modal-${item._id}')">Bearbeiten</button>
|
<button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-modal-${item._id}')">Bearbeiten</button>
|
||||||
<button class="duplicate-button" onclick="duplicateItem('${item._id}')">Duplizieren</button>
|
|
||||||
${damageReports && damageReports.length > 0 ? `<button class="damage-button" onclick="markDamageAsRepaired('${item._id}')">Repariert</button>` : `<button class="damage-button" onclick="registerDamage('${item._id}')">Schaden melden</button>`}
|
${damageReports && damageReports.length > 0 ? `<button class="damage-button" onclick="markDamageAsRepaired('${item._id}')">Repariert</button>` : `<button class="damage-button" onclick="registerDamage('${item._id}')">Schaden melden</button>`}
|
||||||
${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
|
${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
|
||||||
<form method="POST" action="/delete_item/${item._id}" style="display:inline;" onsubmit="return confirm('Sind Sie sicher?')">
|
<form method="POST" action="/delete_item/${item._id}" style="display:inline;" onsubmit="return confirm('Sind Sie sicher?')">
|
||||||
@@ -5044,55 +5019,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Duplication function
|
|
||||||
function duplicateItem(itemId) {
|
|
||||||
// Show loading indicator
|
|
||||||
const loadingDiv = document.createElement('div');
|
|
||||||
loadingDiv.innerHTML = `
|
|
||||||
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
||||||
background: rgba(0,0,0,0.5); z-index: 10000; display: flex;
|
|
||||||
align-items: center; justify-content: center;">
|
|
||||||
<div class="modal-dialog-white">
|
|
||||||
<div>Element wird dupliziert...</div>
|
|
||||||
<div class="modal-content-margin">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
document.body.appendChild(loadingDiv);
|
|
||||||
|
|
||||||
// Create form data for the duplicate_item request
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('original_item_id', itemId);
|
|
||||||
|
|
||||||
// Send duplication request to get item data
|
|
||||||
fetch('/duplicate_item', {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
document.body.removeChild(loadingDiv);
|
|
||||||
|
|
||||||
if (data.success) {
|
|
||||||
// Store duplication data in sessionStorage for the upload page
|
|
||||||
sessionStorage.setItem('duplicateItemData', JSON.stringify(data.item_data));
|
|
||||||
|
|
||||||
// Redirect to upload admin page
|
|
||||||
window.location.href = '/upload_admin?duplicate=true';
|
|
||||||
} else {
|
|
||||||
alert('Fehler beim Duplizieren: ' + (data.message || 'Unbekannter Fehler'));
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
document.body.removeChild(loadingDiv);
|
|
||||||
console.error('Error duplicating item:', error);
|
|
||||||
alert('Fehler beim Duplizieren des Elements. Bitte versuchen Sie es erneut.');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper functions for appointment display
|
// Helper functions for appointment display
|
||||||
function formatAppointmentDate(dateString) {
|
function formatAppointmentDate(dateString) {
|
||||||
if (!dateString) return '';
|
if (!dateString) return '';
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Schülerausweis - Barcode PDF Download</title>
|
<title>Bibliotheksausweis - Barcode PDF Download</title>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -123,7 +123,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="icon">📇</div>
|
<div class="icon">📇</div>
|
||||||
<h1>Schülerausweis-Download</h1>
|
<h1>Bibliotheksausweis-Download</h1>
|
||||||
<p>Generieren Sie eine PDF mit Barcodes aller Bibliotheksausweise zum direkten Drucken</p>
|
<p>Generieren Sie eine PDF mit Barcodes aller Bibliotheksausweise zum direkten Drucken</p>
|
||||||
|
|
||||||
<div class="info-box">
|
<div class="info-box">
|
||||||
|
|||||||
@@ -232,6 +232,16 @@
|
|||||||
<h1>📚 Bibliotheksausweise (Bibliothek)</h1>
|
<h1>📚 Bibliotheksausweise (Bibliothek)</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="export-buttons">
|
<div class="export-buttons">
|
||||||
|
<form method="GET" action="{{ url_for('student_card_class_barcode_download') }}" style="display: inline-flex; gap: 5px; align-items: center; background: white; padding: 2px; border-radius: 4px; border: 1px solid #ddd;">
|
||||||
|
<select name="class_name" required style="border: none; padding: 8px; outline: none; font-size: 14px; background: transparent; cursor: pointer;">
|
||||||
|
<option value="" disabled selected>-- Klasse wählen --</option>
|
||||||
|
{% for cls in available_classes %}
|
||||||
|
<option value="{{ cls }}">{{ cls }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
<button type="submit" class="btn-print" style="background: #17a2b8; padding: 8px 12px; margin: 0;">📤 PDF</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
<a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
|
<a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
|
||||||
<a href="{{ url_for('library_admin') }}" class="btn btn-primary">← Zur Bibliotheks-Upload</a>
|
<a href="{{ url_for('library_admin') }}" class="btn btn-primary">← Zur Bibliotheks-Upload</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -249,7 +259,7 @@
|
|||||||
|
|
||||||
<!-- Add/Edit Form -->
|
<!-- Add/Edit Form -->
|
||||||
<div class="student-card-form">
|
<div class="student-card-form">
|
||||||
<h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Schülerausweis{% endif %}</h2>
|
<h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
|
||||||
|
|
||||||
<form method="POST" action="{{ url_for('student_cards_admin') }}">
|
<form method="POST" action="{{ url_for('student_cards_admin') }}">
|
||||||
{% if edit_mode %}
|
{% if edit_mode %}
|
||||||
|
|||||||
@@ -11,59 +11,6 @@
|
|||||||
{% block title %}{{ page_title|default('Artikel hochladen') }} - Inventarsystem{% endblock %}
|
{% block title %}{{ page_title|default('Artikel hochladen') }} - Inventarsystem{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% if duplicate_data and duplicate_data.images %}
|
|
||||||
<!-- Hidden server-side values for duplication, will be processed by JavaScript -->
|
|
||||||
<div id="server-duplicate-data"
|
|
||||||
data-name="{{ duplicate_data.name|default('') }}"
|
|
||||||
data-description="{{ duplicate_data.description|default('') }}"
|
|
||||||
data-location="{{ duplicate_data.location|default('') }}"
|
|
||||||
data-room="{{ duplicate_data.room|default('') }}"
|
|
||||||
data-year="{{ duplicate_data.year|default('') }}"
|
|
||||||
data-cost="{{ duplicate_data.cost|default('') }}"
|
|
||||||
data-images="{{ duplicate_data.images|tojson|safe }}"
|
|
||||||
data-filter1="{{ duplicate_data.filter1|tojson|safe if duplicate_data.filter1 else '[]' }}"
|
|
||||||
data-filter2="{{ duplicate_data.filter2|tojson|safe if duplicate_data.filter2 else '[]' }}"
|
|
||||||
data-filter3="{{ duplicate_data.filter3|tojson|safe if duplicate_data.filter3 else '[]' }}"
|
|
||||||
data-original-id="{{ duplicate_data.original_id|default('') }}"
|
|
||||||
style="display:none;">
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
// Pre-initialize duplicate data from server
|
|
||||||
var serverDuplicateData = null;
|
|
||||||
const dataElement = document.getElementById('server-duplicate-data');
|
|
||||||
if (dataElement) {
|
|
||||||
// Safely parse JSON arrays with error handling
|
|
||||||
function safeJsonParse(jsonStr, defaultValue = []) {
|
|
||||||
try {
|
|
||||||
if (!jsonStr) return defaultValue;
|
|
||||||
return JSON.parse(jsonStr);
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error parsing JSON:", e, "Value was:", jsonStr);
|
|
||||||
return defaultValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get images data and log it for debugging
|
|
||||||
const imagesData = dataElement.getAttribute('data-images') || "[]";
|
|
||||||
console.log("Raw images data attribute:", imagesData);
|
|
||||||
|
|
||||||
serverDuplicateData = {
|
|
||||||
name: dataElement.getAttribute('data-name') || "",
|
|
||||||
description: dataElement.getAttribute('data-description') || "",
|
|
||||||
location: dataElement.getAttribute('data-location') || "",
|
|
||||||
room: dataElement.getAttribute('data-room') || "",
|
|
||||||
year: dataElement.getAttribute('data-year') || "",
|
|
||||||
cost: dataElement.getAttribute('data-cost') || "",
|
|
||||||
images: safeJsonParse(imagesData),
|
|
||||||
filter1: safeJsonParse(dataElement.getAttribute('data-filter1')),
|
|
||||||
filter2: safeJsonParse(dataElement.getAttribute('data-filter2')),
|
|
||||||
filter3: safeJsonParse(dataElement.getAttribute('data-filter3')),
|
|
||||||
original_id: dataElement.getAttribute('data-original-id') || ""
|
|
||||||
};
|
|
||||||
console.log("Server-provided duplicate data:", serverDuplicateData);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Book information display styles */
|
/* Book information display styles */
|
||||||
@@ -296,38 +243,11 @@
|
|||||||
color: #721c24 !important;
|
color: #721c24 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Duplicate code popup styling */
|
|
||||||
.popup-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
z-index: 10000;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
animation: overlayFadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes overlayFadeIn {
|
@keyframes overlayFadeIn {
|
||||||
from { opacity: 0; }
|
from { opacity: 0; }
|
||||||
to { opacity: 1; }
|
to { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.duplicate-code-popup {
|
|
||||||
background-color: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
max-width: 500px;
|
|
||||||
width: 90%;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
animation: popupSlideIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes popupSlideIn {
|
@keyframes popupSlideIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -916,7 +836,7 @@
|
|||||||
<!-- Options will be loaded by JavaScript -->
|
<!-- Options will be loaded by JavaScript -->
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="formupload_admin-group">
|
<div class="form-group">
|
||||||
<label for="filter2-4">Wert 4:</label>
|
<label for="filter2-4">Wert 4:</label>
|
||||||
<select id="filter2-4" name="filter2" class="filter-dropdown-select">
|
<select id="filter2-4" name="filter2" class="filter-dropdown-select">
|
||||||
<option value="">-- Optional --</option>
|
<option value="">-- Optional --</option>
|
||||||
@@ -956,11 +876,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Image upload (hidden for library mode) -->
|
<!-- Image upload -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="images">Bilder/Videos:</label>
|
<label for="images">Bilder:</label>
|
||||||
<input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
|
<input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
|
||||||
<div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
|
<div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
|
||||||
<!-- Add image preview area -->
|
<!-- Add image preview area -->
|
||||||
<div class="image-preview-container" id="image-preview-container"></div>
|
<div class="image-preview-container" id="image-preview-container"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1944,21 +1864,18 @@
|
|||||||
|
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
|
|
||||||
// Validate file types before preview
|
// Validate file types before preview (Strictly Images)
|
||||||
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif',
|
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
|
||||||
'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska',
|
|
||||||
'video/webm', 'video/x-flv', 'video/mp4', 'video/3gpp'];
|
|
||||||
let hasInvalidFile = false;
|
|
||||||
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
for (let i = 0; i < files.length; i++) {
|
||||||
if (!allowedTypes.includes(files[i].type)) {
|
if (!allowedTypes.includes(files[i].type)) {
|
||||||
hasInvalidFile = true;
|
|
||||||
// Clear the file input to prevent submission
|
// Clear the file input to prevent submission
|
||||||
imageInput.value = '';
|
imageInput.value = '';
|
||||||
previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>';
|
previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF</div>';
|
||||||
return; // Stop processing
|
return; // Stop processing
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
for (let i = 0; i < files.length; i++) {
|
||||||
const file = files[i];
|
const file = files[i];
|
||||||
if (file.type.startsWith('image/')) {
|
if (file.type.startsWith('image/')) {
|
||||||
@@ -1973,17 +1890,6 @@
|
|||||||
previewContainer.appendChild(preview);
|
previewContainer.appendChild(preview);
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
} else if (file.type.startsWith('video/')) {
|
|
||||||
const preview = document.createElement('div');
|
|
||||||
preview.className = 'image-preview video-preview';
|
|
||||||
preview.innerHTML = `
|
|
||||||
<div class="video-placeholder">
|
|
||||||
<div class="video-icon">🎥</div>
|
|
||||||
<div class="video-name">${file.name}</div>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="remove-image" onclick="removeImagePreview(this, ${i})">×</button>
|
|
||||||
`;
|
|
||||||
previewContainer.appendChild(preview);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -2049,34 +1955,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle duplication data if available (from sessionStorage or server)
|
|
||||||
if (typeof prefillFormWithDuplicateData === 'function') {
|
|
||||||
setTimeout(() => {
|
|
||||||
prefillFormWithDuplicateData();
|
|
||||||
}, 500); // Wait for all dropdowns to load
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize duplication data - handle both server-side and sessionStorage data
|
|
||||||
let duplicateData = null;
|
|
||||||
|
|
||||||
// First check if serverDuplicateData is defined by the script above
|
|
||||||
if (typeof serverDuplicateData !== 'undefined' && serverDuplicateData) {
|
|
||||||
console.log("Using server-provided duplicateData:", serverDuplicateData);
|
|
||||||
duplicateData = serverDuplicateData;
|
|
||||||
|
|
||||||
// Ensure images is properly handled as an array
|
|
||||||
if (duplicateData.images) {
|
|
||||||
if (typeof duplicateData.images === 'string') {
|
|
||||||
try {
|
|
||||||
duplicateData.images = JSON.parse(duplicateData.images);
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error parsing duplicate images array:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log("Parsed duplicate images successfully.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user