Files
myapp-full/myapp/templates/page.html
2019-12-12 17:45:27 +03:00

113 lines
3.1 KiB
HTML

{% extends "skeleton.html" %}
{% block body %}
{% raw %}
<h3>
<div class="btn btn-outline-secondary float-right" v-on:click="showPanel(panels.edit)"><i class="fa fa-edit"></i></div>
{{ page.title }}</h3>
<hr />
<div class="row" v-if="panels.edit.visible">
<div class="col">
<div class="form-group">
<label for="title">Заголовок</label>
<input id="title" name="title" type="text" value="Заголовок страницы" class="form-control" v-model="newPage.title">
</div>
<div class="form-group">
<label for="text">Текст</label>
<textarea class="form-control" id="text" name="text" v-model="newPage.text"></textarea>
</div>
<div class="row">
<div class="col">
<button class="btn btn-outline-success float-right" v-on:click="send"><i class="fa fa-save-o"></i> Сохранить</button>
</div>
</div>
<div class="row mt-3" v-if="error">
<div class="col bg-danger text-white" v-html="error">
</div>
</div>
</div>
</div>
<span v-html="page.text" v-else></span>
{% endraw %}
{% endblock %}
{% block breadcrumb %}
<ol class="breadcrumb mt-3">
<li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
<li class="breadcrumb-item active">Редактирование страницы</li>
</ol>
{% endblock %}
{% block script %}
<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
page: {{ pagedata['page']|tojson|safe }},
newPage: {{ pagedata['page']|tojson|safe }},
panels: {
edit: {
visible: false
}
},
error: null
},
methods: {
showPanel: function(panel) {
/* Показать/скрыть панель */
panel.visible = !panel.visible;
},
send: function() {
let vm = this;
var value = CKEDITOR.instances["text"].getData();
if (value != vm.newPage.text) {
vm.newPage.text = value;
}
axios.post(
'/api',
{
"jsonrpc": "2.0",
"method": 'page.update',
"params": {
"title": vm.newPage.title,
"text": vm.newPage.text
},
"id": 1
}
).then(
function(response) {
if ('result' in response.data) {
vm.page = response.data['result'];
vm.newPage = vm.page;
vm.error = null;
} else if ('error' in response.data) {
vm.error = response.data['error'].message;
}
}
);
}
},
updated: function() {
let vm = this;
for(var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].destroy(true);
}
if (vm.panels.edit.visible) {
CKEDITOR.replace( "text", {
customConfig: '/static/js/ckeditor-conf.js'
} );
}
}
})
</script>
{% endblock %}