From 0234322ebc5a8055524ed0697d2862df1f4469bb Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Fri, 1 Apr 2022 14:33:02 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/image/submit.tmpl | 89 +++++++++------------
 web_src/js/features/images.js               | 58 +++++++++++++-
 web_src/js/index.js                         |  2 +
 web_src/js/vendor/semanticdropdown.js       |  2 +-
 4 files changed, 97 insertions(+), 54 deletions(-)

diff --git a/templates/repo/cloudbrain/image/submit.tmpl b/templates/repo/cloudbrain/image/submit.tmpl
index e12dc5923..f77e3d14b 100644
--- a/templates/repo/cloudbrain/image/submit.tmpl
+++ b/templates/repo/cloudbrain/image/submit.tmpl
@@ -1,7 +1,4 @@
 <style>
-.fz14{
-    font-size: 14px !important;
-}
 .label_color{
     color:#505559 !important;
     width: 6% !important;
@@ -16,100 +13,90 @@
             <h4 class="ui top attached header">
                 {{.i18n.Tr "repo.submit_image"}}
             </h4>
+            <div class="submit-image-tmplvalue" style="display: none;" data-link="{{$.Link}}"></div>
             <div class="ui attached segment" style="padding: 2em 3em;padding-bottom: 7rem;">
-                <div class="ui form">
+                <form class="ui form" id="form_image">
+                    {{.CsrfTokenHtml}}
                     <div class="inline field">
                         <label class="label_color" for="">{{$.i18n.Tr "dataset.dataset_available_clusters"}}</label>
                         <div class="ui basic label" style="border: none !important;color:#3291f8;">
                             <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path fill="none" d="M0 0h24v24H0z"></path><path d="M4 3h16a1 1 0 0 1 1 1v7H3V4a1 1 0 0 1 1-1zM3 13h18v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7zm4 3v2h3v-2H7zM7 6v2h3V6H7z"></path></svg>
                             CPU/GPU
                         </div>
+                        <input type="hidden" value="{{.Type}}" name="type">
                     </div>
                     <div class="inline required field">
                         <label class="label_color" for="">{{$.i18n.Tr "repo.images.name"}}</label>
-                        <input type="text" name="first-name" placeholder="{{$.i18n.Tr "repo.images.name_placerholder"}}" style="width: 80%;">
+                        <input type="text" name="tag" required placeholder="{{$.i18n.Tr "repo.images.name_placerholder"}}" style="width: 80%;">
                         <span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
                     </div>
                     <div class="inline required field">
                         <label class="label_color" for="">{{$.i18n.Tr "dataset.description"}}</label>
-                        <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 255)"></textarea>
+                        <textarea style="width: 80%;" required id="description" name="description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 255)"></textarea>
                     </div>
                     <div class="inline required field" style="display: flex;align-items: center;">
                         <label class="label_color" for="">{{$.i18n.Tr "repo.model.manage.label"}}</label>&nbsp;
-                        <!-- <input type="text" name="first-name" placeholder="{{$.i18n.Tr "repo.repo_label_helpe"}}" style="width: 80%;"> -->
-                        <div class="ui multiple search selection dropdown" id="dropdown_container" style="width: 80%;">
-                            <input type="hidden" name="topics" value="">
+                        <div class="ui multiple search selection dropdown" id="dropdown_image" style="width: 80%;">
+                            <input type="hidden" name="topics" value="" required>
                             <div class="default text" id="default_text">{{.i18n.Tr "repo.repo_label_helpe"}}</div>
-                            <div class="menu" id="course_label_item">
-                            </div>
+                            <div class="menu" id="course_label_item"></div>
                         </div>
-                        
                     </div>
                     <span class="tooltips" style="display: block;padding-left: 0.5rem;margin-top: 0.5rem;margin-bottom: 1rem;">{{.i18n.Tr "repo.image.label_tooltips"}}</span>
                     <div class="inline fields">
                         <label class="label_color" for="" style="visibility: hidden;"></label>
                         <div class="field">
-                            <div class="ui radio checkbox checked">
-                                <input type="radio" name="fruit" checked="" tabindex="0" class="hidden">
+                            <div class="ui radio checkbox">
+                                <input type="radio" name="isPrivate" checked="checked" value="false">
                                 <label>{{.i18n.Tr "org.settings.visibility.public"}}</label>
                             </div>
                         </div>
                         <div class="field" style="flex: 0.15;">
-                            <div class="ui radio checkbox checked" >
-                                <input type="radio" name="fruit" checked="" tabindex="0" class="hidden">
+                            <div class="ui radio checkbox" >
+                                <input type="radio" name="isPrivate" value="true">
                                 <label>{{.i18n.Tr "home.show_private"}}</label>
                             </div>
                         </div>
                         <div class="field">
                             <span class="label_color">{{.i18n.Tr "repo.images.public_tooltips"}}</span>
                         </div>
-                        
                     </div>
-
                     <div class="inline required field" style="padding-top: 2rem;">
                         <label class="label_color" for="" style="visibility: hidden;"></label>
-                        <button class="ui create_train_job green button">
+                        <button class="ui create_image green button">
                         {{.i18n.Tr "repo.cloudbrain.commit_image"}}
                         </button>
                         <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
                     </div>
-                </div>
+                </form>
             </div>
         </div>
     </div>
 </div>
 {{template "base/footer" .}}
-
 <script>
+console.log({{$.Link}})
+let url_href = {{$.Link}}
+function submitImage(){
+    console.log($('#form_image').serialize())
+    $.ajax({
+            url:url_href,
+            type:'POST',
+            data:$('#form_image').serialize(),
+            success:function(res){
+                console.log("res",res)
+            },
+            error: function(xhr){
+            // 隐藏 loading
+            // 只有请求不正常（状态码不为200）才会执行
+                // $('.ui.error.message').text(xhr.responseText)
+                // $('.ui.error.message').css('display','block')
+            },
+            complete:function(xhr){
+                // $("#mask").css({"display":"none","z-index":"1"})
+            }
+        })
+}
+
 
-$(document).ready(function(){
-    $('.ui.multiple.search.selection.dropdown')
-    .dropdown({
-        allowAdditions: true,
-        onChange: function(value, text, $selectedItem) {
-            $('#course_label_item').empty()
-        }
-    })
-    // let defaultText = document.getElementById("default_text").offsetHeight
-    // defaultText = defaultText>40 ? defaultText+12 :defaultText
-    // $("#dropdown_container").css("height",defaultText)
-    $('input.search').bind('input propertychange', function (event) {
-        // $("#dropdown_container").removeAttr("style"); 
-        const query  = $('input.search').val()
-        if(!query){
-            $('#course_label_item').empty()
-        }else{
-            $.get(`/api/v1/topics/search?q=${query}`,(data)=>{
-                if(data.topics.length!==0){
-                    let html=''
-                    $('#course_label_item').empty()
-                    data.topics.forEach(element => {
-                        html += `<div class="item" data-value="${element.topic_name}">${element.topic_name}</div>`
-                    });
-                    $('#course_label_item').append(html)
-                }
-            })
-        }
-    });
-})
 </script>
\ No newline at end of file
diff --git a/web_src/js/features/images.js b/web_src/js/features/images.js
index 5a969f479..3f806b622 100644
--- a/web_src/js/features/images.js
+++ b/web_src/js/features/images.js
@@ -1,11 +1,65 @@
-import Images from './components/Images.vue';
-export default async function initImage(){
+import Images from '../components/Images.vue';
 
+export default async function initImage(){
+    function initDropdown(){
+        $('#dropdown_image')
+        .dropdown({
+            allowAdditions: true,
+            onChange: function(value, text, $selectedItem) {
+                $('#course_label_item').empty()
+            }
+        })
+        $('#dropdown_image input.search').bind('input propertychange', function (event) {
+            // $("#dropdown_container").removeAttr("style"); 
+            const query  = $('input.search').val()
+            if(!query){
+                $('#course_label_item').empty()
+            }else{
+                $.get(`/api/v1/topics/search?q=${query}`,(data)=>{
+                    if(data.topics.length!==0){
+                        let html=''
+                        $('#course_label_item').empty()
+                        data.topics.forEach(element => {
+                            html += `<div class="item" data-value="${element.topic_name}">${element.topic_name}</div>`
+                        });
+                        $('#course_label_item').append(html)
+                    }
+                })
+            }
+        });
+    }
+    initDropdown()
+    let link = $('.submit-image-tmplvalue').data('link')
+    $('.ui.create_image.green.button').click(()=>{
+        console.log($('#form_image').serialize())
+        $.ajax({
+            url:link,
+            type:'POST',
+            data:$('#form_image').serialize(),
+            success:function(res){
+                console.log("res",res)
+            },
+            error: function(xhr){
+            // 隐藏 loading
+            // 只有请求不正常（状态码不为200）才会执行
+                // $('.ui.error.message').text(xhr.responseText)
+                // $('.ui.error.message').css('display','block')
+            },
+            complete:function(xhr){
+                // $("#mask").css({"display":"none","z-index":"1"})
+            }
+        })
+    })
+    console.log("initImage")
     const el = document.getElementById('image-base');
     if (!el) {
         return;
     }
     
+    // let defaultText = document.getElementById("default_text").offsetHeight
+    // defaultText = defaultText>40 ? defaultText+12 :defaultText
+    // $("#dropdown_container").css("height",defaultText)
+    
     new Vue({
         delimiters: ['${', '}'],
         el,
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 5602dad90..943a66318 100755
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -43,6 +43,7 @@ import Contributors from './components/Contributors.vue'
 import Model from './components/Model.vue';
 import WxAutorize from './components/WxAutorize.vue'
 import initCloudrain from './features/cloudrbanin.js'
+import initImage from './features/images.js'
 // import $ from 'jquery.js'
 
 Vue.use(ElementUI);
@@ -2944,6 +2945,7 @@ $(document).ready(async () => {
   initTribute();
   initDropDown();
   initCloudrain();
+  initImage();
 
   // Repo clone url.
   if ($('#repo-clone-url').length > 0) {
diff --git a/web_src/js/vendor/semanticdropdown.js b/web_src/js/vendor/semanticdropdown.js
index c9144adf5..034bf98d1 100644
--- a/web_src/js/vendor/semanticdropdown.js
+++ b/web_src/js/vendor/semanticdropdown.js
@@ -1071,7 +1071,7 @@ $.fn.dropdown = function(parameters) {
           ;
           if(settings.allowAdditions || (hasSelected && !module.is.multiple())) {
             module.debug('Forcing partial selection to selected item', $selectedItem);
-            $selectedItem[0].click();
+            // $selectedItem[0].click();
             return;
           }
           else {