HW7: working on 6 (almost done)

This commit is contained in:
Claudio Maggioni 2019-11-14 16:08:52 +01:00
parent d8efbdc8a9
commit b8fad52ebe
4 changed files with 25 additions and 7 deletions

View file

@ -1,6 +1,6 @@
(function(dust){dust.register("500",body_0);function body_0(chk,ctx){return chk.w("<html><head><meta charset='utf-8'></head><body><h1>Error 500</h1><pre>").f(ctx.get(["err"], false),ctx,"h").w("</pre></body></html>");}body_0.__dustBody=!0;return body_0}(dust)); (function(dust){dust.register("500",body_0);function body_0(chk,ctx){return chk.w("<html><head><meta charset='utf-8'></head><body><h1>Error 500</h1><pre>").f(ctx.get(["err"], false),ctx,"h").w("</pre></body></html>");}body_0.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("favourite",body_0);function body_0(chk,ctx){return chk.w("<html><head><meta charset=\"utf-8\"><title>").f(ctx.get(["name"], false),ctx,"h").w("</title></head><body>").p("favourite_partial",ctx,ctx,{}).w("<a href=\"/favorites\">Favourites list</a></body></html>");}body_0.__dustBody=!0;return body_0}(dust)); (function(dust){dust.register("favourite",body_0);function body_0(chk,ctx){return chk.w("<html><head><meta charset=\"utf-8\"><title>").f(ctx.get(["name"], false),ctx,"h").w("</title></head><body>").p("favourite_partial",ctx,ctx,{}).w("<a href=\"/favorites\">Favourites list</a></body></html>");}body_0.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("favourite_partial",body_0);function body_0(chk,ctx){return chk.w("<style>.hidden {display: none}</style><h3>").f(ctx.get(["name"], false),ctx,"h").w("</h3><img src=\"").f(ctx.get(["dataURL"], false),ctx,"h").w("\" alt=\"").f(ctx.get(["name"], false),ctx,"h").w("\">").x(ctx.get(["b"], false),ctx,{"block":body_1},{}).x(ctx.get(["details"], false),ctx,{"else":body_2,"block":body_5},{});}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w("<p><strong>Bookmarked</strong></p>");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w("<form class=\"data\" id=\"favourite").f(ctx.get(["_id"], false),ctx,"h").w("\" method=\"POST\" action=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("?_method=PUT\"><input type=\"hidden\" name=\"dataURL\" value=\"").f(ctx.get(["dataURL"], false),ctx,"h").w("\"><label for=\"name\">Name:</label><input type=\"text\" name=\"name\" placeholder=\"Name\" value=\"").f(ctx.get(["name"], false),ctx,"h").w("\"><br><button type=\"button\" class=\"imgur\">Imgur options</button><hr><button data-update>Update</button><br><button data-delete formaction=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("?_method=DELETE\">Delete</button><br>").x(ctx.get(["bookmarked"], false),ctx,{"else":body_3,"block":body_4},{}).w("</form><form class=\"favorites hidden\"><hr><input type=\"hidden\" name=\"dataURL\" value=\"").f(ctx.get(["dataURL"], false),ctx,"h").w("\"><input type=\"text\" name=\"album\" placeholder=\"Imgur album name\"><br><input type=\"text\" name=\"tags\" placeholder=\"Imgur tags\"><br><label for=\"favorites\">Add in favorites</label><input type=\"checkbox\" name=\"favorites\"><button>Submit</button></form>");}body_2.__dustBody=!0;function body_3(chk,ctx){return chk.w("<button data-bookmark name=\"bookmarked\" value=\"true\"formaction=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("/bookmarked?_method=PUT\">Add bookmark</button>");}body_3.__dustBody=!0;function body_4(chk,ctx){return chk.w("<button data-del-bookmark name=\"bookmarked\" value=\"false\"formaction=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("/bookmarked?_method=PUT\">Remove bookmark</button>");}body_4.__dustBody=!0;function body_5(chk,ctx){return chk.w("<a href=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("\">Details</a>");}body_5.__dustBody=!0;return body_0}(dust)); (function(dust){dust.register("favourite_partial",body_0);function body_0(chk,ctx){return chk.w("<h3>").f(ctx.get(["name"], false),ctx,"h").w("</h3><img src=\"").f(ctx.get(["dataURL"], false),ctx,"h").w("\" alt=\"").f(ctx.get(["name"], false),ctx,"h").w("\">").x(ctx.get(["b"], false),ctx,{"block":body_1},{}).x(ctx.get(["details"], false),ctx,{"else":body_2,"block":body_5},{});}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w("<p><strong>Bookmarked</strong></p>");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w("<form class=\"data\" id=\"favourite").f(ctx.get(["_id"], false),ctx,"h").w("\" method=\"POST\" action=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("?_method=PUT\"><input type=\"hidden\" name=\"dataURL\" value=\"").f(ctx.get(["dataURL"], false),ctx,"h").w("\"><label for=\"name\">Name:</label><input type=\"text\" name=\"name\" placeholder=\"Name\" value=\"").f(ctx.get(["name"], false),ctx,"h").w("\"><br><button type=\"button\" class=\"imgur\">Imgur options</button><hr><button data-update>Update</button><br><button data-delete formaction=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("?_method=DELETE\">Delete</button><br>").x(ctx.get(["bookmarked"], false),ctx,{"else":body_3,"block":body_4},{}).w("</form><form class=\"favorites hidden\"><hr><input type=\"hidden\" name=\"dataURL\" value=\"").f(ctx.get(["dataURL"], false),ctx,"h").w("\"><input type=\"text\" name=\"album\" placeholder=\"Imgur album name\"><br><input type=\"text\" name=\"tags\" placeholder=\"Imgur tags\"><br><label for=\"favorites\">Add in favorites</label><input type=\"checkbox\" name=\"favorites\"><br><label for=\"favorites\">Replace an image</label><input type=\"checkbox\" name=\"replace\"><br><div class=\"replace hidden\"><input type=\"text\" name=\"old_name\" placeholder=\"Imgur image name to replace\"><br></div><button type=\"submit\">Submit to Imgur</button></form>");}body_2.__dustBody=!0;function body_3(chk,ctx){return chk.w("<button data-bookmark name=\"bookmarked\" value=\"true\"formaction=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("/bookmarked?_method=PUT\">Add bookmark</button>");}body_3.__dustBody=!0;function body_4(chk,ctx){return chk.w("<button data-del-bookmark name=\"bookmarked\" value=\"false\"formaction=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("/bookmarked?_method=PUT\">Remove bookmark</button>");}body_4.__dustBody=!0;function body_5(chk,ctx){return chk.w("<a href=\"/favorites/").f(ctx.get(["_id"], false),ctx,"h").w("\">Details</a>");}body_5.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("favourites",body_0);function body_0(chk,ctx){return chk.w("<html><head><meta charset=\"utf-8\">").x(ctx.get(["bookmarked"], false),ctx,{"else":body_1,"block":body_2},{}).w("</head><body>").x(ctx.get(["bookmarked"], false),ctx,{"else":body_3,"block":body_4},{}).s(ctx.get(["favs"], false),ctx,{"else":body_5,"block":body_6},{}).w("</body></html>");}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w("<title>Favourites</title>");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w("<title>Bookmarked</title>");}body_2.__dustBody=!0;function body_3(chk,ctx){return chk.w("<h1>Favourites</h1>");}body_3.__dustBody=!0;function body_4(chk,ctx){return chk.w("<h1>Bookmarked</h1>");}body_4.__dustBody=!0;function body_5(chk,ctx){return chk.w("<strong>No favourites.</strong>");}body_5.__dustBody=!0;function body_6(chk,ctx){return chk.w("<div>").p("favourite_partial",ctx,ctx,{"name":ctx.get(["name"], false),"dataURL":ctx.get(["dataURL"], false),"_id":ctx.get(["_id"], false),"bookmarked":ctx.get(["bookmarked"], false),"details":"true"}).w("</div>");}body_6.__dustBody=!0;return body_0}(dust)); (function(dust){dust.register("favourites",body_0);function body_0(chk,ctx){return chk.w("<html><head><meta charset=\"utf-8\">").x(ctx.get(["bookmarked"], false),ctx,{"else":body_1,"block":body_2},{}).w("</head><body>").x(ctx.get(["bookmarked"], false),ctx,{"else":body_3,"block":body_4},{}).s(ctx.get(["favs"], false),ctx,{"else":body_5,"block":body_6},{}).w("</body></html>");}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w("<title>Favourites</title>");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w("<title>Bookmarked</title>");}body_2.__dustBody=!0;function body_3(chk,ctx){return chk.w("<h1>Favourites</h1>");}body_3.__dustBody=!0;function body_4(chk,ctx){return chk.w("<h1>Bookmarked</h1>");}body_4.__dustBody=!0;function body_5(chk,ctx){return chk.w("<strong>No favourites.</strong>");}body_5.__dustBody=!0;function body_6(chk,ctx){return chk.w("<div>").p("favourite_partial",ctx,ctx,{"name":ctx.get(["name"], false),"dataURL":ctx.get(["dataURL"], false),"_id":ctx.get(["_id"], false),"bookmarked":ctx.get(["bookmarked"], false),"details":"true"}).w("</div>");}body_6.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("index",body_0);function body_0(chk,ctx){return chk.w("<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>OO-JS Exercise - Web Atelier 2017</title><link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css\"><link rel=\"stylesheet\" href=\"style.css\"></head><body onload=\"init()\"><h1>OO-JS Exercise: Canvas</h1><div id=\"app\"><div id=\"left-toolbar\" class=\"toolbar\"><button id=\"clear-btn\">Clear</button><button id=\"undo-btn\">Undo</button><button id=\"camera-btn\"><i class=\"fa fa-camera\" aria-hidden=\"true\"></i></button></div><canvas id=\"canvas\" width=\"600\" height=\"400\"></canvas><div id=\"brush-toolbar\" class=\"toolbar\"><!-- Brushes buttons go here (programmatically). Each button should be a <button> element --></div></div><br><div><label for=\"name-filter\">By name search:</label><input id=\"name-filter\" type=\"text\" placeholder=\"Search by name\"><br><label for=\"bookmarked-filter\">Only bookmarked</label><input id=\"bookmarked-filter\" type=\"checkbox\"></div><div id=\"favourites\"></div><script src=\"dustjs-linkedin/dust-full.min.js\"></script><script src=\"js/views.js\"></script><script src=\"js/fetch.js\"></script><script src=\"/socket.io/socket.io.js\"></script><script src=\"scripts/brushes.js\"></script><script src=\"scripts/undo.js\"></script><!-- <script src=\"scripts/clock.js\"></script> --><script src=\"scripts/app.js\"></script><script src=\"main.js\"></script></body></html>");}body_0.__dustBody=!0;return body_0}(dust)); (function(dust){dust.register("index",body_0);function body_0(chk,ctx){return chk.w("<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>OO-JS Exercise - Web Atelier 2017</title><link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css\"><link rel=\"stylesheet\" href=\"style.css\"></head><body onload=\"init()\"><h1>OO-JS Exercise: Canvas</h1><div id=\"app\"><div id=\"left-toolbar\" class=\"toolbar\"><button id=\"clear-btn\">Clear</button><button id=\"undo-btn\">Undo</button><button id=\"camera-btn\"><i class=\"fa fa-camera\" aria-hidden=\"true\"></i></button></div><canvas id=\"canvas\" width=\"600\" height=\"400\"></canvas><div id=\"brush-toolbar\" class=\"toolbar\"><!-- Brushes buttons go here (programmatically). Each button should be a <button> element --></div></div><br><div><label for=\"name-filter\">By name search:</label><input id=\"name-filter\" type=\"text\" placeholder=\"Search by name\"><br><label for=\"bookmarked-filter\">Only bookmarked</label><input id=\"bookmarked-filter\" type=\"checkbox\"></div><div id=\"favourites\"></div><script src=\"dustjs-linkedin/dust-full.min.js\"></script><script src=\"js/views.js\"></script><script src=\"js/fetch.js\"></script><script src=\"/socket.io/socket.io.js\"></script><script src=\"scripts/brushes.js\"></script><script src=\"scripts/undo.js\"></script><!-- <script src=\"scripts/clock.js\"></script> --><script src=\"scripts/app.js\"></script><script src=\"main.js\"></script></body></html>");}body_0.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("server_side",body_0);function body_0(chk,ctx){return chk.s(ctx.get(["favs"], false),ctx,{"block":body_1},{});}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w("<div id=\"favorite_").f(ctx.get(["_id"], false),ctx,"h").w("\" class=\"").x(ctx.get(["bookmarked"], false),ctx,{"block":body_2},{}).w("\">").p("favourite_partial",ctx,ctx,{"name":ctx.get(["name"], false),"dataURL":ctx.get(["dataURL"], false),"_id":ctx.get(["_id"], false),"bookmarked":ctx.get(["bookmarked"], false)}).w("</div>");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w("bookmarked");}body_2.__dustBody=!0;return body_0}(dust)); (function(dust){dust.register("server_side",body_0);function body_0(chk,ctx){return chk.s(ctx.get(["favs"], false),ctx,{"block":body_1},{});}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w("<div id=\"favorite_").f(ctx.get(["_id"], false),ctx,"h").w("\" class=\"").x(ctx.get(["bookmarked"], false),ctx,{"block":body_2},{}).w("\">").p("favourite_partial",ctx,ctx,{"name":ctx.get(["name"], false),"dataURL":ctx.get(["dataURL"], false),"_id":ctx.get(["_id"], false),"bookmarked":ctx.get(["bookmarked"], false)}).w("</div>");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w("bookmarked");}body_2.__dustBody=!0;return body_0}(dust));

View file

@ -17,6 +17,7 @@ class App {
const imgurForm = dom.querySelector('form.favorites'); const imgurForm = dom.querySelector('form.favorites');
const replaceToggle = dom.querySelector('input[name=replace]'); const replaceToggle = dom.querySelector('input[name=replace]');
const albumInput = imgurForm.querySelector('input[name=album]'); const albumInput = imgurForm.querySelector('input[name=album]');
const oldNameInput = imgurForm.querySelector('input[name=old_name]');
const replacePanel = imgurForm.querySelector('.replace'); const replacePanel = imgurForm.querySelector('.replace');
dom.querySelector('button.imgur').onclick = () => { dom.querySelector('button.imgur').onclick = () => {
@ -27,9 +28,11 @@ class App {
if (replaceToggle.checked) { if (replaceToggle.checked) {
replacePanel.classList.remove('hidden'); replacePanel.classList.remove('hidden');
albumInput.setAttribute('disabled', 'disabled'); albumInput.setAttribute('disabled', 'disabled');
oldNameInput.setAttribute('required', 'required');
} else { } else {
replacePanel.classList.add('hidden'); replacePanel.classList.add('hidden');
albumInput.removeAttribute('disabled'); albumInput.removeAttribute('disabled');
oldNameInput.removeAttribute('required');
} }
}; };
@ -49,7 +52,6 @@ class App {
favorites: data.get('favorites') favorites: data.get('favorites')
}; };
doJSONRequest('POST', '/imgur/ordeal', {}, obj) doJSONRequest('POST', '/imgur/ordeal', {}, obj)
.then(e => { .then(e => {
if (e.ordealSuccess === true) { if (e.ordealSuccess === true) {

View file

@ -68,6 +68,7 @@ router.post('/imgur/ordeal', async (req, res) => {
const uploadData = { const uploadData = {
image: req.body.dataURL.substring('data:image/png;base64,'.length), image: req.body.dataURL.substring('data:image/png;base64,'.length),
type: 'base64', type: 'base64',
title: req.body.name,
name: req.body.name + '.png', name: req.body.name + '.png',
}; };
@ -127,7 +128,9 @@ router.post('/imgur/ordeal', async (req, res) => {
} }
const image = const image =
images.data.filter(e => e.name.match(req.body.oldName))[0]; images.data.filter(e => e.title.match(req.body.oldName))[0];
console.log('image', image);
if (!image || reject) { if (!image || reject) {
rej(); rej();
@ -139,12 +142,25 @@ router.post('/imgur/ordeal', async (req, res) => {
})); }));
} }
const result = await promiseAny(promises); let result;
try {
result = await promiseAny(promises);
} catch(_) {
res.status(404).json({ error: "No image in gallery found" });
return;
}
console.log('result', result);
albumJson = { data: result.album }; albumJson = { data: result.album };
ordealResponse.views = result.image.views; ordealResponse.views = result.image.views;
ordealResponse.votes = await fetchImgur(req, res, 'GET', '/gallery/' ordealResponse.votes = await fetchImgur(req, res, 'GET', '/gallery/'
+ result.image.id + '/votes'); + result.album.id + '/votes');
if (!ordealResponse.votes) {
return;
}
console.log('votes', ordealResponse.votes);
if (!await fetchImgur(req, res, 'DELETE', '/image/' + result.image.id)) { if (!await fetchImgur(req, res, 'DELETE', '/image/' + result.image.id)) {
return; return;

View file

@ -35,8 +35,8 @@ formaction="/favorites/{_id}/bookmarked?_method=PUT">Add bookmark</button>
<label for="favorites">Replace an image</label> <label for="favorites">Replace an image</label>
<input type="checkbox" name="replace"><br> <input type="checkbox" name="replace"><br>
<div class="replace hidden"> <div class="replace hidden">
<input type="text" name="old_name" required placeholder="Imgur image name to replace"><br> <input type="text" name="old_name" placeholder="Imgur image name to replace"><br>
</div> </div>
<button>Submit to Imgur</button> <button type="submit">Submit to Imgur</button>
</form> </form>
{/details} {/details}