0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-06 11:35:07 +00:00
VueTube/NUXT/pages/mods/plugins.vue
Front bf7d79e164 feat: plugins pt.2 | im done for today
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa fuck
2022-05-30 18:24:37 -04:00

99 lines
2.6 KiB
Vue

<template>
<div>
<div style="margin: 1em;">
<v-btn style="width: 100%;" class="primary text-none" @click="pickFile()"><v-icon style="margin-right: 0.5em;">mdi-sd</v-icon> Install from storage</v-btn>
<input type="file" id="filePicker" accept="js" />
</div>
<center v-if="plugins.length == 0" style="margin-top: 2em;">
<v-icon size="50px">mdi-connection</v-icon>
<h2>No plugins installed</h2>
</center>
<!-- sorry for the mess, I will make a dumb (styles only) standardized card component later - Nik -->
<div
v-for="(plugin, index) in plugins"
:key="index"
flat
class="card d-flex mb-4 background"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
:style="{
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
padding:
$store.state.tweaks.roundTweak > 0
? '.75rem 0rem .75rem 1rem'
: '.75rem .75rem .75rem 1.5rem',
}"
>
<div>
<v-card-title class="pa-0">
{{ plugin.manifest.name }}
{{ plugin.manifest.version }}
</v-card-title>
<v-card-text
class="pa-0 mb-3 background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
>
by {{ plugin.manifest.author }}
{{ plugin.manifest.license ? `(${plugin.manifest.license})` : "" }}
</v-card-text>
<v-card-text class="pa-0">
{{ plugin.manifest.description }}
</v-card-text>
</div>
<v-switch
disabled
style="pointer-events: none"
class="my-0"
persistent-hint
inset
/>
</div>
</div>
</template>
<style scoped>
#filePicker {
visibility: hidden;
display: none;
}
</style>
<script>
export default {
data() {
return {
plugins: [],
installedVersion: process.env.appVersion,
};
},
async mounted() {
//this.plugins = await this.$tppl.list;
const vm = this;
document.getElementById('filePicker').onchange = async function() {
const file = document.getElementById("filePicker").files[0];
const contents = await vm.readFileContent(file);
await vm.$tppl.addPlugin(contents);
};
},
methods: {
readFileContent(file) {
const reader = new FileReader()
return new Promise((resolve, reject) => {
reader.onload = event => resolve(event.target.result)
reader.onerror = error => reject(error)
reader.readAsText(file)
})
},
pickFile() {
document.getElementById("filePicker").click();
}
}
};
</script>