diff --git a/.DS_Store b/.DS_Store index 3787778..75548c0 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/public/.DS_Store b/public/.DS_Store index ae94a1b..4149c9f 100644 Binary files a/public/.DS_Store and b/public/.DS_Store differ diff --git a/public/css/main.css b/public/css/main.css index 1653bba..d136b31 100644 --- a/public/css/main.css +++ b/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); + } + } \ No newline at end of file diff --git a/public/img/.DS_Store b/public/img/.DS_Store new file mode 100644 index 0000000..ddfad33 Binary files /dev/null and b/public/img/.DS_Store differ diff --git a/public/js/.DS_Store b/public/js/.DS_Store new file mode 100644 index 0000000..3252a4a Binary files /dev/null and b/public/js/.DS_Store differ diff --git a/public/js/main.js b/public/js/main.js index e29cecc..d4f17be 100644 --- a/public/js/main.js +++ b/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'); } } diff --git a/public/js/page/dashboard.js b/public/js/page/dashboard.js index 7c77885..8103f8c 100644 --- a/public/js/page/dashboard.js +++ b/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 ) { diff --git a/public/scss/.DS_Store b/public/scss/.DS_Store index 3f8829c..7cdbff7 100644 Binary files a/public/scss/.DS_Store and b/public/scss/.DS_Store differ diff --git a/public/vendor/.DS_Store b/public/vendor/.DS_Store index 8ffcda8..d31d163 100644 Binary files a/public/vendor/.DS_Store and b/public/vendor/.DS_Store differ diff --git a/public/vendor/multiselect-master/.DS_Store b/public/vendor/multiselect-master/.DS_Store new file mode 100644 index 0000000..d534cff Binary files /dev/null and b/public/vendor/multiselect-master/.DS_Store differ diff --git a/public/vendor/multiselect-master/css/style.css b/public/vendor/multiselect-master/css/style.css new file mode 100644 index 0000000..6c70fa8 --- /dev/null +++ b/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; + } +} diff --git a/public/vendor/multiselect-master/index.html b/public/vendor/multiselect-master/index.html new file mode 100644 index 0000000..9a312e2 --- /dev/null +++ b/public/vendor/multiselect-master/index.html @@ -0,0 +1,51 @@ + + + + + + + MultiSelect + + + + + + + + + + + + + +
+
+

Multiselect Drop Down

+

An example of a drop down select plugin using vanilla JavaScript.

+

By Varun Dewan

+ + +
+
+

Preselected

+ +
+
+ + + + + + + + + + + + diff --git a/public/vendor/multiselect-master/js/index.js b/public/vendor/multiselect-master/js/index.js new file mode 100644 index 0000000..2eb0b59 --- /dev/null +++ b/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('
') + this.html.dropDisplay = render.template('
Display
') + this.html.dropOptions = render.template('
Options
') + this.html.dropScreen = render.template('
') + + 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('
') + this.selected.forEach(function(select, index){ + var option = that.options[select.index]; + var childHTML = render.template(''+ option.html +'') + var childCloseHTML = render.template( + '') + 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('
') + this.options.forEach(function(option, index){ + var childHTML = render.template( + ''+ option.html +'') + 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(); \ No newline at end of file diff --git a/views/.DS_Store b/views/.DS_Store index b813242..224b407 100644 Binary files a/views/.DS_Store and b/views/.DS_Store differ diff --git a/views/layout.ejs b/views/layout.ejs index 0d28cde..ba7bcbe 100644 --- a/views/layout.ejs +++ b/views/layout.ejs @@ -17,23 +17,31 @@ + + -
-
-
-
- <% if(locals.alert) {%> - + <%- body %> <% include partials/modal/modal-register %> <% include partials/modal/modal-reset-password %> diff --git a/views/partials/.DS_Store b/views/partials/.DS_Store new file mode 100644 index 0000000..e8459c9 Binary files /dev/null and b/views/partials/.DS_Store differ diff --git a/views/partials/dashboard/modal_form.ejs b/views/partials/dashboard/modal_form.ejs index ade4771..c579bc4 100644 --- a/views/partials/dashboard/modal_form.ejs +++ b/views/partials/dashboard/modal_form.ejs @@ -1,3 +1,4 @@ +