@@ -35,3 +35,28 @@ | |||||
transform: translate(0, 4em) !important; | transform: translate(0, 4em) !important; | ||||
visibility: visible; | 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); | |||||
} | |||||
} |
@@ -215,6 +215,7 @@ $('input[type=file]').not('[multiple]').change(function(e){ | |||||
}); | }); | ||||
function clearAlert(){ | function clearAlert(){ | ||||
$("#alertBox").html(''); | $("#alertBox").html(''); | ||||
} | } | ||||
@@ -232,13 +233,23 @@ function showAlert(type,text){ | |||||
); | ); | ||||
} | } | ||||
function showSpinner(){ | |||||
$("#spinnerLoading").show(); | |||||
} | |||||
function hideSpinner(){ | |||||
$("#spinnerLoading").hide(); | |||||
} | |||||
function loading(percent,show){ | function loading(percent,show){ | ||||
if(show){ | if(show){ | ||||
showSpinner(); | |||||
$("#loadingBar").removeClass('hide'); | $("#loadingBar").removeClass('hide'); | ||||
$("#loadingBar div[role=progressbar]").attr("aria-valuenow",percent); | $("#loadingBar div[role=progressbar]").attr("aria-valuenow",percent); | ||||
$("#loadingBar div[role=progressbar]").css("width",`${percent}%`); | $("#loadingBar div[role=progressbar]").css("width",`${percent}%`); | ||||
} | } | ||||
else{ | else{ | ||||
hideSpinner(); | |||||
$("#loadingBar").addClass('hide'); | $("#loadingBar").addClass('hide'); | ||||
} | } | ||||
} | } | ||||
@@ -1,8 +1,19 @@ | |||||
/* eslint-disable no-undef */ | /* eslint-disable no-undef */ | ||||
let list; | let list; | ||||
let attachment; | let attachment; | ||||
let removeMedia = []; | let removeMedia = []; | ||||
var selectCompanyList = new drop({ | |||||
selector: '.modalCompanySelect' | |||||
}); | |||||
var selectDivisiList = new drop({ | |||||
selector: '.modalDivisionSelect' | |||||
}); | |||||
var rowPage = 9; | var rowPage = 9; | ||||
async function paginationSummary(pageSize,page,id,token){ | async function paginationSummary(pageSize,page,id,token){ | ||||
@@ -534,9 +545,12 @@ $('#modal-form').on('shown.bs.modal', async function() { | |||||
.serializeArray() | .serializeArray() | ||||
.filter(item => item.value == '').length > 0 | .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 ( | } else if ( | ||||
$('input#videoFile').prop('files').length <= 0 || | $('input#videoFile').prop('files').length <= 0 || | ||||
$('input#thumbnail').prop('files').length <= 0|| | |||||
list.files.length <= 0 || | list.files.length <= 0 || | ||||
attachment.files.length <= 0 | attachment.files.length <= 0 | ||||
) { | ) { | ||||
@@ -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; | |||||
} | |||||
} |
@@ -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> |
@@ -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+'"></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(); |
@@ -17,23 +17,31 @@ | |||||
<!-- Argon CSS --> | <!-- Argon CSS --> | ||||
<link type="text/css" href="/css/argon.min.css?v=1.0.0" rel="stylesheet"> | <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 type="text/css" href="/css/main.css" rel="stylesheet"> | ||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" | |||||
rel="stylesheet"> | |||||
</head> | </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> | <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">×</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">×</span> | |||||
</button> | |||||
</div> | |||||
<% } %> | |||||
</div> | </div> | ||||
<% } %> | |||||
</div> | |||||
<%- body %> | |||||
</div> | |||||
<%- body %> | |||||
</body> | </body> | ||||
<% include partials/modal/modal-register %> | <% include partials/modal/modal-register %> | ||||
<% include partials/modal/modal-reset-password %> | <% include partials/modal/modal-reset-password %> | ||||
@@ -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 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-dialog modal- modal-dialog-centered modal-md" role="document"> | ||||
<div class="modal-content"> | <div class="modal-content"> | ||||
@@ -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 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-dialog modal- modal-dialog-centered modal-lg" role="document"> | ||||
<div class="modal-content"> | <div class="modal-content"> | ||||
@@ -14,4 +14,6 @@ | |||||
<script src="/vendor/xlsx/cpexcel.js"></script> | <script src="/vendor/xlsx/cpexcel.js"></script> | ||||
<script src="/vendor/xlsx/xlsx.full.min.js"></script> | <script src="/vendor/xlsx/xlsx.full.min.js"></script> | ||||
<!-- Moment --> | <!-- Moment --> | ||||
<script src="/vendor/moment/moment.js"></script> | |||||
<script src="/vendor/moment/moment.js"></script> | |||||
<script src="/vendor/multiselect-master/js/index.js"></script> |