Ver Fonte

add avatar

huai-sian há 3 anos atrás
pai
commit
b380412344

+ 7 - 0
html/index_eng.html

@@ -206,6 +206,7 @@
                 <option value="16">Sofia</option>
                 <option value="17">Kristina</option>
                 <option value="18">Paula</option>
+                <option value="19">Amelia</option>
               </select>
               <div class="d-flex row row-cols-2 row-cols-lg-6">
                 <div class="card col" data-avatar="Peggy" data-img="peggy">
@@ -262,6 +263,12 @@
                     <h5 class="card-title">Paula</h5>
                   </div>
                 </div>
+                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                  <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Amelia</h5>
+                  </div>
+                </div>
               </div>
             </fieldset>
             <!-- <fieldset>

+ 24 - 0
html/make_video2.html

@@ -305,6 +305,7 @@
                                 <option value="16">Sofia</option>
                                 <option value="17">Kristina</option>
                                 <option value="18">Paula</option>
+                                <option value="19">Amelia</option>
                             </select>
                             <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                                 <div class="card item col" data-avatar="Peggy" data-img="peggy">
@@ -361,6 +362,12 @@
                                       <h5 class="card-title">Paula</h5>
                                     </div>
                                 </div>
+                                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                    <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Amelia</h5>
+                                    </div>
+                                </div>
                             </div>
                         </fieldset>
                         <fieldset id='imgSrc' style="box-shadow: none;-webkit-box-shadow: none; padding: 0;">
@@ -480,6 +487,23 @@
                     </div>
                 </div>
             </div>
+            <div class="modal fade" id="deleteSecModal" tabindex="-1" aria-labelledby="deleteSecModal" aria-hidden="true">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title" id="exampleModalLabel">刪除提醒</h5>
+                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                      確定刪除此內容區塊?
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                      <button type="button" class="btn deleteSec btn-deleteSec" data-bs-dismiss="modal">刪除</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
         </div>
     </div>
     <!-- ================================================================= -->

+ 7 - 0
html/make_video_slide.html

@@ -264,6 +264,7 @@
                                 <option value="16">Sofia</option>
                                 <option value="17">Kristina</option>
                                 <option value="18">Paula</option>
+                                <option value="19">Amelia</option>
                             </select>
                             <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                                 <div class="card item col" data-avatar="Peggy" data-img="peggy">
@@ -325,6 +326,12 @@
                                       <h5 class="card-title">Paula</h5>
                                     </div>
                                 </div>
+                                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                    <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Amelia</h5>
+                                    </div>
+                                </div>
                             </div>
                         </fieldset>
                         <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit"

+ 7 - 0
html/make_video_slide_eng.html

@@ -205,6 +205,7 @@
                               <option value="16">Sofia</option>
                               <option value="17">Kristina</option>
                               <option value="18">Paula</option>
+                              <option value="19">Amelia</option>
                             </select>
                             <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                               <div class="card col" data-avatar="Peggy" data-img="peggy">
@@ -261,6 +262,12 @@
                                   <h5 class="card-title">Paula</h5>
                                 </div>
                               </div>
+                              <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Amelia</h5>
+                                </div>
+                              </div>
                             </div>
                           </fieldset>
                         <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit" />

BIN
html/static/img/Amelia.webp


+ 71 - 38
html/static/script_util2.js

@@ -345,14 +345,14 @@ $(".next").click(function () {
   var step;
   let contentIdx = document.querySelectorAll(".txtsrc").length;
   for (let i = 1; i < (contentIdx + 1); i++) {
-    if ($(`.txtsrc${i}`).val() != "") {
-      txtARR.push($(`.txtsrc${i}`).val())
+    if ($(`.txtsrc`).eq(i-1).val() != "") {
+      txtARR.push($(`.txtsrc`).eq(i-1).val())
     }
   }
   let imgIdx = document.querySelectorAll(".imgsrc").length;
   for (let i = 1; i < (imgIdx + 1); i++) {
-    if ($(`.imgsrc${i}`).val() != "") {
-      imgARR.push($(`.imgsrc${i}`).val())
+    if ($(`.imgsrc`).eq(i-1).val() != "") {
+      imgARR.push($(`.imgsrc`).eq(i-1).val())
     }
   }
   multiLang = 0;
@@ -361,35 +361,35 @@ $(".next").click(function () {
   objstr = JSON.stringify(dataOBJ);
   console.log(dataOBJ)
   jwt_token =  get_jwt_token()
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
-  xhr.setRequestHeader("accept", "application/json");
-  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
-  xhr.setRequestHeader("Content-Type", "application/json");
-  xhr.onreadystatechange = function () {
-    if (xhr.readyState === 4) {
-      responseOBJ = JSON.parse(xhr.responseText)
-      console.log(responseOBJ.msg);
-        //let title = "資料已送出";
-        let text;
-        if(lan == 'en') {
-          //title = 'Submitted Successfully!';
-          text = responseOBJ.msg.eng;
-        } else {
-          text = responseOBJ.msg.zh;
-        }
-        Swal.fire({
-         // title: title,
-          icon: 'info',
-          text: text,
-          confirmButtonColor: '#3085d6',
-        });
+  // var xhr = new XMLHttpRequest();
+  // xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
+  // xhr.setRequestHeader("accept", "application/json");
+  // xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  // xhr.setRequestHeader("Content-Type", "application/json");
+  // xhr.onreadystatechange = function () {
+  //   if (xhr.readyState === 4) {
+  //     responseOBJ = JSON.parse(xhr.responseText)
+  //     console.log(responseOBJ.msg);
+  //       //let title = "資料已送出";
+  //       let text;
+  //       if(lan == 'en') {
+  //         //title = 'Submitted Successfully!';
+  //         text = responseOBJ.msg.eng;
+  //       } else {
+  //         text = responseOBJ.msg.zh;
+  //       }
+  //       Swal.fire({
+  //        // title: title,
+  //         icon: 'info',
+  //         text: text,
+  //         confirmButtonColor: '#3085d6',
+  //       });
       
-    }
-  };
-  var data = renderXHR_data(dataOBJ)
-  console.log(data)
-  result = xhr.send(objstr);
+  //   }
+  // };
+  // var data = renderXHR_data(dataOBJ)
+  // console.log(data)
+  // result = xhr.send(objstr);
 });
 
 
@@ -557,6 +557,14 @@ function load_data(tid, loaded_data, draft = false) {
           txtinput.setAttribute('placeholder', `${i+1}`);
           input_sec.appendChild(txtinput);
 
+          var removeSpan = document.createElement("span");
+          removeSpan.classList.add('remove-btn');
+          removeSpan.setAttribute('data-num', `${i}`);
+          removeSpan.textContent = '刪除';
+          removeSpan.setAttribute('data-bs-toggle', `modal`);
+          removeSpan.setAttribute('data-bs-target', `#deleteSecModal`);
+          input_sec.appendChild(removeSpan);
+
           // img url input
           var imginput = document.createElement("input");
           imginput.setAttribute('type', 'text');
@@ -597,7 +605,7 @@ function load_data(tid, loaded_data, draft = false) {
           input_sec.appendChild(img_box);
           document.querySelector('.img-inputTest').append(input_sec);
         }
-
+  addRemoveFunc()
 }
 
 
@@ -676,6 +684,7 @@ function initial() {
   for (let i = 0; i < length; i++) {
     renderInputSec(i+1) ;
   }
+  addRemoveFunc()
   console.log(document.querySelectorAll(".txtsrc").length + 1);
 }
 
@@ -740,6 +749,7 @@ addsecbtn.addEventListener('click', addsecBlock);
 function addsecBlock() {
   let newsecIdx = document.querySelectorAll(".input-sec").length + 1;
   renderInputSec(newsecIdx);
+  addRemoveFunc()
 }
 
 function renderInputSec(i) {
@@ -790,6 +800,14 @@ function renderInputSec(i) {
   img_box.appendChild(imguploadlabel);
   imgupload.addEventListener('change', prepareUpload);
 
+  var removeSpan = document.createElement("span");
+  removeSpan.classList.add('remove-btn');
+  removeSpan.setAttribute('data-num', `${i}`);
+  removeSpan.textContent = '刪除';
+  removeSpan.setAttribute('data-bs-toggle', `modal`);
+  removeSpan.setAttribute('data-bs-target', `#deleteSecModal`);
+  input_sec.appendChild(removeSpan);
+
   input_sec.appendChild(img_box);
   document.querySelector('.img-inputTest').append(input_sec);
 }
@@ -837,14 +855,14 @@ $('.draft-btn').click(() => {
   var step;
   let contentIdx = document.querySelectorAll(".txtsrc").length;
   for (let i = 1; i < (contentIdx + 1); i++) {
-    if ($(`.txtsrc${i}`).val() != "") {
-      txtARR.push($(`.txtsrc${i}`).val())
+    if ($(`.txtsrc`).eq(i-1).val() != "") {
+      txtARR.push($(`.txtsrc`).eq(i-1).val())
     }
   }
   let imgIdx = document.querySelectorAll(".imgsrc").length;
   for (let i = 1; i < (imgIdx + 1); i++) {
-    if ($(`.imgsrc${i}`).val() != "") {
-      imgARR.push($(`.imgsrc${i}`).val())
+    if ($(`.imgsrc`).eq(i-1).val() != "") {
+      imgARR.push($(`.imgsrc`).eq(i-1).val())
     }
   }
   let multiLang = 0
@@ -938,4 +956,19 @@ $("#lang-manu").hide();
 $( "#changeLanguage" ).click(function() {
   $("#lang-manu").slideToggle();
   $("#lang-arrow").toggleClass("arrowdoup");
-});
+});
+
+function addRemoveFunc() {
+  const testRemove = document.querySelectorAll('.remove-btn');
+  [ ...testRemove ].forEach((item) => {
+    item.addEventListener('click', testRemoving)
+  });
+}
+
+function testRemoving(e) {
+  console.log(e.target.parentElement)
+  let el = e.target.parentElement
+  $('.deleteSec').click(function(){
+    el.remove();
+  })
+}

+ 21 - 0
html/static/scss/style.css

@@ -245,6 +245,15 @@ body {
   -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 }
 
+.input-sec .remove-btn {
+  position: absolute;
+  right: .2rem;
+  bottom: .2rem;
+  font-size: .8rem;
+  padding: .2rem;
+  background-color: #cacaca;
+}
+
 .upload-cta.box-active {
   height: 80px;
   width: 80px;
@@ -1084,6 +1093,18 @@ body {
   color: black;
 }
 
+.btn-deleteSec {
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+  color: white;
+  border: none;
+  outline: none;
+}
+
+.btn-deleteSec:hover {
+  color: white;
+}
+
 .login-content {
   width: 80%;
   min-width: 350px;

Diff do ficheiro suprimidas por serem muito extensas
+ 0 - 0
html/static/scss/style.css.map


+ 19 - 0
html/static/scss/style.scss

@@ -235,6 +235,14 @@ body {
 .input-sec {
 	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 	-webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+	.remove-btn {
+		position: absolute;
+		right: .2rem;
+		bottom: .2rem;
+		font-size: .8rem;
+		padding: .2rem;
+		background-color: rgb(202, 202, 202);
+	}
 }
 .upload-cta.box-active {
 	height: 80px;
@@ -1016,6 +1024,17 @@ body {
 	}
 }
 
+
+.btn-deleteSec {
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
+	color: white;
+	border: none;
+	outline: none;
+	&:hover {
+		color: white;
+	}
+}
+
 .login-content {
 	width: 80%;
 	min-width: 350px;

+ 2 - 2
html/user_profile2.html

@@ -300,7 +300,7 @@
                                                     </table>
                                                 </div>
                                             </div>
-                                            <div class="draft col-12 order-4 col-lg-12 order-lg-4">
+                                            <div class="draft col-12 order-4 col-lg-12 order-lg-4 d-none">
                                                 <div class="card p-4">
                                                     <div class="d-flex justify-content-between">
                                                         <span set-lan="html:drafts">草稿夾</span>
@@ -310,7 +310,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="draft-table col-12 order-5 col-lg-12 order-lg-5"
+                                            <div class="draft-table col-12 order-5 col-lg-12 order-lg-5 d-none"
                                                 id="draft-table">
                                                 <div class="card p-3 text-center">
                                                     <table class="table text-center">

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff