tango.git - Ulrich Hilger Code Repository

main / tango

Persoenliche Mediazentrale

view | history | commit | commitdiff

Dateifilter fuer Kataloge

ulrich

2021-04-11 be4056eedcfdbe6e7aaa081eb2028f4e4518f577

commit \| author \| age
b379f5	1	function Mediazentrale() {
cfa858	2	var self = this;
U	3	var appMenu;
	4	var cache; // mustache templates
86bbf7	5	var ortPfad;
U	6	var mediaPfad;
e60cff	7	var katUrl;
U	8	var selTitel;
78d707	9	var katName;
f45e20	10
U	11	this.init = function () {
	12	self.mediaPfad = '/';
	13	self.ortPfad = '/';
	14	self.cache = new Array();
	15	self.appMenu = new AppMenu();
	16	self.appMenu.init(
	17	"data/menu/",
	18	"hauptmenue.json",
78d707	19	"data/tpl/app-menu.txt",
f45e20	20	".west",
U	21	"8em");
	22
	23	document.querySelector('.hamburger').addEventListener('click', function (e) {
	24	self.menue_umschalten();
	25	});
	26
	27	self.addEvtListener('#mi-katalog', 'click', self.media_liste);
	28	self.addEvtListener('#mi-orte', 'click', self.ablageort_liste);
	29	self.addEvtListener('#mi-prefs', 'click', self.prefs_liste);
	30	self.addEvtListener('#mi-player', 'click', self.abspieler_liste);
8d7d35	31	self.addEvtListener('#mi-listen', 'click', self.abspielliste_liste);
U	32	self.addEvtListener('#mi-list', 'click', self.titel_liste);
f45e20	33
U	34	self.fusszeile_umschalten();
	35	self.seitenleiste_umschalten();
	36	self.dialog_unten_zeigen();
	37	};
	38
8d7d35	39	/* ---------------- Entitaets-Listen ----------------- */
U	40
86bbf7	41	// auf der obersten Ebene werden die Kataloge angezeigt,
U	42	// darunter der Inhalt des aktuellen Pfades
	43	this.media_liste = function() {
78d707	44	self.reset_top_buttons();
095119	45	//console.log("ortPfad: " + self.ortPfad + ", mediaPfad: " + self.mediaPfad);
78d707	46	document.querySelector('.bereich-name').textContent = '';
86bbf7	47	if(self.ortPfad === '/') {
78d707	48	var bb = document.querySelector('.breadcrumb-behaelter');
U	49	bb.textContent = "Kataloge";
86bbf7	50	// Kataloge listen
f45e20	51	self.http_get('../api/store/Ablageort/liste/', function (responseText) {
8d7d35	52	//document.querySelector('#top-up-btn').removeEventListener('click', self.media_liste_herauf);
78d707	53	self.vorlage_laden_und_fuellen("data/tpl/katalog_root_liste.txt", JSON.parse(responseText), function (html) {
86bbf7	54	document.querySelector(".zentraler-inhalt").innerHTML = html;
U	55	self.addEvtListener('.entity-eintrag', 'click', function (event) {
	56	var t = event.target;
78d707	57	self.katName = t.textContent;
86bbf7	58	self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText) {
U	59	var ablageort = JSON.parse(responseText);
	60	self.ortPfad = ablageort.url;
	61	self.media_liste();
	62	});
	63	});
	64	});
	65	});
	66	} else {
78d707	67	var bb = document.querySelector('.breadcrumb-behaelter');
U	68	var brPfad = self.katName + self.mediaPfad;
	69	var breadcrumbs = brPfad.split('/');
	70	var brLinks = "";
	71	var brLinkPfad = "";
	72	for(var index = 0; index < breadcrumbs.length; index++) {
	73	// <a class="breadcrumb-link" href="#">breadcrumbs[index]</a>
	74	if(index === 0) {
	75	brLinkPfad = '/';
	76	} else {
	77	brLinkPfad = brLinkPfad + '/' + breadcrumbs[index];
	78	}
	79	brLinks = brLinks + "<a brlink='" + brLinkPfad + "' class='breadcrumb-link' href='#'>" + breadcrumbs[index] + "</a>";
	80	//console.log(' breadcrumbs[' + index + ']: ' + breadcrumbs[index]);
	81	}
	82	bb.innerHTML = brLinks;
	83	self.addEvtListener('.breadcrumb-link', 'click', function(event) {
095119	84	//console.log(event.target.attributes.brlink.nodeValue);
78d707	85	var neuerPfad = event.target.attributes.brlink.nodeValue;
U	86	self.mediaPfad = neuerPfad;
	87	self.media_liste();
	88	});
3271f1	89	var url = '..' + self.ortPfad + self.mediaPfad;
U	90	if(!url.endsWith('/')) {
	91	url = url + '/';
	92	}
	93	self.http_get(url, function(responseText) {
78d707	94	self.vorlage_laden_und_fuellen("data/tpl/katalog_inhalt_liste.txt", JSON.parse(responseText), function (html) {
86bbf7	95	document.querySelector(".zentraler-inhalt").innerHTML = html;
U	96	self.addEvtListener('.entity-eintrag', 'click', function (event) {
	97	var t = event.target;
3271f1	98	var tx = t.textContent;
86bbf7	99	if(t.classList.contains("entity-typ-folder")) {
3271f1	100	if(self.mediaPfad.endsWith('/')) {
U	101	self.mediaPfad = self.mediaPfad + tx;
	102	} else {
	103	self.mediaPfad = self.mediaPfad + '/' + tx;
	104	}
86bbf7	105	self.media_liste();
U	106	} else {
37eadf	107	if(t.classList.contains('selected')) {
78d707	108	t.classList.add('added-to-playlist');
095119	109	self.titelDazu();
37eadf	110	} else {
U	111	self.removeClassMulti('selected');
	112	t.classList.add('selected');
	113	}
e60cff	114	//self.selTitel = new Titel(t.textContent, self.ortPfad);
86bbf7	115	}
U	116	});
8d7d35	117	self.addEvtListener('#top-up-btn', 'click', function(event) {
86bbf7	118	if(self.mediaPfad === '/') {
U	119	self.ortPfad = '/';
	120	} else {
	121	var pos = self.mediaPfad.lastIndexOf('/');
3271f1	122	var parent;
U	123	if(pos > 1) {
	124	parent = self.mediaPfad.substring(0, pos);
	125	} else {
	126	parent = '/';
	127	}
86bbf7	128	self.mediaPfad = parent;
U	129	}
	130	self.media_liste();
8d7d35	131	});
86bbf7	132	});
U	133	});
	134	}
e60cff	135	};
245ac1	136
a43e1a	137	this.ablageort_liste = function() {
78d707	138	self.entitaet_liste('Kataloge','../api/store/Ablageort/liste/',
U	139	"data/tpl/ablageort_liste.txt", '../api/store/Ablageort/',
e44ed0	140	"self.ablageort_form", function(responseText) {
U	141	var ablageort = JSON.parse(responseText);
	142	self.ablageort_form(ablageort);
	143	});
cf6509	144	};
U	145
	146	this.prefs_liste = function() {
50e53e	147	self.entitaet_liste('Einstellungen','../api/store/Einstellung/liste/',
78d707	148	"data/tpl/einstellung_liste.txt", '../api/store/Einstellung/',
e44ed0	149	"self.prefs_form", function(responseText) {
U	150	var einstellung = JSON.parse(responseText);
	151	self.prefs_form(einstellung);
	152	});
cf6509	153	};
U	154
3d4bca	155	this.abspieler_liste = function() {
50e53e	156	self.entitaet_liste('Abspieler','../api/store/Abspieler/liste/',
78d707	157	"data/tpl/abspieler_liste.txt", '../api/store/Abspieler/',
e44ed0	158	"self.abspieler_form", function(responseText) {
U	159	var abspieler = JSON.parse(responseText);
	160	self.abspieler_form(abspieler);
	161	});
8d7d35	162	};
U	163
	164	this.abspielliste_liste = function() {
50e53e	165	self.entitaet_liste('Abspielliste','../api/store/Abspielliste/liste/',
78d707	166	"data/tpl/abspielliste_liste.txt", '../api/store/Abspielliste/',
e44ed0	167	"self.abspielliste_form", function(responseText) {
095119	168	//console.log("responseTest: '" + responseText + "'");
e44ed0	169	var abspielliste = JSON.parse(responseText);
U	170	self.abspielliste_form(abspielliste);
	171	});
8d7d35	172	};
U	173
c7030d	174	/* -------------------- Entitaets-Formulare ------------------ */
8d7d35	175
U	176	this.abspielliste_form = function(al) {
50e53e	177	self.entitaet_form('Abspielliste', al, al.name,
78d707	178	"data/tpl/form_abspielliste.txt", '../api/store/Abspielliste/',
9865bd	179	'#abspielliste-name', function(event) {
095119	180	if(event !== undefined) {
U	181	event.preventDefault();
	182	}
c7030d	183	self.abspielliste_auswahl_fuellen();
U	184	self.abspielliste_liste();
	185	});
3d4bca	186	};
71def1	187
3d4bca	188	this.abspieler_form = function(pl) {
50e53e	189	self.entitaet_form('Abspieler', pl, pl.key,
78d707	190	"data/tpl/form_abspieler.txt", '../api/store/Abspieler/',
c7030d	191	'#abspieler-name', function() {
U	192	self.abspieler_auswahl_fuellen();
	193	self.abspieler_liste();
	194	});
71def1	195	};
U	196
cf6509	197	this.prefs_form = function(k) {
78d707	198	self.entitaet_form('Einstellung', k, k.key,
U	199	"data/tpl/form_einstellung.txt", '../api/store/Einstellung/',
c7030d	200	'#einstellung-key', function() {
U	201	self.prefs_liste();
	202	});
a43e1a	203	};
cfa858	204
90f5d4	205	/*
U	206	* Ablageort-Formular anzeigen
	207	*
	208	* {"name":"Katalog 2","ort":"/home/ulrich/Videos","url":"/media/kat2"}:
	209	*
	210	* @param {type} ablageort der Ablageort, der bearbeitet werden soll, leer fuer neuen Ort
	211	* @returns {undefined} kein Rueckgabewert
	212	*/
	213	this.ablageort_form = function(ort) {
78d707	214	self.entitaet_form('Katalog', ort, ort.name,
U	215	"data/tpl/form_ablageort.txt", '../api/store/Ablageort/',
c7030d	216	'#ablageort-name', function() {
U	217	self.ablageort_liste();
	218	});
b379f5	219	};
48f8f9	220
748b6f	221	/* ------------------------------- UI-Dynamik ----------------------- */
48f8f9	222
748b6f	223	self.reset_top_buttons = function() {
78d707	224	self.vorlage_laden_und_fuellen("data/tpl/top_btns.txt", '', function (html) {
748b6f	225	document.querySelector(".top-btns").innerHTML = html;
U	226	});
	227	};
	228
	229	this.abspieler_auswahl_fuellen = function() {
b56bb3	230	self.http_get('../api/store/Abspieler/liste/', function (responseText) {
78d707	231	self.vorlage_laden_und_fuellen("data/tpl/abs_sel.txt", JSON.parse(responseText), function (html) {
748b6f	232	document.querySelector(".abs-sel").innerHTML = html;
U	233	});
	234	});
	235	};
	236
	237	this.abspielliste_auswahl_fuellen = function() {
	238	self.http_get('../api/store/Abspielliste/', function (responseText) {
78d707	239	self.vorlage_laden_und_fuellen("data/tpl/pl_sel.txt", JSON.parse(responseText), function (html) {
748b6f	240	document.querySelector(".pl-sel").innerHTML = html;
b56bb3	241	self.addEvtListener('#playlist', 'change', function() {
U	242	self.titel_liste();
	243	});
748b6f	244	});
U	245	});
	246	};
	247
	248	/* Unterer Einblendbereich */
	249
	250	this.dialog_unten_zeigen = function() {
78d707	251	self.vorlage_laden_und_fuellen("data/tpl/ctrl.txt", "", function (html) {
748b6f	252	var dlg = document.querySelector(".dialog-unten");
U	253	dlg.style.height = '4.5em';
	254	dlg.innerHTML = html;
	255	self.abspieler_auswahl_fuellen();
	256	self.abspielliste_auswahl_fuellen();
095119	257	self.addEvtListener('#dazu-btn', 'click', self.titelDazu);
b56bb3	258	self.addEvtListener('#play-btn', 'click', self.play);
095119	259	self.addEvtListener('#weg-btn', 'click', self.titelWeg);
U	260	self.addEvtListener('#leeren-btn', 'click', self.alleTitelEntfernen);
748b6f	261	self.media_liste();
U	262	});
	263	};
	264
	265	/* Titel einer Abspielliste */
	266
	267	this.titel_liste = function() {
	268	self.reset_top_buttons();
	269	var plname = document.querySelector('#playlist').value;
78d707	270	document.querySelector('.bereich-name').textContent = 'Abspielliste ' + plname;
U	271	var bb = document.querySelector('.breadcrumb-behaelter');
	272	bb.textContent = "";
748b6f	273	self.http_get('../api/alist/' + plname, function (responseText) {
78d707	274	self.vorlage_laden_und_fuellen("data/tpl/titel_liste.txt", JSON.parse(responseText), function (html) {
748b6f	275	document.querySelector(".zentraler-inhalt").innerHTML = html;
U	276	self.addEvtListener('.entity-eintrag', 'click', function (event) {
	277	var t = event.target;
	278	self.removeClassMulti('selected');
	279	t.classList.add('selected');
	280	});
	281	});
	282	});
	283	};
	284
b56bb3	285	/* ------------- Media-Steuerung ------------------------- */
U	286
	287	this.play = function() {
	288	var abs = document.querySelector('#abspieler').value;
	289	var lst = document.querySelector('#playlist').value;
	290	console.log(
	291	"play playlist.value: " + document.querySelector('#playlist').value +
	292	", abspieler.value: " + document.querySelector('#abspieler').value);
	293	self.http_get('../api/strg/' + abs + '/play/liste/' + lst, function(responseText) {
	294	self.meldung_mit_timeout(responseText, 1500);
	295	});
095119	296	};
U	297
	298	/* ------------- Verwaltungsfunktionen Abspielliste -------------------- */
	299
	300	self.alleTitelEntfernen = function() {
	301	var plname = document.querySelector('#playlist').value;
	302	self.http_delete('../api/alist/' + plname + '/alle', '', function(responseText) {
	303	// DELETE http://localhost:9090/mz/api/alist/liste1/0
	304	//self.meldung_mit_timeout(responseText, 1500);
	305	self.titel_liste();
	306	});
	307	};
	308
	309	this.titelDazu = function() {
	310	var elem = document.querySelector(".selected");
	311	//var titelName = elem.textContent;
	312	var titelName = elem.attributes.dateiName.nodeValue;
	313	var album = elem.attributes.album.nodeValue;
	314	var interpret = elem.attributes.interpret.nodeValue;
	315	var anzName = elem.attributes.titelAnzName.nodeValue;
	316	var titel;
	317	if(self.mediaPfad.endsWith('/')) {
	318	titel = new Titel(titelName, self.mediaPfad, self.ortPfad, interpret, anzName, album);
	319	} else {
	320	titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad, interpret, anzName, album);
	321	}
	322	var plname = document.querySelector('#playlist').value;
	323	self.http_put('../api/alist/' + plname, JSON.stringify(titel), function(responseText) {
	324	//self.meldung_mit_timeout(responseText, 1500);
	325	});
	326	};
	327
	328	this.titelWeg = function() {
	329	var elem = document.querySelector(".selected");
	330	var parentElem = elem.parentNode;
	331	//console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
	332	var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
	333	//console.log("liElems.anz: " + liElems.length);
	334	var gefunden = false;
	335	for(var i = 0; i < liElems.length && !gefunden; i++) {
	336	//console.log(liElems.item(i).textContent);
	337	if(liElems.item(i).classList.contains("selected")) {
	338	gefunden = true;
	339	var index = i;
	340	//console.log(elem.textContent + ' hat Index ' + i);
	341	}
	342	}
	343	// /mz/api/alist/[pl-name]/[nr]
	344	var plname = document.querySelector('#playlist').value;
	345	self.http_delete('../api/alist/' + plname + '/' + index,'', function(responseText) {
	346	// DELETE http://localhost:9090/mz/api/alist/liste1/0
	347	//self.meldung_mit_timeout(responseText, 1500);
	348	self.titel_liste();
	349	});
	350
b56bb3	351	};
U	352
748b6f	353	/* ------------- Helfer fuer Entitaets-Formulare ----------------------- */
14638b	354
U	355	/*
	356	* url: '../api/store/Ablageort/liste/'
78d707	357	* tpl: "data/tpl/ablageort_liste.txt"
14638b	358	* storeUrl: '../api/store/Ablageort/'
U	359	* formFunc: "self.ablageort_form"
	360	* cb: etwas wie
	361	* function(responseText){
	362	* var ablageort = JSON.parse(responseText);
	363	* self.ablageort_form(ablageort);
	364	* });
	365	*/
50e53e	366	this.entitaet_liste = function(bname, listUrl, tpl, storeUrl, formFunc, cb) {
14638b	367	self.reset_top_buttons();
50e53e	368	document.querySelector('.bereich-name').textContent = bname;
78d707	369	var bb = document.querySelector('.breadcrumb-behaelter');
U	370	bb.textContent = "";
14638b	371	self.http_get(listUrl, function (responseText) {
U	372	self.vorlage_laden_und_fuellen(tpl, JSON.parse(responseText), function (html) {
	373	document.querySelector(".zentraler-inhalt").innerHTML = html;
	374	self.addEvtListener('.entity-eintrag', 'click', function (event) {
	375	var t = event.target;
	376	self.http_get(storeUrl + t.textContent, cb);
	377	});
	378	//self.addEvtListener('#neu-btn', 'click', function (event) {
	379	self.addEvtListener('#top-neu-btn', 'click', function(event) {
	380	eval(formFunc + "(this)");
	381	});
	382	});
	383	});
	384	};
748b6f	385
48f8f9	386	/*
c7030d	387	* dat: gefuelltes Datenobjekt bei Aenderung
U	388	* key: der alte schluesselbegriff bei Aenderung (z.B. al.name)
78d707	389	* tpl: "data/tpl/form_abspielliste.txt"
c7030d	390	* url: '../api/store/Abspielliste/'
U	391	* selector: '#abspielliste-name'
	392	* cbOk: etwas wie
	393	* function() {
	394	* self.abspielliste_auswahl_fuellen();
	395	* self.abspielliste_liste();
	396	* });
	397	* delSelector: '#abspielliste-name'
	398	* cbDel: etwas wie
	399	* function() {
	400	* self.abspielliste_auswahl_fuellen();
	401	* self.abspielliste_liste();
	402	* });
	403	*/
	404
50e53e	405	this.entitaet_form = function(bname, dat, key, tpl, url, selector, cb) {
U	406	document.querySelector('.bereich-name').textContent = bname;
c7030d	407	self.vorlage_laden_und_fuellen(tpl, dat, function (html) {
U	408	document.querySelector(".zentraler-inhalt").innerHTML = html;
	409	const form = document.querySelector('form');
	410	form.addEventListener('submit', function(event) {
	411	self.handle_submit(event, key, url, selector, cb);
	412	});
	413	self.addEvtListener('#cancel-btn', 'click', cb);
	414	self.addEvtListener('#loeschen-btn', 'click', function(event) {
	415	event.preventDefault();
	416	self.handle_del_btn(selector, url, cb);
	417	});
	418	});
	419	};
	420
	421	/*
48f8f9	422	* existingKey: wenn die Entitaet existiert und geandert werden soll
U	423	* leer, wenn neue Entitaet
	424	*/
	425	this.handle_submit = function(event, existingKey, putUrl, keySelector, cb) {
	426	event.preventDefault();
	427	const data = new FormData(event.target);
	428	const value = Object.fromEntries(data.entries());
095119	429	//console.log({ value });
U	430	//console.log(JSON.stringify(value));
48f8f9	431	var daten = JSON.stringify(value);
U	432	var formkey = document.querySelector(keySelector).value;
	433	formkey = formkey.replace(' ', '').replace(/[\W]+/g, '');
	434	if(typeof existingKey === "undefined" \|\| existingKey.length < 1) {
	435	// neu
	436	self.http_put(putUrl + formkey, daten, function (responseText) {
	437	if(typeof(cb) !== 'function') {
	438	// ..
	439	} else {
	440	cb();
	441	}
	442	});
	443	} else {
	444	// aendern
	445	self.http_put(putUrl + existingKey, daten, function (responseText) {
	446	if(typeof(cb) !== 'function') {
	447	// ..
	448	} else {
	449	cb();
	450	}
	451	});
	452	}
	453	};
	454
	455	this.handle_del_btn = function(selectorKey, delUrl, cb) {
	456	var pkey = document.querySelector(selectorKey).value;
	457	var dlgdata = {"del-elem": pkey};
78d707	458	self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.txt', dlgdata, function() {
48f8f9	459	self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
U	460	self.addEvtListener('#ja-btn', 'click', function(event) {
095119	461	//console.log("loeschen geklickt.");
48f8f9	462	self.http_delete(delUrl + pkey, '', function (responseText) {
U	463	self.dialog_schliessen();
	464	if(typeof(cb) !== 'function') {
	465	// ..
	466	} else {
	467	cb();
	468	}
	469	});
	470	});
	471	});
	472	};
748b6f	473
U	474	/* ------------------ sonstige Helfer ----------------------- */
	475
7c22a2	476	this.addEvtListener = function(selector, eventName, func) {
U	477	document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
	478	};
	479
	480	this.removeClassMulti = function(selector) {
	481	document.querySelectorAll('.' + selector).forEach(elem => { elem.classList.remove(selector); });
	482	};
	483
f45e20	484	/* --------------------- asynchroner HTTP Client ----------------- */
faab2d	485
f074f6	486	this.http_get = function (u, cb) {
b379f5	487	self.http_call('GET', u, null, cb);
U	488	};
f074f6	489
U	490	this.http_post = function (u, data, cb) {
b379f5	491	self.http_call('POST', u, data, cb);
U	492	};
	493
90f5d4	494	this.http_put = function (u, data, cb) {
U	495	self.http_call('PUT', u, data, cb);
	496	};
	497
5b7356	498	this.http_delete = function (u, data, cb) {
5f7e0b	499	// console.log("delete " + u);
5b7356	500	self.http_call('DELETE', u, data, cb);
U	501	};
	502
f074f6	503	this.http_call = function (method, u, data, scallback) {
b379f5	504	var xhr = new XMLHttpRequest();
U	505	var url = u;
f074f6	506	xhr.onreadystatechange = function () {
b379f5	507	if (this.readyState === 4 && this.status === 200) {
U	508	scallback(this.responseText);
	509	}
	510	};
	511	xhr.open(method, url);
f074f6	512	if (method === 'GET') {
b379f5	513	xhr.send();
2597cd	514	} else if (method === 'POST' \|\| method === 'PUT' \|\| method === 'DELETE') {
b379f5	515	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
U	516	xhr.send(data);
	517	}
	518	};
8239d1	519
f45e20	520	/* ------------------------ aus App-Vorlage ------------------- */
cfa858	521
f074f6	522	this.menue_umschalten = function () {
cfa858	523	var ham = document.querySelector(".hamburger");
U	524	ham.classList.toggle("is-active"); // hamburger-icon umschalten
	525	self.appMenu.toggle(); // menue oeffnen/schliessen
	526	};
	527
f074f6	528	this.info_dialog_zeigen = function () {
78d707	529	self.dialog_laden_und_zeigen('data/tpl/dlg-info.txt', '');
cfa858	530	self.menue_umschalten();
U	531	};
	532
f074f6	533	this.seitenleiste_umschalten = function () {
cfa858	534	var ostDiv = document.querySelector('.ost');
f074f6	535	if (ostDiv.classList.contains('ost-open')) {
cfa858	536	ostDiv.classList.remove('ost-open');
f074f6	537	ostDiv.style.flexBasis = '0em';
cfa858	538	} else {
f074f6	539	ostDiv.classList.add('ost-open');
U	540	ostDiv.style.flexBasis = '6em';
cfa858	541	}
U	542	self.menue_umschalten();
	543	};
	544
f074f6	545	this.fusszeile_umschalten = function () {
cfa858	546	var suedDiv = document.querySelector('.sued');
f074f6	547	if (suedDiv.classList.contains('sued-open')) {
cfa858	548	suedDiv.classList.remove('sued-open');
f074f6	549	suedDiv.style.height = '0';
cfa858	550	} else {
U	551	suedDiv.classList.add('sued-open');
f074f6	552	suedDiv.style.height = '1.5em';
cfa858	553	}
U	554	self.menue_umschalten();
	555	};
	556
f074f6	557	this.menu_message = function (msg) {
cfa858	558	self.meldung_mit_timeout(msg, 1500);
U	559	var suedDiv = document.querySelector('.sued');
f074f6	560	if (suedDiv.classList.contains('sued-open')) {
cfa858	561	} else {
U	562	suedDiv.classList.add('sued-open');
f074f6	563	suedDiv.style.height = '1.5em';
cfa858	564	}
U	565	self.menue_umschalten();
	566	};
	567
f074f6	568	this.message_1 = function () {
cfa858	569	self.menu_message('Eine Mitteilung.');
U	570	};
	571
f074f6	572	this.message_2 = function () {
cfa858	573	self.menu_message('Was wir schon immer sagen wollten.');
U	574	};
	575
f074f6	576	this.message_3 = function (text) {
cfa858	577	self.menu_message(text);
U	578	};
	579
f074f6	580	this.meldung_mit_timeout = function (meldung, timeout) {
cfa858	581	var s = document.querySelector('.sued');
a43e1a	582	s.classList.add('sued-open');
U	583	s.style.height = '1.5em';
cfa858	584	s.textContent = meldung;
f074f6	585	setTimeout(function () {
cfa858	586	s.textContent = 'Bereit.';
f074f6	587	setTimeout(function () {
cfa858	588	var suedDiv = document.querySelector('.sued');
f074f6	589	if (suedDiv.classList.contains('sued-open')) {
U	590	suedDiv.classList.remove('sued-open');
	591	suedDiv.style.height = '0';
cfa858	592	}
U	593	}, 500);
	594	}, timeout);
	595	};
8239d1	596
f45e20	597	/* --------------------- Dialog-Funktionen ------------------------ */
cfa858	598
U	599	/*
f074f6	600	Einen Dialog aus Vorlagen erzeugen
U	601
	602	vurl - URL zur Dialogvorlage
	603	msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
	604	*/
5b7356	605	this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) {
U	606	var vorlage = self.cache[vurl];
	607	if(vorlage === undefined) {
	608	self.http_get(vurl, function(antwort) {
	609	self.cache[vurl] = antwort;
	610	self.dialog_zeigen(vurl, msgTpl, cb);
f074f6	611	});
cfa858	612	} else {
5b7356	613	self.dialog_zeigen(vurl, msgTpl, cb);
cfa858	614	}
U	615	};
	616
5b7356	617	this.dialog_zeigen = function (vurl, inhalt, cb) {
U	618	var dlg = document.querySelector(".dialog");
2597cd	619	self.html_erzeugen(vurl, inhalt, function (html) {
U	620	dlg.style.height = '7em';
	621	dlg.innerHTML = html;
	622	document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
	623	if(typeof(cb) !== 'function') {
	624	// ..
	625	} else {
	626	cb();
	627	}
	628	});
5b7356	629	};
2597cd	630
f45e20	631	this.dialog_schliessen = function () {
cfa858	632	document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U	633	var dlg = document.querySelector('.dialog');
	634	dlg.style.height = '0';
	635	dlg.innerHTML = '';
	636	};
	637
f45e20	638	/* --------------------- Vorlagen ---------------------- */
cfa858	639
U	640	/*
f074f6	641	Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
U	642	gefüllt wird
	643
	644	Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
	645	Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
	646	Das fertige HTML wird der Callback-Funktion übergeben
	647	sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
	648	Programmlauf zu diesem Zeitpunkt mittlerweile ist.
	649
	650	vurl - URL zur Vorlagendatei
	651	inhalt - die JSON-Struktur, deren Inhalt in die
	652	Vorlage gefüllt werden soll
	653	cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
	654	Dieser Callback-Funktion wird das fertige HTML übergeben
	655	*/
	656	this.html_erzeugen = function (vurl, inhalt, cb) {
cfa858	657	var vorlage = self.cache[vurl];
f074f6	658	if (vorlage === undefined) {
cfa858	659	self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
U	660	} else {
	661	self.vorlage_fuellen(vurl, inhalt, cb);
	662	}
	663	};
	664
f074f6	665	this.vorlage_fuellen = function (vurl, inhalt, cb) {
cfa858	666	cb(Mustache.render(self.cache[vurl], inhalt));
U	667	};
	668
	669	/*
f074f6	670	Eine Vorlage vom Server in den lokalen Speicher laden
U	671	vurl - der URL unter dem die Vorlage zu finden ist
	672	inhalt - die JSON-Struktur, deren Inhalt in die
	673	Vorlage gefüllt werden soll
	674	cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
	675	Inhalt gefüllt ist
	676	*/
	677	this.vorlage_laden_und_fuellen = function (vurl, inhalt, cb) {
cfa858	678	var xmlhttp = new XMLHttpRequest();
f074f6	679	xmlhttp.onreadystatechange = function () {
cfa858	680	if (this.readyState == 4 && this.status == 200) {
U	681	self.cache[vurl] = this.responseText;
	682	self.vorlage_fuellen(vurl, inhalt, cb);
	683	}
	684	};
	685	xmlhttp.open("GET", vurl, true);
	686	xmlhttp.send();
	687	};
	688
	689
	690	}
	691
f45e20	692	/* ----------- Objekte ---------------- */
U	693
	694	function Ablageort(n, o, u) {
	695	this.name = n;
	696	this.ort = o;
	697	this.url = u;
	698	}
	699
	700	function Einstellung(k, v) {
	701	this.key = k;
	702	this.value = v;
	703	}
	704
	705	function Abspieler(n, u) {
	706	this.name = n;
	707	this.url = u;
8d7d35	708	}
U	709
	710	function Abspielliste(n) {
	711	this.name = n;
e60cff	712	}
U	713
245ac1	714	function Titel(n, p, u, i, t, a) {
e60cff	715	this.katalogUrl = u;
2bdd78	716	this.pfad = p;
e60cff	717	this.name = n;
245ac1	718	this.interpret = i;
U	719	this.titelAnzName = t;
	720	this.album = a;
d6b78c	721	}