From 334bcca95fa0e5b6d7f0caacb8d23b01d0521a87 Mon Sep 17 00:00:00 2001 From: shizf <2682075859@qq.com> Date: Tue, 20 Feb 2024 18:36:27 +0800 Subject: [PATCH] fix: add message prompts to submit button of edit_yap.html --- cmd/gopcomm/yap/edit_yap.html | 219 ++++++++++++++++++++++++---------- 1 file changed, 158 insertions(+), 61 deletions(-) diff --git a/cmd/gopcomm/yap/edit_yap.html b/cmd/gopcomm/yap/edit_yap.html index de19ca84..5255a1b4 100644 --- a/cmd/gopcomm/yap/edit_yap.html +++ b/cmd/gopcomm/yap/edit_yap.html @@ -32,7 +32,7 @@ - + - @@ -143,12 +143,8 @@ - +
@@ -182,6 +178,70 @@
+ +
+
+
+
+
+ +
+
+

Please fill in the article title + and content! +

+

Your article information is incomplete.

+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+

Please fill in the article title! +

+

Your article information is incomplete.

+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+

Please fill in the article + content! +

+

Your article information is incomplete.

+
+
+ + + +
+
+
+ @@ -192,6 +252,9 @@ const { reactive, toRefs, ref, h } = Vue; /*======= article info =======*/ + const showBothNotice = ref(false); + const showTitleNotice = ref(false); + const showContentNotice = ref(false); const showModal = ref(false); // a form to be filled out by user in frontend @@ -225,7 +288,7 @@ // step2: organize the formData in frontend function submitArticle() { - if (articleForm.value.title === "" || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === ""){ + if (articleForm.value.title === "" || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === "") { return } // convert the tags array into a string, separated by "; " @@ -237,8 +300,8 @@ } console.log('tags:', tags.value); - if(!isAdd.value){ - formData.append("id",article.ID) + if (!isAdd.value) { + formData.append("id", article.ID) } // organize the formData @@ -246,14 +309,14 @@ formData.append("tags", tags.value); formData.append("abstract", articleForm.value.abstract); formData.append("cover", coverUrl); - formData.append("content",content || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown()) - formData.append("trans_data",content !== "" ? window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown():"") + formData.append("content", content || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown()) + formData.append("trans_data", content !== "" ? window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() : "") // upload the formData to backend uploadArticle(formData); } - // step3: upload the formData to backend TODO: @Bai 上传表单的接口方法 + // step3: upload the formData to backend function uploadArticle(formData) { const options = { method: 'POST', @@ -262,40 +325,40 @@ // 'Content-Type': 'multipart/form-data' // }, } - fetch("/commit",options) - .then(res => { - return res.json(); - }) - .then(todos => { - if(todos.code === 200){ - // success delete articleList or get articleList - window.location.href = "/p/"+todos.data - } - }); + fetch("/commit", options) + .then(res => { + return res.json(); + }) + .then(todos => { + if (todos.code === 200) { + // success delete articleList or get articleList + window.location.href = "/p/" + todos.data + } + }); } - function translateMd(){ + function translateMd() { const md = window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() const transMd = new FormData(); - transMd.append("content",md) - fetch("/translate",{ + transMd.append("content", md) + fetch("/translate", { method: 'POST', body: transMd, }) - .then(res => { - return res.json(); - }) - .then(todos => { - if(todos.code === 200){ - // save origin content - content = md - window.GoplusMarkdown.MarkdownEditor.methods.setMarkdown(todos.data) - } - }); + .then(res => { + return res.json(); + }) + .then(todos => { + if (todos.code === 200) { + // save origin content + content = md + window.GoplusMarkdown.MarkdownEditor.methods.setMarkdown(todos.data) + } + }); } - function customRequest(option){ - console.log("option",option) + function customRequest(option) { + console.log("option", option) const file = option.file const coverData = new FormData(); coverData.append('file', file.file); @@ -307,33 +370,40 @@ // 'Content-Type': 'multipart/form-data' // }, } - fetch("/upload",options) - .then(res => { - return res.json(); - }) - .then(todos => { - console.log("cover",todos) - fetch('/getMediaUrl/'+todos) - .then(resUrl => { - return resUrl.json(); + fetch("/upload", options) + .then(res => { + return res.json(); }) - .then(todosUrl => { - if(todosUrl.code === 200){ - coverUrl = todosUrl.url - } + .then(todos => { + console.log("cover", todos) + fetch('/getMediaUrl/' + todos) + .then(resUrl => { + return resUrl.json(); + }) + .then(todosUrl => { + if (todosUrl.code === 200) { + coverUrl = todosUrl.url + } + }); + }); - - }); } - function modalVisible(){ - if (articleForm.value.title === "" || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === ""){ + function modalVisible() { + if (articleForm.value.title === "" && window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === "") { + showBothNotice.value = true; + return + } else if (articleForm.value.title === "") { + showTitleNotice.value = true; + return + } else if (window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === "") { + showContentNotice.value = true; return } - showModal.value = true + showModal.value = true; } - function goBack(){ + function goBack() { window.location.href = "/" } @@ -341,6 +411,9 @@ const app = Vue.createApp({ data() { return { + showBothNotice, + showTitleNotice, + showContentNotice, showModal, articleForm, isAdd, @@ -359,7 +432,7 @@ MarkdownEditor: window.GoplusMarkdown.MarkdownEditor }, mounted() { - if(!isAdd.value){ + if (!isAdd.value) { articleForm.value.title = article.Title articleForm.value.tags = article.Tags.split(";") articleForm.value.abstract = article.Abstract @@ -367,6 +440,30 @@ window.GoplusMarkdown.MarkdownEditor.methods.setMarkdown(article.Content) } }, + watch: { + // automatically close notification after 3 seconds + showBothNotice(newValue) { + if (newValue) { + setTimeout(() => { + showBothNotice.value = false; + }, 3000); + } + }, + showTitleNotice(newValue) { + if (newValue) { + setTimeout(() => { + showTitleNotice.value = false; + }, 3000); + } + }, + showContentNotice(newValue) { + if (newValue) { + setTimeout(() => { + showContentNotice.value = false; + }, 3000); + } + }, + }, }); app.use(naive)