Skip to content

dtd / civitas.ui

Go to a project
Commit 9d2adbc9 by Nabiilah Putri Safa
Options

Merge branch 'master' into 'naput' 

# Conflicts:
#   pages/login.vue
2 parents 584c5823 1069681d
Inline Side-by-side
Showing with 515 additions and 330 deletions
@core/scss/template/pages/page-auth.scss
......@@ -75,7 +75,7 @@
min-block-size: 100vh; /* Ensures the element covers the full viewport height */
padding-block-start: 10px;
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
}
.main-component-margin {
......@@ -206,12 +206,11 @@ body {
.logo-image-component-login {
position: static;
display: flex;
display: block;
overflow: hidden;
flex-flow: row;
align-items: center;
justify-content: center;
grid-gap: 0;
gap: 0;
padding-block: 0%;
padding-inline: 0;
}
......@@ -385,6 +384,7 @@ body {
position: static;
display: flex;
box-sizing: border-box;
flex-direction: column;
flex-flow: column;
align-items: center;
justify-content: center;
......@@ -398,6 +398,7 @@ body {
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
text-align: center;
@media (min-width: 768px) {
inline-size: 80%;
......@@ -443,9 +444,9 @@ body {
.image-10-3 {
margin-block: 80px;
margin-inline: 0;
max-inline-size: 50px;
max-inline-size: 80px;
padding-block: 80px;
padding-inline: 30px;
padding-inline: 100px;
}
.logo-login-component-3 {
......@@ -482,3 +483,44 @@ body {
inline-size: 100%;
}
}
// login main
.card-main-login-component4 {
position: static;
display: grid;
overflow: hidden;
flex-flow: row;
align-items: center;
justify-content: center;
border-radius: 1.7rem;
backdrop-filter: blur(5px);
background-color: #fff0;
background-color: white;
box-shadow: 0 12px 16px #0003;
color: #fefce8;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 0%;
outline-offset: 0;
padding-block: 0;
padding-inline: 0%;
transform: translate(0);
}
.logo-login-component4 {
position: static;
display: none;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #ffdc01;
block-size: 100%;
color: #fefce8;
inline-size: 100%;
@media (min-width: 768px) {
display: flex;
}
}
@layouts/components/HorizontalNavLayout.vue
......@@ -9,12 +9,6 @@ defineProps<{
navItems: HorizontalNavItems
}>()
// const props = defineProps<{
// navItems: HorizontalNavItems
// }>()
// console.log(props.navItems) // ✅ Now this will work
const configStore = useLayoutConfigStore()
</script>
......
components/beranda/UserJadwal.vue 0 → 100644
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useKeycloakStore } from '@/@core/stores/keycloakStore'
const keycloakStore = useKeycloakStore()
const schedule = ref<any[]>([])
const loading = ref(false)
const daysOfWeek = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat']
const startHour = 7
const endHour = 21
async function getData() {
loading.value = true
schedule.value = []
try {
const response = await fetch('https://api.ui.ac.id/my/ac', {
headers: { Authorization: `Bearer ${keycloakStore.accessToken}` },
})
if (!response.ok)
throw new Error(`Error: ${response.statusText}`)
const data = await response.json()
if (keycloakStore.civitas === 'mahasiswa') {
// Get the latest semester
const latestSemesterData = data.reduce((latest, current) => {
return Number.parseInt(current.SEMESTER) > Number.parseInt(latest.SEMESTER) ? current : latest
}, data[0])
// Map schedule for mahasiswa
schedule.value = Object.values(latestSemesterData.IRS).flatMap(course =>
Object.values(course.JADWAL).map(jadwal => ({
day: jadwal.NM_HARI,
start: jadwal.JAM_MULAI,
end: jadwal.JAM_SELESAI,
course: course.NM_KLS_MK,
lecturer: Object.values(course.PENGAJAR).join(', '), // Join multiple lecturers if exist
room: jadwal.NM_RUANG,
building: jadwal.NM_GED,
})),
)
}
else if (keycloakStore.civitas === 'dosen') {
// Map schedule for dosen
schedule.value = data.map(item => ({
day: item.NM_HARI,
start: item.JAM_MULAI,
end: item.JAM_SELESAI,
course: item.NM_KLS_MK,
lecturer: item.NAMA_DOSEN,
room: item.NM_RUANG,
building: item.NM_GED,
}))
}
else if (keycloakStore.civitas === 'staf') {
// Do nothing (empty schedule)
schedule.value = []
}
}
catch (err) {
console.error('Failed to fetch schedule:', err.message)
}
finally {
loading.value = false
}
}
onMounted(() => {
keycloakStore.refresh()
getData()
})
function parseTime(time: string) {
console.log(`Parsing time: ${time}`)
const formattedTime = time.replace('.', ':')
const [hour, minute] = formattedTime.split(':').map(Number)
if (isNaN(hour) || isNaN(minute)) {
console.error(`Invalid time format: ${time}`)
return Number.NaN
}
console.log((hour - startHour) * 60 + minute)
return (hour - startHour) * 60 + minute
}
function calculateRowSpan(start: string, end: string) {
const rowSpan = (parseTime(end) - parseTime(start))
console.log(`RowSpan for ${start} - ${end}:`, rowSpan)
return rowSpan
}
</script>
<template>
<VCard
title="Jadwal Kuliah"
class="timetable-card"
>
<VCard class="timetable">
<!-- Header Row -->
<div class="grid-header">
<div class="time-label">
Jam
</div>
<div
v-for="day in daysOfWeek"
:key="day"
class="day-header"
>
{{ day }}
</div>
</div>
<!-- Grid Body -->
<div class="grid-body">
<!-- Time Labels -->
<div class="time-column">
<div
v-for="hour in Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i)"
:key="hour"
class="time-slot"
:style="{
gridRowStart: (hour - startHour) * 60 + 1, // Now each row is a single minute
gridRowEnd: `span 60`, // Each hour label spans 60 rows
gridColumn: 1, // Stays in the first column
}"
>
{{ hour }}:00
</div>
</div>
<!-- Schedule Grid -->
<div class="schedule-grid">
<div
v-for="item in schedule"
:key="item.course + item.start"
class="schedule-item"
:style="{
gridRowStart: parseTime(item.start) + 1, // Ensure it starts correctly
gridRowEnd: `span ${calculateRowSpan(item.start, item.end)}`,
gridColumn: daysOfWeek.indexOf(item.day) + 1, //its already right because monday starts at 0 so time column +1
}"
>
<div class="course-header">
<span class="time">
<i class="ri-time-line" /> {{ item.start }} - {{ item.end }}
</span>
<span class="room">{{ item.room }}</span>
</div>
<div class="course-title">
<span
v-if="item.course.includes('-')"
class="course-prefix"
>
{{ item.course.split(' - ')[0] }}
</span>
<span class="course-name">
{{ item.course.includes('-') ? item.course.split(' - ')[1] : item.course }}
</span>
</div>
<div class="building">
{{ item.building }}
</div>
</div>
</div>
</div>
</VCard>
</VCard>
</template>
<style scoped>
.timetable {
display: flex;
flex-direction: column;
padding: 0 !important;
margin-block: 0;
margin-block-end: 20px;
margin-inline: 20px; /* Only applies margin to left and right */
max-inline-size: calc(100% - 40px); /* Adjusts width accordingly */
overflow-x: auto;
}
.grid-header {
display: grid;
background-color: rgba(var(--v-global-theme-primary));
color: white;
font-weight: bold;
grid-template-columns: 80px repeat(5, 1fr);
padding-inline: 5px;
text-align: center;
}
.time-label,
.day-header {
padding: 10px;
font-size: 14px;
text-align: center;
}
.course-title {
display: flex;
flex-wrap: wrap;
border-block-end: 1px solid;
font-size: 12px;
font-weight: bold;
gap: 4px;
inline-size: 100%; /* Ensures the border spans the entire container */
margin-block-end: 5px;
padding-block-end: 5px;
}
.course-prefix {
color: color-mix(in srgb, rgba(var(--v-global-theme-primary)) 70%, black 30%);
}
.grid-body {
display: grid;
grid-template-columns: 80px auto; /* Time column + Schedule grid */
padding-block: 30px;
padding-inline: 5px;
}
.time-column {
display: grid;
font-weight: bold;
grid-template-rows: repeat(840, 1px); /* Assuming 07:00 - 21:00, 30-min per row */
text-align: center;
}
.time-slot {
position: relative;
display: flex;
flex-direction: column; /* Stack content vertically */
align-items: center; /* Center horizontally */
justify-content: flex-start; /* Align content to the top */
block-size: 60px; /* 30 min per row */
margin-block-start: -15px;
padding-block-start: 5px; /* Optional: Add some spacing from the top */
}
.schedule-item {
display: flex;
flex-direction: column;
align-items: flex-start; /* Keeps text left-aligned */
justify-content: flex-start; /* Aligns content to the top */
padding: 4px;
border-radius: 6px;
margin: 2px;
background-color: color-mix(in srgb, rgba(var(--v-global-theme-primary)) 70%, white 30%);
color: white;
font-size: 12px;
outline: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
text-align: start; /* Ensures text is left-aligned */
}
.schedule-grid {
position: relative;
display: grid;
flex: 1;
background-image: repeating-linear-gradient(to bottom, #ccc 0, #ccc 1px, transparent 1px, transparent 60px);
background-size: 100%; /* Ensures lines every 60px */
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(840, 1px); /* 1px per minute */
}
.course-header {
display: flex;
justify-content: space-between; /* Pushes elements to the left & right */
inline-size: 100%; /* Ensures full width */
text-overflow: ellipsis; /* Adds "..." when text is too long */
word-break: break-word; /* Allows text to wrap naturally */
}
.time {
font-weight: normal;
text-align: start; /* Aligns time to the left */
}
.room {
overflow: hidden;
font-weight: normal;
text-align: end; /* Aligns room to the right */
text-overflow: ellipsis;
}
.building {
font-weight: normal;
opacity: 0.8;
text-align: start; /* Aligns room to the right */
}
@media screen and (max-width: 1200px) {
.course-title {
border-block-end: 0 solid;
}
.course-header {
overflow-x: hidden; /* Hides horizontal overflow */
text-overflow: ellipsis; /* Adds "..." when text is too long */
word-break: break-word; /* Allows text to wrap naturally */
}
.building,
.time {
display: none;
}
}
@media screen and (max-width: 900px) {
.course-title {
border-block-end: 0 solid;
}
.room {
text-align: start;
}
}
@media screen and (max-width: 600px) {
.room {
display: none;
}
}
</style>
pages/login-v1.vue
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script setup lang="ts">
import type { VForm } from 'vuetify/components/VForm'
import authV2MaskDark from '@images/dstipro/mask-v2-dark.png'
import authV2MaskLight from '@images/dstipro/mask-v2-light.png'
import authV2LoginBgYellowDark from '@images/dstipro/auth-bg-yellow-dark.png'
import authV2LoginBgYellowLight from '@images/dstipro/auth-bg-yellow-light.png'
import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png'
import { useKeycloakStore } from '@core/stores/keycloakStore'
import SSOButton from '@/views/dstipro/beranda/authentication/SSOButton.vue'
import keycloakInstance from '@/keycloak'
function login() {
keycloakInstance.login({
redirectUri: `${window.location.origin}/naputpro/beranda/profile`,
})
}
const keycloakStore = useKeycloakStore()
const data = ref<Record<string, any> | null>(null)
const error = ref<Record<string, any> | null>(null)
onMounted(() => {
if (keycloakInstance.authenticated)
router.push('/naputpro/beranda/profile')
})
const authThemeImg = useGenerateImageVariant(
authV2LoginLogoLight,
......@@ -31,77 +32,11 @@ const authThemeBg = useGenerateImageVariant(
authV2LoginBgYellowDark,
)
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
})
const isPasswordVisible = ref(false)
const route = useRoute()
const router = useRouter()
const ability = useAbility()
const errors = ref<Record<string, string | undefined>>({
email: undefined,
password: undefined,
})
const refVForm = ref<VForm>()
const credentials = ref({
email: 'admin@demo.com',
password: 'admin',
})
const rememberMe = ref(false)
const login = async () => {
try {
const res = await $api('/auth/login', {
method: 'POST',
body: {
email: credentials.value.email,
password: credentials.value.password,
},
onResponseError({ response }) {
errors.value = response._data.errors
},
})
const { accessToken, userData, userAbilityRules } = res
useCookie('userAbilityRules').value = userAbilityRules
ability.update(userAbilityRules)
useCookie('userData').value = userData
useCookie('accessToken').value = accessToken
console.log('Ini userdata: ', userData)
console.log('Ini accesstoken: ', accessToken)
console.log('Ini route: ', route.query.to)
// Redirect to `to` query if exist or redirect to index route
// ❗ nextTick is required to wait for DOM updates and later redirect
await nextTick(() => {
router.replace(route.query.to ? String(route.query.to) : '/')
})
}
catch (err) {
console.error(err)
}
}
const onSubmit = () => {
refVForm.value?.validate().then(({ valid: isValid }) => {
if (isValid)
login()
})
}
</script>
<template>
......@@ -117,7 +52,6 @@ const onSubmit = () => {
<div class="logo-login-component-3">
<VImg
:src="authThemeImg"
max-height="100"
class="image-10-3 lazyload"
/>
</div>
......@@ -126,7 +60,15 @@ const onSubmit = () => {
cols="12"
class="text-center"
>
<SSOButton />
<VBtn
color="warning"
@click="login"
>
<VIcon
start
icon="ri-login-box-line"
/> Login SSO
</VBtn>
</VCol>
</div>
</div>
......
pages/login-v2.vue
<script setup lang="ts">
import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
import { VForm } from 'vuetify/components/VForm'
import authV2MaskDark from '@images/dstipro/mask-v2-dark.png'
import authV2MaskLight from '@images/dstipro/mask-v2-light.png'
import authV2LoginBgDark from '@images/dstipro/auth-bg-dark.png'
import authV2LoginBgLight from '@images/dstipro/auth-bg-light.png'
import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png'
import { useKeycloakStore } from '@core/stores/keycloakStore'
const keycloakStore = useKeycloakStore()
import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
const authThemeImg = useGenerateImageVariant(
authV2LoginLogoLight,
......@@ -28,8 +21,6 @@ const authThemeBg = useGenerateImageVariant(
authV2LoginBgDark,
)
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
......
pages/login-v4.vue
<script setup lang="ts">
import { VForm } from 'vuetify/components/VForm'
import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
import authV2MaskDark from '@images/dstipro/mask-v2-dark.png'
import authV2MaskLight from '@images/dstipro/mask-v2-light.png'
import authV2LoginBgYellowDark from '@images/dstipro/auth-bg-yellow-dark.png'
import authV2LoginBgYellowLight from '@images/dstipro/auth-bg-yellow-light.png'
import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png'
import { useKeycloakStore } from '@core/stores/keycloakStore'
import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
const keycloakStore = useKeycloakStore()
const data = ref<Record<string, any> | null>(null)
......@@ -30,8 +27,6 @@ const authThemeBg = useGenerateImageVariant(
authV2LoginBgYellowDark,
)
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
......
pages/login-v5.vue deleted 100644 → 0
<script setup lang="ts">
import type { VForm } from 'vuetify/components/VForm'
import authV2MaskDark from '@images/dstipro/mask-v2-dark.png'
import authV2MaskLight from '@images/dstipro/mask-v2-light.png'
import authV2LoginBgYellowDark from '@images/dstipro/auth-bg-yellow-dark.png'
import authV2LoginBgYellowLight from '@images/dstipro/auth-bg-yellow-light.png'
import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png'
import { useKeycloakStore } from '@core/stores/keycloakStore'
import SSOButton from '@/views/dstipro/beranda/authentication/SSOButton.vue'
const keycloakStore = useKeycloakStore()
const data = ref<Record<string, any> | null>(null)
const error = ref<Record<string, any> | null>(null)
const authThemeImg = useGenerateImageVariant(
authV2LoginLogoLight,
authV2LoginLogoLight,
)
const authThemeColor = useGenerateColorVariant(
'#4f4f4f',
'transparent',
)
const authThemeBg = useGenerateImageVariant(
authV2LoginBgYellowLight,
authV2LoginBgYellowDark,
)
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
})
const isPasswordVisible = ref(false)
const route = useRoute()
const router = useRouter()
const ability = useAbility()
const errors = ref<Record<string, string | undefined>>({
email: undefined,
password: undefined,
})
const refVForm = ref<VForm>()
const credentials = ref({
email: 'admin@demo.com',
password: 'admin',
})
const rememberMe = ref(false)
const login = async () => {
try {
const res = await $api('/auth/login', {
method: 'POST',
body: {
email: credentials.value.email,
password: credentials.value.password,
},
onResponseError({ response }) {
errors.value = response._data.errors
},
})
const { accessToken, userData, userAbilityRules } = res
useCookie('userAbilityRules').value = userAbilityRules
ability.update(userAbilityRules)
useCookie('userData').value = userData
useCookie('accessToken').value = accessToken
console.log('Ini userdata: ', userData)
console.log('Ini accesstoken: ', accessToken)
console.log('Ini route: ', route.query.to)
// Redirect to `to` query if exist or redirect to index route
// ❗ nextTick is required to wait for DOM updates and later redirect
await nextTick(() => {
router.replace(route.query.to ? String(route.query.to) : '/')
})
}
catch (err) {
console.error(err)
}
}
const onSubmit = () => {
refVForm.value?.validate().then(({ valid: isValid }) => {
if (isValid)
login()
})
}
</script>
<template>
<!-- <VRow no-gutters class="auth-wrapper d-flex align-center"> -->
<body
:style="{ backgroundImage: `url(${authThemeBg})` }"
class="body-2"
>
<section class="global-main-login-component-3">
<div
:style="{ backgroundColor: `${authThemeColor}` }"
class="card-main-login-component-3"
>
<div class="logo-login-component-3">
<VImg
:src="authThemeImg"
max-height="100"
class="image-10-3 lazyload"
/>
</div>
<div class="form-login-component-3">
<VCol
cols="12"
class="text-center"
>
<SSOButton />
</VCol>
</div>
</div>
</section>
</body>
<!-- </VRow> -->
</template>
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
</style>
pages/login.vue
......@@ -10,15 +10,12 @@ const authThemeImg = authLoginLogo
const authThemeBg = authLoginBg
const keycloakStore = useKeycloakStore()
const data = ref<Record<string, any> | null>(null)
const error = ref<Record<string, any> | null>(null)
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
})
</script>
<template>
......@@ -27,8 +24,8 @@ definePageMeta({
class="body-2"
>
<section class="global-main-login-component">
<div class="card-main-login-component">
<div class="logo-login-component">
<div class="card-main-login-component4">
<div class="logo-login-component4">
<VImg
:src="authThemeImg"
max-width="650"
......@@ -58,52 +55,4 @@ definePageMeta({
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
.form-login-component {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
// kanan putih
.card-main-login-component {
position: static;
display: grid;
overflow: hidden;
flex-flow: row;
align-items: center;
justify-content: center;
border-radius: 1.7rem;
backdrop-filter: blur(5px);
background-color: #fff0;
background-color: white;
box-shadow: 0 12px 16px #0003;
color: #fefce8;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 0%;
outline-offset: 0;
padding-block: 0;
padding-inline: 0%;
transform: translate(0);
}
.logo-login-component {
position: static;
display: none;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #ffdc01;
block-size: 100%;
color: #fefce8;
inline-size: 100%;
@media (min-width: 768px) {
display: flex;
}
}
</style>
\ No newline at end of file
pages/naputpro/beranda/[tab].vue
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import UserBerita from '@/components/beranda/UserBerita.vue'
import UserLib from '@/components/beranda/UserLib.vue'
import UserLog from '@/components/beranda/UserLog.vue'
import UserJadwal from '@/components/beranda/UserJadwal.vue'
import UserRiwayat from '@/components/beranda/UserRiwayat.vue'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UserKeamanan from '@/views/dstipro/beranda/keamanan/index.vue'
import UserPeta from '@/views/dstipro/beranda/peta/index.vue'
......@@ -36,6 +37,7 @@ const tabs = [
{ title: 'Keamanan', icon: 'ri-lock-line', tab: 'keamanan' },
{ title: 'Berita', icon: 'ri-news-line', tab: 'berita' },
{ title: 'Riwayat', icon: 'ri-file-history-line', tab: 'riwayat' },
{ title: 'Jadwal', icon: 'ri-calendar-line', tab: 'jadwal' },
{ title: 'Log Absen', icon: 'ri-history-line', tab: 'log' },
{ title: 'Peta', icon: 'ri-history-line', tab: 'peta' },
......@@ -105,6 +107,11 @@ const navigateTab = (tab: string) => {
<UserRiwayat />
</VWindowItem>
<!-- Jadwal -->
<VWindowItem value="jadwal">
<UserJadwal />
</VWindowItem>
<!-- Log Absen -->
<VWindowItem value="log">
<UserLog />
......
views/dstipro/beranda/UserProfileHeader.vue
......@@ -37,26 +37,38 @@ const items = ref<Record<string, any>>({})
const loading = ref(false)
const errordata = ref('')
const isBirthday = ref(false)
const parkirItems = ref(null)
async function getData() {
loading.value = true
errordata.value = ''
try {
const apiEndpoint = 'https://api.ui.ac.id/me'
const apiEndpoints = [
'https://api.ui.ac.id/me',
'https://api.ui.ac.id/my/parkir/aktif',
]
const response = await fetch(apiEndpoint, {
const responses = await Promise.all(apiEndpoints.map(endpoint =>
fetch(endpoint, {
headers: {
Authorization: `Bearer ${keycloakStore.accessToken}`,
},
})
}),
))
for (const response of responses) {
if (!response.ok)
throw new Error('Gagal mengambil data')
const dataku = await response.json()
}
const [dataku, parkirData] = await Promise.all(responses.map(res => res.json()))
items.value = dataku
// parkirItems.value = parkirData.data || {} // Store parkir data separately
parkirItems.value = parkirData.data && Object.keys(parkirData.data).length ? parkirData.data : null
}
catch (err: any) {
catch (err) {
errordata.value = err.message || 'Terjadi kesalahan saat mengambil data'
}
finally {
......@@ -64,6 +76,32 @@ async function getData() {
}
}
const daysLeft = computed(() => {
if (!parkirItems.value)
return 0
const endDate = new Date(parkirItems.value.date_end_service)
const now = new Date()
return Math.max(0, Math.ceil((endDate - now) / (1000 * 60 * 60 * 24)))
})
const parkirStatus = computed(() => {
return daysLeft.value > 0 ? 'Parkir Aktif' : 'Parkir Non Aktif'
})
const progress = computed(() => {
if (!parkirItems.value)
return 0
const endDate = new Date(parkirItems.value.date_end_service)
const startDate = new Date(parkirItems.value.date_start_service)
const now = new Date()
// Reverse the calculation: 100% when starting, 0% when ending
return Math.max(0, Math.min(100, ((endDate - now) / (endDate - startDate)) * 100))
})
// Fetch data from API
onMounted(() => {
getData()
......@@ -79,8 +117,6 @@ onMounted(() => {
location: 'Madinah',
profileImg,
}
console.log('Profile Header Data:', profileHeaderData.value)
})
// Menentukan nilai tanggal lahir berdasarkan kondisi `civitas`
......@@ -143,6 +179,10 @@ const ulangTahunBerikutnya = computed(() => {
return `${diff.months()} bulan, ${diff.days()} hari`
})
const goToParking = () => {
window.open('https://parkir.ui.ac.id/apps/site/index', '_blank')
}
</script>
<template>
......@@ -199,6 +239,57 @@ const ulangTahunBerikutnya = computed(() => {
</div>
<div
v-if="parkirItems"
class="d-flex align-center gap-x-2"
>
<VIcon
size="24"
icon="ri-car-line"
/>
<VBtn
variant="tonal"
:color="daysLeft > 0 ? 'primary' : 'error'"
@click="goToParking"
>
{{ parkirStatus }}
<VTooltip
activator="parent"
location="top"
>
<div class="d-flex flex-column p-2">
<div class="d-flex align-center gap-x-2">
<VIcon
size="20"
icon="ri-calendar-line"
/>
<span>Mulai: {{ parkirItems.date_start_service }}</span>
</div>
<div class="d-flex align-center gap-x-2">
<VIcon
size="20"
icon="ri-calendar-check-line"
/>
<span>Berakhir: {{ parkirItems.date_end_service }}</span>
</div>
<div class="d-flex align-center gap-x-2">
<VIcon
size="20"
icon="ri-time-line"
/>
<span>{{ daysLeft }} hari tersisa</span>
</div>
<VProgressLinear
:model-value="progress"
color="primary"
height="6"
rounded
/>
</div>
</VTooltip>
</VBtn>
</div>
<div
v-if="!isBirthday"
class="d-flex align-center gap-x-2"
>
......
views/dstipro/beranda/authentication/AuthProvider.vue
......@@ -8,6 +8,11 @@ function login() {
})
}
onMounted(() => {
if (keycloakInstance.authenticated)
router.push('/naputpro/beranda/profile')
})
const { global } = useTheme()
const authProviders = [
......
views/dstipro/beranda/authentication/SSOButton.vue deleted 100644 → 0
<script setup lang="ts">
import keycloakInstance from '@/keycloak'
function login() {
keycloakInstance.login({
redirectUri: `${window.location.origin}/naputpro/beranda/profile`,
})
}
</script>
<template>
<VBtn
color="warning"
@click="login"
>
<VIcon
start
icon="ri-login-box-line"
/> Login SSO
</VBtn>
</template>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!