HW7: done task 7

This commit is contained in:
Claudio Maggioni 2019-11-15 15:28:30 +01:00
parent 0349d16334
commit 8ea7a1f825
7 changed files with 114 additions and 6 deletions

View File

@ -20,9 +20,10 @@
"license": "MIT",
"dependencies": {
"body-parser": "^1.19.0",
"debug": "^3.1.0",
"debug": "^4.1.1",
"dustjs-linkedin": "^2.7.5",
"express": "^4.16.2",
"fetch-base64": "^2.1.2",
"form-data": "^3.0.0",
"klei-dust": "^1.0.0",
"method-override": "^3.0.0",

View File

@ -2,5 +2,5 @@
(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("<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\" required 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><div class=\"details\"></div></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("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=\"imgur-search\">Imgur image name:</label><input id=\"imgur-search\" type=\"text\" placeholder=\"Imgur image name\"><button id=\"imgur-search-btn\" type=\"button\">Search on Imgur</button><br><div id=\"imgur-search-details\"></div><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));

View File

@ -292,6 +292,30 @@ class App {
nameFilter.onkeyup = onSearch;
bookmarkFilter.onclick = onSearch;
const imgurSearch = document.getElementById('imgur-search');
const imgurSearchBtn = document.getElementById('imgur-search-btn');
const imgurSearchDetails = document.getElementById('imgur-search-details');
imgurSearchBtn.onclick = async () => {
imgurSearch.classList.remove('ok');
imgurSearch.classList.remove('err');
imgurSearchDetails.innerHTML = '<br>';
const e = await doJSONRequest('POST', '/imgur/search', {},
{ name: imgurSearch.value });
if (e.success) {
imgurSearch.classList.add('ok');
} else {
imgurSearch.classList.add('err');
if(e.error) {
imgurSearchDetails.innerHTML = `
<strong>Error:</strong> ${e.error}<br>`;
}
}
};
if (typeof conf.buttons === 'object' && conf.buttons) {
this.buttons = {}
for (const b of ['clear', 'undo', 'camera'])

View File

@ -118,7 +118,10 @@ body {
margin: 5px;
float: left;
width: 200px;
font-size: 0.7em;
}
#favorites, #imgur-search-details {
font-size: 0.7rem;
}
#favourites img {

View File

@ -10,6 +10,8 @@ const Favorite = mongoose.model('Favorite');
const fetch = require('node-fetch');
const querystring = require('querystring');
const promiseAny = require('promise-any');
const eventBus = require('../../pubsub');
const fetch64 = require('fetch-base64');
const { error } = require('../utils');
@ -103,7 +105,6 @@ router.post('/imgur/ordeal', async (req, res) => {
return;
}
console.log(req.body.favorites);
if (req.body.favorites) {
if (!await fetchImgur(req, res, 'POST', '/album/' + albumJson.data.id +
'/favorite', {})) {
@ -222,7 +223,60 @@ router.post('/imgur/ordeal', async (req, res) => {
res.json(ordealResponse);
} catch(e) {
console.error(e);
res.status(500).json(e);
res.status(500).json({ error: e.toString() });
}
});
router.post('/imgur/search', async (req, res) => {
try {
if (!req.body.name) {
res.status(400).json({ error: 'Bad parameters for /imgur/search' });
return;
}
const results = await fetchImgur(req, res, 'GET', '/gallery/search/time/top/1?q=' +
encodeURIComponent(req.body.name) + '&q_type=png');
if (!results) {
return;
}
if (results.data.length == 0) {
res.status(404).json({ error: 'No image found' });
return;
}
let image = results.data[0];
if (image.is_album) {
image = image.images[0];
}
if (!await fetchImgur(req, res, 'POST', '/gallery/' + results.data[0].id +
'/vote/up', {})) {
return;
}
if (!await fetchImgur(req, res, 'POST', '/image/' + image.id + '/favorite',
{})) {
return;
}
const fetch64res = await fetch64.remote(image.link);
const fav = {
_id: mongoose.Types.ObjectId(),
name: req.body.name,
dataURL: fetch64res[1],
bookmarked: false,
};
await new Favorite(fav).save();
eventBus.emit('favorite.created', fav);
res.json({ success: true });
} catch(e) {
console.error(e);
res.status(500).json({ error: e.toString() });
}
});

View File

@ -29,6 +29,13 @@
<label for="name-filter">By name search:</label>
<input id="name-filter" type="text" placeholder="Search by name">
<br>
<label for="imgur-search">Imgur image name:</label>
<input id="imgur-search" type="text" placeholder="Imgur image name">
<button id="imgur-search-btn" type="button">Search on Imgur</button>
<br>
<div id="imgur-search-details">
<br>
</div>
<label for="bookmarked-filter">Only bookmarked</label>
<input id="bookmarked-filter" type="checkbox">
</div>

View File

@ -472,7 +472,7 @@ debug@^3.1.0, debug@^3.2.6:
dependencies:
ms "^2.1.1"
debug@~4.1.0:
debug@^4.1.1, debug@~4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@ -751,6 +751,13 @@ fast-json-stable-stringify@^2.0.0:
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
fetch-base64@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/fetch-base64/-/fetch-base64-2.1.2.tgz#460e581c823633aade6fa7fc8dc3f2cdb1da15c4"
integrity sha512-APL3vK1yYXUZ5spJFmojP/xXepjpsJUy/4oCijsvOlHBm9lEJtqOHgFJD8AMP/Rlr/1DlGxLc5InA0SqFf05zA==
dependencies:
mime-types "^2.1.17"
filename-regex@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@ -1433,6 +1440,11 @@ mime-db@1.40.0:
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
mime-db@1.42.0:
version "1.42.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.42.0.tgz#3e252907b4c7adb906597b4b65636272cf9e7bac"
integrity sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==
mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24:
version "2.1.24"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
@ -1440,6 +1452,13 @@ mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24:
dependencies:
mime-db "1.40.0"
mime-types@^2.1.17:
version "2.1.25"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.25.tgz#39772d46621f93e2a80a856c53b86a62156a6437"
integrity sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg==
dependencies:
mime-db "1.42.0"
mime@1.6.0, mime@^1.4.1:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"