Skip to content

Commit

Permalink
tinggal sesuaike perintah strapi update
Browse files Browse the repository at this point in the history 
a
  • Loading branch information
@Jefry-nolastname
Jefry-nolastname authored Mar 24, 2022
1 parent 69f78bb commit f835fad
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 77 deletions.
208 changes: 133 additions & 75 deletions public/javascripts/index.js
View file
Original file line number Diff line number Diff line change
@@ -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();
});
Expand All @@ -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<listFile.items.length;i++){
if(listFile.files[i].name ==li.attr("name")){
listFile.items.remove(listFile.files[i]);
if(li.attr('status')=='uploaded') removeMedia.push(li.val());
else{
for(var i=0;i<listFile.items.length;i++){
if(listFile.files[i].name ==li.attr("name")){
listFile.items.remove(listFile.files[i]);
}
}
}
li.remove();
}
var participantsModal = document.getElementById('ParticipantModal');
participantsModal.addEventListener('show.bs.modal', async function (event) {
Expand Down Expand Up @@ -49,31 +63,132 @@ participantsModal.addEventListener('show.bs.modal', async function (event) {
}
});

var createModal = document.getElementById('CreateTopicModal')
createModal.addEventListener('show.bs.modal', function (event) {
var createModal = document.getElementById('CreateTopicModal');

createModal.addEventListener('hidden.bs.modal', function (event){
$("#CreateTopicModal").attr('operation','');
$("#uploadedAttachment").empty();
$("#uploadedFile").empty();
$("#videoSelected").remove();
});
createModal.addEventListener('show.bs.modal', async function (event) {
removeMedia = [];
$("input[type!='hidden']").val("");
$("select").val("");
$("textarea").html('');
var container = document.getElementById('participantCounter');
container.innerHTML = '';
$("input[name='ParticipantList']").val("");
list = new DataTransfer();
attachment = new DataTransfer();
$("input[type!='hidden']").val("");

$("#uploadedFile").empty();
$('[data-toggle="datepicker"]').datepicker({
});


$("#modalCompanySelect").change(async(e)=>{
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('<option value="">Please select your division</option>');
obj['divisions'].forEach((i)=>{
$("#modalDivisionSelect").append(`<option value="${i.id}">${i.attributes.Name}</option>`);
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('<option value="">Please select your division</option>');
resp['divisions'].forEach((item)=>{
$("#modalDivisionSelect").append(`<option ${(item.id==obj['division'].data.id)?'selected':''} value="${item.id}">${item.attributes.Name}</option>`);
});
$("#modalDivisionSelect").removeAttr('disabled');
}
}
}
else{
$( "input#videoFile" ).after( `<small id="videoSelected">current video : ${obj[i].data.attributes.name}</small>` );
}
}
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(
`<li status='uploaded' value='${thumbnails.id}' name='${thumbnails.attributes.name}'>${thumbnails.attributes.name}
<button type="button" class="btn-close removeUpload" onclick="removeUpload(event,list)" aria-label="Close"></button>
</li>`
);
});
}
else if(i=='Attachments'){
obj[i].data.forEach(async(attachments)=>{
$("#uploadedAttachment").append(
`<li status='uploaded' value='${attachments.id}' name='${attachments.attributes.name}'>${attachments.attributes.name}
<button type="button" class="btn-close removeUpload" onclick="removeUpload(event,attachment)" aria-label="Close"></button>
</li>`
);
});
}
}
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('<option value="">Please select your division</option>');
obj['divisions'].forEach((i)=>{
$("#modalDivisionSelect").append(`<option value="${i.id}">${i.attributes.Name}</option>`);
});
}
}
else {
$("#modalDivisionSelect").attr('disabled','disabled');
}
});
$("#formCreate").submit(async (event)=>{
Expand Down Expand Up @@ -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!');
// }
}
});

Expand Down
63 changes: 63 additions & 0 deletions public/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions routes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
});
Expand Down
9 changes: 7 additions & 2 deletions views/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@
{{#each material}}
<div class="col material">
<div class="card" style="width: 18rem;">
<img class="thumbnail" src="{{../hostAddress}}{{attributes.Images.data.[0].attributes.url}}" class="card-img">
<figure class="hover-menu">
<img class="thumbnail" src="{{../hostAddress}}{{attributes.Images.data.[0].attributes.url}}" class="card-img">
<div>
<a href="#" class="editMaterial"><i material="{{id}}" class="fa-solid fa-pen-to-square"></i></a>
</div>
</figure>
<div class="card-body">
<div class="row">
<div class="col-6">
Expand Down Expand Up @@ -85,7 +90,7 @@
</div>
<div class="col-auto">
<label for="division" class="col-form-label">Division :</label>
<select id="modalDivisionSelect" name="division" class="form-select" aria-label="Default select example">
<select id="modalDivisionSelect" disabled name="division" class="form-select" aria-label="Default select example">
<option value="">Please select your division</option>
</select>
</div>
Expand Down
2 changes: 2 additions & 0 deletions views/layout.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/javascripts/datepicker/bootstrap-datepicker.min.js" type="text/javascript" language="javascript"></script>
<link rel='stylesheet' href='/stylesheets/datepicker/bootstrap-datepicker.min.css' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="loading" style="display: none;">
Expand Down

0 comments on commit f835fad

Please sign in to comment.