andrew.vanderbye
/
stashr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rewrite of plugins page

Browse Source
nightly
Andrew 4 years ago
parent 88a4422e29
commit 2a452df527
1 changed files with 115 additions and 62 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 177
      stashr/templates/settings_page_plugins.html

177
stashr/templates/settings_page_plugins.html
Unescape View File

@ -8,7 +8,7 @@
<div id="app">
<plugins ref="plugins" v-bind:plugins="plugins"></plugins>
<modals></modals>
<modals v-bind:plugin="plugin"></modals>
</div>
{% endblock %}
@ -16,7 +16,7 @@
{% block script %}
Vue.component('modals', {
props: [],
props: ['plugin'],
template: `
<div>
<div class="modal" id="modalUpload" tabindex="-1" role="dialog" aria-labelledby="notesModal" aria-hidden="true">
@ -40,8 +40,66 @@ Vue.component('modals', {
</div>
</div>
</div>
</div>
<div class="modal" id="modalPlugin" tabindex="-1" role="dialog" aria-labelledby="notesModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="notesModalTitle">
[[ plugin.plugin_name ]]
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<strong>Version:</strong> [[ plugin.plugin_version ]]<br />
<strong>Author:</strong> [[ plugin.plugin_author ]]<br />
[[ plugin.plugin_description ]]
</div>
<div class="modal-footer">
<button type="button" class="btn" v-bind:class="pluginClass" data-bs-dismiss="modal" @click="togglePlugin">[[ pluginAction ]]</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#deletePlugin">Delete</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="deletePlugin" tabindex="-1" role="dialog" aria-labelledby="notesModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="notesModalTitle">
Delete Plugin
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to delete [[ plugin.plugin_name ]]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="deletePlugin">Delete</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
`,
computed: {
pluginClass() {
let classname = 'btn-warning';
if(this.plugin.plugin_state == 'disabled') {
classname = 'btn-success';
};
return classname;
},
pluginAction() {
let text = 'Disable';
if(this.plugin.plugin_state == 'disabled') {
text = 'Enable';
};
return text;
}
},
methods: {
uploadFile() {
let formData = new FormData();
@ -62,42 +120,6 @@ Vue.component('modals', {
}
})
},
},
delimiters: ["[[","]]"]
})
Vue.component('plugin',{
props:['plugin'],
template: `
<tr>
<th scope="row">[[ plugin.plugin_name ]]</th>
<td>[[ plugin.plugin_description ]]</td>
<td>[[ plugin.plugin_version ]]</td>
<td>[[ plugin.plugin_author ]]</td>
<td>[[ plugin.plugin_url ]]</td>
<td>[[ plugin.plugin_license ]]</td>
<td>[[ plugin.plugin_state ]]</td>
<td><button type="button" class="btn" v-bind:class="pluginClass" @click="togglePlugin">[[ pluginAction ]]</button> </td>
<td><button typoe="button" class="btn btn-danger" @click="deletePlugin">Delete</td>
</tr>
`,
computed: {
pluginClass() {
let classname = 'btn-danger';
if(this.plugin.plugin_state == 'disabled') {
classname = 'btn-success';
};
return classname;
},
pluginAction() {
let text = 'Disable';
if(this.plugin.plugin_state == 'disabled') {
text = 'Enable';
};
return text;
}
},
methods: {
togglePlugin() {
if(this.plugin.plugin_state == 'disabled') {
console.log('Enabling')
@ -131,47 +153,64 @@ Vue.component('plugin',{
delimiters: ["[[","]]"]
})
Vue.component('plugin',{
props:['plugin'],
template: `
<li @click="changePlugin" role="button" class='col-12 col-md-3 m-1 p-1 border rounded text-center text-light' v-bind:class="pluginStatusBG" data-bs-toggle="modal" data-bs-target="#modalPlugin">
<strong>[[ plugin.plugin_name ]]</strong><br />
[[ plugin.plugin_version ]]<br />
[[ plugin.plugin_author ]]
</li>
`,
computed: {
pluginStatusBG() {
let classname = 'bg-danger';
if(this.plugin.plugin_state == 'enabled') {
classname = 'bg-success'
}
return classname;
},
},
methods: {
changePlugin() {
app.changePlugin(this.plugin)
}
},
delimiters: ["[[","]]"]
})
Vue.component('plugins',{
props: ['plugins'],
template: `
<div class="row r-10 m-2">
<div class="row w-100">
<div class="col col-12">
<div class="row">
<div class="row w-100">
<div class="col-sm-12 col-md-6 text-center text-md-start">
<h2>Plugins</h2>
</div>
<div class="col-sm-12 col-md-6 text-center text-md-end">
<button type="button" class="btn btn-warning" @click="restartServer">Restart Server</button>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalUpload">Install Plugin</button>
</div>
</div>
<hr />
<div class="row">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Version</th>
<th scope="col">Author</th>
<th scope="col">URL</th>
<th scope="col">License</th>
<th scope="col">State</th>
<th scope="col">Action</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody class="tablebody">
<plugin
v-for="plugin in plugins"
v-bind:plugin="plugin"
v-bind:key="plugin.plugin_name"
></plugin>
</tbody>
</table>
<ul class="d-flex flex-wrap w-100 m-0 p-0 justify-content-center">
<plugin
v-for="plugin in plugins"
v-bind:plugin="plugin"
v-bind:key="plugin.plugin_name"
></plugin>
</ul>
</div>
</div>
</div>
`,
methods: {
restartServer() {
app.restartServer()
}
},
delimiters: ["[[","]]"]
})
@ -179,6 +218,7 @@ var app = new Vue({
el: '#app',
data: {
plugins: [],
plugin: []
},
created() {
this.getPlugins()
@ -188,8 +228,21 @@ var app = new Vue({
axios.get('{{ url_for('api.api_get_plugins') }}')
.then(res => {
this.plugins = res.data.results
this.plugin = this.plugins[0]
})
},
changePlugin(plugin) {
this.plugin = plugin
},
restartServer() {
axios.post('{{ url_for('api.restart_server') }}')
.then(res=>{
if(res.data.status_code == 200) {
stashrToast('Restarting Server', 'success')
}
})
.catch()
},
},
delimiters: ["[[","]]"]
})

Write Preview
Loading…
Cancel
Save