gregorio/lepisi-pengumuman
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Mithril as main method

Browse Source
This commit is contained in:
Gregorio Chiko Putra
2017-10-25 12:08:41 +07:00
parent 6040809710
commit d1d5ee1b0c
157 changed files with 19593 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/js/components/Loading.js Normal file
View File

@@ -0,0 +1,14 @@
let m = require('mithril')
var Loading = {
view: function() {
return m('.loading', [
m('.loading-bar'),
m('.loading-bar'),
m('.loading-bar'),
m('.loading-bar')
])
}
}
module.exports = Loading

107
assets/js/components/createCategory.js Normal file
View File

@@ -0,0 +1,107 @@
let m = require('mithril')
let _ = require('lodash')
let category = require('../models/category')
let nav = require('./nav')
let Loading = require('./Loading')
var createCategory = {
oninit: function() {
category.loadList()
},
current: [],
view: function() {
return m('main.documentation', m('section', [
m('h1', 'Kategori'),
category.loading ? m(Loading) :
m('.flex.two-600.full.grow', [
m('div', m('form', {
onsubmit: function(e) {
e.preventDefault()
category.entry()
}
}, [
m('h2', 'Tambah Kategori'),
m('.flex.three-600.two.grow', [
m('.third-600.full', m('label', {for: 'category'}, 'Nama')),
m('.two-third-600.full', m('input', {
type: 'text',
name: 'category',
autocomplete: 'off',
oninput: m.withAttr('value', function(value) {
category.current.category = value
}),
value: _.isString(category.current.category) ? category.current.category : ''
})),
m('.third-600.full', m('label', {for: 'background'}, 'Background')),
m('.two-third-600.full', m('input', {
type: 'color',
name: 'background',
oninput: m.withAttr('value', function(value) {
category.current.background = value
}),
value: _.isString(category.current.background) ? category.current.background : ''
})),
m('.third-600.full', m('label', {for: 'foreground'}, 'Teks')),
m('.two-third-600.full', m('input', {
type: 'color',
name: 'foreground',
oninput: m.withAttr('value', function(value) {
category.current.foreground = value
}),
value: _.isString(category.current.foreground) ? category.current.foreground : ''
})),
m('button.pseudo.full', {
type: 'submit'
}, [
m('i.fa.fa-plus.fa-fw', {
'aria-hidden': 'true'
}),
m('span', 'Tambah')
])
])
])),
m('div', [
m('h2', 'List'),
m('ul', {
style: 'margin-top:0;'
}, category.list.map(function(cat) {
return m('li', [
m('div', {
style: 'height: initial; text-align: center; border-radius: 5px; background-color: ' + cat.background + '; color: ' + cat.foreground + ';'
}, m('span', cat.category)),
m('.flex.two-600.full.grow', {
style: 'margin: 0;'
}, [
m('div', m('a.pseudo.button.full', {
href: '/kategori/' + cat.id,
oncreate: m.route.link
}, [
m('i.fa.fa-edit.fa-fw'),
m('span', {
style: 'font-size: smaller'
}, 'Ubah')
])),
m('div', m('button.pseudo.full', {
style: 'height: inherit',
onclick: function() {
category.toggleStatus(cat.id)
}
}, [
m('i.fa.fa-fw', {
class: (cat.status == 1) ? 'fa-times-circle-o' : 'fa-check'
}),
m('span', {
style: 'font-size: smaller;'
}, (cat.status == 1) ? 'Matikan' : 'Aktifkan')
]))
]),
m('.fourth-600.none')
])
}))
])
])
]))
}
}
module.exports = createCategory

86
assets/js/components/createPost.js Normal file
View File

@@ -0,0 +1,86 @@
let m = require('mithril')
let fecha = require('fecha')
let category = require('../models/category')
let rome = require('../vendor/rome')
let SimpleMDE = require('../vendor/simplemde.min')
let post = require('../models/post')
var createPost = {
oninit: function() {
category.loadList()
},
oncreate: function() {
var valid_at = rome(left, {
dateValidator: rome.val.beforeEq(right),
time: false,
inputFormat: 'YYYY/MM/DD',
required: true
})
var expired_at = rome(right, {
dateValidator: rome.val.afterEq(left),
time: false,
inputFormat: 'YYYY/MM/DD',
required: true
})
var simplemde = new SimpleMDE({ element: document.getElementById("smde") });
simplemde.codemirror.on('change', function() {
post.current.content = simplemde.value();
});
},
view: function() {
return m('main.documentation', m('section', [
m('h2', 'Tambah Pengumuman'),
m('form', {
onsubmit: function(e) {
e.preventDefault()
// do things
// console.log(post.current);
post.upload()
}
}, m('.flex.three.grow', [
m('.full.third-600', [
m('label', {for: 'category'}, 'Kategori:'),
m('select', {
name: 'category',
oninput: m.withAttr('value', function(value) {
post.current.category = value
})
}, [
m('option'),
category.list.map(function(cat) {
return m('option', {value: cat.id}, cat.category)
})
]),
m('br'),
m('label', {for: 'valid_at'}, 'Berlaku dari: '),
m('input#left', {
name: 'valid_at',
onfocusout: m.withAttr('value', function(value) {
post.current.valid_at = value
})
}),
m('br'),
m('label', {for: 'expired_at'}, 'Berlaku sampai: '),
m('input#right', {
name: 'expired_at',
onfocusout: m.withAttr('value', function(value) {
post.current.expired_at = value
})
})
]),
m('.full.two-third-600', [
m('label', {for: 'content'}, 'Konten: '),
m('textarea#smde', {name: 'content'})
]),
m('br'),
m('button.pseudo', {type: 'submit'}, [
m('i.fa.fa-check.fa-fw'),
m('span', {style: 'font-size: smaller'}, 'Unggah')
])
]))
]))
}
}
module.exports = createPost

67
assets/js/components/editCategory.js Normal file
View File

@@ -0,0 +1,67 @@
let m = require('mithril')
let category = require('../models/category')
let nav = require('./nav')
let _ = require('lodash')
let Loading = require('./Loading')
var editCategory = {
oninit: function(vnode) {
category.loadCurrent(vnode.attrs.id)
},
view: function() {
return m('main.documentation', m('section', [
m('h1', 'Kategori'),
category.loading ? m(Loading) :
m('.flex.two-600.full.grow', [
m('div', m('form', {
onsubmit: function(e) {
e.preventDefault()
category.save()
}
}, [
m('h2', 'Ubah Kategori'),
m('.flex.three-600.two.grow', [
m('.third-600.full', m('label', {for: 'category'}, 'Nama')),
m('.two-third-600.full', m('input', {
type: 'text',
name: 'category',
autocomplete: 'off',
oninput: m.withAttr('value', function(value) {
category.current.category = value
}),
value: category.current.category
})),
m('.third-600.full', m('label', {for: 'background'}, 'Background')),
m('.two-third-600.full', m('input', {
type: 'color',
name: 'background',
oninput: m.withAttr('value', function(value) {
category.current.background = value
}),
value: category.current.background
})),
m('.third-600.full', m('label', {for: 'foreground'}, 'Teks')),
m('.two-third-600.full', m('input', {
type: 'color',
name: 'foreground',
oninput: m.withAttr('value', function(value) {
category.current.foreground = value
}),
value: category.current.foreground
})),
m('button.pseudo.full', {
type: 'submit'
}, [
m('i.fa.fa-edit.fa-fw', {
'aria-hidden': 'true'
}),
m('span', 'Ubah')
])
])
]))
])
]))
}
}
module.exports = editCategory

102
assets/js/components/editPost.js Normal file
View File

@@ -0,0 +1,102 @@
let m = require('mithril')
let fecha = require('fecha')
let category = require('../models/category')
let rome = require('../vendor/rome')
let SimpleMDE = require('../vendor/simplemde.min')
let post = require('../models/post')
var createPost = {
oninit: function(vnode) {
post.loadCurrent(vnode.attrs.id)
category.loadList(1)
},
oncreate: function() {
var valid_at = rome(left, {
dateValidator: rome.val.beforeEq(right),
time: false,
inputFormat: 'YYYY/MM/DD',
required: true
})
var expired_at = rome(right, {
dateValidator: rome.val.afterEq(left),
time: false,
inputFormat: 'YYYY/MM/DD',
required: true
})
var simplemde = new SimpleMDE({ element: document.getElementById("smde") });
setTimeout(function() {
simplemde.value(post.current.content)
simplemde.codemirror.on('change', function() {
post.current.content = simplemde.value();
});
}, 1000)
},
view: function() {
return m('main.documentation', m('section', [
m('h2', 'Tambah Pengumuman'),
m('form', {
onsubmit: function(e) {
e.preventDefault()
// do things
// console.log(post.current);
post.save()
}
}, m('.flex.three.grow', [
m('.full.third-600', [
m('label', {for: 'category'}, 'Kategori:'),
m('select', {
name: 'category',
oninput: m.withAttr('value', function(value) {
post.current.category = value
})
}, [
// m('option'),
category.list.map(function(cat) {
return cat.id == post.current.category ? [
m('option', {
value: cat.id,
selected: 'selected'
}, cat.category)
] : [
m('option', {
value: cat.id
}, cat.category)
]
})
]),
m('br'),
m('label', {for: 'valid_at'}, 'Berlaku dari: '),
m('input#left', {
name: 'valid_at',
onfocusout: m.withAttr('value', function(value) {
post.current.valid_at = value
}),
value: post.current.valid_at
}),
m('br'),
m('label', {for: 'expired_at'}, 'Berlaku sampai: '),
m('input#right', {
name: 'expired_at',
onfocusout: m.withAttr('value', function(value) {
post.current.expired_at = value
}),
value: post.current.expired_at
})
]),
m('.full.two-third-600', [
m('label', {for: 'content'}, 'Konten: '),
m('textarea#smde', {name: 'content'})
]),
m('br'),
m('button.pseudo', {type: 'submit'}, [
m('i.fa.fa-check.fa-fw'),
m('span', {style: 'font-size: smaller'}, 'Unggah')
])
]))
]))
}
}
module.exports = createPost

37
assets/js/components/header.js Normal file
View File

@@ -0,0 +1,37 @@
let m = require('mithril')
let images = require('./images')
var header = {
oncreate: function() {
var rootSwiper = document.getElementById('nouser')
images.root = rootSwiper
m.mount(rootSwiper, images)
},
view: function() {
return m('span', [
m('nav', [
m('span.brand', m('a.title', {
href: '',
oncreate: m.route.link
}, 'Live Info')),
// m('input#bmenug.show', {type: 'checkbox'}),
// m('label.burger.pseudo.button', {for: 'bmenug'}, m('i.fa.fa-bars', {'aria-hidden': 'true'})),
m('.menu', m('a.navy.hidden-hover.button', {
href: '/login',
'data-tooltip': 'Masuk',
oncreate: m.route.link
}, [
m('i.fa.fa-sign-in', {
'aria-hidden': 'true'
}),
' Masuk'
]))
]),
m('main.documentation#doc-main', [
m('#nouser', {style: 'text-align:left;width:100%'})
])
])
}
}
module.exports = header

48
assets/js/components/images.js Normal file
View File

@@ -0,0 +1,48 @@
let m = require('mithril')
let landingPost = require('../models/landingPost')
let swiper = require('swiper')
let marked = require('../vendor/marked')
let fitText = require('../others/fitText')
require('../../../node_modules/swiper/dist/css/swiper.css')
var images = {
root: null,
oncreate: function() {
setTimeout(function() {
landingPost(images.root)
var imgSwiper = new swiper('.swiper-container', {
speed: 500,
autoplay: 5000,
autoplayDisableOnInteraction: false,
loop: true,
onTransitionEnd: function(imgSwiper) {
landingPost(images.root)
}
})
fitText.fitAll('fitThis')
}, 500)
window.onresize = function() {
setTimeout(function() {
fitText.fitAll('fitThis')
}, 100)
}
},
list: [],
view: function() {
return m('.swiper-container', [
m('.swiper-wrapper', images.list != [] ? [
images.list.map(function(item) {
return m('.swiper-slide.fitThis', {
"data-swiper-autoplay": item.delay,
style: "text-align: center; word-wrap: break-word;background-color:" + item.background + "; color:" + item.foreground + ";"
}, m.trust(marked(item.content)))
})
] : m('.swiper-slide.fitty', {
style: "background-color: #F0F0F0;color: #FFF;padding: 15vh 0;"
}, m.trust(marked("*Tidak ada pengumuman*"))))
])
}
}
module.exports = images

61
assets/js/components/listAdmin.js
View File

@@ -1,40 +1,47 @@
let m = require('mithril')
let post = require('../models/post')
let marked = require('../vendor/marked')
let fecha = require('fecha')
let Loading = require('./Loading')
var listAdmin = {
view: function() {
return m('.flex.four-900.full.card-wrapper', [
m('a.fourth-900.half-600.card.box.new', {href:'/posts/entry'}, m('i.fa.fa-plus.fa-3x', '')),
post.list.map(function(post) {
return m('.fourth-900.half-600.card.box', {style:'background-color:' + post.background}, [
m('span.stack', {style:'font-size:smaller;color:rgba(17,17,17,.4);margin-bottom:.6em;'}, post.valid_at + ' - ' + post.expired_at),
m('span.stack', {style:'color:' + post.foreground}, m.trust(marked(post.content))),
m('form', {method:'post',action:'/'}, m('footer.flex.full.grow', (post.status != 0) ? [
m('.half-900', m('a.button.full', {href: '/posts/edit/' + post.id}, [
post.loading ? m(Loading) :
m('a.fourth-900.half-600.card.box.new', {href:'/posts/entry', oncreate: m.route.link}, m('i.fa.fa-plus.fa-3x', '')),
post.list.map(function(pengumuman) {
return m('.fourth-900.half-600.card.box', {style:'background-color:' + pengumuman.background}, [
m('span.stack', {
style:'font-size: smaller; color:rgba(17,17,17,.4);',
'data-tooltip': 'Active: '
+ fecha.format(new Date(pengumuman.valid_at), 'DD/MM/YYYY')
+ ' - '
+ fecha.format(new Date(pengumuman.expired_at), 'DD/MM/YYYY')
+ "\n"
+ 'Edited: '
+ fecha.format(fecha.parse(pengumuman.edited_at, 'YYYY-MM-DD H:i:s'), 'DD/MM/YYYY')
}, [
m('em', [
pengumuman.creatorName,
' - ',
fecha.format(fecha.parse(pengumuman.valid_at, 'YYYY-MM-DD H:i:s'), 'DD/MM/YYYY')
])
]),
m('span.stack', {style:'color:' + pengumuman.foreground + '; overflow-y: auto;'}, m.trust(marked(pengumuman.content))),
m('span', m('footer.flex.full.grow', (pengumuman.status != 0 && pengumuman.creator == window.location.search.split('&')[1].slice('2')) ? [
m('.half-900', m('a.button.full', {href: '/posts/edit/' + pengumuman.id, oncreate: m.route.link}, [
m('i.fa.fa-edit.fa-fw', ''),
m('span', {style: 'font-size:smaller'}, 'Ubah')
])),
m('.half-900', (post.status == 1) ? [
m('input', {type: 'hidden', name: 'id'}, post.id),
m('input', {type: 'hidden', name: 'status'}, '0'),
m('input', {type: 'hidden', name: '_method'}, 'delete'),
m('input', {type: 'hidden', name: '_token'}, 'abc123'),
m('button.error.full', {type: 'submit'}, [
m('i.fa.fa-times-circle-o.fa-fw', ''),
m('span', {style: 'font-size:smaller'}, 'Matikan')
])
] : [
m('input', {type: 'hidden', name: 'id'}, post.id),
m('input', {type: 'hidden', name: 'valid_at'}, '##date##'),
m('input', {type: 'hidden', name: 'status'}, '1'),
m('input', {type: 'hidden', name: '_method'}, 'put'),
m('input', {type: 'hidden', name: '_token'}, 'abc123'),
m('button.success.full', {type: 'submit'}, [
m('i.fa.fa-check.fa-fw', ''),
m('span', {style: 'font-size:smaller;'}, 'Aktifkan')
])
])
m('.half-900', m('button.full', {
class: pengumuman.status == 1 ? 'error' : 'success',
onclick: function() { post.toggleStatus(pengumuman.id) }
}, [
m('i.fa.fa-fw', {
class: pengumuman.status == 1 ? 'fa-times-circle-o' : 'fa-check'
}),
m('span', {style: 'font-size:smaller'}, pengumuman.status == 1 ? 'Matikan' : 'Aktifkan')
]))
] : m('.half-900', m('span.button.pseudo.full', {style: 'color:rgba(17,17,17,.3);'}, 'Nonaktif'))))
])
})

47
assets/js/components/login.js Normal file
View File

@@ -0,0 +1,47 @@
let m = require('mithril')
let user = require('../models/user')
var login = {
view: function() {
return m('section', m('form', {
onsubmit: function(e) {
e.preventDefault()
user.login()
}
}, [
m('h1', 'Masuk'),
m('.flex.four.grow', [
m('.fourth-600.full', m('input', {
type: 'text',
name: 'username',
placeholder: 'Username',
maxlength: '25',
autocomplete: 'off',
oninput: m.withAttr('value', function(value) {user.current.username = value}),
value: user.current.username
})),
m('.fourth-600.full', m('input', {
type: 'password',
name: 'password',
placeholder: 'Password',
oninput: m.withAttr('value', function(value) {
user.current.password = value
}),
value: user.current.password
})),
m('.fourth-600.none'),
m('.fourth-600.none'),
m('div', m('button.half-600.full.pseudo', {
type: 'submit'
}, [
m('i.fa.fa-check.fa-fw'),
m('span', {
style: 'font-size:smaller;'
}, 'Masuk')
]))
])
]))
}
}
module.exports = login

53
assets/js/components/nav.js Normal file
View File

@@ -0,0 +1,53 @@
let m = require('mithril')
let user = require('../models/user')
var nav = {
view: function() {
return m('nav', [
m('span.brand', m('a.title', {href: '', oncreate: m.route.link}, 'Live Info')),
m('input#bmenug.show', {type: 'checkbox'}),
m('label.burger.pseudo.button', {for: 'bmenug'}, m('i.fa.fa-bars', {'aria-hidden': 'true'})),
m('.menu#menu', [
m('a.navy.button', {
href: 'https://backup.lepisi.ac.id/gregorio/lepisi-pengumuman/blob/master/README.md#dokumentasi',
target: '_blank',
'data-tooltip': 'Dokumentasi'
}, m('i.fa.fa-dot-circle-o', {
'aria-hidden': 'true'
})
),
m('a.navy.button', {
href: '/kategori',
'data-tooltip': 'Kategori',
oncreate: m.route.link
}, [
m('i.fa.fa-list-ul', {
'aria-hidden': 'true'
}),
' Kategori'
]),
m('a.navy.button', {
href: '/register',
'data-tooltip': 'User Baru',
oncreate: m.route.link
}, [
m('i.fa.fa-user-plus', {
'aria-hidden': 'true'
}),
' User'
]),
m('a.navy.button', {
'data-tooltip': 'Keluar',
onclick: function() {user.logout()}
}, [
m('i.fa.fa-sign-out', {
'aria-hidden': 'true'
}),
' Keluar'
])
])
])
}
}
module.exports = nav

57
assets/js/components/registerUser.js Normal file
View File

@@ -0,0 +1,57 @@
let m = require('mithril')
let user = require('../models/user')
var registerUser = {
view: function() {
return m('main.documentation', m('section', [
m('h1', 'Registrasi'),
m('form', {
onsubmit: function(e) {
e.preventDefault()
user.register()
}
}, m('.flex.four.grow', [
m('.fourth-600.full', m('input', {
type: 'text',
name: 'full_name',
placeholder: 'Nama Lengkap',
autocomplete: 'off',
oninput: m.withAttr('value', function(value) {
user.current.full_name = value
})
})),
m('.fourth-600.full', m('input', {
type: 'text',
name: 'username',
placeholder: 'Username',
maxlength: '25',
autocomplete: 'off',
oninput: m.withAttr('value', function(value) {
user.current.username = value
})
})),
m('.fourth-600.full', m('input', {
type: 'password',
name: 'password',
placeholder: 'Password',
oninput: m.withAttr('value', function(value) {
user.current.password = value
})
})),
m('.fourth-600.none'),
m('div', m('button.pseudo.three-fourth-600.full', {
type: 'submit'
}, [
m('i.fa.fa-plus-circle.fa-fw', {
'aria-hidden': 'true'
}),
m('span', {
style: 'font-size: smaller;'
}, 'Register')
]))
]))
]))
}
}
module.exports = registerUser

8
assets/js/components/secondaryNav.js
View File

@@ -4,19 +4,19 @@ var secondaryNav = {
view: function() {
return m('.filter.flex.six-600.four.grow', [
m('.sixth-600.none', ''),
m('div', m('a[href=/].navy', {
m('div', m('a[href=/posts].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Semua')),
m('div', m('a[href=/active].navy', {
m('div', m('a[href=/posts/active].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Aktif')),
m('div', m('a[href=/soon].navy', {
m('div', m('a[href=/posts/soon].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Belum Aktif')),
m('div', m('a[href=/inactive].navy', {
m('div', m('a[href=/posts/inactive].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Nonaktif')),

13
assets/js/components/showPost.js
View File

@@ -1,17 +1,26 @@
let m = require('mithril')
let post = require('../models/post')
let listAdmin = require('./listAdmin')
let secondaryNav = require('./secondaryNav')
var showPost = {
interval: 10000,
oninit: function(vnode) {
post.curStatus = vnode.attrs.status
post.loadList()
setInterval(function() {
post.loadList()
}, post.interval)
}, showPost.interval)
},
view: function() {
return m(listAdmin)
return m('main.documentation', m('#nouser', {
style: 'text-align:left;width:100%'
}, m('div', {
style: 'background:#FFF;text-align:left;width:100%;padding:10vh 0 0;'
}, [
m('#secondaryNav', m(secondaryNav)),
m('#mit', m(listAdmin))
])))
}
}

22
assets/js/components/title.js Normal file
View File

@@ -0,0 +1,22 @@
let m = require('mithril')
let doc = require('./doc')
let user = require('../models/user')
let editCategory = require('../components/editCategory')
var title = {
view: function() {
return m('span', [
m('span#doc')
])
},
oncreate: function() {
var rootDoc = document.getElementById('doc')
// m.route(document.getElementById('menu'), '/kategori', {
// // '': doc,
// '/kategori': editCategory
// })
// m.mount(rootDoc, doc)
}
}
module.exports = title