Updated mithril index to do (almost) the same with normal index

App/Controllers/Api.php

@@ -2,19 +2,38 @@
 namespace App\Controllers;
 
 use App\Models\Post;
+use Core\Session;
 
 class Api
 {
     private $model;
 
-    public function __construct() {
+    public function __construct()
+    {
         $this->model = new Post();
     }
 
-    public function posts() {
+    public function posts($args = ['id' => '1'])
+    {
         $get = [];
         $get['count'] = 0;
-        $get['data'] = $this->model->showJoin();
+
+        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'];

App/Controllers/Home.php

@@ -178,6 +178,17 @@ class Home
 
     // Branch mithril test
     public function mithril() {
-        View::render('Data/mithril.html');
+        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.category, 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

@@ -2,77 +2,227 @@
 
 {% 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 style="text-align:left;width:100%;">
+    <div id="nouser" style="text-align:left;width:100%;">
         <div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
-            <div class="filter flex six-600 four grow">
+            <div id='navigasi'>
-                <div class="sixth-600 none"></div>
-                <div>
-                    <a href="/" class="navy" style="font-size:smaller;">Semua</a>
-                </div>
-                <div>
-                    <a href="/?status=1" class="navy" style="font-size:smaller;">Aktif</a>
-                </div>
-                <div>
-                    <a href="/?status=2" class="navy" style="font-size:smaller;">Belum Aktif</a>
-                </div>
-                <div>
-                    <a href="/?status=0" class="navy" style="font-size:smaller;">Nonaktif</a>
-                </div>
-                <div class="sixth-600 none"></div>
             </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',
+                url: '/api/posts/' + Post.curStatus,
                 withCredentials: true
             })
             .then(function(result) {
                 Post.list = result.data
+                console.log('cek')
             })
         }
     }
 
-    var PostList = {
+    var Component = {
-        oninit: Post.loadList,
         view: function() {
-            // return m('.user-list', Post.list.map(function(post) {
-            //     return m('.user-list-item', post.content + ' ' + post.category)
-            // }))
             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),
+                        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}, post.content),
+                        m('span.stack', {style:'color:' + post.foreground}, m.trust(marked(post.content))),
-                        m('form', {method:'post',action:'/'}, m('footer.flex.full.grow', [
+                        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('.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('span', {style: 'font-size:smaller'}, 'Ubah')
                             ])),
-                            m('.half-900', m('button.error.full', {type:'submit'}, [
+                            m('.half-900', (post.status == 1) ? [
-                                m('i.fa.fa-times-circle-o.fa-fw', ''),
+                                m('input', {type: 'hidden', name: 'id'}, post.id),
-                                m('span', {style:'font-size:smaller;'}, 'Matikan')
+                                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'))))
                     ])
                 })
             ])
         }
     }
 
-    m.mount(root, PostList)
+    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

@@ -208,6 +208,7 @@
         <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 %}