Skip to content

GitLab

Commit 283ac33c authored by Irvan Alfian Adi N's avatar Irvan Alfian Adi N
Browse files

update

parent cd5bc25c
main
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 191 additions and 204 deletions
+191 -204
.env.example
View file @ 283ac33c
VITE_API_BASE_URL=""
\ No newline at end of file
VITE_API_BASE_URL="https://api.sikadu.deves.online/"
\ No newline at end of file
src/app/report/[id]/page.vue
View file @ 283ac33c
<route lang="yaml">
meta:
layout: main.layout
</route>
<script setup lang="ts">
import { onMounted, computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { useHttp } from '@/composables/http/http'
import { DateTime } from 'luxon'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
type Detail = {
keterangan_penanganan?: string
penyebab?: string
kronologi?: string
kerugian?: string
korban?: {
terpapar?: string
luka?: string
meninggal?: string
kerusakan_lingkungan?: string
meta:
layout: main.layout
</route>
<script setup lang="ts">
import { onMounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { useHttp } from '@/composables/http/http'
import { DateTime } from 'luxon'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
type Data = {
id: string
pelapor_id: string
detail_id: any
fakultas_id: string
jenislaporan_id: string
email_pelapor: string
no_hp: string
keterangan_pelapor: string
keterangan_penanganan: string
lat: string
long: string
url_foto: string
status: string
created_at: string
updated_at: string
deleted_at: any
fakultas_name: string
jenis_laporan: string
nama_pelapor: string
tanggal_laporan: string
detail: object
}
}
type Data = {
id: string
pelapor_id: string
detail_id: any
fakultas_id: string
jenislaporan_id: string
email_pelapor: string
no_hp: string
keterangan_pelapor: string
keterangan_penanganan: string
lat: string
long: string
url_foto: string
status: string
created_at: string
updated_at: string
deleted_at: any
fakultas_name: string
jenis_laporan: string
nama_pelapor: string
tanggal_laporan: string
detail: Detail
}
const route = useRoute()
const { data: detail } = useHttp<R<Data>>(
computed(() => `/laporan/${route.params.id}`),
{
queryOptions: {
queryKey: ['detail', route.params.id],
enabled: computed(() => !!route.params.id)
const route = useRoute()
const { data: detail } = useHttp<R<Data>>(
computed(() => `/laporan/${route.params.id}`),
{
queryOptions: {
queryKey: ['detail', route.params.id],
enabled: computed(() => !!route.params.id)
}
}
)
const initMap = (lat: number, lng: number) => {
var map = L.map('map').setView([lat, lng], 13)
L.Marker.extend({
iconUrl: icon,
shadowUrl: iconShadow
})
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
L.marker([lat, lng]).addTo(map).bindPopup('Lokasi Kejadian.').openPopup()
}
)
const initMap = (lat: number, lng: number) => {
var map = L.map('map').setView([lat, lng], 13)
L.Marker.extend({
iconUrl: icon,
shadowUrl: iconShadow
watchEffect(() => {
if (detail.value?.data) {
console.log(detail.value.data)
setTimeout(() => initMap(Number(detail.value?.data.lat), Number(detail.value?.data.long)), 500)
}
})
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
L.marker([lat, lng]).addTo(map).bindPopup('Lokasi Kejadian.').openPopup()
}
watchEffect(() => {
if (detail.value?.data) {
console.log(detail.value.data)
const onChange = (v: string) => {
if (v != 'detail') return
setTimeout(() => initMap(Number(detail.value?.data.lat), Number(detail.value?.data.long)), 500)
}
})
const onChange = (v: string) => {
if (v != 'detail') return
setTimeout(() => initMap(Number(detail.value?.data.lat), Number(detail.value?.data.long)), 500)
}
</script>
<template>
<div>
<n-h2> Detail Laporan </n-h2>
</div>
<div>
<div class="space-y-5">
<n-table>
<n-tr>
<n-td> Kejadian </n-td>
<n-td>
</script>
<template>
<div>
<n-h2> Detail Laporan </n-h2>
</div>
<div>
<div class="space-y-5">
<n-table>
<n-tr>
<n-td> Kejadian </n-td>
<n-td>
{{ detail?.data.jenis_laporan }}
</n-td>
</n-tr>
<n-tr>
<n-td> Tanggal Kejadian </n-td>
<n-td>
{{ DateTime.fromISO(detail?.data.tanggal_laporan as string).toFormat('dd LLLL yyyy') }}
</n-td>
</n-tr>
<n-tr>
<n-td> Dilaporkan Pada </n-td>
<n-td>
{{ DateTime.fromISO(detail?.data.created_at as string).toFormat('dd LLLL yyyy') }}
</n-td>
</n-tr>
<n-tr>
<n-td> Dilaporkan oleh </n-td>
<n-td>
{{ detail?.data.nama_pelapor }}
</n-td>
</n-tr>
</n-table>
<div class="grid grid-cols-3 gap-5 mt-10">
<n-card title="Status">
{{ detail?.data.status }}
</n-card>
<n-card title="Jenis Laporan">
{{ detail?.data.jenis_laporan }}
</n-td>
</n-tr>
<n-tr>
<n-td> Tanggal Kejadian </n-td>
<n-td>
{{ DateTime.fromISO(detail?.data.tanggal_laporan as string).toFormat('dd LLLL yyyy') }}
</n-td>
</n-tr>
<n-tr>
<n-td> Dilaporkan Pada </n-td>
<n-td>
{{ DateTime.fromISO(detail?.data.created_at as string).toFormat('dd LLLL yyyy') }}
</n-td>
</n-tr>
<n-tr>
<n-td> Dilaporkan oleh </n-td>
<n-td>
{{ detail?.data.nama_pelapor }}
</n-td>
</n-tr>
</n-table>
<div class="grid grid-cols-3 gap-5 mt-10">
<n-card title="Status">
{{ detail?.data.status }}
</n-card>
<n-card title="Jenis Laporan">
{{ detail?.data.jenis_laporan }}
</n-card>
<n-card title="Kelas Bahaya"> Sedang </n-card>
</n-card>
<n-card title="Kelas Bahaya"> Sedang </n-card>
</div>
<n-tabs @update-value="onChange" type="line" animated display-directive="show">
<n-tab-pane name="detail" tab="Detail" class="space-y-5">
<div id="map" class="w-full h-96"></div>
<div class="grid grid-cols-2 gap-5">
<n-table>
<n-tr>
<n-td class="w-52"> Keterangan </n-td>
<n-td>
{{ detail?.data.keterangan_pelapor }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> Keterangan Penanganan </n-td>
<n-td>
{{ detail?.data?.detail.keterangan_penanganan }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> penyebab </n-td>
<n-td>
{{ detail?.data?.detail.penyebab }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> kronologi </n-td>
<n-td>
{{ detail?.data?.detail.kronologi }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> kerugian </n-td>
<n-td>
{{ detail?.data?.detail.kerugian }}
</n-td>
</n-tr>
</n-table>
<n-table>
<n-tr>
<n-td class="w-52"> terpapar </n-td>
<n-td>
{{ detail?.data?.detail.korban.terpapar }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> luka </n-td>
<n-td>
{{ detail?.data?.detail.korban.luka }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> meninggal </n-td>
<n-td>
{{ detail?.data?.detail.korban.meninggal }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> kerusakan_lingkungan </n-td>
<n-td>
{{ detail?.data?.detail.korban.kerusakan_lingkungan }}
</n-td>
</n-tr>
</n-table>
</div>
</n-tab-pane>
<n-tab-pane name="photos" tab="Foto Kejadian">
<div class="grid grid-cols-5 gap-5">
<n-image :src="detail?.data.url_foto"></n-image>
</div>
</n-tab-pane>
</n-tabs>
</div>
<n-tabs @update-value="onChange" type="line" animated display-directive="show">
<n-tab-pane name="detail" tab="Detail" class="space-y-5">
<div id="map" class="w-full h-96"></div>
<div class="grid grid-cols-2 gap-5">
<n-table>
<n-tr>
<n-td class="w-52"> Keterangan </n-td>
<n-td>
{{ detail?.data.keterangan_pelapor }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> Keterangan Penanganan </n-td>
<n-td>
{{ detail?.data?.detail.keterangan_penanganan }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> penyebab </n-td>
<n-td>
{{ detail?.data?.detail.penyebab }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> kronologi </n-td>
<n-td>
{{ detail?.data?.detail.kronologi }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> kerugian </n-td>
<n-td>
{{ detail?.data?.detail.kerugian }}
</n-td>
</n-tr>
</n-table>
<n-table>
<n-tr>
<n-td class="w-52"> terpapar </n-td>
<n-td>
{{ detail?.data?.detail.korban?.terpapar }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> luka </n-td>
<n-td>
{{ detail?.data?.detail.korban?.luka }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> meninggal </n-td>
<n-td>
{{ detail?.data?.detail.korban?.meninggal }}
</n-td>
</n-tr>
<n-tr>
<n-td class="w-52"> kerusakan_lingkungan </n-td>
<n-td>
{{ detail?.data?.detail.korban?.kerusakan_lingkungan }}
</n-td>
</n-tr>
</n-table>
</div>
</n-tab-pane>
<n-tab-pane name="photos" tab="Foto Kejadian">
<div class="grid grid-cols-5 gap-5">
<n-image :src="detail?.data.url_foto"></n-image>
</div>
</n-tab-pane>
</n-tabs>
</div>
</div>
</template>
</template>
\ No newline at end of file
src/layouts/default.layout.vue
View file @ 283ac33c
......@@ -32,7 +32,7 @@ const options = [
<login />
</n-modal>
<nav>
<div class="max-w-screen-xl mx-auto flex justify-between h-18 items-center px-5">
<div class="max-w-screen-xl w-full mx-auto flex justify-between h-18 items-center px-3">
<div class="text-primary font-bold text-2xl">SIGAP</div>
<div>
<ul class="flex gap-4 items-center">
......
src/layouts/main.layout.vue
View file @ 283ac33c
......@@ -80,12 +80,12 @@ const menuOptions = computed(() => [
}
]
},
// {
// label: 'Tambah Pengaduan',
// key: '/reports',
// show: ['admin','admin_unit','operator'].includes(profile.value?.data?.role as string),
// icon: renderIcon(HomeOutline)
// },
{
label: 'Tambah Laporan',
key: '/reports',
show: ['admin','admin_unit','operator'].includes(profile.value?.data?.role as string),
icon: renderIcon(HomeOutline)
},
])
const options = [
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment