From e75b648efeaea262e71caea0f95ef0beaba6bca3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E6=B5=B7=E5=88=A9?= <3085349511@qq.com> Date: Mon, 21 Jun 2021 19:25:23 +0800 Subject: [PATCH] update public/skillsharing_client.js. --- public/skillsharing_client.js | 103 ++++++++++++++++++---------------- 1 file changed, 55 insertions(+), 48 deletions(-) diff --git a/public/skillsharing_client.js b/public/skillsharing_client.js index 62f3205..f445c37 100644 --- a/public/skillsharing_client.js +++ b/public/skillsharing_client.js @@ -1,30 +1,32 @@ -const baseurl = "http://localhost:8000"; -function addurlIfnecessary(url) { - return (url.indexOf("http:") != 0) ? baseurl + url : url; +const baseurl="http://localhost:8000"; +function addurlIfnecessary(url){ + return (url.indexOf("http:")!=0)?baseurl+url:url; } function handleAction(state, action) { if (action.type == "setUser") { localStorage.setItem("userName", action.user); - return Object.assign({}, state, { user: action.user }); + return Object.assign({}, state, {user: action.user}); } else if (action.type == "setTalks") { - return Object.assign({}, state, { talks: action.talks }); - } else if (action.type == "newTalk") { + return Object.assign({}, state, {talks: action.talks}); + } else if (action.type == "setEmail") { + localStorage.setItem("userEmail", action.email); + return Object.assign({}, state, {email: action.email}); + }else if (action.type == "newTalk") { fetchOK(talkURL(action.title), { method: "PUT", - headers: { "Content-Type": "application/json" }, + headers: {"Content-Type": "application/json"}, body: JSON.stringify({ presenter: state.user, - summary: action.summary, - time: new Date().getTime() + summary: action.summary }) }).catch(reportError); } else if (action.type == "deleteTalk") { - fetchOK(talkURL(action.talk), { method: "DELETE" }) + fetchOK(talkURL(action.talk), {method: "DELETE"}) .catch(reportError); } else if (action.type == "newComment") { fetchOK(talkURL(action.talk) + "/comments", { method: "POST", - headers: { "Content-Type": "application/json" }, + headers: {"Content-Type": "application/json"}, body: JSON.stringify({ author: state.user, message: action.message @@ -42,7 +44,7 @@ function fetchOK(url, options) { } function talkURL(title) { - return baseurl + "/talks/" + encodeURIComponent(title); + return baseurl+"/talks/" + encodeURIComponent(title); } function reportError(error) { @@ -54,7 +56,16 @@ function renderUserField(name, dispatch) { type: "text", value: name, onchange(event) { - dispatch({ type: "setUser", user: event.target.value }); + dispatch({type: "setUser", user: event.target.value}); + } + })); +} +function renderEmail(name, dispatch) { + return elt("label", {}, "Your email: ", elt("input", { + type: "text", + value: name, + onchange(event) { + dispatch({type: "setEmail", email: event.target.value}); } })); } @@ -71,67 +82,61 @@ function elt(type, props, ...children) { function renderTalk(talk, dispatch) { return elt( - "section", { className: "talk" }, + "section", {className: "talk"}, elt("h2", null, talk.title, " ", elt("button", { type: "button", onclick() { - dispatch({ type: "deleteTalk", talk: talk.title }); + dispatch({type: "deleteTalk", talk: talk.title}); } }, "Delete")), elt("div", null, "by ", - elt("strong", null, talk.presenter)), + elt("strong", null, talk.presenter)), elt("p", null, talk.summary), ...talk.comments.map(renderComment), elt("form", { onsubmit(event) { event.preventDefault(); let form = event.target; - dispatch({ - type: "newComment", - talk: talk.title, - message: form.elements.comment.value - }); + dispatch({type: "newComment", + talk: talk.title, + message: form.elements.comment.value}); form.reset(); } - }, elt("input", { type: "text", name: "comment" }), " ", - elt("button", { type: "submit" }, "Add comment"))); + }, elt("input", {type: "text", name: "comment"}), " ", + elt("button", {type: "submit"}, "Add comment"))); } function renderComment(comment) { - return elt("p", { className: "comment" }, - elt("strong", null, comment.author), - ": ", comment.message); + return elt("p", {className: "comment"}, + elt("strong", null, comment.author), + ": ", comment.message); } function renderTalkForm(dispatch) { - let title = elt("input", { type: "text" }); - let summary = elt("input", { type: "text" }); + let title = elt("input", {type: "text"}); + let summary = elt("input", {type: "text"}); return elt("form", { onsubmit(event) { event.preventDefault(); - dispatch({ - type: "newTalk", - title: title.value, - summary: summary.value - }); + dispatch({type: "newTalk", + title: title.value, + summary: summary.value}); event.target.reset(); } }, elt("h3", null, "Submit a Talk"), - elt("label", null, "Title: ", title), - elt("label", null, "Summary: ", summary), - elt("button", { type: "submit" }, "Submit")); + elt("label", null, "Title: ", title), + elt("label", null, "Summary: ", summary), + elt("button", {type: "submit"}, "Submit")); } async function pollTalks(update) { let tag = undefined; - for (; ;) { + for (;;) { let response; try { response = await fetchOK("/talks", { - headers: tag && { - "If-None-Match": tag, - "Prefer": "wait=90" - } + headers: tag && {"If-None-Match": tag, + "Prefer": "wait=90"} }); } catch (e) { console.log("Request failed: " + e); @@ -147,11 +152,12 @@ async function pollTalks(update) { var SkillShareApp = class SkillShareApp { constructor(state, dispatch) { this.dispatch = dispatch; - this.talkDOM = elt("div", { className: "talks" }); + this.talkDOM = elt("div", {className: "talks"}); this.dom = elt("div", null, - renderUserField(state.user, dispatch), - this.talkDOM, - renderTalkForm(dispatch)); + renderUserField(state.user, dispatch), + renderEmail(state.email, dispatch), + this.talkDOM, + renderTalkForm(dispatch)); this.syncState(state); } @@ -169,6 +175,7 @@ var SkillShareApp = class SkillShareApp { function runApp() { let user = localStorage.getItem("userName") || "Anon"; + let email = localStorage.getItem("userEmail") || "1509785639@qq.com"; let state, app; function dispatch(action) { state = handleAction(state, action); @@ -177,13 +184,13 @@ function runApp() { pollTalks(talks => { if (!app) { - state = { user, talks }; + state = {user,email, talks}; app = new SkillShareApp(state, dispatch); document.body.appendChild(app.dom); } else { - dispatch({ type: "setTalks", talks }); + dispatch({type: "setTalks", talks}); } }).catch(reportError); } -runApp(); +runApp(); \ No newline at end of file -- Gitee