Merge branch 'mithril'

App/Controllers/Api.php

@@ -0,0 +1,52 @@
+<?php
+namespace App\Controllers;
+
+use App\Models\Post;
+use Core\Session;
+
+class Api
+{
+    private $model;
+
+    public function __construct()
+    {
+        $this->model = new Post();
+    }
+
+    public function posts($args = ['id' => '1'])
+    {
+        $get = [];
+        $get['count'] = 0;
+
+        if ($args['id'] == 3) {
+            $get['data'] = $this->model->showJoin();
+        } else {
+            $get['data'] = $this->model->showJoin([
+                ['pengumuman.status', '=', $args['id']]
+            ]);
+        }
+
+        if ($get['data'] == false) {
+            $get['data']['content'] = 'Tidak ada pengumuman';
+            $get['data']['valid_at'] = '';
+            $get['data']['expired_at'] = '';
+            $get['data']['status'] = 0;
+            $get['data']['background'] = '#333';
+            $get['data']['foreground'] = '#888';
+        }
+
+        if (array_key_exists(0, $get['data']) == false) {
+            $temp_data = $get['data'];
+            unset($get['data']);
+            $get['data'][] = $temp_data;
+            $temp_data = [];
+        }
+
+        if ($get['data'] != false) {
+            $get['count'] = count($get['data']);
+        }
+
+        header('Content-Type: application/json');
+        echo json_encode($get);
+    }
+}

App/Controllers/Home.php

@@ -175,4 +175,20 @@ class Home
         }
         return true;
     }
+
+    // Branch mithril test
+    public function mithril() {
+        if (Session::exists('userid')) {
+            $user['id'] = Session::get('userid');
+            $user['username'] = Session::get('username');
+            $user['full_name'] = Session::get('full_name');
+            $user['privilege'] = Session::get('privilege');
+        } else {
+            $user = false;
+        }
+        
+        View::render('Data/mithril.html', [
+            'user' => $user
+        ]);
+    }
 }

App/Models/Post.php

@@ -122,7 +122,7 @@ class Post extends \Core\Model
         try {
             $db = static::connectDB();
 
-            $sql = "SELECT pengumuman.id, kategori.background, kategori.foreground, pengumuman.valid_at, pengumuman.expired_at, pengumuman.creator, pengumuman.editor, pengumuman.content, pengumuman.status FROM pengumuman INNER JOIN kategori ON pengumuman.category=kategori.id";
+            $sql = "SELECT pengumuman.id, kategori.category, kategori.background, kategori.foreground, date(pengumuman.valid_at) as valid_at, date(pengumuman.expired_at) as expired_at, pengumuman.creator, pengumuman.editor, pengumuman.content, pengumuman.status FROM pengumuman INNER JOIN kategori ON pengumuman.category=kategori.id";
 
             if ($conditions) {
                 $sql .= " WHERE";

App/Views/Data/mithril.html

@@ -0,0 +1,228 @@
+{% extends "base.html" %}
+
+{% block title %}Mithril{% endblock %}
+
+{% block nav %}
+<input type="checkbox" id="bmenug" class="show">
+<label for="bmenug" class="burger pseudo button"><i class="fa fa-bars" aria-hidden="true"></i></label>
+<div class="menu">
+    {% if user.privilege != "" %}
+        {% if user.privilege == 1 %}
+            <a href="/posts/category" class="navy button" data-tooltip="Kategori"><i class="fa fa-list-ul" aria-hidden="true"></i>&nbsp;Kategori</a>
+            <a href="/register" class="navy button" data-tooltip="User Baru"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;User</a>
+        {% endif %}
+        <a href="/logout" class="navy button" data-tooltip="Keluar"><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;Keluar</a>
+    {% else %}
+        <a href="/login" class="navy hidden-hover button" data-tooltip="Masuk">
+            <i class="fa fa-sign-in" aria-hidden="true"></i>&nbsp;Masuk
+        </a>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% 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 id='navigasi'>
+            </div>
+            <div id="mit">
+            </div>
+        </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 %}

App/Views/base.html

@@ -125,6 +125,8 @@
             .card footer {
                 position: absolute;
                 bottom: 0;
+                padding-left: 0;
+                padding-bottom: 0;
             }
 
             .card-wrapper {
@@ -152,11 +154,6 @@
                 background-color: rgba(17, 17, 17, .05);
             }
 
-            .card footer {
-                padding-left: 0;
-                padding-bottom: 0;
-            }
-
             .fitty > p {
                 margin: 0;
             }
@@ -215,6 +212,8 @@
         <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 %}