Skip to content

Commit

Permalink
Merge pull request #108 from akroon3r/sprint_4_update_exams
Browse files Browse the repository at this point in the history 
Update Exams - Move from Div to B-Modal
  • Loading branch information
@sjrumsby
sjrumsby authored Jan 22, 2019
2 parents a9f66f6 + 3472fb7 commit f962911
Show file tree
Hide file tree
Showing 9 changed files with 284 additions and 287 deletions.
17 changes: 16 additions & 1 deletion frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ limitations under the License.*/
<div v-if="user.username && isLoggedIn" :style="style">
<Alert />
<ExamAlert />
<SuccessExamAlert />
<FailureExamAlert />
<Nav v-if="isLoggedIn" />
<Socket v-show="1===2" />
<Feedback />
Expand All @@ -42,10 +44,23 @@ limitations under the License.*/
import Nav from './layout/nav'
import Login from "./Login";
import LoginWarning from './login-warning'
import SuccessExamAlert from './exams/success-exam-alert'
import FailureExamAlert from './exams/failure-exam-alert'
export default {
name: 'App',
components: { Login, LoginWarning, Nav, Alert, ExamAlert, Header, Socket, Footer, Feedback, Response },
components: { Login,
LoginWarning,
Nav,
Alert,
ExamAlert,
Header,
Socket,
Footer,
Feedback,
Response,
SuccessExamAlert,
FailureExamAlert },
computed: {
...mapState(['isLoggedIn', 'showSchedulingIndicator', 'user' ]),
style() {
Expand Down
92 changes: 0 additions & 92 deletions frontend/src/assets/css/q.css
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,3 @@
.edit-exam-modal {
position: fixed;
z-index: 3;
left: 25%;
top: 20%;
width: 50%;
height: 60%;
overflow: hidden;
transition: display 1s;
border: 10px solid white;
border-radius: 25px;
}

.edit-exam-modal-background {
position: fixed;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.edit-exam-modal-content {
background-color: #fefefe;
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
padding: 1%;
position: relative;
}

.edit-exam-modal-content-message {
background-color: #fefefe;
position: fixed;
z-index: 3;
left: 35%;
top: 35%;
width: 30%;
height: 22%;
overflow: hidden;
transition: display 1s;
border: 10px solid white;
border-radius: 25px;
padding-left: 10px;
}

.exam-modal-content-message {
background-color: #fefefe;
position: fixed;
z-index: 3;
left: 35%;
top: 35%;
width: 22%;
height: 22%;
overflow: hidden;
transition: display 1s;
border: 10px solid white;
border-radius: 25px;
padding-left: 10px;
}

.exam-modal-content-message-failure {
background-color: #fefefe;
position: fixed;
z-index: 3;
left: 35%;
top: 35%;
width: 35%;
height: 20%;
overflow: hidden;
transition: display 1s;
border: 10px solid white;
border-radius: 25px;
padding-left: 10px;
}

.q-inline-title {
display: inline;
margin: 0px 0px -30px 20px;
Expand Down Expand Up @@ -114,16 +35,3 @@
padding: 1%;
position: relative;
}

.return-exam-modal {
position: fixed;
z-index: 3;
left: 35%;
top: 35%;
width: 40%;
height: 33%;
overflow: hidden;
transition: display 1s;
border: 10px solid white;
border-radius: 25px;
}
5 changes: 1 addition & 4 deletions frontend/src/booking/calendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,12 +380,9 @@
if (view.name === 'agendaDay' || view.name === 'agendaWeek') {
this.options({ name: 'height', value: 'auto' })
}
if(this.$route.params.date){
if(this.$route.params.date) {
this.$refs.bookingcal.fireMethod('changeView', 'agendaDay')
this.goToDate(this.$route.params.date)
this.$router.push('/booking')
}else{
this.$router.push('/booking')
}
},
events() {
Expand Down
179 changes: 81 additions & 98 deletions frontend/src/exams/edit-exam-form-modal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,56 @@
<template v-if="showExamEditModalVisible">
<div id ="examBackground" class="edit-exam-modal-background">
<div id="examModal" v-bind:class="{ 'edit-exam-modal': !editExamSuccess || !editExamFailure,
'edit-exam-modal-content-message': editExamSuccess,
'edit- exam-modal-content-message': editExamFailure }">
<div class="edit-exam-modal-content">
<div class="modal_header" v-if="!editExamSuccess && !editExamFailure">
<div>
<b-container style="font-size:1.1rem; border:1px solid lightgrey; border-radius: 10px" class="mb-2 pb-3" fluid>
<b-row>
<b-col>
<h3>Edit Exam Information Form</h3>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Event ID:</label></b-col>
<b-col sm="6"><b-form-input id="eventIDInput" type="text" v-model=fields.event_id></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Exam Name:</label></b-col>
<b-col sm="6"><b-form-input id="examNameInput" type="text" v-model=fields.exam_name></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Exam Methods:</label></b-col>
<b-col sm="6">
<template>
<b-modal v-model="modal"
:no-close-on-backdrop="true"
hide-ok
hide-header
hide-cancel
@hidden="ok"
@ok="submit"
size="md">
<b-container style="font-size:1.1rem; border:1px solid lightgrey; border-radius: 10px" class="mb-2 pb-3" fluid>
<b-row>
<b-col>
<h3>Edit Exam Information Form</h3>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Event ID:</label></b-col>
<b-col sm="6"><b-form-input id="eventIDInput" type="text" v-model=fields.event_id></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Exam Name:</label></b-col>
<b-col sm="6"><b-form-input id="examNameInput" type="text" v-model=fields.exam_name></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Exam Methods:</label></b-col>
<b-col sm="6">
<select class="form-control" name="examMethod" v-model=selectedMethod>
<option v-for="examMethod in examMethodOptions" :value="examMethod.value">{{ examMethod.value }}</option>
<option v-for="examMethod in examMethodOptions" :value="examMethod.value">{{ examMethod.value }}</option>
</select>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Expiry Date:</label></b-col>
<b-col sm="6"><b-form-input id="expiryDate" type="date" v-model=expiryDate></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Exam Received:</label></b-col>
<b-col sm="6">
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Expiry Date:</label></b-col>
<b-col sm="6"><b-form-input id="expiryDate" type="date" v-model=expiryDate></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Exam Received:</label></b-col>
<b-col sm="6">
<select class="form-control" name="examReceived" v-model=selectedReceived>
<option v-for="received in examReceivedOptions" :value="received.value">{{ received.value }}</option>
<option v-for="received in examReceivedOptions" :value="received.value">{{ received.value }}</option>
</select>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Student Name:</label></b-col>
<b-col sm="6"><b-form-input id="studentName" type="text" v-model=fields.examinee_name></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Notes:</label></b-col>
<b-col sm="6"><b-form-input id="examNotes" type="text" v-model="fields.notes"></b-form-input></b-col>
</b-row>
</b-container>
</div>
</div>
<div>
<div class="" v-if="editExamSuccess">
<b-row>
<b-col>
<h1 style="color:green">Success!</h1>
<p style="color:green"><b>Changes have been submitted!</b></p>
<b-button @click="ok" class="btn btn-success btn-secondary">Ok</b-button>
</b-col>
</b-row>
</div>
</div>
<div>
<div v-if="editExamFailure">
<b-row>
<b-col>
<h2 style="color:red">Error!</h2>
<p style="color:red"><b>Your changes were not submitted.</b></p>
<b-button @click="ok" class="btn btn-warning btn-secondary">Ok</b-button>
</b-col>
</b-row>
</div>
</div>
<div class="button-flex-end">
<div v-if="!editExamSuccess && !editExamFailure">
<b-button @click="cancel" class="mt-3 ml-3 mr-3">Cancel</b-button>
<b-button @click="submit" class="btn-primary mt-3 ml-3 mr-3">Submit</b-button>
</div>
</div>
</div>
</div>
</div>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Student Name:</label></b-col>
<b-col sm="6"><b-form-input id="studentName" type="text" v-model=fields.examinee_name></b-form-input></b-col>
</b-row>
<b-row class="my-1">
<b-col sm="4"><label>Notes:</label></b-col>
<b-col sm="6"><b-form-input id="examNotes" type="text" v-model="fields.notes"></b-form-input></b-col>
</b-row>
</b-container>
</b-modal>
</template>

<script>
Expand All @@ -108,46 +77,44 @@
expiryDate:'',
selectedReceived: '',
examReceivedOptions: [
{ id: 0, value: 'No' },
{ id: 1, value: 'Yes' }
{ id: 0, value: 'No' },
{ id: 1, value: 'Yes' }
],
noBooking: true
}
},
computed: {
...mapState({
showExamEditModalVisible: state => state.showEditExamModalVisible,
fields: state => state.editExams,
selectedExam: state => state.selectedExam,
selectedBooking: state => state.selectedBooking,
editExamSuccess: state => state.editExamSuccess,
editExamFailure: state => state.editExamFailure
}),
},
methods: {
...mapActions([
'putExamInfo',
'putBookingInfo',
'getExams',
'getBookings' ]),
'getBookings'
]),
...mapMutations([
'toggleEditExamModalVisible',
'setEditExamSuccess',
'setEditExamFailure' ]),
'setEditExamFailure'
]),
ok() {
this.toggleEditExamModalVisible(false);
this.setEditExamSuccess(false);
this.setEditExamFailure(false);
},
cancel() {
this.toggleEditExamModalVisible(false);
this.selectedMethod = '';
this.expiryDate = '';
this.selectedReceived = '';
},
submit() {
this.setEditExamSuccess(false)
this.setEditExamFailure(false)
this.selectedExam.exam_id = this.fields.exam_id;
if (this.selectedReceived === 'No') {
this.selectedReceived = 0;
}else {
this.selectedReceived = 1;
}
console.log("method: ", this.selectedMethod);
let submit_exam = {
exam_id: this.selectedExam.exam_id,
event_id: this.fields.event_id,
Expand All @@ -163,13 +130,29 @@
this.setEditExamFailure(false)
}
this.getExams()
console.log(this.editExamSuccess)
},
ok() {
this.toggleEditExamModalVisible(false);
this.setEditExamSuccess(false);
this.setEditExamFailure(false);
},
computed: {
...mapState({
showEditExamModalVisible: state => state.showEditExamModalVisible,
fields: state => state.editExams,
selectedExam: state => state.selectedExam,
selectedBooking: state => state.selectedBooking,
editExamSuccess: state => state.editExamSuccess,
editExamFailure: state => state.editExamFailure
}),
modal: {
get() {
return this.showEditExamModalVisible
},
set(e) {
this.toggleEditExamModalVisible(e)
}
}
},
}
</script>

Expand Down
Loading

0 comments on commit f962911

Please sign in to comment.