diff --git a/public/javascripts/index.js b/public/javascripts/index.js index 54d9757..c5692bc 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -1,9 +1,19 @@ +$(".editMaterial").click(async(e)=>{ + console.log($(e.target)); + var el = $(e.target).find('[material]').length == 0?$(e.target).closest('[material]'):$(e.target).find('[material]'); + $("#selMaterial").val(el.attr('material')); + var myModal = new bootstrap.Modal(document.getElementById('CreateTopicModal'), {}); + $("#CreateTopicModal").attr('operation','edit'); + myModal.show(); +}); + $(".showParticipants").click(async(e)=>{ - $("#selMaterial").val($(e.target).attr('material')); + $("#selMaterial").val($(e.target).closest('[material]').attr('material')); var myModal = new bootstrap.Modal(document.getElementById('ParticipantModal'), {}); myModal.show(); }); + $("#divisionSelect").change(async (e)=>{ $(e.target).parent().submit(); }); @@ -13,14 +23,18 @@ $("#companySelect").change(async(e)=>{ }); var list; var attachment; +var removeMedia = []; function removeUpload(e,listFile){ var li = $(e.target).parent(); - li.remove(); - for(var i=0;i{ - var res = await fetch("/divisions",{ + if($("#CreateTopicModal").attr('operation')=='edit'){ + $('#loading').show(); + var res = await fetch("/material",{ headers: { 'Content-Type': 'application/json' }, method:"POST", - body:JSON.stringify({company:e.target.value}) + body:JSON.stringify({material:$("#selMaterial").val()}) }); if(res.ok){ - var obj = await res.json(); - $("#modalDivisionSelect").empty(); - $("#modalDivisionSelect").append(''); - obj['divisions'].forEach((i)=>{ - $("#modalDivisionSelect").append(``); + try{ + var obj = await res.json(); + Object.keys(obj).forEach(async (i)=>{ + if(typeof obj[i] === 'object'&& !(obj[i].data instanceof Array)){ + if(!obj[i].data.attributes.mime){ + $(`[name='${i}']`).val(obj[i].data.id); + if(i=='company'){ + var res = await fetch("/divisions",{ + headers: { + 'Content-Type': 'application/json' + }, + method:"POST", + body:JSON.stringify({company:obj[i].data.id}) + }); + if(res.ok){ + var resp = await res.json(); + $("#modalDivisionSelect").empty(); + $("#modalDivisionSelect").append(''); + resp['divisions'].forEach((item)=>{ + $("#modalDivisionSelect").append(``); + }); + $("#modalDivisionSelect").removeAttr('disabled'); + } + } + } + else{ + $( "input#videoFile" ).after( `current video : ${obj[i].data.attributes.name}` ); + } + } + else { + if(obj[i].data instanceof Array){ + if(i=='participants'){ + var aoa = obj[i].data.map((o)=>o.attributes); + var container = document.getElementById('participantCounter'); + container.innerHTML = `${aoa.length} Participant(s)`; + $("input[name='ParticipantList']").val(JSON.stringify(aoa)); + } + else if(i=='Images'){ + obj[i].data.forEach(async(thumbnails)=>{ + $("#uploadedFile").append( + `
  • ${thumbnails.attributes.name} + +
    • ` + ); + }); + } + else if(i=='Attachments'){ + obj[i].data.forEach(async(attachments)=>{ + $("#uploadedAttachment").append( + `
  • ${attachments.attributes.name} + +
    • ` + ); + }); + } + } + else $(`[name='${i}']`).val(obj[i]); + } + }); + } + catch(e){ + $('#loading').hide(); + console.log(e); + } + } + else{ + alert("Something wrong when loading data!"); + } + $('#loading').hide(); + } + + $("#modalCompanySelect").change(async(e)=>{ + console.log('asdasd',e.target.value); + if(e.target.value&&e.target.value!=''){ + console.log("show"); + $("#modalDivisionSelect").removeAttr('disabled'); + var res = await fetch("/divisions",{ + headers: { + 'Content-Type': 'application/json' + }, + method:"POST", + body:JSON.stringify({company:e.target.value}) }); + if(res.ok){ + var obj = await res.json(); + $("#modalDivisionSelect").empty(); + $("#modalDivisionSelect").append(''); + obj['divisions'].forEach((i)=>{ + $("#modalDivisionSelect").append(``); + }); + } + } + else { + $("#modalDivisionSelect").attr('disabled','disabled'); } }); $("#formCreate").submit(async (event)=>{ @@ -120,63 +235,6 @@ createModal.addEventListener('show.bs.modal', function (event) { } request.open('POST', $('#host').val()+"/api/materials"); request.send(formData); - - // const response = await fetch($('#host').val()+"/api/saveMaterial", { - // method: 'POST', - // headers: { - // 'Content-Type': 'multipart/form-data' - // }, - // body: formData // body data type must match "Content-Type" header - // }); - // console.log(await response.json()); - // if(response.ok){ - // var json = await response.json(); - // $("#uploadMediaForm input[name='ref']").val('api::material.material'); - // $("#uploadMediaForm input[name='refId']").val(json.id); - // $("#uploadMediaForm input[name='field']").val('Images'); - // $("#uploadMediaForm input[name='files']").prop('files',list.files); - // var data = new FormData(document.getElementById('uploadMediaForm')); - // var upload = await fetch($('#host').val()+"/api/upload",{ - // method: 'POST', - // body:data - // }); - // if(upload.ok){ - // $("#uploadMediaForm input[name='field']").val('Attachments'); - // $("#uploadMediaForm input[name='files']").prop('files',attachment.files); - // data = new FormData(document.getElementById('uploadMediaForm')); - // upload = await fetch($('#host').val()+"/api/upload",{ - // method: 'POST', - // body:data - // }); - // if(upload.ok){ - // $("#uploadMediaForm input[name='field']").val('Video'); - // $("#uploadMediaForm input[name='files']").prop('files',$("#videoFile").prop('files')); - // data = new FormData(document.getElementById('uploadMediaForm')); - // upload = await fetch($('#host').val()+"/api/upload",{ - // method: 'POST', - // body:data - // }); - // if(upload.ok){ - // location.reload(); - // } - // else{ - // alert("Gagal mengupload video dokumentasi!"); - // } - // } - // else{ - // alert("Gagal mengupload materi dokumentasi!"); - // } - // } - // else - // { - // alert("Gagal mengupload gambar thumbnail!"); - // // console.log(await upload.json()); - // } - // } - // else{ - // // var res =await response.json(); - // alert('Gagal membuat data dokumentasi material!'); - // } } }); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c895199..f8f64a8 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -20,7 +20,70 @@ img.gallery{ max-height: 500px; object-fit: cover; } +.hover-menu { + position: relative; + overflow: hidden; + margin: 8px; + /* min-width: 340px; + max-width: 480px; */ + /* max-height: 290px; */ + /* width: 100%; */ + background: #000; + text-align: center; + box-sizing: border-box; +} + +.hover-menu * { + box-sizing: border-box; +} +.hover-menu img { + position: relative; + max-width: 100%; + top: 0; + right: 0; + opacity: 1; + transition: 0.3s ease-in-out; +} + +.hover-menu div { + position: absolute; + top: 0; + left: -60px; + width: 60px; + height: 100%; + padding: 8px 4px; + background: #000; + transition: 0.3s ease-in-out; + display: flex; + flex-direction: column; + justify-content: center; +} + +.hover-menu div a { + display: block; + line-height: 2; + color: #fff; + text-decoration: none; + opacity: 0.8; + padding: 5px 15px; + position: relative; + transition: 0.3s ease-in-out; +} + +.hover-menu div a:hover { + text-decoration: underline; +} + +.hover-menu:hover img { + opacity: 0.5; + right: -60px; +} + +.hover-menu:hover div { + left: 0; + opacity: 1; +} #loading { position: fixed; display: block; diff --git a/routes/index.js b/routes/index.js index e8a222a..ec4fe17 100644 --- a/routes/index.js +++ b/routes/index.js @@ -9,6 +9,7 @@ var materialApi = require("../api/material"); router.get('/', async function(req, res, next) { var companaies = await companyApi.companyList(); res.render('index',{ + hostAddress:process.env.backend_url, companies:companaies, }); }); diff --git a/views/index.hbs b/views/index.hbs index 5c4f04f..77e2942 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -26,7 +26,12 @@ {{#each material}}
    - +
    + +
    + +
    +
    @@ -85,7 +90,7 @@
    -
    diff --git a/views/layout.hbs b/views/layout.hbs index 8931302..77f6ed5 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -8,6 +8,8 @@ + +