157 lines
7.5 KiB
Vue
157 lines
7.5 KiB
Vue
<template>
|
|
<div class="container">
|
|
<!-- <modal ref="modal"></modal> -->
|
|
|
|
<div class="flex w-full">
|
|
<div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
|
|
<div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
|
|
<router-link to="/akaunhome">
|
|
<i class="fas fa-backspace text-white"></i>
|
|
</router-link>
|
|
|
|
<span class="text-center mx-auto text-white font-bold">Laporan Imbang Duga</span>
|
|
</div>
|
|
<form method="get" id="myIframe" name="formimbangduga" ref="formimbangduga" :action="Urlredirect()" target="iframe_laporan">
|
|
<div class="rounded bg-white shadow p-6">
|
|
<div class="pb-6">
|
|
<label for="username" class="font-semibold text-gray-700 block pb-1">Tarikh</label>
|
|
<div class="flex">
|
|
<input :value="$hostname" name="hostname" hidden/>
|
|
<input :value="$kodcaw" name="kodcaw" hidden/>
|
|
<input :value="jenisgenerate" type="hidden" name="jenis" />
|
|
<span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
|
|
<input id="tarikhmula" name="datetimepicker1" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" />
|
|
<button @click.prevent="generatepdf" class=" mr-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-file-pdf mr-2"></i>PDF</button>
|
|
<button @click.prevent="generateview" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-eye mr-2"></i>View</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <vue-friendly-iframe v-show="showLoader == false" :style="{visibility: showLoader ? 'hidden' : 'visible'}" class="mx-auto"
|
|
:src="''"
|
|
frame-id="myIframe"
|
|
@load="onLoad"
|
|
@iframe-load="LoadedReady"
|
|
name="iframe_laporan"
|
|
ref="friendlyIframe"></vue-friendly-iframe> -->
|
|
|
|
<!-- <iframe class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex bg-white" name="iframe_laporan" width="500" height="500"></iframe> -->
|
|
<div v-if="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
|
|
<div class="relative w-1/2 my-6 mx-auto max-w-6xl">
|
|
<!--content-->
|
|
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
|
<!--header-->
|
|
<div class="relative p-6" style="height: 80vh;">
|
|
|
|
<!-- <div id="loading" v-show="showLoader" class="flex justify-center mt-10" :style="{visibility: showLoader ? 'visible' : 'hidden'}" >
|
|
<img id="loading-image" src="/img/loader.gif" alt="Loading..." />
|
|
</div> -->
|
|
|
|
<div v-if="showLoader" class="inset-0 z-30 h-full w-full" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:48% !important;top:45% !important;"></i>
|
|
</div>
|
|
|
|
<iframe
|
|
v-show="showLoader == false"
|
|
class="h-full w-full"
|
|
name="iframe_laporan"
|
|
ref="reportFrame"
|
|
@load="onReportLoad"
|
|
></iframe>
|
|
</div>
|
|
<!--footer-->
|
|
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
|
|
<!-- <button @click.prevent="generatepdf" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-3 border border-gray-700 rounded mr-1" :disabled="pendingStatus == 'none'">{{ (pendingStatus == 'loading') ? '' : '' }}<i class="fas fa-file-pdf mr-2"></i>Cetak</button> -->
|
|
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-3 border border-gray-700 rounded mr-1" type="button" v-on:click="toggleModal()" :disabled="pendingStatus == 'none'">
|
|
<i class="fas fa-window-close mr-2"></i>Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="showCetak" class="inset-0 z-30 h-full w-full" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:50% !important;top:50% !important;"></i>
|
|
</div>
|
|
<div v-if="showModal || showCetak" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
iframe[name="iframe_laporan"] {
|
|
height:100% !important;
|
|
width:100% !important;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
export default {
|
|
name: 'myIframe',
|
|
data(){
|
|
return{
|
|
jenisgenerate:'none',
|
|
kodcaw: '',
|
|
showModal:false,
|
|
myIframe: null,
|
|
iframesrc:'',
|
|
pendingStatus:'none',
|
|
showLoader: true,
|
|
showCetak: false
|
|
}
|
|
},
|
|
methods: {
|
|
async generatepdf(){
|
|
this.showCetak = true;
|
|
this.showModal = false;
|
|
await this.setJenis('pdf');
|
|
|
|
// Vue.swal({
|
|
// title: 'Memuatkan...',
|
|
// allowEscapeKey : false,
|
|
// allowOutsideClick: false,
|
|
// showCancelButton: false,
|
|
// showConfirmButton: false
|
|
|
|
// });
|
|
|
|
await this.$refs.formimbangduga.submit()
|
|
await setTimeout(() => {
|
|
this.showCetak = false
|
|
}, 8000);
|
|
},
|
|
async generateview(){
|
|
await this.setJenis('view');
|
|
this.showLoader = true;
|
|
this.pendingStatus = 'loading';
|
|
this.showModal = true;
|
|
await this.$nextTick();
|
|
this.$refs.formimbangduga.submit();
|
|
},
|
|
toggleModal: function(){
|
|
this.showLoader = true
|
|
this.pendingStatus = 'none'
|
|
this.showModal = !this.showModal;
|
|
},
|
|
onReportLoad() {
|
|
if (this.pendingStatus === 'loading') {
|
|
this.showLoader = false;
|
|
this.pendingStatus = 'ok';
|
|
}
|
|
},
|
|
Urlredirect: function() {
|
|
return window.route('cetak.imbangduga')
|
|
},
|
|
setJenis: function(value){
|
|
return this.jenisgenerate = value;
|
|
},
|
|
urlHostname: function(){
|
|
return document.location.origin + '/iframe';
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |