From eef14a79b7ee5b6a7232cef9a661b569b57dc4d1 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 10 Mar 2021 17:31:44 +0100
Subject: [PATCH] implement add custom radio station (fixes #157)

---
 .gitlab-ci.yml          |  3 +-
 src/views/Favorites.vue | 64 +++++++++++++++++++++++++----------------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b1ed049..7021a3d 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -42,9 +42,10 @@ testing:
 
 packaging:
   stage: packaging
+  image: ubuntu:rolling
   script:
     - apt update
-    - DEBIAN_FRONTEND="noninteractive" apt install -y wget sudo gettext php php-simplexml
+    - DEBIAN_FRONTEND="noninteractive" apt install -y wget sudo gettext php php-simplexml nodejs npm
     - wget https://github.com/ChristophWurst/krankerl/releases/download/v0.13.0/krankerl_0.13.0_amd64.deb
     - sudo dpkg -i krankerl_0.13.0_amd64.deb
     - krankerl package
diff --git a/src/views/Favorites.vue b/src/views/Favorites.vue
index 2fc80b3..d7c08d2 100644
--- a/src/views/Favorites.vue
+++ b/src/views/Favorites.vue
@@ -68,7 +68,7 @@
 					<h2 class="oc-dialog-title">
 						{{ t('radio', 'Add custom station') }}
 					</h2>
-					<form>
+					<form @submit="addCustomStation">
 						<label for="stationName">{{ t('radio', 'Name') }}:</label>
 						<input
 							id="stationName"
@@ -85,16 +85,16 @@
 						<input
 							id="faviconUrl"
 							v-model="station.faviconUrl"
-							type="url"
-							required>
+							type="url">
+						<div class="formControls">
+							<!-- FIXME: Use nextcloud-vue button component -->
+							<button
+								type="submit"
+								class="icon-add-white primary button new-button">
+								{{ t('radio', 'Add station') }}
+							</button>
+						</div>
 					</form>
-					<div class="formControls">
-						<!-- FIXME: Use nextcloud-vue button component -->
-						<button class="icon-add-white primary button new-button"
-							@click="addCustomStation()">
-							{{ t('radio', 'Add station') }}
-						</button>
-					</div>
 				</div>
 			</Modal>
 		</AppContent>
@@ -144,7 +144,9 @@ export default {
 		sidebarStation: {},
 		tableData: [],
 		modal: true,
-		station: {},
+		station: {
+			faviconUrl: '',
+		},
 	}),
 	computed: {
 		...mapGetters([
@@ -241,9 +243,22 @@ export default {
 			this.modal = false
 		},
 
-		addCustomStation() {
-			console.log('Add custom station', this.station.name)
-			// this.addFavorite(station)
+		addCustomStation(e) {
+			e.preventDefault()
+			const station = {
+				name: this.station.name,
+				urlresolved: this.station.streamUrl,
+				favicon: this.station.faviconUrl,
+				stationuuid: '932eb148-e6f6-11e9-a96c-52543be04c81',
+				bitrate: '',
+				country: '',
+				language: '',
+				homepage: '',
+				codec: '',
+				tags: '',
+			}
+			this.addFavorite(station)
+			this.modal = false
 		},
 
 	},
@@ -289,18 +304,19 @@ export default {
 		grid-template-columns: 100px 1fr;
 		align-items: center;
 		// FIXME: No flex gap support in Chrome
-		margin-bottom: 15px;
-	}
 
-	.formControls {
-		display: flex;
-		justify-content: flex-end;
-		margin-right: 40px;
+		.formControls {
+			display: flex;
+			justify-content: flex-end;
+			margin-right: 40px;
+			margin-top: 10px;
+			grid-column: 1 / 3;
 
-		.button {
-			padding-left: 35px;
-			padding-right: 15px;
-			background-position: 10px center;
+			.button {
+				padding-left: 35px;
+				padding-right: 15px;
+				background-position: 10px center;
+			}
 		}
 	}
 }