add update preference UI

d0u9 · Sep 28, 2017 · 7aaa559 · 7aaa559
1 parent df33112
commit 7aaa559
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/youtube_dl_webui/static/css/modalComponent.css b/youtube_dl_webui/static/css/modalComponent.css
@@ -41,7 +41,7 @@
 }
 
 .modal-body label {
-    min-width: 60px;
+    min-width: 80px;
     max-width: 100px;
 }
 

diff --git a/youtube_dl_webui/static/js/global.js b/youtube_dl_webui/static/js/global.js
@@ -14,7 +14,8 @@ var videoDownload = (function (Vue, extendAM){
         stateCounter: { all: 0, downloading: 0, finished: 0, paused: 0, invalid: 0},
         modalData: {
             add: { url: '', ydl_opts: {} },
-            remove: {removeFile: false }
+            remove: { removeFile: false },
+            preference: {}
         },
         currentSelected: null,
         taskDetails: {},
@@ -65,6 +66,9 @@ var videoDownload = (function (Vue, extendAM){
                         case 'removeTask':
                             this.removeTask();
                             break;
+                        case 'updatePreference':
+                            this.updatePreference();
+                            break;
                     }
                 },
                 showRemoveTaskModal: function(){
@@ -86,6 +90,9 @@ var videoDownload = (function (Vue, extendAM){
                         _self.showAlertToast(err, 'error');
                     });
                 },
+                updatePreference: function () {
+                    console.log('updatePreference()');
+                },
                 removeTask: function(){
                     var _self = this;
                     var url = _self.headPath + 'task/tid/' + (_self.videoList[_self.currentSelected] && _self.videoList[_self.currentSelected].tid);
@@ -129,6 +136,10 @@ var videoDownload = (function (Vue, extendAM){
                     this.showModal = true;
                     this.modalType = 'about';
                 },
+                preference: function() {
+                    this.showModal = true;
+                    this.modalType = 'updatePreference';
+                },
                 selected: function(index){
                     var _self = this;
                     this.currentSelected = index;

diff --git a/youtube_dl_webui/templates/index.html b/youtube_dl_webui/templates/index.html
@@ -48,6 +48,7 @@
                     <button @click="showRemoveTaskModal"><i class="fa fa-minus" aria-hidden="true"></i> Remove</button>
                     <button @click="pauseTask"><i class="fa fa-pause" aria-hidden="true"></i> Pause</button>
                     <button @click="resumeTask"><i class="fa fa-play" aria-hidden="true"></i> Resume</button>
+                    <button @click="preference"><i class="fa fa-cog" aria-hidden="true"></i> Preference</button>
                     <button @click="about" style="float:right"><i class="fa fa-question-circle" aria-hidden="true"></i> About</button>
                 </div>
             </header>
@@ -110,6 +111,32 @@
                     </table>
                 </div>
             <modal v-if="showModal" @close="showModal = false" @confirm="execFunction" v-cloak>
+                <template v-if="modalType === 'updatePreference'">
+                    <div slot="header">Preference</div>
+                    <div slot="body" v-cloak style="display:block">
+                        <div style="text-align:center;">
+                            <hr class="left-hr" /><span style="font-weight: bold;">General</span><hr class="right-hr" />
+                        </div>
+                        <div>
+                            <label>Download Path:</label><input type="text" ref="dl-path" v-model="modalData.preference.dl_path" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/>
+                        </div>
+                        <div>
+                            <label>Database Path:</label><input type="text" ref="db-path" v-model="modalData.preference.db_path" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/>
+                        </div>
+                        <div>
+                            <label>Log Size:</label><input type="text" ref="log-size" v-model="modalData.preference.log_size" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/>
+                        </div>
+                        <div style="text-align:center;">
+                            <hr class="left-hr" /><span style="font-weight: bold;">youtube-dl options</span><hr class="right-hr" />
+                        </div>
+                        <div>
+                            <label>Format:</label><input type="text" ref="format" v-model="modalData.preference.format" v-cloak @keyup.esc="showModal = false"/>
+                        </div>
+                        <div>
+                            <label>Proxy:</label><input type="text" ref="proxy" v-model="modalData.preference.proxy" v-cloak @keyup.esc="showModal = false"/>
+                        </div>
+                    </div>
+                </template>
                 <template v-if="modalType === 'about'">
                     <div slot="header">About</div>
                     <div slot="body" v-cloak style="display:block">