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

Mithril now can walks by itself

Browse Source
This commit is contained in:
Gregorio Chiko Putra
2017-10-05 16:41:34 +07:00
parent ae762758fc
commit cfa0924ea7
26 changed files with 4299 additions and 1524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
App/Views/Data/mithril.html
View File

@@ -23,7 +23,7 @@
{% block body %}
<main class="documentation">
<div id="nouser" style="text-align:left;width:100%;">
<div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
<div style="background:#fff;text-align:left;width:100%;padding:10vh 0 0;">
<div id='navigasi'>
</div>
<div id="mit">
@@ -31,198 +31,4 @@
</div>
</div>
</main>
<script>
var root = document.getElementById('mit')
var Nav = {
view: function() {
return m('.filter.flex.six-600.four.grow', [
m('.sixth-600.none', ''),
m('div', m('a[href=/].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Semua')),
m('div', m('a[href=/active].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Aktif')),
m('div', m('a[href=/soon].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Belum Aktif')),
m('div', m('a[href=/inactive].navy', {
oncreate: m.route.link,
style: 'font-size:smaller;'
}, 'Nonaktif')),
m('.sixth-600.none', '')
])
}
}
var Slider = {
view: function() {
return m('#slidr-div', Post.list.map(function(post) {
return m('div[data-slidr=' + post.id + ']', {
style: 'color:' + post.foreground + ';background-color:' + post.background + ';width:100vw;height:100vh;'
}, m('div', {style: 'padding:15vh 0;'}, m.trust(marked(post.content))))
}))
}
}
var Post = {
list: [],
curStatus: 3,
interval: 10000,
loadList: function() {
return m.request({
method: 'GET',
url: '/api/posts/' + Post.curStatus,
withCredentials: true
})
.then(function(result) {
Post.list = result.data
console.log('cek')
})
}
}
var Component = {
view: function() {
return m('.bungkus.flex.four-900.full.card-wrapper', {style:'padding:0 .6em;'}, [
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}, [
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('span.button.pseudo.full', {style: 'color:rgba(17,17,17,.3);'}, 'Nonaktif'))))
])
})
])
}
}
var PostNoUser = {
oninit: function() {
Post.curStatus = 1
Post.loadList()
setInterval(function() {
Post.loadList()
}, Post.interval)
},
view: function() {
return m(Slider)
}
}
var PostList = {
oninit: function() {
Post.curStatus = 3
Post.loadList()
setInterval(function() {
Post.loadList()
}, Post.interval)
},
view: function() {
return m(Component)
}
}
var PostActive = {
oninit: function() {
Post.curStatus = 1
Post.loadList()
setInterval(function() {
Post.loadList()
}, Post.interval)
},
view: function() {
return m(Component)
}
}
var PostSoon = {
oninit: function() {
Post.curStatus = 2
Post.loadList()
setInterval(function() {
Post.loadList()
}, Post.interval)
},
view: function() {
return m(Component)
}
}
var PostInactive = {
oninit: function() {
Post.curStatus = 0
Post.loadList()
setInterval(function() {
Post.loadList()
}, Post.interval)
},
view: function() {
return m(Component)
}
}
</script>
{% if user != false %}
<script>
m.mount(document.getElementById('navigasi'), Nav)
m.route(root, '', {
'': PostList,
'/': PostList,
'/active': PostActive,
'/soon': PostSoon,
'/inactive': PostInactive,
})
</script>
{% else %}
<script>
m.mount(document.getElementById('nouser'), PostNoUser)
setTimeout(function() {
if (document.getElementById('slidr-div')) {
var postids = function() {
return Post.list.map(function(post) {
return post.id
}) + ',' + Post.list[0].id
}
slidr.create('slidr-div', {
controls: false,
timing: {'linear': '0.5s ease-in'},
theme: '#666',
touch: true
}).add("h", (postids()).split(',')).start().auto();
}
}, 100)
</script>
{% endif %}
{% endblock %}

37
App/Views/base.html
View File

@@ -50,14 +50,6 @@
z-index: 10001;
}
.fl {
float: left;
}
.fr {
float: right;
}
td, th {
padding: .3em .45em .3em .6em;
}
@@ -70,18 +62,21 @@
text-align: center;
}
#slidr-div p {
#slidr-div p,
.fitty p {
margin: 0;
text-align: center;
line-height: 1;
}
@media screen and (orientation: landscape) {
#slidr-div p {
#slidr-div p,
.fitty p {
font-size: 8vw;
}
}
@media screen and (orientation: portrait) {
#slidr-div p {
#slidr-div p,
.fitty p {
font-size: 10vh;
}
}
@@ -149,10 +144,6 @@
background-color: rgba(17, 17, 17, .05);
}
.fitty > p {
margin: 0;
}
nav {
max-width: 100vw;
}
@@ -195,6 +186,10 @@
bottom: 0;
padding: .3em;
}
.swiper-container {
height: 100vh;
}
</style>
</head>
<body>
@@ -204,14 +199,16 @@
</span>
{% block nav %}{% endblock %}
</nav>
<script src="/js/rome.js"></script>
<script src="/js/slidr.min.js"></script>
<script src="/js/simplemde.min.js"></script>
<script src="/js/mithril.js"></script>
<script src="/js/marked.js"></script>
{% block body %}
{% endblock %}
{% if user %}
<script src="js/index.js"></script>
{% else %}
<script src="js/landing.js"></script>
{% endif %}
<script>
function fadeOutEffect() {
var fadeTarget = document.getElementById("info");