nfp_sites/filadelfia_web/app/page_article.js

134 lines
3.3 KiB
JavaScript

const m = require('mithril')
const api = require('./api')
const Authentication = require('./authentication')
const Input = require('./input')
const lang = require('./lang')
const Article = {
oninit: function(vnode) {
Authentication.requiresLogin()
this.error = ''
this.path = ''
this.data = null
this.editing = false
this.form = {
title: 'Sunnudagssamkoma',
date: new Date(),
banner: null,
metadata: {
speaker: '',
},
}
this.onbeforeupdate(vnode)
},
onbeforeupdate: function(vnode) {
let path = m.route.param('id')
if (this.path === path) return
this.fetchArticle(vnode, path)
},
fetchArticle: function(vnode, path) {
this.error = ''
this.data = null
this.path = path
api.sendRequest({
method: 'GET',
url: '/api/auth/articles/' + this.path,
})
.then((result) => {
this.data = result.article
this.gotArticle(vnode)
}, (err) => {
this.error = err.message
})
},
gotArticle: function(vnode) {
if (!this.data) {
return this.error = 'Article not found'
}
this.form.title = this.data.name
this.form.date = new Date(this.data.publish_at)
this.form.banner = this.data.banner_path
this.form.metadata.speaker = this.data.content.speaker
},
updatevideo: function(vnode, e) {
this.error = ''
if (this.error) return false
},
view: function(vnode) {
console.log(this.data)
return [
api.loading ? m('div.loading-spinner') : null,
this.error
? m('div.full-error', { onclick: this.fetchArticle.bind(this, vnode, this.path) }, [
this.error, m('br'), 'Click here to try again'
])
: null,
this.data?.media_path
? [
m('.player', [
m('video', {
crossorigin: '',
controls: true,
preload: 'none',
poster: this.data.banner_path || '/assets/placeholder.avif',
}, [
m('source', {
src: this.data.media_path
})
]),
]),
]
: null,
this.editing
? m('form.article', {
onsubmit: this.updatevideo.bind(this, vnode),
}, [
m('div.form-row', [
m('div.form-columns', [
m(Input, {
label: 'Mynd',
type: 'file',
accept: 'image/*',
utility: 'image',
form: this.form,
formKey: 'banner',
}),
]),
m('div.form-columns', [
m(Input, {
label: 'Title',
form: this.form,
formKey: 'title',
}),
m(Input, {
label: 'Date (dd.mm.yyyy)',
type: 'text',
utility: 'datetime',
form: this.form,
formKey: 'date',
}),
]),
]),
m('p.separator', 'Optional'),
m(Input, {
label: 'Speaker',
form: this.form.metadata,
formKey: 'speaker',
}),
])
: m('div.article', [
m('h1', this.data.name)
]),
]
},
}
module.exports = Article