pipic/web/admin/view.js

(function() {

	window.setView = setView;

	var root = $$("#root");

	var views = {
		login: viewLogin,
		main: viewMain,
		edit: viewEdit
	}

	function setView(name, args) {
		if (args)
			location.hash = name+"/"+args.join("/");
		else
			location.hash = name+"/";
	}

	function viewLogin(root) {
		var msg;
		var pwd;
		elem("form", {}, [
			msg = elem("div", {
				className: "msg",
				innerHTML: "Log In"
			}),

			pwd = elem("input", {
				type: "password",
				placeholder: "Password"
			}),

			elem("button", {
				innerHTML: "Log In"
			})
		]).on("submit", evt => {
			evt.preventDefault();

			apiLogin(pwd.value, success => {
				if (success)
					setView("main");
				else
					msg.innerHTML = "Incorrect password."
			});
		}).appendTo(root);
	}

	function viewMain(root) {

		// New slide button
		elem("button", {
			className: "newSlide",
			innerHTML: "New Slide"
		}).on("click", () => {
			api("slide_create", {}, (err, id) => {
				if (err)
					return error(err);

				setView("edit", [id]);
			});
		}).appendTo(root);

		var slidesEl = elem("div", {
			className: "slides"
		}).appendTo(root);

		// Get a list of the slides
		api("list_slides", {}, (err, slides) => {
			if (err)
				return error(err);

			slides.forEach(function(s) {

				// Create a div for each slide
				var el = elem("a", {
					className: "slide",
					href: "#edit/"+s
				}, [
					elem("div", {
						className: "name",
						innerText: s
					}),

					elem("iframe", {
						className: "preview",
						src: "/"+s+"/"
					}),

					elem("div", {
						className: "overlay"
					})
				]).appendTo(slidesEl);

				// Add 'disabled' to the class if it's disabled
				api("slide_meta", { slide: s }, (err, res) => {
					if (err)
						return error(err);

					if (res.disabled)
						el.addClass("disabled");
				});
			});
		});
	}

	function viewEdit(root, slide) {
		if (!slide) {
			error("No slide provided.");
			setView("main");
			return;
		}

		var fileListEl;
		var htmlTextEl;
		var previewEl;
		var metaDisabledEl;

		function populateFileList() {
			api("slide_file_list", { slide: slide }, (err, res) => {
				fileListEl.clear();
				if (err)
					return error(err);

				res.files.forEach(f => {
					elem("div", { className: "file" }, [
						elem("span", {
							className: "name",
							innerText: f
						}),

						elem("span", { className: "controls" }, [
							elem("button", {
								className: "rename",
								innerText: "Rename"
							}).on("click", () => {
								var nwname = prompt("New name?", f);
								if (!nwname)
									return;

								api("slide_file_rename", {
									slide: slide,
									from: f,
									to: nwname
								}, populateFileList);
							}),

							elem("button", {
								className: "delete",
								innerText: "Delete"
							}).on("click", () => {
								if (!confirm("Are you sure you want to delete "+f+"?"))
									return;

								api("slide_file_delete", {
									slide: slide,
									file: f
								}, populateFileList);
							})
						])
					]).appendTo(fileListEl);
				});
			});
		}

		function populateMeta() {
			api("slide_get_meta", { slide: slide }, (err, obj) => {
				if (err)
					return error(err);

				metaDisabledEl.checked = !!obj.disabled;
			});
		}

		elem("div", { id: "slide" }, [
			elem("div", { id: "topBar" }, [
				elem("a", {
					href: "#main",
					innerText: "Back"
				}),

				elem("span", {
					className: "name",
					innerText: slide
				})
			]),

			fileListEl = elem("div", { id: "fileList" }),

			elem("div", { id: "controls" }, [
				uploadEl({
					slide: slide
				}, populateFileList),

				elem("button", {
					className: "delete",
					innerHTML: "Delete"
				}).on("click", () => {
					if (!confirm("Are you sure you want to delete slide "+slide+"?"))
						return;

					api("slide_delete", { slide: slide }, err => {
						if (err)
							return error(err);

						setView("main");
					});
				}),

				elem("label", { innerHTML: "Disabled" }, [
					metaDisabledEl = elem("input", {
						type: "checkbox"
					}).on("change", (evt, el) => {
						api("slide_set_meta", {
							slide: slide,
							key: "disabled",
							val: JSON.stringify(!!el.checked)
						}, populateMeta);
					})
				]),
			]),

			htmlTextEl = elem("textarea", {
				id: "html"
			}).on("keydown", debounce(() => {
				api("slide_content_update", {
					slide: slide,
					text: htmlTextEl.value
				}, err => {
					if (err)
						error(err);

					previewEl.src = previewEl.src;
				});
			})),

			previewEl = elem("iframe", {
				id: "preview",
				src: "/"+slide+"/"
			})
		]).appendTo(root);

		populateFileList();
		populateMeta();

		api("slide_meta", { slide: slide }, (err, res) => {
			if (err) {
				error(err);
				setView("main");
			}

			//metaDisabledEl.checked = !!res.disabled;
		});

		api("slide_content", { slide: slide }, (err, html) => {
			if (err)
				return error(err);

			htmlTextEl.innerHTML = html.text;
		});

	}

	function route() {
		var name, args;
		if (location.hash.substring(1)) {
			args = location.hash.substring(1).split("/");
			name = args[0];
			args.splice(0, 1);
			if (!views[name])
				name = "login"
		} else {
			name = "login";
		}

		args = args || [];
		args.splice(0, 0, root);
		root.clear();
		root.className = name;

		views[name].apply(null, args);

		window.scrollTo(0, 0);
	}

	route();

	window.onhashchange = route;
})();