RemiZOffAlex/myapp-full
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to mithril.js

Browse Source
This commit is contained in:
RemiZOffAlex
2023-02-18 09:22:43 +03:00
parent 024d7fb10d
commit bdc8f8496f
79 changed files with 1697 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
myapp/templates/public/app.js
View File

@@ -4,7 +4,7 @@
let vroot = document.getElementById("app");
let routes = {};
{% include '/lib.js' %}
{% include '/lib/inc.j2' %}
{% include '/public/layout.js' %}
{% include '/components/inc.j2' %}

11
myapp/templates/public/components/footer.js
View File

@@ -1,11 +0,0 @@
let Footer = {
view: function() {
return {tag: '<', children: `<div class="row mt-3 py-3 bg-light">
<div class="col-md-1"></div>
<div class="col-md-10">
&copy; <a href="https://specialistoff.net/" target="_blank">RemiZOffAlex</a>
</div>
<div class="col-md-1"></div>
</div>`}
}
};

3
myapp/templates/public/components/inc.j2 Normal file
View File

@@ -0,0 +1,3 @@
{% include '/public/components/menu-general.js' %}
{% include '/public/components/pages.js' %}
{% include '/public/components/users.js' %}

21
myapp/templates/public/components/menu-general.js Normal file
View File

@@ -0,0 +1,21 @@
let MenuGeneral = {
oninit: function(vnode) {
document.title = SETTINGS.TITLE;
},
view: function(vnode) {
result = [];
result.push(
m('div', {class: 'row'},
m('div', {class: 'col py-2'}, [
m(m.route.Link, {class: 'btn btn-outline-secondary', href: '/'}, m('i', {class: 'fa fa-home'})),
m(m.route.Link, {class: 'btn btn-outline-secondary border-0', href: '/pages'}, 'Статьи'),
m(m.route.Link, {class: 'btn btn-outline-secondary border-0', href: '/tags'}, 'Метки'),
m(m.route.Link, {class: 'btn btn-outline-secondary border-0', href: '/users'}, 'Пользователи'),
m(m.route.Link, {class: 'btn btn-outline-secondary border-0', href: '/api/browse'}, 'API JSON-RPC'),
m(m.route.Link, {class: 'btn btn-outline-success float-end', href: '/login'}, m('i', {class: 'fa fa-sign-in'})),
])
)
)
return result;
}
};

57
myapp/templates/public/components/pages.js Normal file
View File

@@ -0,0 +1,57 @@
function ComponentPages() {
let data = {
pages: null,
};
function page_render(page, pageIdx) {
let odd = '';
if (pageIdx % 2) {
odd = ' bg-light'
};
let tags = page.tags.map(
function(tag, tagIdx) {
return [
m('i', {class: "fa fa-tag"}),
{tag: '<', children: '&nbsp;'},
m(m.route.Link, {class: "font-monospace text-decoration-none", href: `/tag/${tag.id}`}, tag.name),
{tag: '<', children: '&nbsp;'},
]
}
);
return m('div', {class: 'row'},
m('div', {class: "col py-2" + odd}, [
m(m.route.Link, {class: "text-decoration-none", href: `/page/${page.id}`}, m.trust(page.title)),
m('div', {class: 'row'},
m('div', {class: 'col text-muted'},
m('small', [...tags])
)
)
])
)
};
function pages_render() {
return data.pages.map(page_render);
};
return {
oninit: function(vnode) {
console.log('ComponentPages.oninit');
for (let key in vnode.attrs){
data[key] = vnode.attrs[key];
};
},
onupdate: function(vnode) {
console.log('ComponentPages.onupdate');
for (let key in vnode.attrs){
data[key] = vnode.attrs[key];
};
},
view: function() {
console.log('ComponentPages.view');
if (data.pages!=null) {
let result = [];
result.push(pages_render());
return result;
};
}
};
};

41
myapp/templates/public/components/users.js Normal file
View File

@@ -0,0 +1,41 @@
function ComponentUsers() {
let data = {
users: null,
};
function user_render(user, userIdx) {
let odd = '';
if (userIdx % 2) {
odd = ' bg-light'
};
return m('div', {class: 'row'},
m('div', {class: "col py-2" + odd}, [
m(m.route.Link, {class: "text-decoration-none", href: `/user/${user.id}`}, user.name),
])
)
};
function users_render() {
return data.users.map(user_render);
};
return {
oninit: function(vnode) {
console.log('ComponentUsers.oninit');
for (let key in vnode.attrs){
data[key] = vnode.attrs[key];
};
},
onupdate: function(vnode) {
console.log('ComponentUsers.onupdate');
for (let key in vnode.attrs){
data[key] = vnode.attrs[key];
};
},
view: function() {
console.log('ComponentUsers.view');
if (data.users!=null) {
let result = [];
result.push(users_render());
return result;
};
}
};
};

79
myapp/templates/public/domains/auth/register.js Normal file
View File

@@ -0,0 +1,79 @@
function Register() {
let data = {
username: '',
password: '',
repeat: ''
};
function register() {
if (data.username.length==0 || data.password.length==0) {
let error = 'Пароли не совпадают';
return;
}
if (data.password!=data.repeat) {
let error = 'Пароли не совпадают';
return;
}
m.request({
url: '/api',
method: "POST",
body: {
"jsonrpc": "2.0",
"method": "auth.register",
"params": {
"username": data.username,
"password": data.password
},
"id": 1
}
}).then(
function(response) {
if ('result' in response) {
window.location.href = '/login';
} else if ('error' in response) {
vm.error = response.data['error'];
}
}
);
};
function form_submit(e) {
e.preventDefault();
register();
};
return {
view: function(vnode) {
let result = [];
result.push(
m('div', {class: 'row justify-content-center my-3'},
m('div', {class: 'col-md-6'}, [
m('h3', [
{tag: '<', children: '<a class="btn btn-outline-secondary float-end" href="/forgot-password">Забыл пароль</a>'},
'Регистрация',
m('hr'),
]),
m('form', {onsubmit: form_submit}, [
m('div', {class: "input-group mb-3"}, [
{tag: '<', children: '<span class="input-group-text"><i class="fa fa-user"></i></span>'},
m('input', {class: 'form-control', placeholder: 'Логин', type: 'text', oninput: function (e) {data.username = e.target.value}, value: data.username}),
]),
m('div', {class: "input-group mb-3"}, [
{tag: '<', children: '<span class="input-group-text"><i class="fa fa-lock"></i></span>'},
m('input', {class: 'form-control', placeholder: 'Пароль', type: 'password', oninput: function (e) {data.password = e.target.value}, value: data.password}),
]),
m('div', {class: "input-group mb-3"}, [
{tag: '<', children: '<span class="input-group-text"><i class="fa fa-lock"></i></span>'},
m('input', {class: 'form-control', placeholder: 'Повтор пароля', type: 'repeat', oninput: function (e) {data.repeat = e.target.value}, value: data.repeat}),
]),
m('div', {class: 'row'},
m('div', {class: "col py-2"}, [
m(m.route.Link, {class: 'btn btn-outline-secondary', href: '/login'}, 'Вход'),
m('button', {class: 'btn btn-outline-success float-end', type: 'submit'}, 'Зарегистрироваться')
]),
),
])
])
)
)
return result;
}
};
};

14
myapp/templates/public/domains/home.js Normal file
View File

@@ -0,0 +1,14 @@
let Home = {
oninit: function(vnode) {
document.title = SETTINGS.TITLE;
},
view: function(vnode) {
result = [];
result.push(
m('h1', '{{ pagedata['info'] }}'),
m('hr'),
m('p', 'Самурай без меча подобен самураю с мечом, но только без меча, однако как-будто с мечом, которого у него нет, но и без него он как с ним...')
)
return result;
}
};

11
myapp/templates/public/domains/inc.j2 Normal file
View File

@@ -0,0 +1,11 @@
{% include '/public/domains/auth/inc.j2' %}
{% include '/public/domains/page/inc.j2' %}
{% include '/public/domains/user/inc.j2' %}
{% include '/public/domains/home.js' %}
Object.assign(
routes,
{
"/": layout_decorator(Home),
}
);

11
myapp/templates/public/domains/page/inc.j2 Normal file
View File

@@ -0,0 +1,11 @@
{% include '/public/domains/page/page.js' %}
{% include '/public/domains/page/pages.js' %}
Object.assign(
routes,
{
"/page/:id": layout_decorator(Page),
"/pages": layout_decorator(Pages),
"/pages/:page": layout_decorator(Pages),
}
);

83
myapp/templates/public/domains/page/page.js Normal file
View File

@@ -0,0 +1,83 @@
function Page() {
let data = {
page: null,
panels: {
standart: {
visible: false
},
},
};
function breadcrumbs_render() {
let result = m('ul', {class: 'breadcrumb mt-3'}, [
m('li', {class: 'breadcrumb-item'}, m(m.route.Link, {href: '/'}, m('i', {class: 'fa fa-home'}))),
m('li', {class: 'breadcrumb-item'}, m(m.route.Link, {href: '/pages'}, 'Список статей')),
m('li', {class: 'breadcrumb-item active'}, m.trust(data.page.title)),
]);
return result;
};
function page_get(id) {
m.request({
url: '/api',
method: "POST",
body: {
"jsonrpc": "2.0",
"method": 'page',
"params": {
"id": id,
"fields": ["id", "title", "body", "parent_id", "created", "updated", "tags"]
},
"id": 1
}
}).then(
function(response) {
if ('result' in response) {
data.page = response['result'];
document.title = `${data.page.title} - ${SETTINGS.TITLE}`;
}
}
);
};
function page_prev() {
if (data.page.parent_id) {
return m(m.route.Link, {class: "btn btn-outline-secondary", href: `/page/${data.page.parent_id}`, title: "Список статей"}, m('i', {class: 'fa fa-chevron-left'}));
} else {
return m(m.route.Link, {class: "btn btn-outline-secondary", href: "/pages", title: "Список статей"}, m('i', {class: 'fa fa-chevron-left'}));
}
};
return {
oninit: function(vnode) {
console.log('Page.oninit');
page_get(vnode.attrs.id);
},
onupdate: function(vnode) {
console.log('Page.onupdate');
if (data.page!=null) {
if (data.page.id.toString()!==vnode.attrs.id) {
page_get(vnode.attrs.id);
}
}
},
view: function(vnode) {
console.log('Page.view');
let result = [];
if (data.page!=null) {
result.push(
breadcrumbs_render(),
m('div', {class: 'row'},
m('div', {class: 'col h1 py-1'}, [
m('div', {class: "btn-group btn-group-lg me-2"}, [
page_prev(),
m('button', {class: 'btn btn-outline-secondary', title: 'Инструменты', onclick: function() {panel_show(data.panels.standart)}}, m('i', {class: 'fa fa-cog'})),
]),
m.trust(data.page.title),
])
),
m('hr'),
);
result.push(m.trust(data.page.body));
result.push(breadcrumbs_render());
};
return result
}
}
};

11
myapp/templates/public/domains/user/inc.j2 Normal file
View File

@@ -0,0 +1,11 @@
{% include '/public/domains/user/user.js' %}
{% include '/public/domains/user/users.js' %}
Object.assign(
routes,
{
"/user/:id": layout_decorator(User),
"/users": layout_decorator(Users),
"/users/:page": layout_decorator(Users),
}
);

76
myapp/templates/public/domains/user/user.js Normal file
View File

@@ -0,0 +1,76 @@
function User() {
let data = {
user: null,
panels: {
standart: {
visible: false
},
},
};
function breadcrumbs_render() {
let result = m('ul', {class: 'breadcrumb mt-3'}, [
m('li', {class: 'breadcrumb-item'}, m(m.route.Link, {href: '/'}, m('i', {class: 'fa fa-home'}))),
m('li', {class: 'breadcrumb-item'}, m(m.route.Link, {href: '/users'}, 'Список пользователей')),
m('li', {class: 'breadcrumb-item active'}, m.trust(data.user.name)),
]);
return result;
};
function user_get(id) {
m.request({
url: '/api',
method: "POST",
body: {
"jsonrpc": "2.0",
"method": 'user',
"params": {
"id": id,
"fields": ["id", "name", "created", "disabled"]
},
"id": 1
}
}).then(
function(response) {
if ('result' in response) {
data.user = response['result'];
document.title = `${data.user.title} - ${SETTINGS.TITLE}`;
}
}
);
};
return {
oninit: function(vnode) {
console.log('User.oninit');
user_get(vnode.attrs.id);
},
onupdate: function(vnode) {
console.log('User.onupdate');
if (data.user!=null) {
if (data.user.id.toString()!==vnode.attrs.id) {
user_get(vnode.attrs.id);
}
}
},
view: function(vnode) {
console.log('User.view');
let result = [];
if (data.user!=null) {
result.push(
breadcrumbs_render(),
m('div', {class: 'row'},
m('div', {class: 'col h1 py-1'}, [
m('div', {class: "btn-group btn-group-lg me-2"}, [
m(m.route.Link, {class: "btn btn-outline-secondary", href: "/users", title: "Список пользователей"}, m('i', {class: 'fa fa-chevron-left'})),
m('button', {class: 'btn btn-outline-secondary', title: 'Инструменты', onclick: function() {panel_show(data.panels.standart)}}, m('i', {class: 'fa fa-cog'})),
]),
m.trust(data.user.name),
])
),
m('hr'),
);
result.push(m.trust(data.user.body));
result.push(breadcrumbs_render());
};
return result
}
}
};

156
myapp/templates/public/domains/user/users.js Normal file
View File

@@ -0,0 +1,156 @@
function Users() {
document.title = `Список пользователей - ${SETTINGS.TITLE}`;
let data = {
filter: PanelFilter(),
order_by: PanelOrderBy({
field: 'name',
fields: [
{value: 'id', text: 'ID'},
{value: 'name', text: 'имени'},
{value: 'created', text: 'дате создания'},
{value: 'updated', text: 'дате обновления'}
],
clickHandler: users_get,
order: 'asc',
}),
raw_users: [],
get users() {
/* Отфильтрованный список */
let value = data.filter.data.value;
if ( value.length<1 ) {
return data.raw_users;
}
if (data.filter.data.isregex) {
try {
let regex = new RegExp(value, 'ig');
} catch (e) {
console.log(e);
return data.raw_users;
}
}
let result = data.raw_users.filter(user_filter);
return result;
},
pagination: Pagination({
clickHandler: users_get,
prefix_url: '/users'
}),
};
function user_filter(user) {
/* Фильтр статей */
let value = data.filter.data.value;
if ( value.length<1 ) {
return true;
}
let isTitle = null;
if ( data.filter.data.isregex) {
let regex = new RegExp(value, 'ig');
isTitle = regex.test(user.name.toLowerCase());
} else {
isTitle = user.name.toLowerCase().includes(value.toLowerCase());
}
if ( isTitle ) {
return true;
}
return false;
};
function breadcrumbs_render() {
let result = m('ul', {class: 'breadcrumb mt-3'}, [
m('li', {class: 'breadcrumb-item'}, m(m.route.Link, {href: '/'}, m('i', {class: 'fa fa-home'}))),
m('li', {class: 'breadcrumb-item active'}, 'Список пользователей'),
]);
return result;
};
function users_get() {
let order_by = data.order_by.data;
let pagination = data.pagination.data;
m.request({
url: '/api',
method: "POST",
body: [
{
"jsonrpc": "2.0",
"method": 'users',
"params": {
"page": pagination.page,
"order_by": {
"field": order_by.field,
'order': order_by.order
},
"fields": ["id", "name"]
},
"id": 1
},
{
"jsonrpc": "2.0",
"method": 'users.count',
"id": 1
}
]
}).then(
function(response) {
if ('result' in response[0]) {
data.raw_users = response[0]['result'];
}
if ('result' in response[1]) {
data.pagination.size = response[1]['result'];
}
}
);
};
function user_render(user, userIdx) {
let odd = '';
if (userIdx % 2) {
odd = ' bg-light'
};
return m('div', {class: 'row'},
m('div', {class: `col py-2 ${odd}`}, [
m(m.route.Link, {href: `/user/${user.id}`}, m.trust(user.name)),
m('div', {class: 'row'},
),
])
);
};
function users_render() {
return data.users.map(user_render);
};
return {
oninit: function(vnode) {
let pagination = data.pagination.data;
if (vnode.attrs.page!==undefined) {
pagination.page = Number(vnode.attrs.page);
};
users_get();
},
view: function(vnode) {
let result = [];
result.push(
breadcrumbs_render(),
m('div', {class: 'row'},
m('div', {class: 'col h1 py-1'}, [
m('div', {class: "btn-group btn-group-lg me-2"}, [
m('button', {type: "button", class: "btn btn-outline-secondary", onclick: function() { panel_show(data.filter.data) }},
m('i', {class: "fa fa-filter"})
),
m('button', {type: "button", class: "btn btn-outline-secondary", onclick: function() { panel_show(data.order_by.data) }},
m('i', {class: "fa fa-sort-alpha-asc"})
)
]),
'Пользователи',
])
),
m('hr'),
);
result.push(m(data.filter));
result.push(m(data.order_by));
result.push(m(data.pagination));
if (data.users.length>0) {
result.push(m(ComponentUsers, {users: data.users}));
result.push(m(data.pagination));
};
result.push(breadcrumbs_render());
return result
}
}
};

2
myapp/templates/public/skeleton.html
View File

@@ -15,8 +15,6 @@
{% include 'footer.html' %}
</section>
{% block script %}{% endblock %}
<script type="text/javascript" src="/app.js"></script>
</body>
</html>