move quality-chooser to vue (#3818)

* move quality-chooser to vue * add js libs * fix form submitting * move new vue component to vue-components dir * rename qualityChooser file * Rename "preffered" to preferred * Fix quality chooser (tested only on add new show page) + a few changes in add-show-options I needed to make the save defaults button work better * Remove imports of quality-chooser.js, remove map files * Update files in the other themes quality-chooser.mako add-show-options.js vue-submit-form.js * More fixes - Fix Backlog warning missing word and link. - Fix archive episodes button, html and function. * remove old js tag and move component import to main.mako * Fix quality chooser for add-show-options **Always render** the allowed/preferred qualities select elements, so jQuery could pull data from them to send to Python. Signed-off-by: sharkykh <[email protected]> * Remove quality-chooser.js again it was probably re-added in the rebase by mistake Signed-off-by: sharkykh <[email protected]> * Add watches to emit event when qualities change. * Update component to support massEdit and some finishing touches * gulp * Fix Add Show 'Step 3' section height not expanding when changing from a preset to custom quality + Fix indentation in Vue code
pymedusa · Apr 20, 2018 · 6b67a67 · 6b67a67
1 parent ff7523f
commit 6b67a67
Show file tree

Hide file tree

Showing 50 changed files with 840 additions and 792 deletions.
diff --git a/themes-default/slim/static/js/add-show-options.js b/themes-default/slim/static/js/add-show-options.js
@@ -2,10 +2,10 @@ $(document).ready(() => {
     $(document.body).on('click', '#saveDefaultsButton', event => {
         const anyQualArray = [];
         const bestQualArray = [];
-        $('#allowed_qualities option:selected').each((i, d) => {
+        $('select[name="allowed_qualities"] option:selected').each((i, d) => {
             anyQualArray.push($(d).val());
         });
-        $('#preferred_qualities option:selected').each((i, d) => {
+        $('select[name="preferred_qualities"] option:selected').each((i, d) => {
             bestQualArray.push($(d).val());
         });
 
@@ -31,11 +31,11 @@ $(document).ready(() => {
         });
     });
 
-    $(document.body).on('change', '#statusSelect, #qualityPreset, #season_folders, #allowed_qualities, #preferred_qualities, #subtitles, #scene, #anime, #statusSelectAfter', () => {
+    $(document.body).on('change', '#statusSelect, select[name="quality_preset"], #season_folders, select[name="allowed_qualities"], select[name="preferred_qualities"], #subtitles, #scene, #anime, #statusSelectAfter', () => {
         $('#saveDefaultsButton').prop('disabled', false);
     });
 
-    $(document.body).on('change', '#qualityPreset', () => {
+    $(document.body).on('change', 'select[name="quality_preset"]', () => {
         // Fix issue #181 - force re-render to correct the height of the outer div
         $('span.prev').click();
         $('span.next').click();

diff --git a/themes-default/slim/static/js/add-shows/new-show.js b/themes-default/slim/static/js/add-shows/new-show.js
@@ -163,10 +163,6 @@ MEDUSA.addShows.newShow = function() {
         $('#addShowForm').submit();
     });
 
-    $('#qualityPreset').on('change', () => {
-        myform.loadsection(2); // eslint-disable-line no-use-before-define
-    });
-
     /* JQuery Form to Form Wizard- (c) Dynamic Drive (www.dynamicdrive.com)
     *  This notice MUST stay intact for legal use
     *  Visit http://www.dynamicdrive.com/ for this script and 100s more. */
@@ -207,6 +203,10 @@ MEDUSA.addShows.newShow = function() {
         myform.loadsection(2);
     });
 
+    $(document.body).on('change', 'select[name="quality_preset"]', () => {
+        setTimeout(() => myform.loadsection(2), 100);
+    });
+
     $('#rootDirs').on('change', () => {
         updateSampleText();
     });

diff --git a/themes-default/slim/static/js/quality-chooser.js b/themes-default/slim/static/js/quality-chooser.js
diff --git a/themes-default/slim/static/js/vue-submit-form.js b/themes-default/slim/static/js/vue-submit-form.js
@@ -0,0 +1,21 @@
+window.vueSubmitForm = async function(formId) {
+    const element = document.getElementById(formId);
+    const formData = new FormData(element);
+    const method = element.getAttribute('method');
+    const base = document.getElementsByTagName('base')[0].getAttribute('href');
+    const path = element.getAttribute('action');
+    const redirect = element.getAttribute('redirect');
+
+    // @TODO: Add this back when we're JSON only
+    //        This converts formData to JSON
+    // const body = Array.from(formData.entries()).reduce((memo, pair) => ({
+    // ...memo,
+    // [pair[0]]: pair[1]
+    // }), {});
+    this.$http[method](path, { body: formData, redirect: 'follow' })
+        .then(() => {
+            if (redirect) {
+                window.location.href = base + redirect;
+            }
+        });
+};
diff --git a/themes-default/slim/views/addShows_addExistingShow.mako b/themes-default/slim/views/addShows_addExistingShow.mako
@@ -3,7 +3,6 @@
     from medusa import app
 %>
 <%block name="scripts">
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 <script type="text/javascript" src="js/add-show-options.js?${sbPID}"></script>
 <script>
 let app;

diff --git a/themes-default/slim/views/addShows_newShow.mako b/themes-default/slim/views/addShows_newShow.mako
@@ -4,9 +4,11 @@
     from medusa.indexers.indexer_api import indexerApi
 %>
 <%block name="scripts">
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 <script type="text/javascript" src="js/add-show-options.js?${sbPID}"></script>
 <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
+<script src="js/lib/Frisbee.min.js"></script>
+<script src="js/lib/vue-frisbee.min.js"></script>
+<script src="js/vue-submit-form.js"></script>
 <script>
 let app;
 const startVue = () => {
@@ -19,6 +21,9 @@ const startVue = () => {
             return {
                 header: 'New Show'
             };
+        },
+        methods: {
+            vueSubmitForm
         }
     });
 };
@@ -32,7 +37,7 @@ const startVue = () => {
         <div id="core-component-group1" class="tab-pane active component-group">
             <div id="displayText"></div>
             <br>
-            <form id="addShowForm" method="post" action="addShows/addNewShow" accept-charset="utf-8">
+            <form id="addShowForm" method="post" action="addShows/addNewShow" redirect="/" accept-charset="utf-8">
                 <fieldset class="sectionwrap">
                     <legend class="legendStep">Find a show on selected indexer(s)</legend>
                     <div class="stepDiv">
@@ -90,7 +95,7 @@ const startVue = () => {
             </form>
             <br>
             <div style="width: 100%; text-align: center;">
-                <input class="btn" type="button" id="addShowButton" value="Add Show" disabled="disabled" />
+                <input @click.prevent="vueSubmitForm('addShowForm')" id="addShowButton" class="btn" type="button" value="Add Show" disabled="disabled" />
                 % if provided_show_dir:
                 <input class="btn" type="button" id="skipShowButton" value="Skip Show" />
                 % endif

diff --git a/themes-default/slim/views/addShows_recommended.mako b/themes-default/slim/views/addShows_recommended.mako
@@ -3,7 +3,6 @@
     from medusa import app
 %>
 <%block name="scripts">
-    <script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif

diff --git a/themes-default/slim/views/addShows_trendingShows.mako b/themes-default/slim/views/addShows_trendingShows.mako
@@ -3,7 +3,6 @@
     from medusa import app
 %>
 <%block name="scripts">
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif

diff --git a/themes-default/slim/views/editShow.mako b/themes-default/slim/views/editShow.mako
@@ -13,7 +13,6 @@
 <meta data-var="show.is_anime" data-content="${show.is_anime}">
 </%block>
 <%block name="scripts">
-    <script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
     <script type="text/javascript" src="js/edit-show.js"></script>
 % if show.is_anime:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
@@ -71,8 +70,7 @@ const startVue = () => {
                             <label for="qualityPreset">
                                 <span class="component-title">Preferred Quality</span>
                                 <span class="component-desc">
-                                    <% allowed_qualities, preferred_qualities = common.Quality.split_quality(int(show.quality)) %>
-                                    <%include file="/inc_qualityChooser.mako"/>
+                                    <quality-chooser/>
                                 </span>
                             </label>
                         </div>

diff --git a/themes-default/slim/views/inc_addShowOptions.mako b/themes-default/slim/views/inc_addShowOptions.mako
@@ -8,8 +8,7 @@
             <label for="customQuality" class="clearfix">
                 <span class="component-title">Preferred Quality</span>
                 <span class="component-desc">
-                    <% allowed_qualities, preferred_qualities = Quality.split_quality(app.QUALITY_DEFAULT) %>
-                    <%include file="/inc_qualityChooser.mako"/>
+                    <quality-chooser/>
                 </span>
             </label>
         </div>

diff --git a/themes-default/slim/views/inc_qualityChooser.mako b/themes-default/slim/views/inc_qualityChooser.mako
diff --git a/themes-default/slim/views/layouts/main.mako b/themes-default/slim/views/layouts/main.mako
@@ -115,7 +115,7 @@
         <script type="text/javascript" src="js/browser.js?${sbPID}"></script>
 
         <%
-            ## Add Global Vue component x-templates here
+            ## Add Vue component x-templates here
             ## @NOTE: These will be usable on all pages
         %>
         <script src="js/lib/vue.js"></script>
@@ -127,6 +127,7 @@
         <%include file="/vue-components/file-browser.mako"/>
         <%include file="/vue-components/plot-info.mako"/>
         <%include file="/vue-components/saved-message.mako"/>
+        <%include file="/vue-components/quality-chooser.mako"/>
         <%block name="scripts" />
     </body>
 </html>