210829 blog editor

backstage/blogs/forms.py

@@ -1,9 +1,18 @@
+import os
+import fnmatch
+from backstage.config import PORTAL_SERVER, UPLOAD_PATH_MAP
 from flask_wtf import FlaskForm
 from flask_wtf.file import FileField, FileRequired, FileAllowed
 from wtforms import StringField, SelectField
 from wtforms.validators import DataRequired
 
 
+path = UPLOAD_PATH_MAP[0][0]+'../blog/設計專欄'
+configfiles = [os.path.join(dirpath, f)
+        for dirpath, dirnames, files in os.walk(path)
+        for f in fnmatch.filter(files, 'cat*.md')]
+
+print(configfiles)
 selected_choices = [('home_aesthetics', '居家美學'),
                     ('room_planner_expertise', '規劃師QA'),
                     ('home_inspection_knowledge', '驗屋知識')]
@@ -14,3 +23,7 @@ class BlogCreateForm(FlaskForm):
     image = FileField('圖片', validators=[
         FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
     categories = SelectField('主題類別', choices=selected_choices)
+
+
+
+    

backstage/blogs/routes.py

@@ -1,9 +1,12 @@
 from flask import render_template, Blueprint, request, redirect, url_for
+from flask.wrappers import Response
 import requests
+import os
+import fnmatch
 from backstage.blogs.forms import BlogCreateForm
 from backstage.utils import get_now_time
 from backstage.utils.routes import create_content, remove_content, get_trans_title_url_name
-from backstage.config import PORTAL_SERVER
+from backstage.config import PORTAL_SERVER, UPLOAD_PATH_MAP
 
 blogs_app = Blueprint('blogs', __name__)
 
@@ -12,10 +15,11 @@ blogs_app = Blueprint('blogs', __name__)
 def blog_list():
     response = requests.get('{}contents?url=/blog'.format(PORTAL_SERVER))
     if response.status_code == 200:
+        sortedData = sorted(response.json(), key=lambda x: x['date'], reverse=True)
         return render_template('blogs.html',
                                title='設計專欄',
                                legend='設計專欄列表',
-                               blogs=response.json(),
+                               blogs=sortedData,
                                length=len(response.json()),
                                form=BlogCreateForm())
 
@@ -45,7 +49,43 @@ categories: ["{}"]\n\
     return create_content(data, form.image.data)
 
 
+@blogs_app.route('/backstage/blog/createCat/', methods=['GET'])
+def createCat():
+    #title = ""
+    front_matter = '''---
+title: "{}"\n\
+date: {}\n\
+draft: {}\n\
+type: "{}"\n\
+categories: ["{}"]\n\
+---'''.format(request.args["title"],
+              get_now_time(),
+              'false',
+              'blog',
+              get_trans_title_url_name(request.args["title"]))
+
+    CatPath = UPLOAD_PATH_MAP[0][0]+"../blog/設計專欄/" + get_trans_title_url_name(request.args["title"])
+
+    print(CatPath)
+    if not os.path.exists(CatPath):
+        os.mkdir(CatPath)
+    with open(os.path.join(CatPath, 'category.md'), 'w', encoding="utf-8") as md:
+        md.write(front_matter)
+
+    print("11")
+    return Response("你好", 200)
+
+
 @blogs_app.route('/backstage/blog/remove', methods=['POST'])
 def remove():
     remove_content()
     return redirect(url_for('blogs.blog_list'))
+
+
+""" def GetCategories():
+    GetCategories
+    configfiles = [os.path.join(dirpath, f)
+        for dirpath, dirnames, files in os.walk(UPLOAD_PATH_MAP+'../blog/設計專欄')
+        for f in fnmatch.filter(files, 'category.md')]
+
+    return configfiles """

backstage/static/js/editor.js

@@ -119,8 +119,10 @@ axios.get(contentApiUrl).then(({ data }) => {
         class: ImageTool,
         config: {
           endpoints: {
-            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your backend file uploader endpoint
-            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your endpoint that provides uploading by Url
+            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url, // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url, // Your endpoint that provides uploading by Url
+            /* byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your endpoint that provides uploading by Url */
             /* byFile: '/backstage/upload/' + $('#ctitle').val(), // Your backend file uploader endpoint
             byUrl: '/backstage/getimage/' + $('#ctitle').val(), // Your endpoint that provides uploading by Url */
           }
@@ -163,12 +165,12 @@ submitButton.onclick = function () {
   editor.save().then((outputData) => {
     //console.log('Article data: ', outputData);
 
-    var mdContent = '';
+    var mdContent = GetMdHeader();
     /*
     for (var frontMatter of frontMatters) {
       mdContent += frontMatter + '\n';
     }
-    */
+    
     //alert($('#cdescription').val());
     mdContent += '---\n';
     mdContent += 'title: "' + $('#ctitle').val() + '"\n';
@@ -181,6 +183,7 @@ submitButton.onclick = function () {
     mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
     mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
     mdContent += '---\n\n';
+    */
 
     for (i = 0; i < outputData.blocks.length; i++) {
       //alert(block.type);

backstage/static/js/yo.js

@@ -64,7 +64,18 @@ function parseMd(content) {
                 //alert(line);
                 $('#ctag').val(line.replace('tag: ', '').replaceAll('\"', ''));
             }
-
+            if (line.includes('categories: ')) {
+                //alert(line);
+                $('#ccategories').val(line.replace('categories: ', ''));
+            }
+            if (line.includes('col1: ')) {
+                //alert(line);
+                $('#ccol1').val(line.replace('col1: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('col2: ')) {
+                //alert(line);
+                $('#ccol2').val(line.replace('col2: ', '').replaceAll('\"', ''));
+            }
             if (line.includes('---')) {
                 isNotFrontMatterCount += 1;
             }
@@ -130,6 +141,30 @@ function parseMd(content) {
     return rblocks
 }
 
+function GetMdHeader() {
+    rContent = "";
+    rContent += '---\n';
+    rContent += 'title: "' + $('#ctitle').val() + '"\n';
+    rContent += 'date: ' + $('#cdate').val() + '\n';
+    rContent += 'draft: ' + (!$('#cdraft').is(':checked')) + '\n';
+    rContent += 'type: "' + $('#ctype').val() + '"\n';
+    rContent += 'url: "' + $('#curl').val() + '"\n';
+    //mdContent += 'url: "' + $('#curl').val() + '"\n';
+    rContent += 'image: "' + $('#cimage').val() + '"\n';
+    if ($('#ctype').val() == "collection") {
+        rContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+        rContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
+    }
+    else if ($('#ctype').val() == "blog") {
+        rContent += 'categories: ' + $('#ccategories').val() + '\n';
+        rContent += 'col1: "' + ($('#ccol1').val() == 'undefined' ? "" : $('#ccol1').val()) + '"\n';
+        rContent += 'col2: "' + ($('#ccol2').val() == 'undefined' ? "" : $('#ccol2').val()) + '"\n';
+    }
+    rContent += '---\n';
+    return rContent
+}
+
 const parseTitle = line => {
     var title = '';
     title = line.replace('### **', '');
@@ -176,7 +211,7 @@ function tableArrayToHtml(tableArray) {
         tr = document.createElement('tr');
         for (k = 0; k < tableArray[j].length; k++) {
             td = document.createElement('td');
-            if(k == 0)
+            if (k == 0)
                 td.style.width = "25%";
             td.innerHTML = tableArray[j][k];
             tr.appendChild(td);

backstage/templates/blogs.html

@@ -3,10 +3,10 @@
 {% for idx in range(0, length) %}
   <tbody>
     <tr>
-      <td class="table__data">{{ idx }}</td>
+      <td class="table__data">{{ idx+1 }}</td>
       <td class="table__data">{{ blogs[idx].title }}</td>
-      <td class="table__data">1</td>
-      <td class="table__data">on</td>
+      <td class="table__data">{{ blogs[idx].date }}</td>
+      <td class="table__data"><input type="checkbox" {{ 'checked' if (blogs[idx].draft.lower()=='false') }} onclick="toggleDraft(this,'{{ blogs[idx].url }}');" /></td>
       <td>
         <div class="d-flex justify-content-center">
           <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=blogs[idx].url) }}"><i class="fas fa-edit"></i></a>

backstage/templates/editor.html

@@ -27,6 +27,9 @@
         <input id="cimage" type="text" /><br />
         <input id="cweight" type="text" /><br />
         <input id="ctag" type="text" /><br />
+        <input id="ccategories" type="text" /><br />
+        <input id="ccol1" type="text" /><br />
+        <input id="ccol2" type="text" /><br />
       </div>
       
       <!-- <div class="mb-2"> -->

backstage/templates/tables/editor_table.html

@@ -81,6 +81,9 @@
           <input id="cimage" type="text" /><br />
           <input id="cweight" type="text" /><br />
           <input id="ctag" type="text" /><br />
+          <input id="ccategories" type="text" /><br />
+          <input id="ccol1" type="text" /><br />
+          <input id="ccol2" type="text" /><br />
         </div>
       </div>
 
@@ -159,7 +162,8 @@
     // location.reload();
   }
   function writeMd() {
-    mdContent = "";
+    mdContent = GetMdHeader();
+    /*
     mdContent += '---\n';
     mdContent += 'title: "' + $('#ctitle').val() + '"\n';
     mdContent += 'date: ' + $('#cdate').val() + '\n';
@@ -168,10 +172,18 @@
     mdContent += 'url: "' + $('#curl').val() + '"\n';
     //mdContent += 'url: "' + $('#curl').val() + '"\n';
     mdContent += 'image: "' + $('#cimage').val() + '"\n';
-    mdContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
-    mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
-    mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
+    if ($('#ctype').val() == "collection") {
+      mdContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+      mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+      mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
+    }
+    else if ($('#ctype').val() == "blog") {
+      mdContent += 'categories: ' + $('#ccategories').val() + '\n';
+      mdContent += 'col1: "' + ($('#ccol1').val() == 'undefined' ? "" : $('#ccol1').val()) + '"\n';
+      mdContent += 'col2: "' + ($('#ccol2').val() == 'undefined' ? "" : $('#ccol2').val()) + '"\n';
+    }
     mdContent += '---\n';
+    */
     mdContent += contentMatters.join("\n");
     //console.log(contentMatters);
 

backstage/upload/routes.py

@@ -17,10 +17,19 @@ import uuid
 upload_app = Blueprint('upload', __name__)
 
 
-@upload_app.route('/backstage/upload/<path:filepath>', methods=['POST'])
-def upload_post(filepath):
+@upload_app.route('/backstage/upload/<path:iurl>', methods=['POST'])
+def upload_post(iurl):
     #bdata = request.stream.read()
+    filepath = ""
+    itype = ""
     #aa = request.get_data()
+    if iurl == "title":
+        itype = iurl
+        filepath = iurl
+    else:
+        itype = iurl[0:iurl.find("/")]
+        filepath = iurl[iurl.rfind("/")+1:]
+
     if request.method == 'POST':
 
         # check if the post request has the file part
@@ -48,7 +57,10 @@ def upload_post(filepath):
                 if filepath == "title":
                     sitepath = UPLOAD_PATH_MAP[0][0] + "../../static/img/collection/"
                 else:
-                    sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
+                    if itype == "blog":
+                        sitepath = UPLOAD_PATH_MAP[0][0] + "../blog/設計專欄/" + filepath + "/img/"
+                    else:
+                        sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
                 oimgtype = file.filename[file.filename.rfind(".")+1:]
                 oimgtypeName = oimgtype
                 if oimgtype.lower() == 'jpg':
@@ -105,11 +117,18 @@ def upload_get(filepath):
     return send_file(os.getcwd() + "/backstage/upload/"+filepath)
 
 
-@upload_app.route('/backstage/getimage/<path:filepath>', methods=['POST', 'GET'])
-def get_image(filepath):
+@upload_app.route('/backstage/getimage/<path:iurl>', methods=['POST', 'GET'])
+def get_image(iurl):
+
+    itype = iurl[0:iurl.find("/")]
+    filepath = iurl[iurl.rfind("/")+1:]
 
     # print(request.get_json()['url'])
-    sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
+    if itype == "blog":
+        sitepath = UPLOAD_PATH_MAP[0][0] + "../blog/設計專欄/" + filepath + "/img/"
+    else:
+        sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
+    #sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
     oimgtype = str(request.get_json()['url'])[str(request.get_json()['url']).rfind(".")+1:]
     oimgtypeName = oimgtype
     if oimgtype.lower() == 'jpg':