WIP

public/js/plugin-download.js

@@ -16,6 +16,7 @@ const component = () => {
 		chaptersLimit: 500,
 		listManga: false,
 		subscribing: false,
+		subscriptionName: '',
 
 		init() {
 			const tableObserver = new MutationObserver(() => {
@@ -91,6 +92,7 @@ const component = () => {
 
 					data.chapters.forEach(c => {
 						c.array = ['hello', 'world', 'haha', 'wtf'].sort(() => 0.5 - Math.random()).slice(0, 2);
+						c.date = ['4 Jun, 1989', '1 July, 2021'].sort(() => 0.5 - Math.random())[0];
 					});
 
 					this.allChapters = data.chapters;
@@ -103,14 +105,14 @@ const component = () => {
 					this.searching = false;
 				});
 		},
-		searchManga() {
+		searchManga(query) {
 			this.searching = true;
 			this.allChapters = [];
 			this.chapters = undefined;
 			this.manga = undefined;
 			fetch(`${base_url}api/admin/plugin/search?${new URLSearchParams({
 				plugin: this.pid,
-				query: this.query
+				query: query
 			})}`)
 				.then(res => res.json())
 				.then(data => {
@@ -127,11 +129,14 @@ const component = () => {
 				});
 		},
 		search() {
+			const query = this.query.trim();
+			if (!query) return;
+
 			this.manga = undefined;
 			if (this.info.version === 1) {
-				this.searchChapters(this.query);
+				this.searchChapters(query);
 			} else {
-				this.searchManga();
+				this.searchManga(query);
 			}
 		},
 		selectAll() {
@@ -328,18 +333,17 @@ const component = () => {
 				return NaN;
 			return Date.parse(str);
 		},
-		subscribe() {
+		subscribe(modal) {
 			// TODO:
-			// 		- confirmation
-			// 		- name
 			// 		- use select2
+
 			this.subscribing = true;
 			fetch(`${base_url}api/admin/plugin/subscribe`, {
 					method: 'POST',
 					body: JSON.stringify({
 						filters: JSON.stringify(this.filterSettings),
 						plugin: this.pid,
-						name: 'Test Name'
+						name: this.subscriptionName.trim()
 					}),
 					headers: {
 						"Content-Type": "application/json"
@@ -349,13 +353,29 @@ const component = () => {
 				.then(data => {
 					if (!data.success)
 						throw new Error(data.error);
+					alert('success', 'Subscription created');
 				})
 				.catch(e => {
 					alert('danger', `Failed to subscribe. Error: ${e}`);
 				})
 				.finally(() => {
 					this.subscribing = false;
+					UIkit.modal(modal).hide();
 				});
+		},
+		filterTypeToReadable(type) {
+			switch (type) {
+				case 'number-min':
+					return 'number (minimum value)';
+				case 'number-max':
+					return 'number (maximum value)';
+				case 'date-min':
+					return 'minimum date';
+				case 'date-max':
+					return 'maximum date';
+				default:
+					return type;
+			}
 		}
-	};
+	}
 };

src/views/plugin-download.html.ecr

@@ -134,7 +134,7 @@
           <button class="uk-button uk-button-primary" @click.prevent="applyFilters()">Apply</button>
           <button class="uk-button uk-button-default" @click.prevent="clearFilters()">Clear</button>
           <span class="uk-divider-vertical uk-margin-left uk-margin-right"></span>
-          <button class="uk-button uk-button-default" @click.prevent="subscribe()" :disable="subscribing">Subscribe</button>
+          <button class="uk-button uk-button-default" @click.prevent="UIkit.modal($refs.modal).show()" :disable="subscribing">Subscribe</button>
         </form>
 
         <p class="uk-text-meta" x-show="chapters && chapters.length > chaptersLimit" x-text="`The manga has ${chapters ? chapters.length : 0} chapters, but Mango can only list up to ${chaptersLimit}. Please use the filters to narrow down your search.`"></p>
@@ -173,6 +173,41 @@
       </div>
     </div>
   </div>
+
+  <div uk-modal="container:false" x-ref="modal">
+    <div class="uk-modal-dialog">
+      <div class="uk-modal-header">
+        <h2 class="uk-modal-title">Subscription Confirmation</h2>
+      </div>
+      <div class="uk-modal-body">
+        <p>A subscription with the following filters with be created. All <strong>FUTURE</strong> chapters matching the filters will be automatically downloaded.</p>
+        <table class="uk-table uk-table-striped">
+          <thead>
+            <tr>
+              <th>Key</th>
+              <th>Type</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="ft in filterSettings" :key="ft">
+              <tr>
+                <td x-text="ft.key"></td>
+                <td x-text="filterTypeToReadable(ft.type)"></td>
+                <td x-text="ft.value"></td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+        <p>Enter a meaningful name for the subscription to continue:</p>
+        <input class="uk-input" type="text" x-model="subscriptionName">
+      </div>
+      <div class="uk-modal-footer uk-text-right">
+        <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
+        <button class="uk-button uk-button-primary" type="button" :disabled="subscriptionName.trim().length === 0" @click="subscribe($refs.modal)">Confirm</button>
+      </div>
+    </div>
+  </div>
 </div>
 
 <% content_for "script" do %>