Webinare test: Unterschied zwischen den Versionen
Aus Dokumentation
(Die Seite wurde neu angelegt: „<html> <script> →Tandler Wiki - Video-Galerie - wird automatisch auf der Webinare-Seite geladen: (function () { 'use strict'; var WEBINARE = […“) |
|||
| Zeile 1: | Zeile 1: | ||
<html> | <html> | ||
<script> | <script> | ||
| − | |||
(function () { | (function () { | ||
'use strict'; | 'use strict'; | ||
var WEBINARE = [ | var WEBINARE = [ | ||
| − | { titel: 'Kanabis Release V11', datum: '28.01.2026', tag: 'kanabis', | + | { titel: 'Kanabis Release V11', datum: '28.01.2026', tag: 'kanabis', video: '20260128 KANABIS Release V11.mp4' }, |
| − | { titel: 'Betriebsfuehrung | + | { titel: 'Betriebsfuehrung Digital Bedarfsorientiert', datum: '17.12.2025', tag: 'togo', video: 'Betriebsfuehrung Digital Bedarfsorientiert von der Idee in die Praxis.mp4' }, |
| − | { titel: 'Automatische Kanalsanierungsplanung', datum: '12.11.2025', tag: 'kasa', | + | { titel: 'Automatische Kanalsanierungsplanung', datum: '12.11.2025', tag: 'kasa', video: 'Automatische Kanalsanierungsplanung Gastbeitrag Aquadocs 251112.mp4' }, |
| − | { titel: 'DWA A 118 / DWA M 119 - Ueberstau | + | { titel: 'DWA A 118 / DWA M 119 - Ueberstau Risikomanagement', datum: '08.10.2025', tag: 'hydraulik', video: 'Risikomanagement nach DWAA118 DWAM119 20251008.mp4' }, |
| − | { titel: 'V17 - Releasenews', datum: '04.06.2025', tag: 'release', | + | { titel: 'V17 - Releasenews', datum: '04.06.2025', tag: 'release', video: '20250604 Release Lech V17.mp4' }, |
| − | { titel: 'GeoCPM - Worauf ist bei der Modellierung zu achten?', datum: '09.04.2025', tag: 'geocpm', | + | { titel: 'GeoCPM - Worauf ist bei der Modellierung zu achten?', datum: '09.04.2025', tag: 'geocpm', video: 'GeoCPM - Worauf ist bei der Modellierung zu achten.mp4' }, |
| − | { titel: 'GeoCPM - Kommunale Sturzfluten | + | { titel: 'GeoCPM - Kommunale Sturzfluten Risikomanagement', datum: '12.03.2025', tag: 'geocpm', video: '250312 BEST PRACTICE Starkregenberechnungen.mp4' }, |
| − | { titel: 'MEGAMAP - Die intelligente Leitungsauskunft', datum: '05.03.2025', tag: 'allgemein', | + | { titel: 'MEGAMAP - Die intelligente Leitungsauskunft', datum: '05.03.2025', tag: 'allgemein', video: 'MEGAMAP - Die intelligente Leitungsauskunft fuer Netzbetreiber.mp4' }, |
| − | { titel: 'AQUA++ - Theorie, Modellierung und Fehlersuche', datum: '19.02.2025', tag: 'aqua', | + | { titel: 'AQUA++ - Theorie, Modellierung und Fehlersuche', datum: '19.02.2025', tag: 'aqua', video: 'Drucknetzberechnung von Wasserversorgungsnetzen.mp4' }, |
| − | { titel: 'ToGo - Digitalisierung im Kanalbetrieb', datum: '19.12.2024', tag: 'togo', | + | { titel: 'ToGo - Digitalisierung im Kanalbetrieb', datum: '19.12.2024', tag: 'togo', video: 'BetriebToGo - Digitalisierung im Kanalbetrieb Webinar 241219.mp4' }, |
| − | { titel: 'Datenubernahme aus GIS-Systemen', datum: '06.11.2024', tag: 'allgemein', | + | { titel: 'Datenubernahme aus GIS-Systemen', datum: '06.11.2024', tag: 'allgemein', video: 'Datenubernahme aus bestehenden GIS-Systemen - am Beispiel STRAKAT Webinar 241106.mp4' }, |
| − | { titel: 'KI in der Zustandserfassung', datum: '09.10.2024', tag: 'kasa', | + | { titel: 'KI in der Zustandserfassung', datum: '09.10.2024', tag: 'kasa', video: 'KI Kanalzustandserfassung Webinar 241009.mp4' }, |
| − | { titel: 'INSIDe-Projekt', datum: '02.10.2024', tag: 'allgemein', | + | { titel: 'INSIDe-Projekt', datum: '02.10.2024', tag: 'allgemein', video: 'INSIDe Webinar 241002.mp4' }, |
| − | { titel: 'V16 - Import Radklim | + | { titel: 'V16 - Import Radklim', datum: '03.06.2024', tag: 'release', video: '20240603 Radklim V16.mp4' }, |
| − | { titel: 'V16 - Zeichentool', datum: '27.06.2024', tag: 'release', | + | { titel: 'V16 - Zeichentool', datum: '27.06.2024', tag: 'release', video: '20240627 V16 Zeichentool.mp4' }, |
| − | { titel: 'V16 - Geo3D Erneuerungen', datum: '25.06.2024', tag: 'geocpm', | + | { titel: 'V16 - Geo3D Erneuerungen', datum: '25.06.2024', tag: 'geocpm', video: '25062024 Geo3D.mp4' }, |
| − | { titel: 'V16 - GeoCPM Neuerungen | + | { titel: 'V16 - GeoCPM Neuerungen Durchlaesse', datum: '20.06.2024', tag: 'geocpm', video: '20240620 V16 GeoCPM.mp4' }, |
| − | { titel: 'V16 - Releasenews', datum: '18.06.2024', tag: 'release', | + | { titel: 'V16 - Releasenews', datum: '18.06.2024', tag: 'release', video: '2024618 Release V16.mp4' }, |
| − | { titel: 'GeoCPM - DGM-Ausduennung Tipps | + | { titel: 'GeoCPM - DGM-Ausduennung Tipps Tricks', datum: '24.04.2024', tag: 'geocpm', video: '20240424 Webinar Ausduennung.mp4' }, |
| − | { titel: 'Kanabis Release V10', datum: '09.04.2024', tag: 'kanabis', | + | { titel: 'Kanabis Release V10', datum: '09.04.2024', tag: 'kanabis', video: '20240409 KANABIS Release V10.mp4' }, |
| − | { titel: 'WIKI - Umfrage | + | { titel: 'WIKI - Umfrage Erneuerungen', datum: '20.03.2024', tag: 'allgemein', video: '20240319 Wiki und Umfrage.mp4' }, |
| − | { titel: 'GeoCPM - Sturzflut-Risikomanagement Bayern', datum: '16.11.2023', tag: 'geocpm', | + | { titel: 'GeoCPM - Sturzflut-Risikomanagement Bayern', datum: '16.11.2023', tag: 'geocpm', video: 'GeoCPM Konzepte zum kommunalen Sturzflut-Risikomanagement in Bayern.mp4' }, |
| − | { titel: 'Flow V15: Neuerungen', datum: '09.11.2023', tag: 'flow', | + | { titel: 'Flow V15: Neuerungen', datum: '09.11.2023', tag: 'flow', video: '20231109 Webinar FLOW-Bestpractice.mp4' }, |
| − | { titel: 'GeoCPM Best Practice V15: Strukturen', datum: '02.11.2023', tag: 'geocpm', | + | { titel: 'GeoCPM Best Practice V15: Strukturen', datum: '02.11.2023', tag: 'geocpm', video: '20231107 GeoCPM Bestpractice.mp4' }, |
| − | { titel: 'GeoCPM Erneuerungen V15: OBOs', datum: '19.10.2023', tag: 'geocpm', | + | { titel: 'GeoCPM Erneuerungen V15: OBOs', datum: '19.10.2023', tag: 'geocpm', video: '20231019 GeoCPM V15.mp4' }, |
| − | { titel: 'Release Version 15: Inn', datum: '18.10.2023', tag: 'release', | + | { titel: 'Release Version 15: Inn', datum: '18.10.2023', tag: 'release', video: '20231018 Inn Release 15-00-00.mp4' }, |
| − | { titel: 'Kanabis Release V9', datum: '09.02.2023', tag: 'kanabis', | + | { titel: 'Kanabis Release V9', datum: '09.02.2023', tag: 'kanabis', video: '20230210-KANABIS-Release Version 9.mp4' }, |
| − | { titel: 'Neuerungen KASAnova', datum: '01.12.2022', tag: 'kasa', | + | { titel: 'Neuerungen KASAnova', datum: '01.12.2022', tag: 'kasa', video: '20221129 Webinar KasaNova 14 10 00.mp4' }, |
| − | { titel: 'Release Version 14.10.00: Main', datum: '24.11.2022', tag: 'release', | + | { titel: 'Release Version 14.10.00: Main', datum: '24.11.2022', tag: 'release', video: '20221124 Release V14.10.00.mp4' }, |
| − | { titel: 'Genauigkeit von Gelaendemodellen', datum: '03.05.2022', tag: 'geocpm', | + | { titel: 'GeoCPM - Genauigkeit von Gelaendemodellen', datum: '03.05.2022', tag: 'geocpm', video: '20220503 GeoCPM Praxis Ausduennung.mp4' }, |
| − | { titel: 'A102 | + | { titel: 'A102 Flow Practice', datum: '05.04.2022', tag: 'flow', video: '20220405 Flow A102 Best-Practice.mp4' }, |
| − | { titel: 'Radolan Daten fuer GeoCPM', datum: '22.03.2022', tag: 'geocpm', | + | { titel: 'Radolan Daten fuer GeoCPM', datum: '22.03.2022', tag: 'geocpm', video: '20220323 Radolan aus Aquazis.mp4' }, |
| − | { titel: 'Release Version 14: Main', datum: '08.02.2022', tag: 'release', | + | { titel: 'Release Version 14: Main', datum: '08.02.2022', tag: 'release', video: '20220208 Release Main V14.mp4' }, |
| − | { titel: 'Kanabis Release Version 8', datum: '09.12.2021', tag: 'kanabis', | + | { titel: 'Kanabis Release Version 8', datum: '09.12.2021', tag: 'kanabis', video: '20211209 KANABIS Release V8.0.0.mp4' }, |
| − | { titel: 'Geo3D Best-Practice', datum: '24.11.2021', tag: 'geocpm', | + | { titel: 'Geo3D Best-Practice', datum: '24.11.2021', tag: 'geocpm', video: '20211124 Geo3D BestPractise.mp4' }, |
| − | { titel: 'Numerische Simulation', datum: '17.11.2021', tag: 'hydraulik', | + | { titel: 'Numerische Simulation', datum: '17.11.2021', tag: 'hydraulik', video: '20211117 NumerischeSimulationen.mp4' }, |
| − | { titel: 'A102 | + | { titel: 'A102 Flow', datum: '09.11.2021', tag: 'flow', video: '20211109 A102 Flow.mp4' }, |
| − | { titel: '++SYSTEMS Projektdateimanagement 2.0', datum: '27.10.2021', tag: 'allgemein', | + | { titel: '++SYSTEMS Projektdateimanagement 2.0', datum: '27.10.2021', tag: 'allgemein', video: '20211027 Projektdateimanagement 2.mp4' }, |
| − | { titel: 'Manueller Laengsschnitt', datum: '06.10.2021', tag: 'hydraulik', | + | { titel: 'Manueller Laengsschnitt', datum: '06.10.2021', tag: 'hydraulik', video: '20211006 Laengsschnitt.mp4' }, |
| − | { titel: 'Starkregen - Kommunales Risikomanagement', datum: '20.10.2021', tag: 'geocpm', | + | { titel: 'Starkregen - Kommunales Risikomanagement', datum: '20.10.2021', tag: 'geocpm', video: '20211020 GeoCPM KSRRM.mp4' }, |
| − | { titel: 'BIM | + | { titel: 'BIM Betriebsprozesse', datum: '13.10.2021', tag: 'togo', video: '20211013 BIM und Betriebsprozesse.mp4' }, |
| − | { titel: 'Version 13 Donau3D Erneuerungen', datum: '20.05.2021', tag: 'release', | + | { titel: 'Version 13 Donau3D Erneuerungen', datum: '20.05.2021', tag: 'release', video: 'Release ++SYSTEMS Donau.mp4' }, |
| − | { titel: 'Visualisierung mit dem neuen 3DTool', datum: '22.04.2021', tag: 'geocpm', | + | { titel: 'Visualisierung mit dem neuen 3DTool', datum: '22.04.2021', tag: 'geocpm', video: '2021-04-21 Geo3D.mp4' }, |
| − | { titel: 'Aufbereitung von Eingangsdaten mit QGIS', datum: '13.04.2021', tag: 'allgemein', | + | { titel: 'Aufbereitung von Eingangsdaten mit QGIS', datum: '13.04.2021', tag: 'allgemein', video: '20210413 QGIS Eingangsdaten.mp4' }, |
| − | { titel: 'Vorstellung der neuen Dokumentationsplattform WIKI', datum: '24.03.2021', tag: 'allgemein', | + | { titel: 'Vorstellung der neuen Dokumentationsplattform WIKI', datum: '24.03.2021', tag: 'allgemein', video: '2021-03-24 WIKI.mp4' }, |
| − | { titel: '++SYSTEMS Kanalzustand und Sanierung', datum: '10.03.2021', tag: 'kasa', | + | { titel: '++SYSTEMS Kanalzustand und Sanierung', datum: '10.03.2021', tag: 'kasa', video: 'Webinar Kasanova 20210310.mp4' }, |
| − | { titel: 'Multi-User-Plattformen', datum: '03.03.2021', tag: 'allgemein', | + | { titel: 'Multi-User-Plattformen', datum: '03.03.2021', tag: 'allgemein', video: '2021-03-03 10.00 Datenbanken - Multi-User-Plattform.mp4' }, |
| − | { titel: 'Erneuerungen und Best-Practice Feb 2021', datum: '17.02.2021', tag: 'release', | + | { titel: 'Erneuerungen und Best-Practice Feb 2021', datum: '17.02.2021', tag: 'release', video: '++SYSTEMS Isar Neuerungen Best Practise.mp4' }, |
| − | { titel: 'Entwurfsplanung', datum: '09.12.2020', tag: 'hydraulik', | + | { titel: 'Entwurfsplanung', datum: '09.12.2020', tag: 'hydraulik', video: '09122020 Entwurfsplanung.mp4' }, |
| − | { titel: 'GeoCPM Best Practice Dez 2020', datum: '03.12.2020', tag: 'geocpm', | + | { titel: 'GeoCPM Best Practice Dez 2020', datum: '03.12.2020', tag: 'geocpm', video: 'GeoCPM Neuerungen und Best Practise comp.mp4' }, |
| − | { titel: ' | + | { titel: 'Flow - Best Practice', datum: '18.11.2020', tag: 'flow', video: 'Flow Best Practice 20201215.mp4' }, |
| − | { titel: ' | + | { titel: 'Erneuerungen Best-Practice Nov 2020', datum: '11.11.2020', tag: 'release', video: '20201111 SYSTEMS ReleaseIsar2.mp4' }, |
| − | { titel: ' | + | { titel: 'Bedarfsorientierte Kanalreinigung', datum: '12.05.2020', tag: 'togo', video: '20200512 Togo Kanalreinigung.mp4' }, |
| − | { titel: 'Erneuerungen | + | { titel: 'Erneuerungen Best-Practice Apr 2020', datum: '30.04.2020', tag: 'release', video: '20200430 SYSTEMS Erneuerungen.mp4' }, |
| − | { titel: ' | + | { titel: 'Release V12 - Neues Look and Feel', datum: '28.04.2020', tag: 'release', video: '20200428 SYSTEMS ISAR Release Neues Look Feel.mp4' }, |
| − | { titel: ' | + | { titel: 'Anbindung von Datenbanken', datum: '07.03.2020', tag: 'allgemein', video: 'Anbindung Datenbanken 20180307.mp4' }, |
| − | { titel: ' | + | { titel: 'Starkregenrisikomanagement LUBW II', datum: '29.05.2019', tag: 'geocpm', video: 'Leitfaden LUBW GeoCPM 201905229.mp4' }, |
| − | { titel: ' | + | { titel: 'Bruchkanten', datum: '22.05.2019', tag: 'geocpm', video: 'GeoCPM Bruchkanten 20190522.mp4' }, |
| − | { titel: ' | + | { titel: '++SYSTEMS Projektdateimanagement 2019', datum: '15.05.2019', tag: 'allgemein', video: 'Projektdateimanagement 20190515.mp4' }, |
| − | { titel: ' | + | { titel: 'Koordinatentransformation', datum: '30.04.2019', tag: 'allgemein', video: 'Koordinatentransformation 20190430.mp4' }, |
| − | { titel: ' | + | { titel: 'Planausgabe', datum: '10.04.2019', tag: 'allgemein', video: 'Planausgabe 20190410.mp4' }, |
| − | { titel: ' | + | { titel: 'Release V11', datum: '11.03.2019', tag: 'release', video: '++SYSTEMS Release 11 03 00 20190508.mp4' }, |
| − | { titel: ' | + | { titel: 'Bestandsdaten Dokumentation 2018', datum: '05.12.2018', tag: 'togo', video: '20181205 TOGO.mp4' }, |
| − | { titel: ' | + | { titel: 'Funktionale Einheiten Ergebnislisten', datum: '28.11.2018', tag: 'flow', video: 'Flow 20181128.mp4' }, |
| − | { titel: ' | + | { titel: 'KASAnova 2.0 - Sanierungsmodul Version 11', datum: '14.11.2018', tag: 'kasa', video: 'Webinar KASANova 20181114.mp4' }, |
| − | { titel: ' | + | { titel: 'Release Version 11', datum: '08.11.2018', tag: 'release', video: 'GeoCPM V11 20181108.mp4' }, |
| − | { titel: ' | + | { titel: 'KASAnova 2.0 - Sanierungsmodul neu aufgelegt', datum: '18.04.2018', tag: 'kasa', video: 'Webinar KASAnova 20180418.mp4' }, |
| − | { titel: ' | + | { titel: 'DYNA - Rechnet nicht', datum: '21.03.2018', tag: 'hydraulik', video: 'HydraulikRechnetNicht 20180321.mp4' }, |
| − | { titel: ' | + | { titel: 'Datenbanken 2018', datum: '07.03.2018', tag: 'allgemein', video: 'Anbindung Datenbanken 20180307.mp4' }, |
| − | { titel: ' | + | { titel: 'Starkregenrisikomanagement LUBW I', datum: '19.07.2017', tag: 'geocpm', video: 'LUBW GeoCPM 20170719.mp4' }, |
| − | { titel: ' | + | { titel: 'Import/Export - XML Formate', datum: '15.03.2017', tag: 'allgemein', video: 'ImportExportTeil2 20170315.mp4' }, |
| − | { titel: ' | + | { titel: 'Import/Export - DXF und ESRI Shape', datum: '07.12.2016', tag: 'allgemein', video: 'ImportExportTeil1 20161207.mp4' }, |
| − | { titel: ' | + | { titel: 'Listengenerator', datum: '23.11.2016', tag: 'allgemein', video: '++SYSTEMS Listengenerator 20161123.mp4' }, |
| − | { titel: ' | + | { titel: 'Wasseraustausch - Bi-Direktionale Kopplung', datum: '11.10.2016', tag: 'hydraulik', video: 'GeoCPM 20161011.mp4' }, |
| − | { titel: ' | + | { titel: 'Verteilvorschrift Regenspenden KOSTRA', datum: '22.09.2016', tag: 'hydraulik', video: 'KOSTRA 20160922.mp4' }, |
| − | { titel: ' | + | { titel: 'Themenplan', datum: '30.06.2016', tag: 'allgemein', video: 'Themenplan 20160630.mp4' }, |
| − | { titel: ' | + | { titel: 'Schluss mit der Zettelwirtschaft', datum: '16.06.2016', tag: 'togo', video: '20160616 TOGO.mp4' }, |
| − | { titel: ' | + | { titel: 'Bestandsdaten Dokumentation 2015', datum: '16.12.2015', tag: 'togo', video: '20151216 TOGO.mp4' }, |
| − | { titel: ' | + | { titel: 'Einzugsgebietsmanagement', datum: '16.06.2015', tag: 'hydraulik', video: 'Einzugsgebietsmanagement 20150616.mp4' }, |
| − | { titel: ' | + | { titel: 'Integrierte Zustandsbewertung und Sanierungsplanung', datum: '09.05.2015', tag: 'kasa', video: 'Kasanova 20150519.mp4' }, |
| − | { titel: ' | + | { titel: 'Untersuchungsverwaltung - Zustandsbewertung - Sanierung', datum: '21.10.2014', tag: 'kasa', video: 'Webinar Kanalzustand Sanierung 20141221.mp4' }, |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
]; | ]; | ||
| Zeile 107: | Zeile 100: | ||
allgemein: { label: 'Allgemein', farbe: '#444441' }, | allgemein: { label: 'Allgemein', farbe: '#444441' }, | ||
}; | }; | ||
| + | |||
| + | function videoUrl(dateiname) { | ||
| + | var enc = encodeURIComponent(dateiname.replace(/ /g, '_')); | ||
| + | var c1 = dateiname.charAt(0).toUpperCase(); | ||
| + | var c2 = (c1 + dateiname.charAt(1)).toUpperCase(); | ||
| + | return '/wiki/images/' + c1 + '/' + c2 + '/' + enc; | ||
| + | } | ||
function injizierCSS() { | function injizierCSS() { | ||
| Zeile 117: | Zeile 117: | ||
'.vg-filter-btn.aktiv{color:#fff;border-color:transparent}', | '.vg-filter-btn.aktiv{color:#fff;border-color:transparent}', | ||
'#vg-anzahl{font-size:12px;color:#888;margin-bottom:8px}', | '#vg-anzahl{font-size:12px;color:#888;margin-bottom:8px}', | ||
| − | '#vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax( | + | '#vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}', |
| − | '.vg-karte{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff}', | + | '.vg-karte{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}', |
'.vg-karte:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}', | '.vg-karte:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}', | ||
| − | '.vg-thumb{width:100%;aspect-ratio:16/9;background:# | + | '.vg-karte.aktiv{border:2px solid #666699}', |
| − | '.vg- | + | '.vg-thumb{width:100%;aspect-ratio:16/9;background:#1a1a2e;display:flex;align-items:center;justify-content:center}', |
| + | '.vg-play{width:0;height:0;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent rgba(255,255,255,0.85)}', | ||
'.vg-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;color:#fff;font-weight:500}', | '.vg-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;color:#fff;font-weight:500}', | ||
'.vg-body{padding:10px 12px 12px}', | '.vg-body{padding:10px 12px 12px}', | ||
| Zeile 127: | Zeile 128: | ||
'.vg-datum{font-size:11px;color:#888}', | '.vg-datum{font-size:11px;color:#888}', | ||
'.vg-leer{text-align:center;padding:2rem;color:#888;font-size:14px;grid-column:1/-1}', | '.vg-leer{text-align:center;padding:2rem;color:#888;font-size:14px;grid-column:1/-1}', | ||
| − | ].join(' | + | '#vg-player-box{display:none;margin-bottom:20px;background:#000;border-radius:10px;overflow:hidden}', |
| + | '#vg-player-box video{width:100%;max-height:500px;display:block}', | ||
| + | '#vg-player-titel{padding:10px 14px;background:#f5f5f5;font-size:14px;font-weight:600;color:#333;display:flex;justify-content:space-between;align-items:center}', | ||
| + | '#vg-player-close{cursor:pointer;font-size:20px;color:#999;border:none;background:none}', | ||
| + | ].join(' | ||
| + | '); | ||
var s = document.createElement('style'); | var s = document.createElement('style'); | ||
s.id = 'vg-styles'; | s.id = 'vg-styles'; | ||
| Zeile 137: | Zeile 143: | ||
injizierCSS(); | injizierCSS(); | ||
var aktuellerTag = 'alle'; | var aktuellerTag = 'alle'; | ||
| − | var html = '<div id="vg-container"><div id="vg-controls">'; | + | var aktiveKarte = null; |
| + | |||
| + | var html = '<div id="vg-container">'; | ||
| + | html += '<div id="vg-controls">'; | ||
html += '<input id="vg-suche" type="text" placeholder="Webinar suchen..." />'; | html += '<input id="vg-suche" type="text" placeholder="Webinar suchen..." />'; | ||
Object.keys(TAGS).forEach(function (key) { | Object.keys(TAGS).forEach(function (key) { | ||
| Zeile 144: | Zeile 153: | ||
html += '<button class="vg-filter-btn' + (key === 'alle' ? ' aktiv' : '') + '" data-tag="' + key + '"' + stil + '>' + t.label + '</button>'; | html += '<button class="vg-filter-btn' + (key === 'alle' ? ' aktiv' : '') + '" data-tag="' + key + '"' + stil + '>' + t.label + '</button>'; | ||
}); | }); | ||
| − | html += '</div><div id="vg-anzahl"></div><div id="vg-grid"></div></div>'; | + | html += '</div>'; |
| + | html += '<div id="vg-anzahl"></div>'; | ||
| + | html += '<div id="vg-player-box"><div id="vg-player-titel"><span id="vg-player-name"></span><button id="vg-player-close">X</button></div><video id="vg-player" controls controlsList="nodownload"></video></div>'; | ||
| + | html += '<div id="vg-grid"></div>'; | ||
| + | html += '</div>'; | ||
container.innerHTML = html; | container.innerHTML = html; | ||
| Zeile 150: | Zeile 163: | ||
var grid = document.getElementById('vg-grid'); | var grid = document.getElementById('vg-grid'); | ||
var anzahl = document.getElementById('vg-anzahl'); | var anzahl = document.getElementById('vg-anzahl'); | ||
| + | var playerBox = document.getElementById('vg-player-box'); | ||
| + | var player = document.getElementById('vg-player'); | ||
| + | var playerName = document.getElementById('vg-player-name'); | ||
| + | |||
| + | document.getElementById('vg-player-close').addEventListener('click', function () { | ||
| + | player.pause(); | ||
| + | playerBox.style.display = 'none'; | ||
| + | if (aktiveKarte) aktiveKarte.classList.remove('aktiv'); | ||
| + | aktiveKarte = null; | ||
| + | }); | ||
| + | |||
| + | function spieleVideo(w, karte) { | ||
| + | if (aktiveKarte) aktiveKarte.classList.remove('aktiv'); | ||
| + | aktiveKarte = karte; | ||
| + | karte.classList.add('aktiv'); | ||
| + | player.src = videoUrl(w.video); | ||
| + | playerName.textContent = w.titel + ' (' + w.datum + ')'; | ||
| + | playerBox.style.display = 'block'; | ||
| + | player.play(); | ||
| + | playerBox.scrollIntoView({ behavior: 'smooth', block: 'start' }); | ||
| + | } | ||
function renderKarten() { | function renderKarten() { | ||
| Zeile 163: | Zeile 197: | ||
return; | return; | ||
} | } | ||
| − | grid.innerHTML = gefiltert. | + | grid.innerHTML = ''; |
| + | gefiltert.forEach(function (w) { | ||
var farbe = TAGS[w.tag] ? TAGS[w.tag].farbe : '#666699'; | var farbe = TAGS[w.tag] ? TAGS[w.tag].farbe : '#666699'; | ||
var label = TAGS[w.tag] ? TAGS[w.tag].label : w.tag; | var label = TAGS[w.tag] ? TAGS[w.tag].label : w.tag; | ||
| − | var | + | var karte = document.createElement('div'); |
| − | + | karte.className = 'vg-karte'; | |
| − | '< | + | karte.innerHTML = |
| + | '<div class="vg-thumb"><div class="vg-play"></div></div>' + | ||
'<div class="vg-body">' + | '<div class="vg-body">' + | ||
'<span class="vg-badge" style="background:' + farbe + '">' + label + '</span>' + | '<span class="vg-badge" style="background:' + farbe + '">' + label + '</span>' + | ||
'<p class="vg-titel">' + w.titel + '</p>' + | '<p class="vg-titel">' + w.titel + '</p>' + | ||
'<p class="vg-datum">' + w.datum + '</p>' + | '<p class="vg-datum">' + w.datum + '</p>' + | ||
| − | ' | + | '</div>'; |
| − | + | karte.addEventListener('click', function () { spieleVideo(w, karte); }); | |
| + | grid.appendChild(karte); | ||
| + | }); | ||
} | } | ||
| Zeile 211: | Zeile 249: | ||
})(); | })(); | ||
| − | |||
</script> | </script> | ||
</html> | </html> | ||
Aktuelle Version vom 19. Mai 2026, 10:08 Uhr