Add ns page

myapp/ns_page/templates/guest/page.html

@@ -0,0 +1,52 @@
+{% extends "skeleton.html" %}
+{% block content %}
+{% raw %}
+
+<h3>
+<a class="btn btn-outline-secondary" href="/pages"><i class="fa fa-chevron-left"></i></a>
+{{ page.title }}</h3>
+<hr />
+
+<div class="row">
+<div class="col small text-muted">
+<span v-for="(tag, tagIdx) in page.tags">
+<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>&nbsp;
+</span>
+</div>
+</div>
+
+<span v-html="page.body"></span>
+
+<div class="row">
+<div class="col small text-muted">
+<i class="fa fa-user"></i> <a class="text-monospace" :href="'/user/' + page.user.id">{{ page.user.name }}</a>&nbsp;
+Создано: {{ page.created }}&nbsp;
+Обновлено: {{ page.updated }}
+</div>
+</div>
+
+{% endraw %}
+{% endblock %}
+
+{% block breadcrumb %}
+{% raw %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item"><a href="/pages">Список статей</a></li>
+    <li class="breadcrumb-item active">{{ page.title }}</li>
+</ol>
+{% endraw %}
+{% endblock %}
+
+{% block script %}
+<script type="text/javascript">
+var app = new Vue({
+    el: '#app',
+    data: {
+        page: {{ pagedata['page']|tojson|safe }},
+    },
+    methods: {
+    },
+})
+</script>
+{% endblock %}

myapp/ns_page/templates/guest/pages.html

@@ -0,0 +1,135 @@
+{% extends "skeleton.html" %}
+{% block content %}
+{% raw %}
+
+<h3>Статьи</h3>
+<hr />
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
+
+<div class="row" v-if="firstAlpha">
+<div class="col py-2 text-center">
+от <span class="text-danger" v-html="firstAlpha"></span> до <span class="text-danger" v-html="lastAlpha"></span>
+</div>
+</div>
+
+<div class="row" v-for="(page, pageIdx) in pages">
+<div class="col py-2" :class="{'bg-light': pageIdx % 2}">
+<a :href="'/page/' + page.id">{{ page.title }}</a>
+
+<div class="row">
+<div class="col small text-muted">
+<span v-for="(tag, tagIdx) in page.tags">
+<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.tag_id">{{ tag.name }}</a>&nbsp;
+</span>
+</div>
+</div>
+
+<div class="row">
+<div class="col small text-muted">
+<i class="fa fa-user"></i> <a :href="'/user/' + page.user.id">{{ page.user.name }}</a>&nbsp;
+Создано: {{ page.created }}&nbsp;
+Обновлено: {{ page.updated }}
+</div>
+</div>
+
+</div>
+</div>
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
+
+<backtotop-component></backtotop-component>
+
+{% endraw %}
+{% endblock %}
+
+{% block script %}
+<script type="text/javascript" src="/static/components/backtotop.js"></script>
+<link rel="stylesheet" href="/static/components/backtotop.css"></link>
+<script type="text/javascript" src="/static/components/pagination.js"></script>
+
+<script>
+var app = new Vue({
+    el: '#app',
+    data: {
+        pages: [],
+        pagination: {{ pagedata['pagination']|tojson|safe }},
+    },
+    methods: {
+        getPages: function() {
+            /* Получить список статей */
+            let vm = this;
+            axios.post(
+                '/api',
+                {
+                    "jsonrpc": "2.0",
+                    "method": "pages",
+                    "params": {
+                        "page": vm.pagination.page
+                    },
+                    "id": 1
+                }
+            ).then(
+                function(response) {
+                    if ('result' in response.data) {
+                        vm.pages = response.data['result'];
+                    }
+                }
+            );
+        },
+    },
+    created: function() {
+        let vm = this;
+        axios.post(
+            '/api',
+            [
+                {
+                    "jsonrpc": "2.0",
+                    "method": "pages",
+                    "params": {
+                        "page": vm.pagination.page
+                    },
+                    "id": 1
+                },
+                {
+                    "jsonrpc": "2.0",
+                    "method": "pages.count",
+                    "params": {},
+                    "id": 1
+                }
+            ]
+        ).then(
+            function(response) {
+                if ('result' in response.data[0]) {
+                    vm.pages = response.data[0]['result'];
+                }
+                if ('result' in response.data[1]) {
+                    vm.pagination.size = response.data[1]['result'];
+                }
+            }
+        );
+    },
+    computed: {
+        firstAlpha: function() {
+            /* Получить первый символ */
+            let vm = this;
+            let result = null;
+            if (vm.pages.length>0) {
+                result = vm.pages[0].title.charAt(0);
+            }
+            return result;
+        },
+        lastAlpha: function() {
+            /* Получить последний символ */
+            let vm = this;
+            let result = null;
+            if (vm.pages.length>0) {
+                let title = vm.pages[vm.pages.length-1].title;
+                result = title.charAt(0);
+            }
+            return result;
+        }
+    }
+})
+</script>
+{% endblock %}