Refactor admin

static/css/style.css

@@ -28,6 +28,24 @@ figure.moz {
     vertical-align: middle;
 }
 
+figure.moz .menu {
+    position: absolute;
+    margin: inherit;
+    display: none;
+}
+figure.moz:hover .menu {
+    display: block;
+}
+figure.moz:hover .menu a {
+    background: rgba(0,0,0,0.5);
+    color: #eee;
+    padding: 6px 10px 8px 10px;
+    text-decoration: none;
+}
+figure.moz .menu a:hover {
+    background: rgba(0,0,0,0.8);
+}
+
 .big img {
     max-height: calc(100vh - 5px);
     max-width: calc(100vw - 5px);

static/js/youp0m-admin.js

@@ -1,11 +1,47 @@
 api_url = "/api/next/";
 img_url = "/images/next/";
 
-function admin_ctrl(figure) {
-    var menu = document.createElement("ul");
-    var item = document.createElement("li", "test");
-    menu.appendChild(item);
-    figure.appendChild(menu)
+function publish_pict(pict) {
+  fetch(api_url + "/" + pict.name + "/publish").then(response => {
+      picts = null;
+      sync()
+  });
+}
+
+function delete_pict(pict) {
+  fetch(api_url + "/" + pict.name, { method: "DELETE" }).then(response => {
+      picts = null;
+      sync()
+  });
+}
+
+function admin_ctrl(pict) {
+    var figure = document.createElement("figure");
+    figure.className = "moz";
+    var img = document.createElement("img");
+    img.src = img_url + pict.name;
+    img.alt = pict.name;
+    var div = document.createElement("div");
+    div.className = "menu"
+    var linkPub = document.createElement("a");
+    linkPub.onclick = function(e) {
+        publish_pict(pict);
+        return false;
+    };
+    linkPub.href = "#";
+    linkPub.innerHTML = "Publier";
+    var linkDel = document.createElement("a");
+    linkDel.onclick = function(e) {
+        delete_pict(pict);
+        return false;
+    };
+    linkDel.href = "#";
+    linkDel.innerHTML = "Supprimer";
+    div.appendChild(linkPub);
+    div.appendChild(linkDel);
+    figure.appendChild(div);
+    figure.appendChild(img);
+    document.body.appendChild(figure);
 }
 
 function sync() {

static/js/youp0m.js

@@ -16,32 +16,41 @@ function get_picts(then, then_value) {
     });
 }
 
-function show_mozaic() {
+function show_mozaic(callpict) {
     if (!picts) {
-	get_picts(show_mozaic);
+        get_picts(show_mozaic, callpict);
 	return;
     }
 
+    if (!picts.length) {
+        document.body.innerHTML = '<h1>Welcome on YouP0m!</h1><h2>There is no image currently, come back soon!</h2>';
+        return;
+    }
+
+    if (!callpict) {
+        callpict = function (pict) {
+	    var figure = document.createElement("figure");
+	    figure.className = "moz";
+	    var img = document.createElement("img");
+	    img.src = img_url + pict.name;
+	    img.alt = pict.name;
+	    var link = document.createElement("a");
+	    link.onclick = function(e) {
+	        window.history.pushState(null, "YouP0m", link.href);
+	        sync();
+	        return false;
+	    };
+	    link.href = "/" + pict.name;
+	    link.appendChild(img);
+	    figure.appendChild(link);
+	    document.body.appendChild(figure);
+	}
+    }
+
     while (document.body.hasChildNodes())
 	document.body.removeChild(document.body.lastChild);
 
-    picts.forEach(function (pict) {
-	var figure = document.createElement("figure");
-	figure.className = "moz";
-	var img = document.createElement("img");
-	img.src = img_url + pict.name;
-	img.alt = pict.name;
-	var link = document.createElement("a");
-	link.onclick = function(e) {
-	    window.history.pushState(null, "YouP0m", link.href);
-	    sync();
-	    return false;
-	};
-	link.href = "/" + pict.name;
-	link.appendChild(img);
-	figure.appendChild(link);
-	document.body.appendChild(figure);
-    });
+    picts.forEach(callpict);
 }
 
 function show_picture(id) {