Compare commits
58 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 440cafb88f | |||
| 9fb56e905c | |||
| 21ad639081 | |||
| 61d726f8f4 | |||
| 2d7cec075c | |||
| fc0fdf8472 | |||
| 237c79be58 | |||
| 821636908f | |||
| 1506406adc | |||
| 567edc43a7 | |||
| 28f5991fa0 | |||
| e9b4cf0c25 | |||
| 99ec28f329 | |||
| 057c517515 | |||
| cfec33b362 | |||
| fb29fb91a9 | |||
| c3db2d9c6b | |||
| edc7b72a8f | |||
| cdf7b9c45d | |||
| 5ba0944faf | |||
| 37f514af15 | |||
| 152a3ab135 | |||
| c2c5054814 | |||
| e058bd5f46 | |||
| d58958db39 | |||
| 9452743660 | |||
| 6a3865ef24 | |||
| 96d45710ac | |||
| dd3d8649a7 | |||
| 1af2a2be06 | |||
| 8e5e434116 | |||
| 2f9a93ee65 | |||
| 91467a1e76 | |||
| 3840348a2d | |||
| cdb7319c56 | |||
| 08bea97f0f | |||
| 9164cd030d | |||
| 9227392787 | |||
| 4917c22ae3 | |||
| a2f2dd5a9e | |||
| faf270ff93 | |||
| beeb562ac4 | |||
| 0199957545 | |||
| a518adb054 | |||
| 6a94d50d28 | |||
| c90cef6dcf | |||
| b5451a4ef0 | |||
| a4afef8283 | |||
| b2951eed6c | |||
| 9a37c047c1 | |||
| 7290fb4ed1 | |||
| ee9ef3df6f | |||
| 9f3799a77f | |||
| e9006f5a07 | |||
| a11bce17c5 | |||
| 743e5b1c16 | |||
| 4e47ef0c88 | |||
| 0911b362fd |
+644
-191
File diff suppressed because it is too large
Load Diff
+155
-10
@@ -20,12 +20,30 @@ Collection Structure:
|
||||
"""
|
||||
from bson.objectid import ObjectId
|
||||
from bson.errors import InvalidId
|
||||
import uuid
|
||||
import datetime
|
||||
import Web.modules.database.settings as cfg
|
||||
from Web.modules.database.settings import MongoClient
|
||||
import Web.modules.inventarsystem.data_protection as dp
|
||||
|
||||
|
||||
def is_library_item(item):
|
||||
"""
|
||||
Ermittelt zuverlässig, ob ein Objekt zur Bibliothek gehört.
|
||||
Gibt True zurück, wenn ItemType ein Medientyp ist (Buch, Schulbuch, CD, DVD etc.)
|
||||
ODER wenn is_library explizit True ist.
|
||||
"""
|
||||
if not item:
|
||||
return False
|
||||
|
||||
# 1. Prüfe zuerst den Medientyp (ItemType)
|
||||
item_type = str(item.get('ItemType', '') or '').strip().lower()
|
||||
if item_type and item_type not in ['other', 'general', 'none', 'null']:
|
||||
return True
|
||||
|
||||
# 2. Falls ItemType 'other' ist, prüfe das is_library Flag
|
||||
return bool(item.get('is_library', False))
|
||||
|
||||
def safe_decrypt_user(encrypted_user):
|
||||
"""
|
||||
Safely decrypt an encrypted username string.
|
||||
@@ -250,7 +268,10 @@ def get_group_item_ids(id):
|
||||
|
||||
|
||||
def update_item(id, name, ort, beschreibung, images, verfuegbar, filter1, filter2, filter3,
|
||||
ansch_jahr, ansch_kost, code_4, reservierbar, isbn=None, item_type='general'):
|
||||
ansch_jahr, ansch_kost, code_4, reservierbar, isbn="", item_type='other', library_category=""):
|
||||
"""
|
||||
Aktualisiert ein Objekt in MongoDB und setzt is_library korrekt basierend auf dem Medientyp.
|
||||
"""
|
||||
try:
|
||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||
db = client[cfg.MONGODB_DB]
|
||||
@@ -258,29 +279,35 @@ def update_item(id, name, ort, beschreibung, images, verfuegbar, filter1, filter
|
||||
|
||||
old_item = items.find_one({'_id': ObjectId(id)})
|
||||
if not old_item:
|
||||
client.close()
|
||||
return False
|
||||
|
||||
series_group_id = old_item.get('SeriesGroupId')
|
||||
|
||||
# is_library automatisch anhand des neuen item_type bestimmen
|
||||
is_lib = is_library_item({'ItemType': item_type})
|
||||
|
||||
shared_update = {
|
||||
'Name': name,
|
||||
'Ort': ort,
|
||||
'Beschreibung': beschreibung,
|
||||
'Images': images,
|
||||
'Filter': filter1,
|
||||
'Filter2': filter2,
|
||||
'Filter3': filter3,
|
||||
'Images': images if isinstance(images, list) else [],
|
||||
'Filter': filter1 if isinstance(filter1, list) else [],
|
||||
'Filter2': filter2 if isinstance(filter2, list) else [],
|
||||
'Filter3': filter3 if isinstance(filter3, list) else [],
|
||||
'Anschaffungsjahr': ansch_jahr,
|
||||
'Anschaffungskosten': ansch_kost,
|
||||
'Reservierbar': reservierbar,
|
||||
'ISBN': isbn,
|
||||
'Reservierbar': bool(reservierbar),
|
||||
'ISBN': str(isbn) if isbn else '',
|
||||
'ItemType': item_type,
|
||||
'Verfuegbar': verfuegbar,
|
||||
'is_library': is_lib,
|
||||
'library_category': library_category,
|
||||
'Verfuegbar': bool(verfuegbar),
|
||||
'LastUpdated': datetime.datetime.now()
|
||||
}
|
||||
|
||||
specific_update = shared_update.copy()
|
||||
specific_update['Code_4'] = code_4
|
||||
specific_update['Code_4'] = str(code_4) if code_4 else ''
|
||||
|
||||
items.update_one({'_id': ObjectId(id)}, {'$set': specific_update})
|
||||
|
||||
@@ -1147,4 +1174,122 @@ def get_current_status(item_id, decrypt=True):
|
||||
return None
|
||||
except Exception as e:
|
||||
print(f"Error retrieving current status for item {item_id}: {e}")
|
||||
return None
|
||||
return None
|
||||
|
||||
def sync_group_codes(primary_obj_id, base_code, individual_codes_list):
|
||||
"""
|
||||
Synchronisiert die Barcodes einer Gruppe im korrekten Schema
|
||||
(angelehnt an das 'Augenmodell groß'-Vorbild).
|
||||
"""
|
||||
if not base_code:
|
||||
return False
|
||||
|
||||
# Alle Ziel-Codes zusammenführen (Basis-Code an erster Stelle)
|
||||
all_target_codes = [base_code]
|
||||
for c in individual_codes_list:
|
||||
if c and c not in all_target_codes:
|
||||
all_target_codes.append(c)
|
||||
|
||||
item_count = len(all_target_codes)
|
||||
|
||||
try:
|
||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||
db = client[cfg.MONGODB_DB]
|
||||
items = db['items']
|
||||
|
||||
primary_item = items.find_one({'_id': ObjectId(primary_obj_id)})
|
||||
if not primary_item:
|
||||
client.close()
|
||||
return False
|
||||
|
||||
group_id = primary_item.get('SeriesGroupId')
|
||||
|
||||
# Wenn es mehr als 1 Item gibt und noch keine Gruppe existiert -> Neue GroupID erzeugen
|
||||
if not group_id and item_count > 1:
|
||||
group_id = str(uuid.uuid4())
|
||||
|
||||
# Wenn es nun eine Gruppe gibt (item_count > 1)
|
||||
if item_count > 1:
|
||||
# 1. Haupt-Item (Parent) aktualisieren
|
||||
items.update_one(
|
||||
{'_id': primary_item['_id']},
|
||||
{'$set': {
|
||||
'Code_4': base_code,
|
||||
'SeriesGroupId': group_id,
|
||||
'SeriesCount': item_count,
|
||||
'SeriesPosition': 1,
|
||||
'IsGroupedSubItem': False,
|
||||
'ParentItemId': None
|
||||
}}
|
||||
)
|
||||
|
||||
# Bestehende Gruppenmitglieder laden
|
||||
existing_items = list(items.find({'SeriesGroupId': group_id}))
|
||||
existing_map = {it.get('Code_4'): it for it in existing_items if
|
||||
it.get('Code_4') and str(it['_id']) != str(primary_item['_id'])}
|
||||
|
||||
# Alle verbleibenden Sub-Codes ab Position 2 abarbeiten
|
||||
processed_sub_ids = []
|
||||
for idx, code in enumerate(all_target_codes[1:], start=2):
|
||||
if code in existing_map:
|
||||
# Existiert bereits in der Gruppe -> Nur Position und Count aktualisieren
|
||||
sub_item = existing_map[code]
|
||||
processed_sub_ids.append(sub_item['_id'])
|
||||
items.update_one(
|
||||
{'_id': sub_item['_id']},
|
||||
{'$set': {
|
||||
'SeriesCount': item_count,
|
||||
'SeriesPosition': idx,
|
||||
'IsGroupedSubItem': True,
|
||||
'ParentItemId': str(primary_item['_id'])
|
||||
}}
|
||||
)
|
||||
else:
|
||||
# Neu hinzukommender Code -> Als Klon (Sub-Item) erstellen
|
||||
new_sub = primary_item.copy()
|
||||
if '_id' in new_sub:
|
||||
del new_sub['_id']
|
||||
|
||||
new_sub.update({
|
||||
'Code_4': code,
|
||||
'SeriesGroupId': group_id,
|
||||
'SeriesCount': item_count,
|
||||
'SeriesPosition': idx,
|
||||
'IsGroupedSubItem': True,
|
||||
'ParentItemId': str(primary_item['_id']),
|
||||
'LastUpdated': primary_item.get('LastUpdated')
|
||||
})
|
||||
inserted_res = items.insert_one(new_sub)
|
||||
processed_sub_ids.append(inserted_res.inserted_id)
|
||||
|
||||
# Nicht mehr benötigte Sub-Items aus dieser Gruppe entfernen
|
||||
for code, sub_item in existing_map.items():
|
||||
if sub_item['_id'] not in processed_sub_ids:
|
||||
items.delete_one({'_id': sub_item['_id']})
|
||||
|
||||
else:
|
||||
# Fall: Nur 1 einziges Item (keine Gruppe / Gruppe aufgelöst)
|
||||
# Eventuelle alte Sub-Items dieser Gruppe löschen
|
||||
if group_id:
|
||||
items.delete_many({
|
||||
'SeriesGroupId': group_id,
|
||||
'_id': {'$ne': primary_item['_id']}
|
||||
})
|
||||
|
||||
items.update_one(
|
||||
{'_id': primary_item['_id']},
|
||||
{'$set': {
|
||||
'Code_4': base_code,
|
||||
'SeriesGroupId': None,
|
||||
'SeriesCount': 1,
|
||||
'SeriesPosition': 1,
|
||||
'IsGroupedSubItem': False,
|
||||
'ParentItemId': None
|
||||
}}
|
||||
)
|
||||
|
||||
client.close()
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"Error syncing group codes: {e}")
|
||||
return False
|
||||
@@ -211,6 +211,7 @@ PERMISSION_PRESETS = {
|
||||
},
|
||||
'pages': {
|
||||
'home': True,
|
||||
'home_admin': True,
|
||||
'tutorial_page': True,
|
||||
'my_borrowed_items': 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)
|
||||
db = _get_tenant_db(client)
|
||||
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:
|
||||
result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': update_data})
|
||||
result = users.update_one({'username': username}, {'$set': update_data})
|
||||
|
||||
client.close()
|
||||
return result.matched_count > 0
|
||||
@@ -384,7 +385,7 @@ def get_favorites(username):
|
||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||
db = _get_tenant_db(client)
|
||||
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()
|
||||
if not user:
|
||||
return []
|
||||
@@ -399,7 +400,7 @@ def add_favorite(username, item_id):
|
||||
db = _get_tenant_db(client)
|
||||
users = db['users']
|
||||
users.update_one(
|
||||
{'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
|
||||
{'$or': [{'Username': username}, {'username': username}]},
|
||||
{'$addToSet': {'favorites': ObjectId(item_id)}}
|
||||
)
|
||||
client.close()
|
||||
@@ -414,7 +415,7 @@ def remove_favorite(username, item_id):
|
||||
db = _get_tenant_db(client)
|
||||
users = db['users']
|
||||
users.update_one(
|
||||
{'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
|
||||
{'$or': [{'Username': username}, {'username': username}]},
|
||||
{'$pull': {'favorites': ObjectId(item_id)}}
|
||||
)
|
||||
client.close()
|
||||
@@ -496,7 +497,7 @@ def check_nm_pwd(username, password):
|
||||
db = client[db_name]
|
||||
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)
|
||||
|
||||
if user_record is None:
|
||||
@@ -507,8 +508,6 @@ def check_nm_pwd(username, password):
|
||||
default_users = client[cfg.MONGODB_DB]['users']
|
||||
user_record_fallback = default_users.find_one(
|
||||
{'$or': [
|
||||
{'Username': dp.encrypt_text(username)},
|
||||
{'username': dp.encrypt_text(username)},
|
||||
{'Username': username},
|
||||
{'username': username},
|
||||
]}
|
||||
@@ -650,7 +649,7 @@ def add_user(
|
||||
safe_last_name = last_name.strip() if last_name else ''
|
||||
|
||||
user_doc = {
|
||||
'Username': dp.encrypt_text(username),
|
||||
'Username': username,
|
||||
'Password': hashing(password),
|
||||
'Admin': (permission_preset == "full_access"),
|
||||
'active_ausleihung': None,
|
||||
@@ -711,9 +710,9 @@ def make_admin(username):
|
||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||
db = _get_tenant_db(client)
|
||||
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:
|
||||
result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
|
||||
result = users.update_one({'username': username}, {'$set': {'Admin': True}})
|
||||
client.close()
|
||||
return result.matched_count > 0
|
||||
|
||||
@@ -723,9 +722,9 @@ def remove_admin(username):
|
||||
client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
|
||||
db = _get_tenant_db(client)
|
||||
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:
|
||||
result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
|
||||
result = users.update_one({'username': username}, {'$set': {'Admin': False}})
|
||||
client.close()
|
||||
return result.matched_count > 0
|
||||
|
||||
@@ -737,7 +736,7 @@ def get_user(username):
|
||||
def find_in_db(database_name):
|
||||
db = client[database_name]
|
||||
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()
|
||||
if tenant_db:
|
||||
@@ -773,12 +772,12 @@ def update_active_ausleihung(username, id_item, ausleihung):
|
||||
users = db['users']
|
||||
|
||||
result = users.update_one(
|
||||
{'Username': dp.encrypt_text(username)},
|
||||
{'Username': username},
|
||||
{'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
|
||||
)
|
||||
if result.matched_count == 0:
|
||||
users.update_one(
|
||||
{'username': dp.encrypt_text(username)},
|
||||
{'username': username},
|
||||
{'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
|
||||
)
|
||||
client.close()
|
||||
@@ -791,7 +790,7 @@ def get_active_ausleihung(username):
|
||||
db = _get_tenant_db(client)
|
||||
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()
|
||||
|
||||
if not user:
|
||||
@@ -806,7 +805,7 @@ def has_active_borrowing(username):
|
||||
db = _get_tenant_db(client)
|
||||
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()
|
||||
|
||||
if not user:
|
||||
@@ -823,9 +822,9 @@ def delete_user(username):
|
||||
db = _get_tenant_db(client)
|
||||
users = db['users']
|
||||
|
||||
result = users.delete_one({'username': dp.encrypt_text(username)})
|
||||
result = users.delete_one({'username': username})
|
||||
if result.deleted_count == 0:
|
||||
result = users.delete_one({'Username': dp.encrypt_text(username)})
|
||||
result = users.delete_one({'Username': username})
|
||||
|
||||
client.close()
|
||||
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}}
|
||||
|
||||
result = users.update_one({'username': dp.encrypt_text(username)}, update_data)
|
||||
result = users.update_one({'username': username}, update_data)
|
||||
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()
|
||||
return result.modified_count > 0
|
||||
@@ -856,7 +855,7 @@ def get_name(username):
|
||||
db = _get_tenant_db(client)
|
||||
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()
|
||||
|
||||
if not user or not user.get("name"):
|
||||
@@ -871,7 +870,7 @@ def get_last_name(username):
|
||||
db = _get_tenant_db(client)
|
||||
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()
|
||||
|
||||
if not user or not user.get("last_name"):
|
||||
@@ -906,12 +905,12 @@ def update_password(username, new_password):
|
||||
hashed_password = hashing(new_password)
|
||||
|
||||
result = users.update_one(
|
||||
{'Username': dp.encrypt_text(username)},
|
||||
{'Username': username},
|
||||
{'$set': {'Password': hashed_password}}
|
||||
)
|
||||
if result.matched_count == 0:
|
||||
result = users.update_one(
|
||||
{'username': dp.encrypt_text(username)},
|
||||
{'username': username},
|
||||
{'$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 ''
|
||||
|
||||
result = users.update_one(
|
||||
{'Username': dp.encrypt_text(username)},
|
||||
{'Username': username},
|
||||
{'$set': {'name': safe_name, 'last_name': safe_last_name}}
|
||||
)
|
||||
if result.matched_count == 0:
|
||||
result = users.update_one(
|
||||
{'username': dp.encrypt_text(username)},
|
||||
{'username': username},
|
||||
{'$set': {'name': safe_name, 'last_name': safe_last_name}}
|
||||
)
|
||||
|
||||
|
||||
@@ -1,288 +0,0 @@
|
||||
<!--
|
||||
Copyright 2025-2026 AIIrondev
|
||||
|
||||
Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
|
||||
See Legal/LICENSE for the full license text.
|
||||
Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
|
||||
For commercial licensing inquiries: https://github.com/AIIrondev
|
||||
-->
|
||||
<!-- Edit Item Functions -->
|
||||
<script>
|
||||
// Function to check if a file is a video
|
||||
function isVideoFile(filename) {
|
||||
const videoExtensions = ['.mp4', '.mov', '.avi', '.mkv', '.webm', '.flv', '.m4v', '.3gp'];
|
||||
const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
|
||||
return videoExtensions.includes(extension);
|
||||
}
|
||||
|
||||
// Load location options for edit modal
|
||||
function loadLocationOptions() {
|
||||
fetch('/get_predefined_locations')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ortSelect = document.getElementById('edit-location');
|
||||
if (ortSelect) {
|
||||
// Clear existing options except the first one
|
||||
while (ortSelect.children.length > 1) {
|
||||
ortSelect.removeChild(ortSelect.lastChild);
|
||||
}
|
||||
|
||||
// Add new options - data.locations contains the array
|
||||
data.locations.forEach(location => {
|
||||
const option = document.createElement('option');
|
||||
option.value = location;
|
||||
option.textContent = location;
|
||||
ortSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading location options:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Edit modal functions
|
||||
function openEditModal(itemId) {
|
||||
if (typeof openEditModalFromServer === 'function') {
|
||||
openEditModalFromServer(itemId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the item data from allItems array
|
||||
const item = allItems.find(i => i._id === itemId);
|
||||
if (!item) {
|
||||
console.error('Item not found:', itemId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Populate the edit form with current item data
|
||||
document.getElementById('edit-item-id').value = item._id;
|
||||
document.getElementById('edit-name').value = item.Name || '';
|
||||
document.getElementById('edit-description').value = item.Beschreibung || '';
|
||||
document.getElementById('edit-code4').value = item.Code_4 || '';
|
||||
document.getElementById('edit-year').value = item.Anschaffungsjahr || '';
|
||||
document.getElementById('edit-cost').value = item.Anschaffungskosten || '';
|
||||
|
||||
// Set reservable status (default to true if undefined)
|
||||
const reservierbarCheckbox = document.getElementById('edit-reservierbar');
|
||||
if (reservierbarCheckbox) {
|
||||
reservierbarCheckbox.checked = item.Reservierbar !== false;
|
||||
}
|
||||
|
||||
// Load location options
|
||||
loadLocationOptions();
|
||||
|
||||
// Set the current location
|
||||
setTimeout(() => {
|
||||
const locationSelect = document.getElementById('edit-location');
|
||||
if (locationSelect && item.Ort) {
|
||||
locationSelect.value = item.Ort;
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Handle filter arrays - set current values
|
||||
const filter1Array = Array.isArray(item.Filter) ? item.Filter : (item.Filter ? [item.Filter] : []);
|
||||
const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : (item.Filter2 ? [item.Filter2] : []);
|
||||
const filter3Array = Array.isArray(item.Filter3) ? item.Filter3 : (item.Filter3 ? [item.Filter3] : []);
|
||||
|
||||
// Set filter dropdowns (up to 4 each)
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
// Filter 1
|
||||
const filter1Select = document.getElementById(`edit-filter1-${i}`);
|
||||
if (filter1Select) {
|
||||
filter1Select.value = filter1Array[i-1] || '';
|
||||
}
|
||||
|
||||
// Filter 2
|
||||
const filter2Select = document.getElementById(`edit-filter2-${i}`);
|
||||
if (filter2Select) {
|
||||
filter2Select.value = filter2Array[i-1] || '';
|
||||
}
|
||||
|
||||
// Filter 3
|
||||
const filter3Select = document.getElementById(`edit-filter3-${i}`);
|
||||
if (filter3Select) {
|
||||
filter3Select.value = filter3Array[i-1] || '';
|
||||
}
|
||||
}
|
||||
|
||||
// Populate existing images
|
||||
populateExistingImages(item.Images || []);
|
||||
|
||||
// Show the modal
|
||||
document.getElementById('edit-modal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
document.getElementById('edit-modal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Function to add new location (for edit modal)
|
||||
function addNewLocation(prefix) {
|
||||
// Use different input IDs based on whether we're in edit mode
|
||||
const inputId = prefix === 'edit' ? 'edit-new-location-input' : 'new-location-input';
|
||||
const selectId = prefix === 'edit' ? 'edit-location' : 'ort';
|
||||
|
||||
const newLocationInput = document.getElementById(inputId);
|
||||
const newLocation = newLocationInput.value.trim();
|
||||
|
||||
if (!newLocation) {
|
||||
alert('Bitte geben Sie einen Ort ein.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Add to dropdown
|
||||
const ortSelect = document.getElementById(selectId);
|
||||
const option = document.createElement('option');
|
||||
option.value = newLocation;
|
||||
option.textContent = newLocation;
|
||||
ortSelect.appendChild(option);
|
||||
ortSelect.value = newLocation;
|
||||
|
||||
// Hide the input field
|
||||
document.getElementById(prefix + '-new-location-container').style.display = 'none';
|
||||
newLocationInput.value = '';
|
||||
|
||||
// Save to server
|
||||
fetch('/add_location_value', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: 'value=' + encodeURIComponent(newLocation)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (!data.success) {
|
||||
console.warn('Failed to save location to server:', data.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error saving location:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to cancel adding a new location
|
||||
function cancelAddLocation(prefix) {
|
||||
const containerId = prefix === 'edit' ? 'edit-new-location-container' : 'new-location-container';
|
||||
const inputId = prefix === 'edit' ? 'edit-new-location-input' : 'new-location-input';
|
||||
document.getElementById(containerId).style.display = 'none';
|
||||
document.getElementById(inputId).value = '';
|
||||
}
|
||||
|
||||
// Function to populate existing images in edit modal
|
||||
function populateExistingImages(images) {
|
||||
const previewContainer = document.getElementById('edit-image-preview-container');
|
||||
if (!previewContainer) return;
|
||||
|
||||
previewContainer.innerHTML = '';
|
||||
|
||||
if (!images || images.length === 0) {
|
||||
previewContainer.innerHTML = '<p>Keine Bilder vorhanden</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
images.forEach((imageName, index) => {
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'image-preview-item';
|
||||
|
||||
const isVideo = isVideoFile(imageName);
|
||||
const mediaHtml = isVideo
|
||||
? `<video src="/uploads/${imageName}" style="max-width: 150px; max-height: 150px; object-fit: cover;" controls preload="metadata"></video>`
|
||||
: `<img src="/uploads/${imageName}" alt="Image ${index + 1}" style="max-width: 150px; max-height: 150px; object-fit: cover;">`;
|
||||
|
||||
preview.innerHTML = `
|
||||
${mediaHtml}
|
||||
<div class="image-controls">
|
||||
<button type="button" onclick="removeExistingImage('${imageName}', this)" style="background: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; margin-left: 10px;">Entfernen</button>
|
||||
</div>
|
||||
`;
|
||||
previewContainer.appendChild(preview);
|
||||
|
||||
// Add hidden input for the image
|
||||
const hiddenInput = document.createElement('input');
|
||||
hiddenInput.type = 'hidden';
|
||||
hiddenInput.name = 'existing_images';
|
||||
hiddenInput.value = imageName;
|
||||
previewContainer.appendChild(hiddenInput);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to remove an existing image
|
||||
function removeExistingImage(imageName, button) {
|
||||
try {
|
||||
// First, determine context - are we in edit mode or main view?
|
||||
const inEditMode = !!document.getElementById('edit-item-form');
|
||||
|
||||
// Always remove the preview element (works in both contexts)
|
||||
const previewItem = button.closest('.image-preview-item');
|
||||
if (previewItem) {
|
||||
previewItem.remove();
|
||||
}
|
||||
|
||||
// If we're in edit mode, handle form inputs
|
||||
if (inEditMode) {
|
||||
// Find and remove the corresponding hidden input in the edit form
|
||||
const editForm = document.getElementById('edit-item-form');
|
||||
|
||||
if (editForm) {
|
||||
// Remove from existing images
|
||||
const existingInputs = editForm.querySelectorAll('input[name="existing_images"]');
|
||||
existingInputs.forEach(input => {
|
||||
if (input.value === imageName) {
|
||||
input.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Add to removed images
|
||||
const removedInput = document.createElement('input');
|
||||
removedInput.type = 'hidden';
|
||||
removedInput.name = 'removed_images';
|
||||
removedInput.value = imageName;
|
||||
editForm.appendChild(removedInput);
|
||||
}
|
||||
} else {
|
||||
// In main view, we may need different logic
|
||||
console.log(`Image ${imageName} removed from display in main view`);
|
||||
// Add any main view specific handling here
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error in removeExistingImage: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Validate file types for image uploads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if we're in the edit item context
|
||||
if (!document.getElementById('edit-item-form')) {
|
||||
console.log('Edit item form not found, skipping edit item functions initialization');
|
||||
return; // Exit early if we're not in the edit item context
|
||||
}
|
||||
|
||||
const imageInput = document.getElementById('edit-new-images');
|
||||
const previewContainer = document.getElementById('edit-image-preview-container');
|
||||
|
||||
if (imageInput) {
|
||||
imageInput.addEventListener('change', function(e) {
|
||||
// Validate file types before preview
|
||||
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'];
|
||||
const files = this.files;
|
||||
let hasInvalidFile = false;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
if (!allowedTypes.includes(files[i].type)) {
|
||||
hasInvalidFile = true;
|
||||
// Clear the file input to prevent submission
|
||||
this.value = '';
|
||||
alert('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');
|
||||
return; // Stop processing
|
||||
}
|
||||
}
|
||||
|
||||
// Continue with regular preview handling...
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,509 @@
|
||||
<!--
|
||||
Copyright 2025-2026 AIIrondev
|
||||
Licensed under the Inventarsystem EULA.
|
||||
-->
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ page_title|default('Artikel bearbeiten') }} - Inventarsystem{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.edit-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: var(--ui-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.edit-form h1 {
|
||||
color: var(--ui-text);
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.filter-inputs {
|
||||
background-color: var(--ui-surface-soft);
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.filter-inputs h3 {
|
||||
color: var(--ui-text);
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.multi-filter {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter-dropdown-select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.isbn-input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.isbn-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fetch-isbn-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.fetch-isbn-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Scanner Elements */
|
||||
#code4-scanner video, #code4-scanner canvas,
|
||||
#isbn-scanner video, #isbn-scanner canvas {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#code4-scanner canvas, #isbn-scanner canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#code4-scanner, #isbn-scanner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Image Management */
|
||||
.existing-images-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.existing-image-card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.existing-image-card img {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.existing-image-card label {
|
||||
font-size: 0.8em;
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.add-new-btn {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.edit-new-location-container {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="edit-container">
|
||||
<div class="edit-form">
|
||||
<h1>{{ page_title|default('Artikel bearbeiten') }}</h1>
|
||||
<form method="POST" action="{{ url_for('item_edit', id=item._id) }}" enctype="multipart/form-data">
|
||||
<input type="hidden" name="item_id" value="{{ item._id }}">
|
||||
|
||||
{% if show_library_features %}
|
||||
<!-- ================= LIBRARY SPECIFIC FIELDS ================= -->
|
||||
<div class="form-group">
|
||||
<label for="isbn">ISBN / Barcode:</label>
|
||||
<div class="isbn-input-group">
|
||||
<input type="text" id="isbn" name="isbn" value="{{ item.ISBN|default('') }}" placeholder="ISBN oder Barcode eingeben...">
|
||||
<button type="button" id="scan-isbn-btn" class="fetch-isbn-button">Barcode scannen</button>
|
||||
<button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('edit')">Informationen abrufen</button>
|
||||
</div>
|
||||
<div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
|
||||
<small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;"></small>
|
||||
<div id="book-info-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="filter-inputs" style="margin-bottom: 20px;">
|
||||
<h3>Medientyp</h3>
|
||||
<div class="form-group">
|
||||
<select name="item_type_input" id="item_type_input">
|
||||
<option value="Buch" {% if item.ItemType == 'Buch' %}selected{% endif %}>Buch</option>
|
||||
<option value="Schulbuch" {% if item.ItemType == 'Schulbuch' %}selected{% endif %}>Schulbuch</option>
|
||||
<option value="CD" {% if item.ItemType == 'CD' %}selected{% endif %}>CD</option>
|
||||
<option value="DVD" {% if item.ItemType == 'DVD' %}selected{% endif %}>DVD</option>
|
||||
<option value="Sonstiges" {% if item.ItemType == 'Sonstiges' %}selected{% endif %}>Sonstiges</option>
|
||||
</select>
|
||||
</div>
|
||||
<h3>Bibliotheks-Kategorie:</h3>
|
||||
<div class="form-group">
|
||||
<input type="text" name="library_category" id="library_category" value="{{ item.library_category|default('') }}" placeholder="z.B. Belletristik, Sachbücher, etc.">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- ================= COMMON CORE FIELDS ================= -->
|
||||
<div class="form-group">
|
||||
<label for="name">Name / Titel:</label>
|
||||
<input type="text" id="name" name="name" value="{{ item.Name|default('') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ort">Ort / Standort:</label>
|
||||
<select id="ort" name="ort" data-selected="{{ item.Ort|default('') }}" required>
|
||||
<option value="">-- Bitte Ort auswählen --</option>
|
||||
{% if item.Ort %}
|
||||
<option value="{{ item.Ort }}" selected>{{ item.Ort }}</option>
|
||||
{% endif %}
|
||||
</select>
|
||||
<button type="button" class="add-new-btn" id="add-new-location-btn">Neuen Ort hinzufügen</button>
|
||||
<div id="new-location-container" class="edit-new-location-container">
|
||||
<input type="text" id="new-location-input" placeholder="Neuen Ort eingeben">
|
||||
<button type="button" onclick="addNewLocation()">Hinzufügen</button>
|
||||
<button type="button" onclick="cancelAddLocation()">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="beschreibung">Beschreibung:</label>
|
||||
<textarea id="beschreibung" name="beschreibung" required>{{ item.Beschreibung|default('') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="primary_code_group">
|
||||
<label for="code_4">Basis-Code (Haupt-Barcode)</label>
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<input type="text" id="code_4" name="code_4" class="form-control" value="{{ item.Code_4|default('') }}" required>
|
||||
<button type="button" id="scan-code4-btn" class="fetch-isbn-button">Barcode scannen</button>
|
||||
</div>
|
||||
<div id="code4-scanner" style="display:none; margin-top: 10px;"></div>
|
||||
<small id="code4-scan-status" class="form-text text-muted"></small>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="individual_codes_group">
|
||||
<label for="individual_codes">Weitere Einzelcodes der Gruppe (je Zeile ein Code)</label>
|
||||
<textarea id="individual_codes" name="individual_codes" rows="4" class="form-control" placeholder="z.B. ABC-001 ABC-002">{{ item.IndividualCodes|default('') }}</textarea>
|
||||
<small style="display:block; color:#666; margin-top: 5px;">Der Basis-Code steht oben. Alle weiteren Gruppenmitglieder werden hier untereinander aufgeführt.</small>
|
||||
</div>
|
||||
|
||||
{% if not show_library_features %}
|
||||
<!-- ================= SYSTEM FILTERS 1-3 (INVENTORY / OTHER ITEMS ONLY) ================= -->
|
||||
<div class="filter-inputs">
|
||||
<h3>Unterrichtsfach (Filter 1):</h3>
|
||||
<div class="multi-filter">
|
||||
{% for idx in range(4) %}
|
||||
<div class="form-group">
|
||||
<label for="filter1-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
|
||||
<select id="filter1-{{ idx + 1 }}" name="filter" class="filter-dropdown-select" data-selected="{{ item.Filter[idx] if item.Filter and item.Filter|length > idx else '' }}">
|
||||
<option value="">-- Optional --</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h3>Jahrgangsstufe (Filter 2):</h3>
|
||||
<div class="multi-filter">
|
||||
{% for idx in range(4) %}
|
||||
<div class="form-group">
|
||||
<label for="filter2-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
|
||||
<select id="filter2-{{ idx + 1 }}" name="filter2" class="filter-dropdown-select" data-selected="{{ item.Filter2[idx] if item.Filter2 and item.Filter2|length > idx else '' }}">
|
||||
<option value="">-- Optional --</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h3>Schlagwort (Filter 3):</h3>
|
||||
<div class="multi-filter">
|
||||
{% for idx in range(4) %}
|
||||
<div class="form-group">
|
||||
<label for="filter3-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
|
||||
<input type="text" id="filter3-{{ idx + 1 }}" name="filter3" value="{{ item.Filter3[idx] if item.Filter3 and item.Filter3|length > idx else '' }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- ================= DATES & FINANCIALS ================= -->
|
||||
<div class="form-group">
|
||||
<label for="anschaffungsjahr">Anschaffungsjahr:</label>
|
||||
<input type="date" id="anschaffungsjahr" name="anschaffungsjahr" value="{{ item.Anschaffungsjahr|default('') }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="anschaffungskosten">Anschaffungskosten (€):</label>
|
||||
<input type="text" id="anschaffungskosten" name="anschaffungskosten" value="{{ item.Anschaffungskosten|default('') }}">
|
||||
</div>
|
||||
|
||||
{% if not show_library_features %}
|
||||
<!-- ================= INVENTORY IMAGE MANAGEMENT ================= -->
|
||||
<div class="form-group">
|
||||
<label>Bestehende Bilder behalten:</label>
|
||||
{% if item.Images and item.Images|length > 0 %}
|
||||
<div class="existing-images-grid">
|
||||
{% for img in item.Images %}
|
||||
<div class="existing-image-card">
|
||||
<img src="{{ url_for('uploaded_file', filename=img) }}" alt="Bild">
|
||||
<label>
|
||||
<input type="checkbox" name="existing_images" value="{{ img }}" checked>
|
||||
Behalten
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color:#777; font-size:0.9em;">Keine Bilder vorhanden.</p>
|
||||
{% endif %}
|
||||
|
||||
<label for="images" style="margin-top:15px;">Neue Bilder/Videos hinzufügen:</label>
|
||||
<input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm" multiple>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reservierbar" style="display:inline-block; width:auto; margin-right:10px;">Reservierbar:</label>
|
||||
<input type="checkbox" id="reservierbar" name="reservierbar" style="width:auto;" {% if item.Reservierbar %}checked{% endif %}>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">Änderungen speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
|
||||
<script>
|
||||
let scannerRunning = false;
|
||||
let activeScannerCallback = null;
|
||||
let code4LastScanned = '';
|
||||
let code4LastScannedAt = 0;
|
||||
|
||||
function loadAndSelectFilterValues(filterNumber) {
|
||||
fetch(`/get_predefined_filter_values/${filterNumber}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const select = document.getElementById(`filter${filterNumber}-${i}`);
|
||||
if (!select) continue;
|
||||
|
||||
const selectedValue = select.getAttribute('data-selected') || '';
|
||||
|
||||
data.values.forEach(val => {
|
||||
if (!val || String(val).trim() === '') return;
|
||||
const opt = document.createElement('option');
|
||||
opt.value = val;
|
||||
opt.textContent = val;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
if (selectedValue && !Array.from(select.options).some(o => o.value === selectedValue)) {
|
||||
const customOpt = document.createElement('option');
|
||||
customOpt.value = selectedValue;
|
||||
customOpt.textContent = selectedValue;
|
||||
select.appendChild(customOpt);
|
||||
}
|
||||
|
||||
select.value = selectedValue;
|
||||
}
|
||||
})
|
||||
.catch(err => console.error(`Error loading Filter ${filterNumber}:`, err));
|
||||
}
|
||||
|
||||
function loadLocationOptions() {
|
||||
fetch('/get_predefined_locations')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const select = document.getElementById('ort');
|
||||
if (!select) return;
|
||||
const currentVal = select.getAttribute('data-selected') || select.value;
|
||||
|
||||
data.locations.forEach(loc => {
|
||||
if (!Array.from(select.options).some(o => o.value === loc)) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = loc;
|
||||
opt.textContent = loc;
|
||||
select.appendChild(opt);
|
||||
}
|
||||
});
|
||||
|
||||
select.value = currentVal;
|
||||
})
|
||||
.catch(err => console.error('Error loading locations:', err));
|
||||
}
|
||||
|
||||
function addNewLocation() {
|
||||
const input = document.getElementById('new-location-input');
|
||||
const val = input.value.trim();
|
||||
if (!val) return;
|
||||
const select = document.getElementById('ort');
|
||||
const opt = document.createElement('option');
|
||||
opt.value = val;
|
||||
opt.textContent = val;
|
||||
opt.selected = true;
|
||||
select.appendChild(opt);
|
||||
document.getElementById('new-location-container').style.display = 'none';
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
function cancelAddLocation() {
|
||||
document.getElementById('new-location-container').style.display = 'none';
|
||||
document.getElementById('new-location-input').value = '';
|
||||
}
|
||||
|
||||
function runEngineInitialization(targetSelector, activeCallback, completionMsg, errorStatusSetter) {
|
||||
if (scannerRunning) { Quagga.stop(); scannerRunning = false; }
|
||||
activeScannerCallback = activeCallback;
|
||||
|
||||
Quagga.init({
|
||||
inputStream: { name: "Live", type: "LiveStream", target: document.querySelector(targetSelector), constraints: { width: 640, height: 480, facingMode: "environment" } },
|
||||
decoder: { readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"] }
|
||||
}, function(err) {
|
||||
if (err) { errorStatusSetter("Kamera-Fehler.", true); return; }
|
||||
Quagga.start(); scannerRunning = true; errorStatusSetter(completionMsg, false);
|
||||
});
|
||||
}
|
||||
|
||||
function killScannerHardware() {
|
||||
if (!scannerRunning) return;
|
||||
Quagga.stop(); scannerRunning = false; activeScannerCallback = null;
|
||||
}
|
||||
|
||||
Quagga.onDetected(function(data) {
|
||||
if (!data || !data.codeResult || !data.codeResult.code) return;
|
||||
if (typeof activeScannerCallback === "function") activeScannerCallback(String(data.codeResult.code).trim());
|
||||
});
|
||||
|
||||
function startCode4Scanner() {
|
||||
const scannerBox = document.getElementById('code4-scanner');
|
||||
const scanBtn = document.getElementById('scan-code4-btn');
|
||||
const baseField = document.getElementById('code_4');
|
||||
const indArea = document.getElementById('individual_codes');
|
||||
|
||||
if (scannerBox.style.display !== 'none') {
|
||||
killScannerHardware(); scannerBox.style.display = 'none'; scanBtn.textContent = 'Barcode scannen'; return;
|
||||
}
|
||||
|
||||
scannerBox.style.display = 'block'; scanBtn.textContent = 'Scanner stoppen';
|
||||
runEngineInitialization('#code4-scanner', function(decodedText) {
|
||||
const now = Date.now();
|
||||
if (decodedText === code4LastScanned && (now - code4LastScannedAt) < 1500) return;
|
||||
code4LastScanned = decodedText; code4LastScannedAt = now;
|
||||
|
||||
killScannerHardware(); scannerBox.style.display = 'none'; scanBtn.textContent = 'Barcode scannen';
|
||||
|
||||
if (!baseField.value.trim()) {
|
||||
baseField.value = decodedText;
|
||||
} else {
|
||||
let codes = indArea.value.split('\n').map(c => c.trim()).filter(c => c);
|
||||
if (!codes.includes(decodedText) && baseField.value.trim() !== decodedText) {
|
||||
codes.push(decodedText);
|
||||
indArea.value = codes.join('\n');
|
||||
}
|
||||
}
|
||||
}, 'Scanner läuft...', msg => { document.getElementById('code4-scan-status').textContent = msg; });
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadLocationOptions();
|
||||
|
||||
// Load Filter options if elements exist on page
|
||||
if (document.getElementById('filter1-1')) {
|
||||
loadAndSelectFilterValues(1);
|
||||
loadAndSelectFilterValues(2);
|
||||
}
|
||||
|
||||
const scanCodeBtn = document.getElementById('scan-code4-btn');
|
||||
if (scanCodeBtn) scanCodeBtn.addEventListener('click', startCode4Scanner);
|
||||
|
||||
const addLocBtn = document.getElementById('add-new-location-btn');
|
||||
if (addLocBtn) addLocBtn.addEventListener('click', () => {
|
||||
const c = document.getElementById('new-location-container');
|
||||
c.style.display = c.style.display === 'none' ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -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 %}
|
||||
+376
-284
File diff suppressed because it is too large
Load Diff
+67
-497
@@ -1951,11 +1951,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Edit new location container */
|
||||
.edit-new-location-container {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Modal dialog styling */
|
||||
.modal-dialog-white {
|
||||
@@ -1969,11 +1964,6 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Element text colors for better visibility */
|
||||
.edit-button, .duplicate-button, .generate-qr-button {
|
||||
color: var(--ui-title) !important;
|
||||
}
|
||||
|
||||
/* Standardized button styles across the application */
|
||||
.search-button, .scan-button, .filter-toggle, .clear-filter,
|
||||
.add-new-btn, .popup-close-button, .prev-image-button, .next-image-button,
|
||||
@@ -2474,187 +2464,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add the edit modal form -->
|
||||
{% if current_permissions.actions.get('can_edit', False) %}
|
||||
<div id="edit-modal" class="item-modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-modal" onclick="closeEditModal()">×</span>
|
||||
<h2>Objekt bearbeiten</h2>
|
||||
<form id="edit-item-form" method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" id="edit-item-id" name="id">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-name">Name:</label>
|
||||
<input type="text" id="edit-name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-location">Ort:</label>
|
||||
<select id="edit-location" name="ort" required>
|
||||
<option value="">-- Bitte Ort auswählen --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
<button type="button" class="add-new-btn" id="edit-add-new-location-btn">
|
||||
Neuen Ort hinzufügen
|
||||
</button>
|
||||
<div id="edit-new-location-container" class="edit-new-location-container">
|
||||
<input type="text" id="edit-new-location-input" placeholder="Neuen Ort eingeben">
|
||||
<button type="button" onclick="addNewLocation('edit')">Hinzufügen</button>
|
||||
<button type="button" onclick="cancelAddLocation('edit')">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-description">Beschreibung:</label>
|
||||
<textarea id="edit-description" name="beschreibung" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Updated filter inputs for edit form with dropdowns -->
|
||||
<div class="filter-inputs">
|
||||
<h3>Unterrichtsfach:</h3>
|
||||
<div class="multi-filter">
|
||||
<div class="form-group">
|
||||
<label for="edit-filter1-1">Wert 1:</label>
|
||||
<select id="edit-filter1-1" name="filter" class="filter-dropdown-select">
|
||||
<option value="">-- Bitte auswählen --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter1-2">Wert 2:</label>
|
||||
<select id="edit-filter1-2" name="filter" class="filter-dropdown-select">
|
||||
<option value="">-- Optional --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter1-3">Wert 3:</label>
|
||||
<select id="edit-filter1-3" name="filter" class="filter-dropdown-select">
|
||||
<option value="">-- Optional --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter1-4">Wert 4:</label>
|
||||
<select id="edit-filter1-4" name="filter" class="filter-dropdown-select">
|
||||
<option value="">-- Optional --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Jahrgangsstufe:</h3>
|
||||
<div class="multi-filter">
|
||||
<div class="form-group">
|
||||
<label for="edit-filter2-1">Wert 1:</label>
|
||||
<select id="edit-filter2-1" name="filter2" class="filter-dropdown-select">
|
||||
<option value="">-- Bitte auswählen --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter2-2">Wert 2:</label>
|
||||
<select id="edit-filter2-2" name="filter2" class="filter-dropdown-select">
|
||||
<option value="">-- Optional --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter2-3">Wert 3:</label>
|
||||
<select id="edit-filter2-3" name="filter2" class="filter-dropdown-select">
|
||||
<option value="">-- Optional --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter2-4">Wert 4:</label>
|
||||
<select id="edit-filter2-4" name="filter2" class="filter-dropdown-select">
|
||||
<option value="">-- Optional --</option>
|
||||
<!-- Options will be loaded by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Schlagwort:</h3>
|
||||
<div class="multi-filter">
|
||||
<div class="form-group">
|
||||
<label for="edit-filter3-1">Wert 1:</label>
|
||||
<input type="text" id="edit-filter3-1" name="filter3">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter3-2">Wert 2:</label>
|
||||
<input type="text" id="edit-filter3-2" name="filter3">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter3-3">Wert 3:</label>
|
||||
<input type="text" id="edit-filter3-3" name="filter3">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-filter3-4">Wert 4:</label>
|
||||
<input type="text" id="edit-filter3-4" name="filter3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-year">Anschaffungsjahr:</label>
|
||||
<input type="date" id="edit-year" name="anschaffungsjahr">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-cost">Anschaffungskosten (€):</label>
|
||||
<input id="edit-cost" name="anschaffungskosten">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-code4">Code:</label>
|
||||
<div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
|
||||
<input id="edit-code4" name="code_4">
|
||||
<button type="button" class="fetch-isbn-button" id="scan-edit-code-btn">Barcode scannen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-reservierbar" style="display:inline-block; width:auto; margin-right:10px;">Reservierbar:</label>
|
||||
<input type="checkbox" id="edit-reservierbar" name="reservierbar" style="width:auto;">
|
||||
<small style="display:block; color:#666;">Wenn deaktiviert, kann der Artikel nicht im Voraus reserviert werden.</small>
|
||||
</div>
|
||||
|
||||
<!-- New section for managing images -->
|
||||
<div class="form-group">
|
||||
<label>Vorhandene Bilder:</label>
|
||||
<div id="edit-existing-images" class="existing-images-container">
|
||||
<!-- Existing images will be added here dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-new-images">
|
||||
<span>Neue Bilder/Videos hinzufügen:</span>
|
||||
<span>(Bilder/Videos werden vom Original übernommen)</span>
|
||||
</label>
|
||||
<input type="file" id="edit-new-images" name="new_images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
|
||||
<div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
|
||||
<!-- Add image preview container -->
|
||||
<div class="image-preview-container" id="edit-image-preview-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-isbn">ISBN:</label>
|
||||
<div class="isbn-input-group">
|
||||
<input type="text" id="edit-isbn" name="isbn" placeholder="ISBN eingeben...">
|
||||
<button type="button" class="fetch-isbn-button" id="scan-edit-isbn-btn">ISBN scannen</button>
|
||||
<button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('edit')">Buchinformationen abrufen</button>
|
||||
</div>
|
||||
<div id="edit-book-info-container" class="book-info-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-button">Speichern</button>
|
||||
<button type="button" class="cancel-button" onclick="closeEditModal()">Abbrechen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Schedule Appointment Modal -->
|
||||
@@ -2889,58 +2698,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
}
|
||||
});
|
||||
|
||||
function scanIntoEditCode() {
|
||||
const qrReader = document.getElementById('qr-reader');
|
||||
const editCodeInput = document.getElementById('edit-code4');
|
||||
const scanEditBtn = document.getElementById('scan-edit-code-btn');
|
||||
if (!qrReader || !editCodeInput || !scanEditBtn) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle close if it's already running
|
||||
if (isScanning && qrReader.style.display !== 'none') {
|
||||
stopScanner();
|
||||
scanEditBtn.textContent = 'Barcode scannen';
|
||||
return;
|
||||
}
|
||||
|
||||
scanEditBtn.textContent = 'Scanner schließen';
|
||||
|
||||
// Start scanner with custom logic mapping to the Code input field
|
||||
startScanner(function(decodedText) {
|
||||
editCodeInput.value = decodedText;
|
||||
validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
|
||||
scanEditBtn.textContent = 'Barcode scannen';
|
||||
});
|
||||
}
|
||||
|
||||
function scanIntoEditIsbn() {
|
||||
const qrReader = document.getElementById('qr-reader');
|
||||
const editIsbnInput = document.getElementById('edit-isbn');
|
||||
const scanIsbnBtn = document.getElementById('scan-edit-isbn-btn');
|
||||
if (!qrReader || !editIsbnInput || !scanIsbnBtn) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle close if it's already running
|
||||
if (isScanning && qrReader.style.display !== 'none') {
|
||||
stopScanner();
|
||||
scanIsbnBtn.textContent = 'ISBN scannen';
|
||||
return;
|
||||
}
|
||||
|
||||
scanIsbnBtn.textContent = 'Scanner schließen';
|
||||
|
||||
// Start scanner with custom logic mapping to the ISBN input field
|
||||
startScanner(function(decodedText) {
|
||||
editIsbnInput.value = decodedText;
|
||||
scanIsbnBtn.textContent = 'ISBN scannen';
|
||||
if (typeof fetchBookInfo === 'function') {
|
||||
fetchBookInfo('edit');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function rebuildFilter3Options() {
|
||||
if (!allItems) return;
|
||||
|
||||
@@ -3324,21 +3081,11 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
loadPredefinedFilterValues(1);
|
||||
loadPredefinedFilterValues(2);
|
||||
loadPredefinedFilterValues(3);
|
||||
|
||||
// Set up edit form submission
|
||||
setupEditFormSubmission();
|
||||
|
||||
|
||||
// Set up schedule form submission
|
||||
setupScheduleFormSubmission();
|
||||
|
||||
// Set up add new location buttons
|
||||
const editAddLocationBtn = document.getElementById('edit-add-new-location-btn');
|
||||
if (editAddLocationBtn) {
|
||||
editAddLocationBtn.addEventListener('click', function() {
|
||||
const container = document.getElementById('edit-new-location-container');
|
||||
container.style.display = container.style.display === 'none' ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Find and attach event listener to all logout links
|
||||
const logoutLinks = document.querySelectorAll('a[href*="logout"]');
|
||||
@@ -3391,35 +3138,11 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
// Close modals when clicking outside
|
||||
window.onclick = function(event) {
|
||||
const itemModal = document.getElementById('item-modal');
|
||||
const editModal = document.getElementById('edit-modal');
|
||||
|
||||
if (event.target === itemModal) {
|
||||
itemModal.style.display = 'none';
|
||||
}
|
||||
if (event.target === editModal) {
|
||||
editModal.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
// Set up code validation for edit form
|
||||
const editCodeField = document.getElementById('edit-code4');
|
||||
if (editCodeField) {
|
||||
editCodeField.addEventListener('blur', function() {
|
||||
const itemIdField = document.getElementById('edit-item-id');
|
||||
const excludeId = itemIdField ? itemIdField.value : null;
|
||||
validateCodeField(this, excludeId);
|
||||
});
|
||||
}
|
||||
|
||||
const scanEditCodeBtn = document.getElementById('scan-edit-code-btn');
|
||||
if (scanEditCodeBtn) {
|
||||
scanEditCodeBtn.addEventListener('click', scanIntoEditCode);
|
||||
}
|
||||
|
||||
const scanEditIsbnBtn = document.getElementById('scan-edit-isbn-btn');
|
||||
if (scanEditIsbnBtn) {
|
||||
scanEditIsbnBtn.addEventListener('click', scanIntoEditIsbn);
|
||||
}
|
||||
});
|
||||
|
||||
// Function to load items from server
|
||||
@@ -4171,162 +3894,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
});
|
||||
}
|
||||
|
||||
function openEditModalForSelectedUnit(defaultItemId, selectId) {
|
||||
let targetItemId = defaultItemId;
|
||||
|
||||
try {
|
||||
const selectedUnit = selectId ? document.getElementById(selectId) : null;
|
||||
if (selectedUnit && selectedUnit.value) {
|
||||
targetItemId = selectedUnit.value;
|
||||
}
|
||||
} catch (e) {
|
||||
// Keep default item id as fallback.
|
||||
}
|
||||
|
||||
openEditModalFromServer(targetItemId);
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
const editModal = document.getElementById('edit-modal');
|
||||
if (editModal) {
|
||||
editModal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function openEditModalFromServer(itemId) {
|
||||
const editModal = document.getElementById('edit-modal');
|
||||
if (!editModal) {
|
||||
console.error('Edit modal nicht gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('DEBUG: openEditModal called with itemId:', itemId);
|
||||
|
||||
// Fetch the item data from the backend
|
||||
fetch(`/get_item/${itemId}`)
|
||||
.then(response => {
|
||||
console.log('DEBUG: Response status:', response.status);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('DEBUG: Fetched data:', data);
|
||||
// Backend returns the item directly or wrapped in error/success
|
||||
const item = data.error ? null : (data.item || data);
|
||||
|
||||
console.log('DEBUG: Parsed item:', item);
|
||||
|
||||
if (!item || !item._id) {
|
||||
console.error('DEBUG: Item not found or invalid');
|
||||
alert('Item nicht gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Fill in the form fields with the item data
|
||||
document.getElementById('edit-item-id').value = item._id || '';
|
||||
document.getElementById('edit-name').value = item.Name || '';
|
||||
document.getElementById('edit-location').value = item.Ort || '';
|
||||
document.getElementById('edit-description').value = item.Beschreibung || '';
|
||||
document.getElementById('edit-year').value = item.Anschaffungsjahr || '';
|
||||
document.getElementById('edit-cost').value = item.Anschaffungskosten || '';
|
||||
document.getElementById('edit-code4').value = item.Code_4 || '';
|
||||
document.getElementById('edit-isbn').value = item.ISBN || '';
|
||||
document.getElementById('edit-reservierbar').checked = item.Reservierbar !== false;
|
||||
|
||||
// Fill in filter 1 (Unterrichtsfach)
|
||||
const filter1Array = Array.isArray(item.Filter) ? item.Filter : (item.Filter ? [item.Filter] : []);
|
||||
document.getElementById('edit-filter1-1').value = filter1Array[0] || '';
|
||||
document.getElementById('edit-filter1-2').value = filter1Array[1] || '';
|
||||
document.getElementById('edit-filter1-3').value = filter1Array[2] || '';
|
||||
document.getElementById('edit-filter1-4').value = filter1Array[3] || '';
|
||||
|
||||
// Fill in filter 2 (Jahrgangsstufe)
|
||||
const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : (item.Filter2 ? [item.Filter2] : []);
|
||||
document.getElementById('edit-filter2-1').value = filter2Array[0] || '';
|
||||
document.getElementById('edit-filter2-2').value = filter2Array[1] || '';
|
||||
document.getElementById('edit-filter2-3').value = filter2Array[2] || '';
|
||||
document.getElementById('edit-filter2-4').value = filter2Array[3] || '';
|
||||
|
||||
// Fill in filter 3 (Schlagwort)
|
||||
const filter3Array = Array.isArray(item.Filter3) ? item.Filter3 : (item.Filter3 ? [item.Filter3] : []);
|
||||
document.getElementById('edit-filter3-1').value = filter3Array[0] || '';
|
||||
document.getElementById('edit-filter3-2').value = filter3Array[1] || '';
|
||||
document.getElementById('edit-filter3-3').value = filter3Array[2] || '';
|
||||
document.getElementById('edit-filter3-4').value = filter3Array[3] || '';
|
||||
|
||||
// Display existing images
|
||||
const existingImagesContainer = document.getElementById('edit-existing-images');
|
||||
const editForm = document.getElementById('edit-item-form');
|
||||
existingImagesContainer.innerHTML = '';
|
||||
if (editForm) {
|
||||
editForm.querySelectorAll('input[name="existing_images"], input[name="removed_images"]').forEach(input => input.remove());
|
||||
}
|
||||
if (item.Images && Array.isArray(item.Images)) {
|
||||
item.Images.forEach((image, index) => {
|
||||
const isVideo = isVideoFile(image);
|
||||
const imageDiv = document.createElement('div');
|
||||
imageDiv.className = 'existing-image-item';
|
||||
imageDiv.style.marginBottom = '10px';
|
||||
|
||||
const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
|
||||
const imageSrc = thumbnailInfo && thumbnailInfo.has_preview ?
|
||||
thumbnailInfo.preview_url :
|
||||
(image.startsWith('/uploads/') || image.startsWith('http') ?
|
||||
image :
|
||||
`{{ url_for('uploaded_file', filename='') }}${image}`);
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.style.display = 'flex';
|
||||
row.style.gap = '8px';
|
||||
row.style.alignItems = 'center';
|
||||
|
||||
if (isVideo) {
|
||||
const video = document.createElement('video');
|
||||
video.src = imageSrc;
|
||||
video.style.maxWidth = '100px';
|
||||
video.style.maxHeight = '100px';
|
||||
video.style.objectFit = 'contain';
|
||||
video.controls = true;
|
||||
row.appendChild(video);
|
||||
} else {
|
||||
const img = document.createElement('img');
|
||||
img.src = imageSrc;
|
||||
img.style.maxWidth = '100px';
|
||||
img.style.maxHeight = '100px';
|
||||
img.style.objectFit = 'contain';
|
||||
img.alt = `Existierendes Bild ${index + 1}`;
|
||||
row.appendChild(img);
|
||||
}
|
||||
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.type = 'button';
|
||||
deleteButton.className = 'delete-image-button';
|
||||
deleteButton.textContent = 'Löschen';
|
||||
deleteButton.addEventListener('click', () => removeExistingImage(image, deleteButton));
|
||||
row.appendChild(deleteButton);
|
||||
|
||||
imageDiv.appendChild(row);
|
||||
existingImagesContainer.appendChild(imageDiv);
|
||||
|
||||
if (editForm) {
|
||||
const hiddenInput = document.createElement('input');
|
||||
hiddenInput.type = 'hidden';
|
||||
hiddenInput.name = 'existing_images';
|
||||
hiddenInput.value = image;
|
||||
editForm.appendChild(hiddenInput);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Display the modal
|
||||
editModal.style.display = 'block';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Laden des Items:', error);
|
||||
alert('Fehler beim Laden des Items');
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>'"]/g, (char) => {
|
||||
const map = {
|
||||
@@ -4686,7 +4253,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
<button type="button" class="details-button" onclick="document.getElementById('item-modal').style.display='none';">Schließen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
|
||||
|
||||
modal.style.display = 'block';
|
||||
|
||||
const closeButton = modal.querySelector('.close-modal');
|
||||
@@ -4923,6 +4492,13 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
});
|
||||
}
|
||||
|
||||
function openEditModalForSelectedUnit(itemId, selectId) {
|
||||
const select = document.getElementById(selectId);
|
||||
const targetId = (select && select.value) ? select.value : itemId;
|
||||
// Leitet auf die Bearbeiten-Seite weiter und übergibt die aktuelle URL für den Redirect nach dem Speichern
|
||||
window.location.href = `/item_edit/${targetId}`;
|
||||
}
|
||||
|
||||
function changeModalImage(direction) {
|
||||
const currentIndex = window.currentModalImageIndex;
|
||||
const total = window.totalModalImages;
|
||||
@@ -5349,8 +4925,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
});
|
||||
}
|
||||
|
||||
// Load location options for edit modal
|
||||
// Edit-related functions moved to edit_item_functions.html
|
||||
|
||||
// Schedule modal functions
|
||||
function openScheduleModal(itemId) {
|
||||
@@ -5470,50 +5044,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
}
|
||||
}
|
||||
|
||||
// Setup edit form submission
|
||||
function setupEditFormSubmission() {
|
||||
const editForm = document.getElementById('edit-item-form');
|
||||
if (editForm) {
|
||||
editForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const itemId = document.getElementById('edit-item-id').value;
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch(`/edit_item/${itemId}`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
closeEditModal();
|
||||
// Reload items to show updated information
|
||||
loadItems();
|
||||
// Show success message
|
||||
const successMsg = document.createElement('div');
|
||||
successMsg.className = 'alert alert-success';
|
||||
successMsg.textContent = 'Item wurde erfolgreich aktualisiert!';
|
||||
successMsg.style.position = 'fixed';
|
||||
successMsg.style.top = '20px';
|
||||
successMsg.style.right = '20px';
|
||||
successMsg.style.zIndex = '9999';
|
||||
document.body.appendChild(successMsg);
|
||||
setTimeout(() => {
|
||||
if (successMsg.parentNode) {
|
||||
successMsg.parentNode.removeChild(successMsg);
|
||||
}
|
||||
}, 3000);
|
||||
} else {
|
||||
alert('Fehler beim Aktualisieren des Items');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating item:', error);
|
||||
alert('Fehler beim Aktualisieren des Items');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Duplication function
|
||||
function duplicateItem(itemId) {
|
||||
@@ -5632,10 +5162,62 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
futureAppointments.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||||
return futureAppointments[0];
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Include edit item functions -->
|
||||
{% include "edit_item_functions.html" %}
|
||||
// Load location options
|
||||
function loadLocationOptions() {
|
||||
fetch('/get_predefined_locations')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ortSelect = document.getElementById('ort');
|
||||
if (ortSelect) {
|
||||
// Clear existing options except the first one
|
||||
while (ortSelect.children.length > 1) {
|
||||
ortSelect.removeChild(ortSelect.lastChild);
|
||||
}
|
||||
|
||||
// Add new options - data.locations contains the array
|
||||
data.locations.forEach(location => {
|
||||
const option = document.createElement('option');
|
||||
option.value = location;
|
||||
option.textContent = location;
|
||||
ortSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading location options:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to add new location
|
||||
function addNewLocation() {
|
||||
const newLocationInput = document.getElementById('new-location-input');
|
||||
const newLocation = newLocationInput.value.trim();
|
||||
|
||||
if (!newLocation) {
|
||||
alert('Bitte geben Sie einen Ort ein.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Add to dropdown
|
||||
const ortSelect = document.getElementById('ort');
|
||||
const option = document.createElement('option');
|
||||
option.value = newLocation;
|
||||
option.textContent = newLocation;
|
||||
option.selected = true;
|
||||
ortSelect.appendChild(option);
|
||||
|
||||
// Hide the input container
|
||||
document.getElementById('new-location-container').style.display = 'none';
|
||||
newLocationInput.value = '';
|
||||
}
|
||||
|
||||
// Function to cancel adding new location
|
||||
function cancelAddLocation() {
|
||||
document.getElementById('new-location-container').style.display = 'none';
|
||||
document.getElementById('new-location-input').value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Include reset item functions -->
|
||||
{% include "reset_item_functions.html" %}
|
||||
@@ -5864,16 +5446,4 @@ document.addEventListener('DOMContentLoaded', ()=>{
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% if open_item %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
if (typeof openEditModalFromServer === 'function') {
|
||||
setTimeout(function() {
|
||||
openEditModalFromServer('{{ open_item }}');
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title h5 mb-0">{{ filter_names.get('1', 'Fach/Kategorie') }} (Filter 1)</h2>
|
||||
<h2 class="card-title h5 mb-0">{{ filter_names.get('1', 'Jahrgang') }} (Filter 1)</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('add_filter_value', filter_num=1) }}" class="mb-4">
|
||||
@@ -67,7 +67,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title h5 mb-0">{{ filter_names.get('2', 'System/Bereich') }} (Filter 2)</h2>
|
||||
<h2 class="card-title h5 mb-0">{{ filter_names.get('2', 'Fach') }} (Filter 2)</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('add_filter_value', filter_num=2) }}" class="mb-4">
|
||||
|
||||
+463
-335
@@ -6,7 +6,7 @@
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1>Neuen Benutzer registrieren</h1>
|
||||
<p class="subtitle">Erstellen Sie ein neues Benutzerkonto und legen Sie Zugriffsrechte fest</p>
|
||||
<p class="subtitle">Erstellen Sie ein neues Benutzerkonto oder importieren Sie mehrere Benutzer per CSV</p>
|
||||
</div>
|
||||
|
||||
<div class="flash-container">
|
||||
@@ -23,7 +23,43 @@
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- 1. CSV BULK IMPORT CARD -->
|
||||
<div class="form-card" style="margin-bottom: 2rem; border-top: 4px solid #059669;">
|
||||
<div class="card-header" style="margin-bottom: 1rem;">
|
||||
<h2>Massenregistrierung via CSV</h2>
|
||||
<p class="subtitle" style="color: #4b5563;">
|
||||
Laden Sie eine CSV-Datei hoch (Format: <code>Vorname, Nachname</code>).
|
||||
Benutzernamen und sichere Passwörter werden serverseitig generiert. Nach dem Upload erhalten Sie direkt ein PDF mit Zugangsdaten (2 pro Seite zum Ausschneiden).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('register_csv') }}" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="permission-preset-csv">Berechtigungs-Preset für alle CSV-Benutzer</label>
|
||||
<select id="permission-preset-csv" name="permission_preset" class="form-select" style="margin-bottom: 1rem;">
|
||||
{% for preset_key, preset in permission_presets.items() %}
|
||||
<option value="{{ preset_key }}">{{ preset.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<label for="csv_file">CSV-Datei auswählen</label>
|
||||
<div class="input-container">
|
||||
<span class="input-icon">📄</span>
|
||||
<input type="file" id="csv_file" name="csv_file" accept=".csv" required style="padding: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-actions" style="margin-top: 1.5rem;">
|
||||
<button type="submit" class="action-button" style="background-color: #059669; color: white;">
|
||||
📥 CSV Importieren & Zugangsdaten-PDF Herunterladen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 2. SINGLE USER REGISTRATION CARD -->
|
||||
<div class="form-card">
|
||||
<h2>Einzelnen Benutzer registrieren</h2>
|
||||
<form method="POST" action="{{ url_for('register') }}">
|
||||
|
||||
<div class="form-group">
|
||||
@@ -32,11 +68,13 @@
|
||||
<span class="input-icon">👤</span>
|
||||
<input type="text" id="name" name="name" placeholder="Geben Sie den Vornamen ein" required onchange="generateUsername()" oninput="generateUsername()">
|
||||
</div>
|
||||
|
||||
<label for="last-name">Nachname</label>
|
||||
<div class="input-container">
|
||||
<span class="input-icon">👤</span>
|
||||
<input type="text" id="last-name" name="last-name" placeholder="Geben Sie den Nachnamen ein" required onchange="generateUsername()" oninput="generateUsername()">
|
||||
</div>
|
||||
|
||||
<label for="username">Benutzername <span style="color: #9ca3af;">(Vorschau - wird serverseitig finalisiert)</span></label>
|
||||
<div class="input-container">
|
||||
<span class="input-icon">👤</span>
|
||||
@@ -44,7 +82,7 @@
|
||||
</div>
|
||||
<p class="anonymize-hint">Klarnamen werden nur zur Erzeugung des Benutzernamens als Kürzel (z.B. SimFri) verwendet; bei Kollision wird automatisch ein Buchstabe mehr genommen.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Passwort</label>
|
||||
<div class="password-rules" id="password-rules" aria-live="polite">
|
||||
@@ -57,20 +95,21 @@
|
||||
<li id="pw-rule-symbol" class="pw-rule">Mindestens ein Sonderzeichen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input-wrapper">
|
||||
<div class="input-container">
|
||||
<span class="input-icon">🔒</span>
|
||||
<!-- HTML5 Pattern blockiert unsichere Passwörter vor dem Absenden -->
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Geben Sie ein sicheres Passwort ein"
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Geben Sie ein sicheres Passwort ein"
|
||||
required
|
||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{12,}">
|
||||
<button type="button" id="toggle-pw-btn" class="toggle-pw-btn" onclick="togglePasswordVisibility()" style="background:none; border:none; cursor:pointer; padding-right:10px;">👁️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pw-actions">
|
||||
<div class="pw-actions" style="margin-top: 8px;">
|
||||
<button type="button" class="btn-secondary" onclick="generateSecurePassword()">Passwort generieren</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,323 +159,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--primary-dark: #2980b9;
|
||||
--success-color: #2ecc71;
|
||||
--error-color: #e74c3c;
|
||||
--text-color: var(--ui-text);
|
||||
--light-bg: #f9f9f9;
|
||||
--border-radius: 8px;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: var(--light-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.header-section h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #777;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: var(--ui-surface);
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #aaa;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem 0.8rem 3rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.register-button {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.register-button:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.flash-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.flash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.flash-icon {
|
||||
margin-right: 0.8rem;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.flash.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border-left: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.flash.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border-left: 4px solid var(--error-color);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-section h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.password-rules {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: var(--ui-surface-soft);
|
||||
}
|
||||
|
||||
.password-rules-title {
|
||||
margin: 0 0 8px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.password-rules ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pw-rule {
|
||||
position: relative;
|
||||
padding-left: 22px;
|
||||
margin: 5px 0;
|
||||
color: #b91c1c;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pw-rule::before {
|
||||
content: '✗';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pw-rule.ok {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.pw-rule.ok::before {
|
||||
content: '✓';
|
||||
}
|
||||
|
||||
.anonymize-hint {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: #0c4a6e;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.permission-panels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.permission-panel {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
background: var(--ui-surface-soft);
|
||||
}
|
||||
|
||||
.permission-panel h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.permission-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 4px 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Neue Styles für die Passwort-Erweiterungen */
|
||||
.pw-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-wrapper .input-container {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Hilfsfunktion: Umlaute auflösen und Sonderzeichen entfernen
|
||||
function cleanNameForUsername(text) {
|
||||
@@ -462,7 +184,7 @@ function generateUsername() {
|
||||
const firstName = cleanNameForUsername(document.getElementById('name').value);
|
||||
const lastName = cleanNameForUsername(document.getElementById('last-name').value);
|
||||
let username = '';
|
||||
|
||||
|
||||
if (firstName && lastName) {
|
||||
username = formatPart(firstName, 3) + formatPart(lastName, 3);
|
||||
} else if (firstName) {
|
||||
@@ -470,7 +192,7 @@ function generateUsername() {
|
||||
} else if (lastName) {
|
||||
username = formatPart(lastName, 6);
|
||||
}
|
||||
|
||||
|
||||
const usernameField = document.getElementById('username');
|
||||
if (usernameField) {
|
||||
usernameField.value = username || '';
|
||||
@@ -503,11 +225,12 @@ function generateSecurePassword() {
|
||||
|
||||
const pwField = document.getElementById('password');
|
||||
pwField.value = password;
|
||||
|
||||
// Automatisch sichtbar machen, damit der User es kopieren kann
|
||||
|
||||
// Automatisch sichtbar machen
|
||||
pwField.type = 'text';
|
||||
document.getElementById('toggle-pw-btn').textContent = '🙈';
|
||||
|
||||
const toggleBtn = document.getElementById('toggle-pw-btn');
|
||||
if (toggleBtn) toggleBtn.textContent = '🙈';
|
||||
|
||||
updatePasswordRules();
|
||||
}
|
||||
|
||||
@@ -517,10 +240,10 @@ function togglePasswordVisibility() {
|
||||
const toggleBtn = document.getElementById('toggle-pw-btn');
|
||||
if (pwField.type === "password") {
|
||||
pwField.type = "text";
|
||||
toggleBtn.textContent = '🙈';
|
||||
if (toggleBtn) toggleBtn.textContent = '🙈';
|
||||
} else {
|
||||
pwField.type = "password";
|
||||
toggleBtn.textContent = '👁️';
|
||||
if (toggleBtn) toggleBtn.textContent = '👁️';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -530,7 +253,7 @@ function updatePasswordRules() {
|
||||
if (!passwordInput) return;
|
||||
|
||||
const value = String(passwordInput.value || '');
|
||||
|
||||
|
||||
const setRuleState = (id, ok) => {
|
||||
const node = document.getElementById(id);
|
||||
if (node) node.classList.toggle('ok', !!ok);
|
||||
@@ -592,4 +315,409 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--primary-dark: #2980b9;
|
||||
--success-color: #2ecc71;
|
||||
--success-dark: #27ae60;
|
||||
--csv-color: #059669;
|
||||
--csv-dark: #047857;
|
||||
--error-color: #e74c3c;
|
||||
--text-color: var(--ui-text, #1f2937);
|
||||
--light-bg: #f9f9f9;
|
||||
--border-radius: 8px;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: var(--light-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.header-section h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.05rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: var(--ui-surface, #ffffff);
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Karten-Layout für Einzel- & Massenregistrierung */
|
||||
.form-card {
|
||||
max-width: 620px;
|
||||
margin: 0 auto 2.5rem auto;
|
||||
padding: 1.5rem;
|
||||
background: var(--ui-surface-soft, #f9fafb);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.form-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-card h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
font-size: 1.1rem;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Eingabefelder & Selects */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="file"],
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.8rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.95rem;
|
||||
background-color: #ffffff;
|
||||
transition: var(--transition);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="file"]:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding-left: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Stylings für den CSV-Datei-Upload */
|
||||
input[type="file"] {
|
||||
padding-left: 2.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="file"]::file-selector-button {
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d1d5db;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
input[type="file"]::file-selector-button:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.form-actions {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.register-button {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.register-button:hover {
|
||||
background-color: var(--success-dark);
|
||||
}
|
||||
|
||||
/* Toggle-Button für Passwort-Auge */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggle-pw-btn {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
padding: 4px;
|
||||
z-index: 2;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.toggle-pw-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Passwort-Regeln Box */
|
||||
.password-rules {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.password-rules-title {
|
||||
margin: 0 0 6px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.password-rules ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pw-rule {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin: 4px 0;
|
||||
color: #dc2626;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.pw-rule::before {
|
||||
content: '✗';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pw-rule.ok {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.pw-rule.ok::before {
|
||||
content: '✓';
|
||||
}
|
||||
|
||||
.pw-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: #ffffff;
|
||||
color: #374151;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Hinweise & Rechte-Panels */
|
||||
.anonymize-hint {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
color: #0369a1;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.permission-panels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.permission-panel {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.permission-panel h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.95rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.permission-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 6px 0;
|
||||
color: #374151;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Flash Nachrichten */
|
||||
.flash-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.flash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.9rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.flash-icon {
|
||||
margin-right: 0.8rem;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.flash.success {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
border-left: 4px solid var(--csv-color);
|
||||
}
|
||||
|
||||
.flash.error {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
border-left: 4px solid var(--error-color);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 0.75rem;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header-section h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -11,7 +11,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -123,7 +123,7 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<div class="info-box">
|
||||
|
||||
@@ -249,7 +249,7 @@
|
||||
|
||||
<!-- Add/Edit 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') }}">
|
||||
{% if edit_mode %}
|
||||
|
||||
@@ -954,8 +954,10 @@
|
||||
<label for="anschaffungskosten">Anschaffungskosten (€)</label>
|
||||
<input id="anschaffungskosten" name="anschaffungskosten">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Image upload (hidden for library mode) -->
|
||||
<div class="form-group" {% if show_library_features %}style="display:none;"{% endif %}>
|
||||
<div class="form-group">
|
||||
<label for="images">Bilder/Videos:</label>
|
||||
<input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
|
||||
<div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
|
||||
|
||||
@@ -23,16 +23,6 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('admin_anonymize_names') }}" class="mb-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-outline-danger"
|
||||
onclick="return confirm('Sollen alle gespeicherten Klarnamen dauerhaft in Synonym-Kuerzel umgewandelt werden?')"
|
||||
>
|
||||
Gespeicherte Namen anonymisieren
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="filter-bar mb-3">
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col-md-3">
|
||||
|
||||
Reference in New Issue
Block a user