diff --git a/frontend/src/views/LectureSchedule/CreateEditSchedule.scss b/frontend/src/views/LectureSchedule/CreateEditSchedule.scss
index f3aaa40ad971eccf730980cee81c25fd5ae4df95..391ee80781412f1e30750006fc482274c6aed078 100644
--- a/frontend/src/views/LectureSchedule/CreateEditSchedule.scss
+++ b/frontend/src/views/LectureSchedule/CreateEditSchedule.scss
@@ -6,4 +6,19 @@
overflow-x: hidden;
}
}
+
+ .form-select {
+ border: none;
+ display: block;
+ width: 100%;
+ padding: 10px 10px !important;
+ font-size: 16px;
+ background-color: #F1F5F8;
+ border-radius: 4px;
+ color: #000000;
+ background-clip: padding-box;
+ line-height: 19px;
+ appearance: none;
+ outline: none;
+ }
}
\ No newline at end of file
diff --git a/frontend/src/views/LectureSchedule/CreateEditSchedule.vue b/frontend/src/views/LectureSchedule/CreateEditSchedule.vue
index 31ddf60b61b8ec26f30ff3d5101d25b326aa35c2..b4e1946cf7b7b3d58c8b729d33721a8affdc6b32 100644
--- a/frontend/src/views/LectureSchedule/CreateEditSchedule.vue
+++ b/frontend/src/views/LectureSchedule/CreateEditSchedule.vue
@@ -1,16 +1,44 @@
<template>
<div class="row m-0 bg-primary-six">
+ <!-- Alert Create Edit Class Result -->
+ <div class="d-flex justify-content-center">
+ <div
+ v-if="submitted"
+ class="alert border-0 rounded alert-dismissible fade show"
+ role="alert"
+ :class="{
+ 'alert-success': isAlertSuccess,
+ 'alert-danger': isAlertDanger
+ }"
+ >
+ {{ alertText }}
+ <div type="button" class="btn-close" @click="submitted = false"></div>
+ </div>
+ </div>
<div class="col-auto p-0">
<sidebar />
</div>
<div class="col p-4 container-manage-schedule">
<!-- Container Header -->
<div class="row">
- <div class="col-12">
+ <div class="col-md-9">
<h1 data-aos="fade-down" data-aos-duration="1500" class="mb-4">
Pengelolaan Perkuliahan
</h1>
</div>
+ <div class="col-md-3">
+ <div>
+ <button
+ type="button"
+ class="btn btn-primary-six col-12"
+ data-aos="fade-down"
+ data-aos-duration="1500"
+ @click="$router.push('/lecture-schedule')"
+ >
+ Kembali ke Jadwal Perkuliahan
+ </button>
+ </div>
+ </div>
</div>
<!-- Container List of Attendees & Manage Class -->
<div class="row mt-2 container-lecturer-course-enrollment">
@@ -42,127 +70,27 @@
</tr>
</thead>
<tbody>
- <tr>
- <td>1</td>
- <td>23520051</td>
- <td>Dimas Aditia Pratikto</td>
- <!-- @TODO: modify code in here -->
- <td class="text-center">
- <div class="col-auto">
- <div class="form-group">
- <div class="custom-control custom-switch">
- <input
- type="checkbox"
- class="custom-control-input p-0"
- id="customSwitch1"
- @click="updateStudyPlan"
- />
- <label
- class="custom-control-label"
- for="customSwitch1"
- >
- </label>
- </div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>1</td>
- <td>23520051</td>
- <td>Dimas Aditia Pratikto</td>
- <!-- @TODO: modify code in here -->
- <td class="text-center">
- <div class="col-auto">
- <div class="form-group">
- <div class="custom-control custom-switch">
- <input
- type="checkbox"
- class="custom-control-input p-0"
- id="customSwitch1"
- @click="updateStudyPlan"
- />
- <label
- class="custom-control-label"
- for="customSwitch1"
- >
- </label>
- </div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>1</td>
- <td>23520051</td>
- <td>Dimas Aditia Pratikto</td>
- <!-- @TODO: modify code in here -->
- <td class="text-center">
- <div class="col-auto">
- <div class="form-group">
- <div class="custom-control custom-switch">
- <input
- type="checkbox"
- class="custom-control-input p-0"
- id="customSwitch1"
- @click="updateStudyPlan"
- />
- <label
- class="custom-control-label"
- for="customSwitch1"
- >
- </label>
- </div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>1</td>
- <td>23520051</td>
- <td>Dimas Aditia Pratikto</td>
- <!-- @TODO: modify code in here -->
- <td class="text-center">
- <div class="col-auto">
- <div class="form-group">
- <div class="custom-control custom-switch">
- <input
- type="checkbox"
- class="custom-control-input p-0"
- id="customSwitch1"
- @click="updateStudyPlan"
- />
- <label
- class="custom-control-label"
- for="customSwitch1"
- >
- </label>
- </div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>1</td>
- <td>23520051</td>
- <td>Dimas Aditia Pratikto</td>
+ <tr
+ v-for="(attendance, index) in attendances"
+ :key="attendance.id"
+ >
+ <td>{{ index + 1 }}</td>
+ <td>{{ attendance.Student.nim }}</td>
+ <td>{{ attendance.Student.fullName }}</td>
<!-- @TODO: modify code in here -->
<td class="text-center">
<div class="col-auto">
<div class="form-group">
- <div class="custom-control custom-switch">
- <input
- type="checkbox"
- class="custom-control-input p-0"
- id="customSwitch1"
- @click="updateStudyPlan"
- />
- <label
- class="custom-control-label"
- for="customSwitch1"
- >
- </label>
- </div>
+ <select
+ class="form-select"
+ aria-label="attendance"
+ v-model="attendance.status"
+ >
+ <option value="PRESENT">Hadir</option>
+ <option value="ABSENT">Tidak Hadir</option>
+ <option value="SICK">Sakit</option>
+ <option value="PERMITTED">Izin</option>
+ </select>
</div>
</div>
</td>
@@ -202,12 +130,19 @@
</div>
<div class="row">
<!-- Start Time Picker -->
- <div class="col-5">
+ <div
+ class="col-5"
+ v-for="(classesStartTime, index) in classStartTime"
+ :key="classesStartTime.id"
+ >
<vue-timepicker
class="mt-2"
placeholder="Pilih jam"
- :modelValue="classStartTime"
- @update:modelValue="updateClassStartTime"
+ v-model="classStartTime[index]"
+ :modelValue="classStartTime[index]"
+ @update:modelValue="
+ updateClassStartTime(classStartTime[index])
+ "
close-on-complete
input-width="100%"
></vue-timepicker>
@@ -216,12 +151,19 @@
s/d
</div>
<!-- End Time Picker -->
- <div class="col-5">
+ <div
+ class="col-5"
+ v-for="(classesEndTime, index) in classEndTime"
+ :key="classesEndTime.id"
+ >
<vue-timepicker
class="mt-2"
placeholder="Pilih jam"
- :modelValue="classEndTime"
- @update:modelValue="updateClassEndTime"
+ v-model="classEndTime[index]"
+ :modelValue="classEndTime[index]"
+ @update:modelValue="
+ updateClassEndTime(classEndTime[index])
+ "
close-on-complete
input-width="100%"
></vue-timepicker>
@@ -235,12 +177,19 @@
<label><b>Buka Presensi</b></label>
<div class="row">
<!-- Start Time Picker -->
- <div class="col-5">
+ <div
+ class="col-5"
+ v-for="(presencesStartTime, index) in presenceStartTime"
+ :key="presencesStartTime.id"
+ >
<vue-timepicker
class="mt-2"
placeholder="Pilih jam"
- :modelValue="presenceStartTime"
- @update:modelValue="updatePresenceStartTime"
+ v-model="presenceStartTime[index]"
+ :modelValue="presenceStartTime[index]"
+ @update:modelValue="
+ updatePresenceStartTime(presenceStartTime[index])
+ "
close-on-complete
input-width="100%"
></vue-timepicker>
@@ -249,12 +198,19 @@
s/d
</div>
<!-- End Time Picker -->
- <div class="col-5">
+ <div
+ class="col-5"
+ v-for="(presencesEndTime, index) in presenceEndTime"
+ :key="presencesEndTime.id"
+ >
<vue-timepicker
class="mt-2"
placeholder="Pilih jam"
- :modelValue="presenceEndTime"
- @update:modelValue="updatePresenceEndTime"
+ v-model="presenceEndTime[index]"
+ :modelValue="presenceEndTime[index]"
+ @update:modelValue="
+ updatePresenceEndTime(presenceEndTime[index])
+ "
close-on-complete
input-width="100%"
></vue-timepicker>
@@ -272,6 +228,7 @@
<input
type="text"
placeholder="Masukan link perkuliahan daring"
+ v-model="link"
/>
</div>
</div>
@@ -287,6 +244,7 @@
<input
type="text"
placeholder="Masukan topik perkuliahan"
+ v-model="topic"
/>
</div>
</div>
@@ -303,6 +261,7 @@
placeholder="Masukan catatan perkuliahan"
spellcheck="false"
rows="4"
+ v-model="notes"
/>
</div>
</div>
@@ -312,7 +271,11 @@
<div class="row mt-5">
<!-- Button Close -->
<div class="form-group col-12">
- <button type="button" class="btn btn-primary-six col-12">
+ <button
+ type="button"
+ class="btn btn-primary-six col-12"
+ @click="submit"
+ >
Simpan
</button>
</div>
@@ -331,59 +294,180 @@ import Sidebar from "@/components/Sidebar/Sidebar";
import Datepicker from "vue3-datepicker";
import VueTimepicker from "vue3-timepicker";
import "vue3-timepicker/dist/VueTimepicker.css";
+import axios from "axios";
export default {
components: { Sidebar, Datepicker, VueTimepicker },
name: "CreateEditSchedule",
data() {
return {
+ courseClassMeetingId: null,
date: null,
- classStartTime: {
- hour: null,
- minute: null
- },
- classEndTime: {
- hour: null,
- minute: null
- },
- presenceStartTime: {
- hour: null,
- minute: null
- },
- presenceEndTime: {
- hour: null,
- minute: null
- }
+ classStartTime: [],
+ classEndTime: [],
+ presenceStartTime: [],
+ presenceEndTime: [],
+ link: null,
+ topic: null,
+ notes: null,
+ attendances: null,
+ submitted: false,
+ alertText: null,
+ isAlertSuccess: false,
+ isAlertDanger: false
};
},
- mounted() {
- console.log(this.date);
- this.date = new Date();
+ async mounted() {
+ this.courseClassMeetingId = this.$route.query.id;
+ await this.getCourseClassMeetingDetail();
},
methods: {
updateClassStartTime(time) {
- if (time.HH && time.mm) {
- this.classStartTime.hour = time.HH;
- this.classStartTime.minute = time.mm;
- }
+ this.classStartTime[0].HH = time.HH;
+ this.classStartTime[0].mm = time.mm;
},
updateClassEndTime(time) {
- if (time.HH && time.mm) {
- this.classEndTime.hour = time.HH;
- this.classEndTime.minute = time.mm;
- }
+ this.classEndTime[0].HH = time.HH;
+ this.classEndTime[0].mm = time.mm;
},
updatePresenceStartTime(time) {
- if (time.HH && time.mm) {
- this.presenceStartTime.hour = time.HH;
- this.presenceStartTime.minute = time.mm;
- }
+ this.presenceStartTime[0].HH = time.HH;
+ this.presenceStartTime[0].mm = time.mm;
},
updatePresenceEndTime(time) {
if (time.HH && time.mm) {
- this.presenceEndTime.hour = time.HH;
- this.presenceEndTime.minute = time.mm;
+ this.presenceEndTime[0].HH = time.HH;
+ this.presenceEndTime[0].mm = time.mm;
+ }
+ },
+ submit() {
+ let classStartTime = new Date(
+ this.date.getFullYear(),
+ this.date.getMonth(),
+ this.date.getDate(),
+ this.classStartTime[0].HH,
+ this.classStartTime[0].mm
+ );
+
+ let classEndTime = new Date(
+ this.date.getFullYear(),
+ this.date.getMonth(),
+ this.date.getDate(),
+ this.classEndTime[0].HH,
+ this.classEndTime[0].mm
+ );
+
+ let presenceStartTime = new Date(
+ this.date.getFullYear(),
+ this.date.getMonth(),
+ this.date.getDate(),
+ this.presenceStartTime[0].HH,
+ this.presenceStartTime[0].mm
+ );
+
+ let presenceEndTime = new Date(
+ this.date.getFullYear(),
+ this.date.getMonth(),
+ this.date.getDate(),
+ this.presenceEndTime[0].HH,
+ this.presenceEndTime[0].mm
+ );
+
+ let attendances = [];
+
+ for (let i = 0; i < this.attendances.length; i++) {
+ attendances.push({
+ studentId: this.attendances[i].Student.id,
+ status: this.attendances[i].status
+ });
+ }
+
+ const requestBody = {
+ link: this.link,
+ topic: this.topic,
+ notes: this.notes,
+ startClass: classStartTime,
+ endClass: classEndTime,
+ startAttendance: presenceStartTime,
+ endAttendance: presenceEndTime,
+ attendances: attendances
+ };
+
+ axios
+ .put(
+ process.env.VUE_APP_API_ENDPOINT +
+ "/course-class-meeting/" +
+ this.courseClassMeetingId,
+ requestBody
+ )
+ .then(() => {
+ this.showAlert(1);
+ })
+ .catch((error) => {
+ console.error(error);
+ this.showAlert(0);
+ });
+ },
+ async getCourseClassMeetingDetail() {
+ function convertTime(time) {
+ return time > 9 ? "" + time : "0" + time;
+ }
+
+ await axios
+ .get(
+ process.env.VUE_APP_API_ENDPOINT +
+ "/course-class-meeting/?courseClassMeetingId=" +
+ this.courseClassMeetingId +
+ "&shouldIncludeAttendances=true"
+ )
+ .then((response) => {
+ let classStartTime = new Date(response.data.startTime);
+ let classEndTime = new Date(response.data.endTime);
+ let presenceStartTime = new Date(response.data.openAttendanceTime);
+ let presenceEndTime = new Date(response.data.closeAttendanceTime);
+
+ this.date = classEndTime;
+
+ this.classStartTime.push({
+ HH: convertTime(classStartTime.getHours()),
+ mm: convertTime(classStartTime.getMinutes())
+ });
+
+ this.classEndTime.push({
+ HH: convertTime(classEndTime.getHours()),
+ mm: convertTime(classEndTime.getMinutes())
+ });
+
+ this.presenceStartTime.push({
+ HH: convertTime(presenceStartTime.getHours()),
+ mm: convertTime(presenceStartTime.getMinutes())
+ });
+
+ this.presenceEndTime.push({
+ HH: convertTime(presenceEndTime.getHours()),
+ mm: convertTime(presenceEndTime.getMinutes())
+ });
+
+ this.link = response.data.link;
+ this.topic = response.data.topic;
+ this.notes = response.data.notes;
+ this.attendances = response.data.courseClassMeetingAttendances;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ },
+ showAlert(alertType) {
+ this.isAlertSuccess = false;
+ this.isAlertDanger = false;
+ if (alertType === 0) {
+ this.isAlertDanger = true;
+ this.alertText = "Edit Kelas Perkuliahan Gagal";
+ } else {
+ this.alertText = "Edit Kelas Perkuliahan Berhasil";
+ this.isAlertSuccess = true;
}
+ this.submitted = true;
}
}
};