asdasdas

public/css/main.css

@@ -35,3 +35,28 @@
     transform: translate(0, 4em) !important;
     visibility: visible;
 }
+
+.lds-dual-ring {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-dual-ring:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #fff;
+    border-color: #1f3592 transparent #503fb9 transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+  }
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }

public/js/main.js

@@ -215,6 +215,7 @@ $('input[type=file]').not('[multiple]').change(function(e){
 });
 
 function clearAlert(){
+    
     $("#alertBox").html('');
 }
 
@@ -232,13 +233,23 @@ function showAlert(type,text){
     );
 }
 
+function showSpinner(){
+    $("#spinnerLoading").show();
+}
+
+function hideSpinner(){
+    $("#spinnerLoading").hide();
+}
+
 function loading(percent,show){
     if(show){
+        showSpinner();
         $("#loadingBar").removeClass('hide');
         $("#loadingBar div[role=progressbar]").attr("aria-valuenow",percent);
         $("#loadingBar div[role=progressbar]").css("width",`${percent}%`);
     }
     else{
+        hideSpinner();
         $("#loadingBar").addClass('hide');
     }
 }

public/js/page/dashboard.js

@@ -1,8 +1,19 @@
 /* eslint-disable no-undef */
+
 let list;
 let attachment;
 let removeMedia = [];
 
+var selectCompanyList = new drop({
+  selector:  '.modalCompanySelect'
+});
+
+var selectDivisiList = new drop({
+  selector:  '.modalDivisionSelect'
+});
+
+
+
 var rowPage = 9;
 
 async function paginationSummary(pageSize,page,id,token){
@@ -534,9 +545,12 @@ $('#modal-form').on('shown.bs.modal', async function() {
           .serializeArray()
           .filter(item => item.value == '').length > 0
     ) {
-      showAlert('error', 'Cek kembali data yang belum diisi!');
+      showAlert('error', `Cek kembali data (${$(event.target)
+        .serializeArray()
+        .filter(item => item.value == '').map(i=>i.name).join(',')})  yang belum diisi!`);
     } else if (
       $('input#videoFile').prop('files').length <= 0 ||
+      $('input#thumbnail').prop('files').length <= 0||
       list.files.length <= 0 ||
       attachment.files.length <= 0
     ) {

public/vendor/multiselect-master/css/style.css

@@ -0,0 +1,278 @@
+@charset "UTF-8";
+/* CSS Document * Varun Dewan 2019 */
+
+html, body {
+  padding: 0px;
+  margin: 0px;
+  font-family: 'Raleway', sans-serif;
+}
+
+body * {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+body section {
+  margin-bottom: 10px;
+}
+
+.container {
+  max-width: 600px;
+  margin: 40px auto;
+  background: #cdcdcd;
+  min-height: 330px;
+  height: 400px;
+  padding: 20px 20px;
+}
+
+.drop {
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  width: 100%;
+}
+.drop.open {
+  z-index: 100;
+}
+.drop.open .drop-screen {
+  z-index: 100;
+  display: block;
+}
+.drop.open .drop-options {
+  z-index: 200;
+  max-height: 200px;
+}
+.drop.open .drop-display {
+  z-index: 200;
+  border-color: #465;
+}
+.drop select {
+  display: none;
+}
+.drop .drop-screen {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  top: 0px;
+  left: 0px;
+  opacity: 0;
+  display: none;
+  z-index: 1;
+}
+
+.link {
+  text-align: center;
+  margin: 20px 0px;
+  color:#8CACD7;
+}
+
+
+.drop .drop-display {
+  position: relative;
+  padding: 0px 20px 5px 5px;
+  border: 4px solid #444;
+  width: 100%;
+  background: #FFF;
+  z-index: 1;
+  margin: 0px;
+  font-size: 16px;
+  min-height: 58px;
+}
+.drop .drop-display:hover:after {
+  opacity: 0.75;
+}
+.drop .drop-display:after {
+  font-family: 'Material Icons';
+  content: "\e5c6";
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  font-size: 24px;
+  color: #444;
+}
+.drop .drop-display .item {
+  position: relative;
+  display: inline-block;
+  border: 2px solid #333;
+  margin: 5px 5px -4px 0px;
+  padding: 0px 25px 0px 10px;
+  overflow: hidden;
+  height: 40px;
+  line-height: 36px;
+}
+.drop .drop-display .item .btnclose {
+  color: #444;
+  position: absolute;
+  font-size: 16px;
+  right: 5px;
+  top: 10px;
+  cursor: pointer;
+}
+.drop .drop-display .item .btnclose:hover {
+  opacity: 0.75;
+}
+.drop .drop-display .item.remove {
+  -webkit-animation: removeSelected 0.2s, hide 1s infinite;
+          animation: removeSelected 0.2s, hide 1s infinite;
+  -webkit-animation-delay: 0s, 0.2s;
+          animation-delay: 0s, 0.2s;
+}
+.drop .drop-display .item.add {
+  -webkit-animation: addSelected 0.2s;
+          animation: addSelected 0.2s;
+}
+.drop .drop-display .item.hide {
+  display: none;
+}
+.drop .drop-options {
+  background: #444;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  position: absolute;
+  width: 100%;
+  max-height: 0px;
+  overflow-y: auto;
+  transition: all 0.25s linear;
+  z-index: 1;
+}
+.drop .drop-options a {
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  padding: 0px 20px;
+  color: white;
+  position: relative;
+  max-height: 40px;
+  transition: all 1s;
+  overflow: hidden;
+}
+.drop .drop-options a:hover {
+  background: #465;
+  cursor: pointer;
+}
+.drop .drop-options a.remove {
+  -webkit-animation: removeOption 0.2s;
+          animation: removeOption 0.2s;
+  max-height: 0px;
+}
+.drop .drop-options a.add {
+  -webkit-animation: addOption 0.2s;
+          animation: addOption 0.2s;
+}
+.drop .drop-options a.hide {
+  display: none;
+}
+
+@-webkit-keyframes pop {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
+@keyframes pop {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes removeOption {
+  from {
+    max-height: 40px;
+  }
+  to {
+    max-height: 0px;
+  }
+}
+@keyframes removeOption {
+  from {
+    max-height: 40px;
+  }
+  to {
+    max-height: 0px;
+  }
+}
+@-webkit-keyframes addOption {
+  from {
+    max-height: 0px;
+  }
+  to {
+    max-height: 40px;
+  }
+}
+@keyframes addOption {
+  from {
+    max-height: 0px;
+  }
+  to {
+    max-height: 40px;
+  }
+}
+@-webkit-keyframes removeSelected {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@keyframes removeSelected {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@-webkit-keyframes addSelected {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes addSelected {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes hide {
+  from, to {
+    max-height: 0px;
+    max-width: 0px;
+    padding: 0px;
+    margin: 0px;
+    border-width: 0px;
+  }
+}
+@keyframes hide {
+  from, to {
+    max-height: 0px;
+    max-width: 0px;
+    padding: 0px;
+    margin: 0px;
+    border-width: 0px;
+  }
+}

public/vendor/multiselect-master/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Varun Dewan 2019 -->
+<html lang="en" >
+
+<head>
+  <meta charset="UTF-8">
+  <title>MultiSelect </title>
+  
+  
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
+
+<link rel="stylesheet" href="css/style.css">
+
+  
+</head>
+
+<body>
+
+  
+<div class="container">
+  <section>
+    <h3>Multiselect Drop Down</h3>
+    <p>An example of a drop down select plugin using vanilla JavaScript.</p>
+    <p>By Varun Dewan</p>
+    <p class="link"><a href="multiselect.zip">Download Project</a></p>
+
+  </section>
+  <section>
+    <p>Preselected</p>
+    <select multiple="multiple" id="myMulti">
+      <option>Item 1</option>
+      <option>item 2</option>
+      <option>item 3</option>
+      <option>item 4</option>
+      
+    </select>
+  </section>
+</div>
+
+
+  
+  
+<script  src="js/index.js"></script>
+
+
+
+
+</body>
+
+</html>

public/vendor/multiselect-master/js/index.js

@@ -0,0 +1,180 @@
+//Varun Dewan 2019
+var render = {
+   get: function(selector){ 
+      var ele = document.querySelectorAll(selector);
+      for(var i = 0; i < ele.length; i++){
+         this.init(ele[i]);
+      }
+      return ele;
+   },
+   template: function(html){
+      var template = document.createElement('div');
+      template.innerHTML = html.trim();
+      return this.init(template.childNodes[0]);
+   },
+   init: function(ele){
+      ele.on = function(event, func){ this.addEventListener(event, func); }
+      return ele;
+   }
+};
+
+//Build the plugin
+var drop = function(info){var o = {
+   options: info.options,
+   selected: info.selected || [],
+   preselected: info.preselected || [],
+   open: false,
+   html: {
+      select: render.get(info.selector)[0],
+      options: render.get(info.selector + ' option'),
+      parent: undefined,
+   },
+   init: function(){
+      //Setup Drop HTML
+      this.html.parent = render.get(info.selector)[0].parentNode
+      this.html.drop = render.template('<div class="drop"></div>')
+      this.html.dropDisplay = render.template('<div class="drop-display">Display</div>')
+      this.html.dropOptions = render.template('<div class="drop-options">Options</div>')
+      this.html.dropScreen = render.template('<div class="drop-screen"></div>')
+      
+      this.html.parent.insertBefore(this.html.drop, this.html.select)
+      this.html.drop.appendChild(this.html.dropDisplay)
+      this.html.drop.appendChild(this.html.dropOptions)
+      this.html.drop.appendChild(this.html.dropScreen)
+      //Hide old select
+      this.html.drop.appendChild(this.html.select);
+      
+      //Core Events
+      var that = this;
+      this.html.dropDisplay.on('click', function(){ that.toggle() });
+      this.html.dropScreen.on('click', function(){ that.toggle() });
+      //Run Render
+      this.load()
+      this.preselect()
+      this.render();
+   },
+   toggle: function(){
+      this.html.drop.classList.toggle('open');
+   },
+   addOption: function(e, element){ 
+      var index = Number(element.dataset.index);
+      this.clearStates()
+      this.selected.push({
+         index: Number(index),
+         state: 'add',
+         removed: false
+      })
+      this.options[index].state = 'remove';
+      this.render()
+   },
+   removeOption: function(e, element){
+      e.stopPropagation();
+      this.clearStates()
+      var index = Number(element.dataset.index);
+      this.selected.forEach(function(select){
+         if(select.index == index && !select.removed){
+            select.removed = true
+            select.state = 'remove'
+         }
+      })
+      this.options[index].state = 'add'
+      this.render();
+   },
+   load: function(){
+      this.options = [];
+      for(var i = 0; i < this.html.options.length; i++){
+         var option = this.html.options[i]
+         this.options[i] = {
+            html:  option.innerHTML,
+            value: option.value,
+            selected: option.selected,
+            state: ''
+         }
+      }
+   },
+   preselect: function(){
+      var that = this;
+      this.selected = [];
+      this.preselected.forEach(function(pre){
+         that.selected.push({
+            index: pre,
+            state: 'add',
+            removed: false
+         })
+         that.options[pre].state = 'remove';
+      })
+   },
+   render: function(){
+      this.renderDrop()
+      this.renderOptions()
+   },
+   renderDrop: function(){ 
+      var that = this;
+      var parentHTML = render.template('<div></div>')
+      this.selected.forEach(function(select, index){ 
+         var option = that.options[select.index];
+         var childHTML = render.template('<span class="item '+ select.state +'">'+ option.html +'</span>')
+         var childCloseHTML = render.template(
+            '<i class="material-icons btnclose" data-index="'+select.index+'">&#xe5c9;</i></span>')
+         childCloseHTML.on('click', function(e){ that.removeOption(e, this) })
+         childHTML.appendChild(childCloseHTML)
+         parentHTML.appendChild(childHTML)
+      })
+      this.html.dropDisplay.innerHTML = ''; 
+      this.html.dropDisplay.appendChild(parentHTML)
+   },
+   renderOptions: function(){  
+      var that = this;
+      var parentHTML = render.template('<div></div>')
+      this.options.forEach(function(option, index){
+         var childHTML = render.template(
+            '<a href="#" data-index="'+index+'" class="'+option.state+'">'+ option.html +'</a>')
+         childHTML.on('click', function(e){ that.addOption(e, this) })
+         parentHTML.appendChild(childHTML)
+      })
+      this.html.dropOptions.innerHTML = '';
+      this.html.dropOptions.appendChild(parentHTML)
+   },
+   clearStates: function(){
+      var that = this;
+      this.selected.forEach(function(select, index){ 
+         select.state = that.changeState(select.state)
+      })
+      this.options.forEach(function(option){ 
+         option.state = that.changeState(option.state)
+      })
+   },
+   changeState: function(state){
+      switch(state){
+         case 'remove':
+            return 'hide'
+         case 'hide':
+            return 'hide'
+         default:
+            return ''
+       }
+   },
+   isSelected: function(index){
+      var check = false
+      this.selected.forEach(function(select){ 
+         if(select.index == index && select.removed == false) check = true
+      })
+      return check
+   }
+}; o.init(); return o;}
+
+
+//Set up some data
+// var options = [
+//    { html: 'cats', value: 'cats' },
+//    { html: 'fish', value: 'fish' },
+//    { html: 'squids', value: 'squids' },
+//    { html: 'cats', value: 'whales' },
+//    { html: 'cats', value: 'bikes' },
+// ];
+
+// var myDrop = new drop({
+//    selector:  '#myMulti',
+//    preselected: [0, 2]
+// });
+//  myDrop.toggle();

views/layout.ejs

@@ -17,23 +17,31 @@
   <!-- Argon CSS -->
   <link type="text/css" href="/css/argon.min.css?v=1.0.0" rel="stylesheet">
   <link type="text/css" href="/css/main.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet">
+
 </head>
-  <div id='loadingBar' class="progress mb-0 hide">
-    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-  </div>
   <body>
-    <div id="alertBox">
-      <% if(locals.alert) {%>
-        <div class="alert <%= (locals.error)?'alert-danger':'alert-success' %> alert-dismissible fade show" role="alert">
-          <span class="alert-icon"><% if (locals.error){ %><i class="ni ni-bulb-61"></i><% }else{ %><i class="ni ni-like-2"></i> <% } %></span>
-          <span class="alert-text"><%= locals.alert %></span>
-          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-          </button>
+    <div id='overhead' class="d-flex" style="position: fixed;width: 100%;z-index: 10000;">
+      <div id='loadingBar' class="progress mb-0 hide">
+        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+      </div>
+      <div id='spinnerLoading'class='justify-content-center' role="status" style="height: 100vh; display: none;">
+        <div class="lds-dual-ring" style="left: 50%;top: 50%;z-index: 1;position: absolute;"></div>
+      </div>
+      <div id="alertBox">
+        <% if(locals.alert) {%>
+          <div class="alert <%= (locals.error)?'alert-danger':'alert-success' %> alert-dismissible fade show" role="alert">
+            <span class="alert-icon"><% if (locals.error){ %><i class="ni ni-bulb-61"></i><% }else{ %><i class="ni ni-like-2"></i> <% } %></span>
+            <span class="alert-text"><%= locals.alert %></span>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <% } %>
       </div>
-      <% } %>
-  </div>
-  <%- body %>
+    </div>
+    <%- body %>
   </body>
   <% include partials/modal/modal-register %>
   <% include partials/modal/modal-reset-password %>

views/partials/dashboard/modal_form.ejs

@@ -1,3 +1,4 @@
+
  <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
     <div class="modal-dialog modal- modal-dialog-centered modal-md" role="document">
        <div class="modal-content">

views/partials/dashboard/modal_pintar_summary.ejs

@@ -1,3 +1,4 @@
+
  <div class="modal fade" id="modal-summary" tabindex="-1" role="dialog" aria-labelledby="modal-summary" aria-hidden="true">
     <div class="modal-dialog modal- modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">

views/partials/scripts.ejs

@@ -14,4 +14,6 @@
 <script src="/vendor/xlsx/cpexcel.js"></script>
 <script src="/vendor/xlsx/xlsx.full.min.js"></script>
 <!-- Moment -->
-<script src="/vendor/moment/moment.js"></script>
+<script src="/vendor/moment/moment.js"></script>
+
+<script src="/vendor/multiselect-master/js/index.js"></script>