TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update 17/10/2022

Browse source 
- Revert back to modal, using emit as the underlying logic.
This commit is contained in:
SubTeno 2022-10-17 01:15:01 +00:00
parent c9a02df8a7
commit 86c2c32058
2 changed files with 131 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

111
src/components/CustomInstanceModal.vue Normal file
View file

@ -0,0 +1,111 @@
<template>
<ModalComponent>
<h3 v-t="'Custom Instance'" class="font-bold my-4" />
<hr />
<div class="text-center">
<div v-if="customInstances.length" class="remove">
<select v-model="selectedInstance">
<option
v-for="(instance, index) in customInstances"
:key="index"
:value="index"
v-text="instance.name"
/>
</select>
<div class="flex justify-end">
<button @click="removeInstance" v-t="'Remove'" />
</div>
</div>
<form class="children:pb-3">
<div>
<input v-model="name" class="input w-full" type="text" :placeholder="'Name'" :aria-label="'Name'" />
</div>
<div>
<input
v-model="url"
class="input w-full"
type="text"
:placeholder="'Instance Api URL'"
:aria-label="'Instance Api URL'"
v-on:keyup.enter="addInstance"
/>
</div>
<div class="flex justify-end">
<button @click.prevent="addInstance" v-t="'Add'" />
</div>
</form>
</div>
</ModalComponent>
</template>
<script>
import ModalComponent from "./ModalComponent.vue";
function isUrl(string) {
try {
return Boolean(new URL(string));
} catch (e) {
return false;
}
}
export default {
emits: ["removeInstance", "addInstance"],
data() {
return {
name: "",
url: "",
selectedInstance: -1,
};
},
methods: {
addInstance() {
if (this.testLocalStorage === null) {
alert("Local storage problem");
return null;
}
const newInstance = {
name: this.name,
api_url: this.url,
};
if (newInstance.name.length === 0) {
alert("Name cannot be empty");
return null;
}
if (!isUrl(newInstance.api_url)) {
alert("Not a valid URL");
return null;
}
fetch(newInstance.url + "/healthcheck")
.then(res => {
if (!res.ok) {
alert("Error Backend URL");
return null;
}
this.$emit("addInstance", newInstance);
})
.catch(() => {
alert("Cannot find URL");
return null;
})
.finally(() => {
return null;
});
return null;
},
removeInstance() {
if (this.testLocalStorage === null) {
alert("Local storage problem");
return null;
}
if (this.selectedInstance === -1) {
alert("SelectedInstance problem");
return null;
}
this.$emit("removeInstance", this.selectedInstance);
},
},
props: {
customInstances: [],
},
components: { ModalComponent },
};
</script>

104
src/components/PreferencesPage.vue
View file

@ -386,59 +386,21 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<ModalComponent v-if="showmodal" @close="showmodal = !showmodal"> <CustomInstanceModal
<h3 v-t="'Custom Instance'" class="font-bold my-4" /> v-if="showmodal"
<hr /> @close="showmodal = !showmodal"
<div class="text-center"> @addInstance="addInstance"
<div v-if="customInstances.length" class="remove"> @removeInstance="removeInstance"
<select v-model="selectedInstance"> :customInstances="customInstances"
<option />
v-for="(instance, index) in customInstances"
:key="index"
:value="index"
v-text="instance.name"
/>
</select>
<div class="flex justify-end">
<button @click="removeInstance" v-t="'Remove'" />
</div>
</div>
<form class="children:pb-3">
<div>
<input
v-model="name"
class="input w-full"
type="text"
:placeholder="'Name'"
:aria-label="'Name'"
v-on:keyup.enter="addInstance($event)"
/>
</div>
<div>
<input
v-model="url"
class="input w-full"
type="text"
:placeholder="'Instance Api URL'"
:aria-label="'Instance Api URL'"
v-on:keyup.enter="addInstance($event)"
/>
</div>
<div class="flex justify-end">
<button @click="addInstance($event)" v-t="'Add'" />
</div>
</form>
</div>
</ModalComponent>
</template> </template>
<script> <script>
import CountryMap from "@/utils/CountryMaps/en.json"; import CountryMap from "@/utils/CountryMaps/en.json";
import ModalComponent from "./ModalComponent.vue"; import CustomInstanceModal from "./CustomInstanceModal.vue";
export default { export default {
data() { data() {
return { return {
selectedInstance: null,
authInstance: false, authInstance: false,
selectedAuthInstance: null, selectedAuthInstance: null,
instances: [], instances: [],
@ -632,48 +594,22 @@ export default {
} }
} }
}, },
components: { ModalComponent }, components: { CustomInstanceModal },
methods: { methods: {
removeInstance() { removeInstance(selectedInstance) {
if (this.testLocalStorage) { if (selectedInstance === null) {
this.customInstances.splice(this.selectedInstance, 1); return;
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
location.reload();
} }
this.customInstances.splice(selectedInstance, 1);
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
}, },
isUrl(string) { addInstance(newInstance) {
try { if (newInstance === null) {
return Boolean(new URL(string)); return;
} catch (e) {
return false;
}
},
addInstance(event) {
event.preventDefault();
if (this.testLocalStorage) {
if (!this.isUrl(this.url)) {
alert("Not a valid URL");
return;
}
const newInstance = {
name: this.name,
api_url: this.url,
};
fetch(this.url + "/healthcheck")
.then(res => {
if (!res.ok) {
alert("Error Backend URL");
return;
}
this.customInstances.push(newInstance);
this.instances.push(newInstance);
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
})
.catch(() => {
alert("Cannot find URL");
return;
});
} }
this.customInstances.push(newInstance);
this.instances.push(newInstance);
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
}, },
async onChange() { async onChange() {
if (this.testLocalStorage) { if (this.testLocalStorage) {