You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
4.6 KiB
126 lines
4.6 KiB
{% extends "settings_page.html" %}
|
|
|
|
{% block header_script_files %}
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block settings_pane %}
|
|
|
|
<div id="app">
|
|
<settings ref="settings" v-bind:settings="settings"></settings>
|
|
<modals ref="modal" v-bind:settings="settings"></modals>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
|
|
Vue.component('settings', {
|
|
props: ['settings'],
|
|
template: `
|
|
<div class="row r-10 m-2">
|
|
<div class="col col-12">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 text-center text-md-start">
|
|
<h2>Thumbnailer</h2>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row">
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="true">Settings</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content py-2" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="settings" role="tabpanel" aria-labelledby="settings-tab">
|
|
<div class="row">
|
|
<table class="table table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">{{ settings_form.api_key.label.text }}</th><td>[[ settings.PUSHBULLET.api_key ]]</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">{{ settings_form.channel.label.text }}</th><td>[[ settings.PUSHBULLET.channel ]]</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row w-100">
|
|
<div class="col-12 text-end my-2">
|
|
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#settingsModal">Modify Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
methods: {},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
Vue.component('modals',{
|
|
props: ['settings'],
|
|
template: `
|
|
<div>
|
|
<div class="modal" id="settingsModal" role="dialog" aria-labelledby="settingsModal" 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">
|
|
Modify App Settings
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form method="POST">
|
|
<div class="modal-body">
|
|
|
|
{{ settings_form.csrf_token }}
|
|
|
|
<div class="mb-3">
|
|
{{ settings_form.api_key.label }}
|
|
{{ settings_form.api_key(class_='form-control', placeholder=settings_form.api_key.label.text) }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ settings_form.channel.label }}
|
|
{{ settings_form.channel(class_='form-control', placeholder=settings_form.channel.label.text) }}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
{{ settings_form.settings_button(class_='btn btn-success') }}
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
methods: {},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
settings: []
|
|
},
|
|
created() {
|
|
this.getSettings()
|
|
},
|
|
methods: {
|
|
getSettings() {
|
|
axios.get('{{ url_for('pushbullet.api_get_settings') }}')
|
|
.then(res => {
|
|
this.settings = res.data.results;
|
|
})
|
|
}
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
{% endblock %} |