fix collection description

backstage/collections/routes.py

@@ -72,13 +72,13 @@ budget: "{}"\n\
 construction: "{}"\n\
 collection_description: "{}"\n\
 collection_slider: "" \n\
-comment: "{}"\n
+comment: "img/{}"\n\
 ---'''.format(form.title.data, form.description.data, form.title.data,
               get_now_time(), 'true', 'collection', '/collection/{}'.format(eng_name),
               form.image.data.filename, form.collectiontitle.data, form.coverimg.data.filename, form.description.data.replace('\r\n','<br>'), form.tags.data,
               form.bannerimgtext.data, form.homeowner.data, form.size.data, form.bednum.data,
               form.housetype.data, form.designer.data, form.space.data, form.loc.data,
-              form.budget.data, form.construction.data, form.collectiondesc.data, form.comment.data.filename)
+              form.budget.data, form.construction.data, form.collectiondesc.data.replace('\r\n','<br>'), form.comment.data.filename)
     print(front_matter)
     data = {'frontMatter': front_matter,
             'name': eng_name,

backstage/static/js/yo.js

@@ -551,7 +551,11 @@ function GetMdHeader(result = []) {
     rContent += 'loc: "' + $("#cloc").val() + '"\n';
     rContent += 'budget: "' + $("#cbudget").val() + '"\n';
     rContent += 'construction: "' + $("#cconstruction").val() + '"\n';
-    rContent += 'collection_description: "' + $("#ccolldesc").val() + '"\n';
+    rContent +=
+      'collection_description: "' +
+      $("#ccolldesc").val().replace(/\r?\n/g, "<br>") +
+      '"\n';
+    // rContent += 'collection_description: "' + $("#ccolldesc").val() + '"\n';
     // rContent += 'collection_slider: "' + $('#ccollslider').val() + '"\n';
     // rContent += 'collection_slider: []\n';
     if ($("#cnewcomment").val() != "" && $("#cnewcomment").val() != undefined) {
@@ -701,11 +705,15 @@ function ParseProductSection(inContent) {
   var aa = $.parseHTML(inContent.trim());
   //處理圖片
   if ($("[id='carousel-with-preview']", aa).length > 0) {
-    imgnodes = $("[id='carousel-with-preview']", aa)[0].childNodes;
-    for (i = 0; i < imgnodes.length; i++) {
+    imgnodes = $("[id='carousel-with-preview']", aa)[0].children[0].childNodes;
+
+    for (let i = 0; i < $("[id='carousel-with-preview']", aa)[0].children.length; i++) {
+      const element = $("[id='carousel-with-preview']", aa)[0].children[i];
+      let imgnodeItem = element.childNodes;
+
       var tmpsrc, tmpw, tmph, ampimg;
-      if (imgnodes[i].nodeName == "IMG") {
-        ampimg = imgnodes[i].outerHTML;
+      if (imgnodeItem[0].nodeName == "IMG") {
+        ampimg = imgnodeItem[0].outerHTML;
         tmpsrc = ampimg.substr(
           ampimg.indexOf('src="') + 5,
           ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
@@ -737,22 +745,63 @@ function ParseProductSection(inContent) {
           },
         });
       }
+      
     }
+
+    // for (i = 0; i < imgnodes.length; i++) {
+    //   var tmpsrc, tmpw, tmph, ampimg;
+    //   if (imgnodes[i].nodeName == "IMG") {
+    //     ampimg = imgnodes[i].outerHTML;
+    //     console.log('ampimg',ampimg);
+    //     tmpsrc = ampimg.substr(
+    //       ampimg.indexOf('src="') + 5,
+    //       ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
+    //         ampimg.indexOf('src="') -
+    //         5
+    //     );
+    //     tmpw = ampimg.substr(
+    //       ampimg.indexOf('width="') + 7,
+    //       ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
+    //         ampimg.indexOf('width="') -
+    //         7
+    //     );
+    //     tmph = ampimg.substr(
+    //       ampimg.indexOf('height="') + 8,
+    //       ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
+    //         ampimg.indexOf('height="') -
+    //         8
+    //     );
+    //     //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+    //     editorBlocks.push({
+    //       type: "image",
+    //       data: {
+    //         file: {
+    //           url: BHOUSE_SERVER + editTarget + "/" + tmpsrc,
+    //           width: parseInt(tmpw),
+    //           height: parseInt(tmph),
+    //         },
+    //         caption: "小寶優居 | " + $("#ctitle").val(),
+    //       },
+    //     });
+    //     console.log('editorBlocks',editorBlocks);
+    //   }
+    // }
   }
   /*     else {
-            editorBlocks.push({
-                type: "image", data: {
-                    file: {
-                        url: 'https://bhouse.com.tw/img/logo2.png',
-                        width: 300,
-                        height: 300,
-                    },
-                    caption: "小寶優居 | " + $('#ctitle').val(),
-                }
-            });
-        } */
+          editorBlocks.push({
+              type: "image", data: {
+                  file: {
+                      url: 'https://bhouse.com.tw/img/logo2.png',
+                      width: 300,
+                      height: 300,
+                  },
+                  caption: "小寶優居 | " + $('#ctitle').val(),
+              }
+          });
+      } */
   //editor.api.blocks.render(editorBlocks);
   $("#editorjs")[0].innerHTML = "";
+  //alert(editorBlocks);
   editor = new EditorJS({
     readOnly: false,
     holder: "editorjs",
@@ -770,23 +819,26 @@ function ParseProductSection(inContent) {
     },
     data: { blocks: editorBlocks },
     onReady: function () {
+      //alert(editor.blocks.getBlocksCount());
       //saveButton.click();
     },
     onChange: function (api, block) {
       //$('#cimage')[0].val();
+      //console.log('something changed', block);
     },
   });
 
   //類別
   Object.entries(SwfType).forEach(([key, value]) => {
     if ($("#ctype").val() == key) {
+      //alert($("#ctype").val());
       $("#swfDropdown").val($("#ctype").val());
     }
   });
 
   //敘述
   $("#swfDesc").val("");
-  if ($("[class='description']", aa).length > 0) {
+  if ($("[class='description mb-5']", aa).length > 0) {
     $("#swfDesc").val(
       $(".description", aa)[0]
         .innerHTML.trim()
@@ -794,6 +846,7 @@ function ParseProductSection(inContent) {
         .replaceAll("</b>", "")
     );
   }
+
   //其他
   $("#swfPrice").val("");
   $("#swfColor").val("");
@@ -801,35 +854,60 @@ function ParseProductSection(inContent) {
   $("#swfMat").val("");
   $("#swfMemo").val("");
   if ($("[class='detail']", aa).length > 0) {
+    console.log(1);
     onodes = $("[class='detail']", aa)[0].childNodes;
     for (i = 0; i < onodes.length; i++) {
-      if (onodes[i].nodeName != "#text") {
-        if (onodes[i].innerHTML.trim().indexOf("定價 ： ") >= 0)
-          $("#swfPrice").val(
-            onodes[i].innerHTML.replace("定價 ： ", "").trim()
-          );
-        if (onodes[i].innerHTML.trim().indexOf("顏色 ： ") >= 0)
-          $("#swfColor").val(
-            onodes[i].innerHTML.replace("顏色 ： ", "").trim()
-          );
-        if (onodes[i].innerHTML.trim().indexOf("尺寸(mm) ： ") >= 0)
-          $("#swfSize").val(
-            onodes[i].innerHTML.replace("尺寸(mm) ： ", "").trim()
-          );
-        if (onodes[i].innerHTML.trim().indexOf("材質 ： ") >= 0)
-          $("#swfMat").val(onodes[i].innerHTML.replace("材質 ： ", "").trim());
-        if (onodes[i].innerHTML.trim().indexOf("備註 ： ") >= 0)
-          $("#swfMemo").val(onodes[i].innerHTML.replace("備註 ： ", "").trim());
+      for (j = 0; j < onodes[i].childNodes.length; j++) {
+        console.log(onodes[i].childNodes[j]);
+        onodes2 = onodes[i].childNodes[j].className;
+        if (onodes[i].childNodes[j].nodeName != "#text") {
+          if (onodes2 == "pdprice tw-85") {
+            console.log(1);
+            console.log(onodes[i].childNodes[j].innerHTML);
+            $("#swfPrice").val(onodes[i].childNodes[j].innerHTML);
+          }
+          if (onodes2 == "pdcolor tw-85") {
+            console.log(2);
+            $("#swfColor").val(onodes[i].childNodes[j].innerHTML);
+          }
+          if (onodes2 == "pdsize tw-85") {
+            console.log(onodes[i].childNodes[j].innerHTML);
+            $("#swfSize").val(onodes[i].childNodes[j].innerHTML);
+          }
+          if (onodes2 == "pmat tw-85") {
+            console.log(onodes[i].childNodes[j].innerHTML);
+            $("#swfMat").val(onodes[i].childNodes[j].innerHTML);
+          }
+          if (onodes2 == "pdmark tw-85") {
+            console.log(onodes[i].childNodes[j].innerHTML);
+            $("#swfMemo").val(onodes[i].childNodes[j].innerHTML);
+          }
+        }
       }
+      // if (onodes[i].nodeName != "#text") {
+      //     if (onodes[i].innerHTML.trim().indexOf("定價 ： ") >= 0)
+      //         $("#swfPrice").val(onodes[i].innerHTML.replace("定價 ： ", "").trim());
+      //     if (onodes[i].innerHTML.trim().indexOf("顏色 ： ") >= 0)
+      //         $("#swfColor").val(onodes[i].innerHTML.replace("顏色 ： ", "").trim());
+      //     if (onodes[i].innerHTML.trim().indexOf("尺寸(mm) ： ") >= 0)
+      //         $("#swfSize").val(onodes[i].innerHTML.replace("尺寸(mm) ： ", "").trim());
+      //     if (onodes[i].innerHTML.trim().indexOf("材質 ： ") >= 0)
+      //         $("#swfMat").val(onodes[i].innerHTML.replace("材質 ： ", "").trim());
+      //     if (onodes[i].innerHTML.trim().indexOf("備註 ： ") >= 0)
+      //         $("#swfMemo").val(onodes[i].innerHTML.replace("備註 ： ", "").trim());
+      //     //alert(nodes[i].innerHTML);
+      // }
     }
   }
 
   //處理規格圖片
-  if ($("[class='spec']", aa).length > 0) {
-    snodes = $("[class='spec']", aa)[0].childNodes;
+  if ($("[class='b-bottom pb-3 mb-5 spec']", aa).length > 0) {
+    snodes = $("[class='b-bottom pb-3 mb-5 spec']", aa)[0].childNodes;
+    console.log(snodes);
+    //alert(snodes[0].innerHTML);
     for (i = 0; i < snodes.length; i++) {
       var tmpsrc, tmpw, tmph, ampimg;
-      if (snodes[i].nodeName == "AMP-IMG") {
+      if (snodes[i].nodeName == "IMG") {
         ampimg = snodes[i].outerHTML;
         tmpsrc = ampimg.substr(
           ampimg.indexOf('src="') + 5,
@@ -865,17 +943,17 @@ function ParseProductSection(inContent) {
     }
   }
   /* else {
-        editorBlocks1.push({
-            type: "image", data: {
-                file: {
-                    url: 'https://bhouse.com.tw/img/logo2.png',
-                    width: 300,
-                    height: 300,
-                },
-                caption: "小寶優居 | " + $('#ctitle').val(),
-            }
-        });
-    } */
+      editorBlocks1.push({
+          type: "image", data: {
+              file: {
+                  url: 'https://bhouse.com.tw/img/logo2.png',
+                  width: 300,
+                  height: 300,
+              },
+              caption: "小寶優居 | " + $('#ctitle').val(),
+          }
+      });
+  } */
   $("#editorjs1")[0].innerHTML = "";
   editor1 = new EditorJS({
     readOnly: false,
@@ -907,46 +985,50 @@ function ParseProductSection(inContent) {
 function GenProductSection(mimg, specimg) {
   section = document.createElement("div");
   tmpstr = `<div class="furniture-design">
-    {{< furniture_design >}}
-    <div class="furniture_design_content">
-        <div class="sub-tab-content" id="pills-tabContent">
-            <div class="container px-0 design-container">
-                <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
-                    <div class="slider-box">
-                        <div class="slider slider-for slider-design" id='carousel-with-preview'>
-                            ##AMP-IMG##
-                        </div>
-                        <div class="slider slider-nav mt-2" id='carousel-with-preview'>
-                            ##PREV-IMG##
-                        </div>
-                    </div>
-                    <div class="ms-2 fw-bold">
-                        <h3 class="mt-4">##ctitle##</h3>
-                        <p class="mb-5">##swfDesc##</p>
-                            ##swfPrice##
-                            ##swfColor##
-                            ##swfSize##
-                            ##swfMat##
-                            ##swfMemo##
-                    </div>
-                    </div> 
-                        ##SPEC-IMG##
-                        <h6 class="mt-4">說明</h6>
-                        <ul>
-                            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
-                            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
-                        </ul>
-                    <div class="mb-5">
-                        <a href="/furniture_design/other_furniture/">
-                            <p class="readMore text-center">
-                                <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到其他設計單品
-                            </p>
-                        </a>
-                    </div>  
-            </div>
-        </div>
-    </div>
-    </div>`;
+  {{< furniture_design >}}
+  <div class="furniture_design_content">
+      <div class="sub-tab-content" id="pills-tabContent">
+          <div class="container px-0 design-container">
+              <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+                  <div class="slider-box">
+                      <div class="slider slider-for slider-design" id='carousel-with-preview'>
+                          ##AMP-IMG##
+                      </div>
+                      <div class="slider slider-nav mt-2" id='carousel-with-preview'>
+                          ##PREV-IMG##
+                      </div>
+                  </div>
+                  <div class="ms-2 fw-bold">
+                      <h3 class="mt-4">##ctitle##</h3>
+                      <p class="description mb-5"><b>##swfDesc##</b></p>
+                      <div class="detail">
+                          ##swfPrice##
+                          ##swfColor##
+                          ##swfSize##
+                          ##swfMat##
+                          ##swfMemo##
+                       </div>   
+                  </div>
+                  </div> 
+                  <div>
+                      ##SPEC-IMG##
+                      <h6 class="mt-4">說明</h6>
+                      <ul>
+                          <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+                          <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+                      </ul>
+                   </div>   
+                  <div class="mb-5">
+                      <a href="/furniture_design/other_furniture/">
+                          <p class="readMore text-center">
+                              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到其他設計單品
+                          </p>
+                      </a>
+                  </div>  
+          </div>
+      </div>
+  </div>
+  </div>`;
 
   tmpstr = tmpstr.replaceAll("##ctitle##", $("#ctitle").val());
   tmpstr = tmpstr.replaceAll("##ctype##", $("#ctype").val());
@@ -960,7 +1042,7 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfPrice##",
       "<div class='me-3 my-2 d-flex'><div class='tw-15'>定價</div>" +
-        "<div class='tw-85'>" +
+        "<div class='pdprice tw-85'>" +
         $("#swfPrice").val() +
         "</div></div>"
     );
@@ -969,7 +1051,7 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfColor##",
       "<div class='my-2 d-flex'><div class='tw-15'>顏色</div>" +
-        "<div class='tw-85'>" +
+        "<div class='pdcolor tw-85'>" +
         $("#swfColor").val() +
         "</div></div>"
     );
@@ -978,7 +1060,7 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfSize##",
       "<div class='my-2 d-flex'><div class='tw-15'>尺寸</div>" +
-        "<div class='tw-85'>" +
+        "<div class='pdsize tw-85'>" +
         $("#swfSize").val() +
         "</div></div>"
     );
@@ -987,7 +1069,7 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfMat##",
       "<div class='my-2 d-flex'><div class='tw-15'>材質</div>" +
-        "<div class='tw-85'>" +
+        "<div class='pmat tw-85'>" +
         $("#swfMat").val() +
         "</div></div>"
     );
@@ -996,7 +1078,7 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfMemo##",
       "<div class='my-2 d-flex'><div class='tw-15'>備註</div> " +
-        "<div class='tw-85'>" +
+        "<div class='pdmark tw-85'>" +
         $("#swfMemo").val() +
         "</div></div>"
     );
@@ -1006,9 +1088,12 @@ function GenProductSection(mimg, specimg) {
   firstimg = true;
   for (i = 0; i < mimg.blocks.length; i++) {
     block = mimg.blocks[i];
+    console.log(block.data);
 
+    console.log(block.data.file.url);
     if (block.type == "image") {
       iurl = block.data.file.url.split("/");
+      console.log("img/" + iurl[iurl.length - 1]);
 
       if (iurl[iurl.length - 1] != "logo2.png") {
         if (firstimg) {
@@ -1030,6 +1115,7 @@ function GenProductSection(mimg, specimg) {
 
   previmgstr = "";
   for (i = 0; i < mimg.blocks.length; i++) {
+    //alert(block.type);
     block = mimg.blocks[i];
     if (block.type == "image") {
       iurl = block.data.file.url.split("/");
@@ -1037,17 +1123,17 @@ function GenProductSection(mimg, specimg) {
         previmgstr +=
           (previmgstr == "" ? "" : "\n") +
           ` <div class="middle-item">
-            <img
-              src="img/` +
+          <img
+            src="img/` +
           iurl[iurl.length - 1] +
           `"
-              width="40"
-              height="auto"
-              alt="` +
+            width="40"
+            height="auto"
+            alt="` +
           block.data.caption +
           `"
-            ></img>
-          </div>`;
+          ></img>
+        </div>`;
       }
     }
   }
@@ -1058,6 +1144,7 @@ function GenProductSection(mimg, specimg) {
 
   specimgstr = "";
   for (i = 0; i < specimg.blocks.length; i++) {
+    //alert(block.type);
     block = specimg.blocks[i];
     if (block.type == "image") {
       iurl = block.data.file.url.split("/");
@@ -1075,7 +1162,7 @@ function GenProductSection(mimg, specimg) {
     "##SPEC-IMG##",
     specimgstr == ""
       ? ""
-      : '<div class="b-bottom pb-3 mb-5"><h6>尺寸規格</h6>' +
+      : '<div class="b-bottom pb-3 mb-5 spec"><h6>尺寸規格</h6>' +
           specimgstr +
           "</div>"
   );