Prettier formatting.
This commit is contained in:
parent
9925a900c6
commit
586fa70104
@ -27,17 +27,18 @@
|
|||||||
|
|
||||||
<!--suppress CssUnusedSymbol -->
|
<!--suppress CssUnusedSymbol -->
|
||||||
<style>
|
<style>
|
||||||
#app {
|
#app {
|
||||||
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
}
|
}
|
||||||
.fade-enter-active, .fade-leave-active {
|
.fade-enter-active,
|
||||||
transition: opacity .5s;
|
.fade-leave-active {
|
||||||
}
|
transition: opacity 0.5s;
|
||||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
}
|
||||||
opacity: 0;
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||||
}
|
opacity: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -13,51 +13,51 @@ const DBError = () => import("./views/DatabaseUnavailable.vue");
|
|||||||
Vue.use(Router);
|
Vue.use(Router);
|
||||||
|
|
||||||
export default new Router({
|
export default new Router({
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "home",
|
name: "home",
|
||||||
component: Home
|
component: Home
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/new",
|
path: "/new",
|
||||||
name: "startnew",
|
name: "startnew",
|
||||||
component: StartNew
|
component: StartNew
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/observation",
|
path: "/observation",
|
||||||
name: "observation",
|
name: "observation",
|
||||||
component: Observation
|
component: Observation
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/stats",
|
path: "/stats",
|
||||||
name: "stats",
|
name: "stats",
|
||||||
component: Stats
|
component: Stats
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/newsite",
|
path: "/newsite",
|
||||||
name: "newSite",
|
name: "newSite",
|
||||||
component: NewSite
|
component: NewSite
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/newtutor",
|
path: "/newtutor",
|
||||||
name: "newTutor",
|
name: "newTutor",
|
||||||
component: NewTutor
|
component: NewTutor
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/observations",
|
path: "/observations",
|
||||||
name: "observations",
|
name: "observations",
|
||||||
component: ViewObservations
|
component: ViewObservations
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/complete",
|
path: "/complete",
|
||||||
name: "complete",
|
name: "complete",
|
||||||
component: ObservationComplete
|
component: ObservationComplete
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/dberror",
|
path: "/dberror",
|
||||||
name: "dberror",
|
name: "dberror",
|
||||||
component: DBError
|
component: DBError
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
@ -23,13 +23,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import 'vue-awesome/icons/database'
|
import "vue-awesome/icons/database";
|
||||||
import 'vue-awesome/icons/ban'
|
import "vue-awesome/icons/ban";
|
||||||
export default {
|
export default {
|
||||||
name: "DatabaseUnavailable"
|
name: "DatabaseUnavailable"
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
@ -24,11 +24,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "Home"
|
name: "Home"
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
@ -19,67 +19,66 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "newSite",
|
name: "newSite",
|
||||||
data: function () {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
siteName: null,
|
siteName: null,
|
||||||
dismissSecs: 5,
|
dismissSecs: 5,
|
||||||
dismissCountDown: 0,
|
dismissCountDown: 0,
|
||||||
alertVariant: "info",
|
alertVariant: "info",
|
||||||
alertText: "",
|
alertText: "",
|
||||||
submissionPassword: ""
|
submissionPassword: ""
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
Vue.axios
|
|
||||||
.get("/site")
|
|
||||||
.then(response => {
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
if(error.response.status === 404){
|
|
||||||
this.$router.push("/dberror");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.alertText = error.response.data;
|
|
||||||
this.alertVariant = "danger";
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
countDownChanged: function (dismissCountDown) {
|
|
||||||
this.dismissCountDown = dismissCountDown;
|
|
||||||
},
|
|
||||||
showAlert: function () {
|
|
||||||
this.dismissCountDown = this.dismissSecs;
|
|
||||||
},
|
|
||||||
onSubmit: function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var form = document.getElementById("submission-form");
|
|
||||||
let axiosConfig = {
|
|
||||||
auth: {
|
|
||||||
username: "admin",
|
|
||||||
password: this.submissionPassword
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (form.checkValidity()) {
|
|
||||||
Vue.axios
|
|
||||||
.post("/site", {'name': this.siteName}, axiosConfig)
|
|
||||||
.then(response => {
|
|
||||||
this.alertVariant = "success";
|
|
||||||
this.alertText = "Successfully added " + response.data.text;
|
|
||||||
this.showAlert();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
this.alertVariant = "danger";
|
|
||||||
this.alertText = "Failed to add Site";
|
|
||||||
this.showAlert();
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
Vue.axios
|
||||||
|
.get("/site")
|
||||||
|
.then(response => {})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.response.status === 404) {
|
||||||
|
this.$router.push("/dberror");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.alertText = error.response.data;
|
||||||
|
this.alertVariant = "danger";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
countDownChanged: function(dismissCountDown) {
|
||||||
|
this.dismissCountDown = dismissCountDown;
|
||||||
|
},
|
||||||
|
showAlert: function() {
|
||||||
|
this.dismissCountDown = this.dismissSecs;
|
||||||
|
},
|
||||||
|
onSubmit: function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
var form = document.getElementById("submission-form");
|
||||||
|
let axiosConfig = {
|
||||||
|
auth: {
|
||||||
|
username: "admin",
|
||||||
|
password: this.submissionPassword
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
Vue.axios
|
||||||
|
.post("/site", { name: this.siteName }, axiosConfig)
|
||||||
|
.then(response => {
|
||||||
|
this.alertVariant = "success";
|
||||||
|
this.alertText = "Successfully added " + response.data.text;
|
||||||
|
this.showAlert();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.alertVariant = "danger";
|
||||||
|
this.alertText = "Failed to add Site";
|
||||||
|
this.showAlert();
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -43,10 +43,10 @@ export default {
|
|||||||
this.siteOptions = response.data;
|
this.siteOptions = response.data;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
if(error.response.status === 404){
|
if (error.response.status === 404) {
|
||||||
this.$router.push("/dberror");
|
this.$router.push("/dberror");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.alertText = error.response.data;
|
this.alertText = error.response.data;
|
||||||
this.alertVariant = "danger";
|
this.alertVariant = "danger";
|
||||||
});
|
});
|
||||||
@ -70,10 +70,14 @@ export default {
|
|||||||
};
|
};
|
||||||
if (form.checkValidity()) {
|
if (form.checkValidity()) {
|
||||||
Vue.axios
|
Vue.axios
|
||||||
.post("/tutor", {
|
.post(
|
||||||
'siteId': this.siteSelection,
|
"/tutor",
|
||||||
'name': this.tutorName
|
{
|
||||||
}, axiosConfig)
|
siteId: this.siteSelection,
|
||||||
|
name: this.tutorName
|
||||||
|
},
|
||||||
|
axiosConfig
|
||||||
|
)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.alertVariant = "success";
|
this.alertVariant = "success";
|
||||||
this.alertText = "Successfully added " + response.data.text;
|
this.alertText = "Successfully added " + response.data.text;
|
||||||
|
@ -105,204 +105,208 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import "bootstrap/dist/css/bootstrap.css";
|
import "bootstrap/dist/css/bootstrap.css";
|
||||||
import "bootstrap-vue/dist/bootstrap-vue.css";
|
import "bootstrap-vue/dist/bootstrap-vue.css";
|
||||||
import "vue-awesome/icons/tag";
|
import "vue-awesome/icons/tag";
|
||||||
import {mapState} from "vuex";
|
import { mapState } from "vuex";
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "observation",
|
name: "observation",
|
||||||
data: function () {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
observations: [
|
observations: [
|
||||||
{
|
{
|
||||||
type: null,
|
type: null,
|
||||||
rating: null,
|
rating: null,
|
||||||
strengths: null,
|
strengths: null,
|
||||||
improvements: null
|
improvements: null
|
||||||
}
|
|
||||||
],
|
|
||||||
totals: [0, 0, 0, 0, 0],
|
|
||||||
submitPassword: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(["description", "type", "whom", "site", "tutors"])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addAnotherObservation: function () {
|
|
||||||
this.observations.push({
|
|
||||||
type: null,
|
|
||||||
rating: null,
|
|
||||||
strengths: null,
|
|
||||||
improvements: null
|
|
||||||
});
|
|
||||||
Vue.nextTick(function () {
|
|
||||||
window.scrollTo(
|
|
||||||
0,
|
|
||||||
document.body.scrollHeight || document.documentElement.scrollHeight
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
deleteObservation: function (index) {
|
|
||||||
this.observations.splice(index, 1);
|
|
||||||
if (this.observations.length === 0) {
|
|
||||||
this.addAnotherObservation();
|
|
||||||
}
|
|
||||||
this.updateTotals();
|
|
||||||
},
|
|
||||||
changeType: function (index, ev) {
|
|
||||||
this.observations[index].type = ev;
|
|
||||||
this.updateTotals();
|
|
||||||
},
|
|
||||||
changeRating: function (index, ev) {
|
|
||||||
this.observations[index].rating = parseInt(ev);
|
|
||||||
this.updateTotals();
|
|
||||||
},
|
|
||||||
updateTotals: function () {
|
|
||||||
var iTotals = [0, 0, 0, 0, 0];
|
|
||||||
var counts = [0, 0, 0, 0, 0];
|
|
||||||
this.observations.forEach(function (element) {
|
|
||||||
if (element.rating > 0) {
|
|
||||||
switch (element.type) {
|
|
||||||
case "MONITORING":
|
|
||||||
iTotals[0] += element.rating;
|
|
||||||
counts[0] += 1;
|
|
||||||
break;
|
|
||||||
case "CONTROL":
|
|
||||||
iTotals[1] += element.rating;
|
|
||||||
counts[1] += 1;
|
|
||||||
break;
|
|
||||||
case "CONSERVATISM":
|
|
||||||
iTotals[2] += element.rating;
|
|
||||||
counts[2] += 1;
|
|
||||||
break;
|
|
||||||
case "TEAMWORK":
|
|
||||||
iTotals[3] += element.rating;
|
|
||||||
counts[3] += 1;
|
|
||||||
break;
|
|
||||||
case "KNOWLEDGE":
|
|
||||||
iTotals[4] += element.rating;
|
|
||||||
counts[4] += 1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
for (var i = 0; i < iTotals.length; i++) {
|
|
||||||
if (counts[i] !== 0) {
|
|
||||||
this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
|
|
||||||
} else {
|
|
||||||
this.totals[i] = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSubmit: function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var form = document.getElementById("submission-form");
|
|
||||||
if (form.checkValidity()) {
|
|
||||||
this.showModal();
|
|
||||||
}
|
|
||||||
form.classList.add("was-validated");
|
|
||||||
},
|
|
||||||
showModal() {
|
|
||||||
this.$refs.submissionModal.show();
|
|
||||||
},
|
|
||||||
clearPassword() {
|
|
||||||
this.submitPassword = null
|
|
||||||
},
|
|
||||||
handleOk(evt) {
|
|
||||||
// Prevent modal from closing
|
|
||||||
evt.preventDefault();
|
|
||||||
if (this.submitPassword !== null) {
|
|
||||||
this.handleSubmit()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSubmit() {
|
|
||||||
var form = document.getElementById("submission-form");
|
|
||||||
if (form.checkValidity()) {
|
|
||||||
let axiosConfig = {
|
|
||||||
auth: {
|
|
||||||
username: "admin",
|
|
||||||
password: this.submitPassword
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var self = this;
|
|
||||||
Vue.axios
|
|
||||||
.post("/observation", {
|
|
||||||
site: this.site,
|
|
||||||
tutors: this.tutors,
|
|
||||||
observed: this.description,
|
|
||||||
whom: this.whom,
|
|
||||||
type: this.type,
|
|
||||||
entries: JSON.parse(JSON.stringify(this.observations))
|
|
||||||
}, axiosConfig)
|
|
||||||
.then(function (response) {
|
|
||||||
self.$router.push("/complete");
|
|
||||||
console.log(response);
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.clearPassword();
|
|
||||||
form.classList.add("was-validated");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
totals: [0, 0, 0, 0, 0],
|
||||||
|
submitPassword: null
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["description", "type", "whom", "site", "tutors"])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addAnotherObservation: function() {
|
||||||
|
this.observations.push({
|
||||||
|
type: null,
|
||||||
|
rating: null,
|
||||||
|
strengths: null,
|
||||||
|
improvements: null
|
||||||
|
});
|
||||||
|
Vue.nextTick(function() {
|
||||||
|
window.scrollTo(
|
||||||
|
0,
|
||||||
|
document.body.scrollHeight || document.documentElement.scrollHeight
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteObservation: function(index) {
|
||||||
|
this.observations.splice(index, 1);
|
||||||
|
if (this.observations.length === 0) {
|
||||||
|
this.addAnotherObservation();
|
||||||
|
}
|
||||||
|
this.updateTotals();
|
||||||
|
},
|
||||||
|
changeType: function(index, ev) {
|
||||||
|
this.observations[index].type = ev;
|
||||||
|
this.updateTotals();
|
||||||
|
},
|
||||||
|
changeRating: function(index, ev) {
|
||||||
|
this.observations[index].rating = parseInt(ev);
|
||||||
|
this.updateTotals();
|
||||||
|
},
|
||||||
|
updateTotals: function() {
|
||||||
|
var iTotals = [0, 0, 0, 0, 0];
|
||||||
|
var counts = [0, 0, 0, 0, 0];
|
||||||
|
this.observations.forEach(function(element) {
|
||||||
|
if (element.rating > 0) {
|
||||||
|
switch (element.type) {
|
||||||
|
case "MONITORING":
|
||||||
|
iTotals[0] += element.rating;
|
||||||
|
counts[0] += 1;
|
||||||
|
break;
|
||||||
|
case "CONTROL":
|
||||||
|
iTotals[1] += element.rating;
|
||||||
|
counts[1] += 1;
|
||||||
|
break;
|
||||||
|
case "CONSERVATISM":
|
||||||
|
iTotals[2] += element.rating;
|
||||||
|
counts[2] += 1;
|
||||||
|
break;
|
||||||
|
case "TEAMWORK":
|
||||||
|
iTotals[3] += element.rating;
|
||||||
|
counts[3] += 1;
|
||||||
|
break;
|
||||||
|
case "KNOWLEDGE":
|
||||||
|
iTotals[4] += element.rating;
|
||||||
|
counts[4] += 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
for (var i = 0; i < iTotals.length; i++) {
|
||||||
|
if (counts[i] !== 0) {
|
||||||
|
this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
|
||||||
|
} else {
|
||||||
|
this.totals[i] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSubmit: function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
var form = document.getElementById("submission-form");
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
this.showModal();
|
||||||
|
}
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
},
|
||||||
|
showModal() {
|
||||||
|
this.$refs.submissionModal.show();
|
||||||
|
},
|
||||||
|
clearPassword() {
|
||||||
|
this.submitPassword = null;
|
||||||
|
},
|
||||||
|
handleOk(evt) {
|
||||||
|
// Prevent modal from closing
|
||||||
|
evt.preventDefault();
|
||||||
|
if (this.submitPassword !== null) {
|
||||||
|
this.handleSubmit();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
var form = document.getElementById("submission-form");
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
let axiosConfig = {
|
||||||
|
auth: {
|
||||||
|
username: "admin",
|
||||||
|
password: this.submitPassword
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var self = this;
|
||||||
|
Vue.axios
|
||||||
|
.post(
|
||||||
|
"/observation",
|
||||||
|
{
|
||||||
|
site: this.site,
|
||||||
|
tutors: this.tutors,
|
||||||
|
observed: this.description,
|
||||||
|
whom: this.whom,
|
||||||
|
type: this.type,
|
||||||
|
entries: JSON.parse(JSON.stringify(this.observations))
|
||||||
|
},
|
||||||
|
axiosConfig
|
||||||
|
)
|
||||||
|
.then(function(response) {
|
||||||
|
self.$router.push("/complete");
|
||||||
|
console.log(response);
|
||||||
|
})
|
||||||
|
.catch(function(error) {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.clearPassword();
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.top-buffer {
|
.top-buffer {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-buffer {
|
.bottom-buffer {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-centered-text {
|
.image-centered-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
|
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-opacity {
|
.image-opacity {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centered-image {
|
.centered-image {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 160px; /* Set the width of the sidebar */
|
width: 160px; /* Set the width of the sidebar */
|
||||||
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
|
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
|
||||||
z-index: 1; /* Stay on top */
|
z-index: 1; /* Stay on top */
|
||||||
top: 20%; /* Stay at the top */
|
top: 20%; /* Stay at the top */
|
||||||
left: 0;
|
left: 0;
|
||||||
overflow-x: hidden; /* Disable horizontal scroll */
|
overflow-x: hidden; /* Disable horizontal scroll */
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-vert-padding {
|
.sidebar-vert-padding {
|
||||||
margin-bottom: 25%;
|
margin-bottom: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 500px) {
|
@media screen and (max-height: 500px) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
top: 0; /* Stay at the top */
|
top: 0; /* Stay at the top */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -9,15 +9,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from "vuex";
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
name: "ObservationComplete",
|
name: "ObservationComplete",
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["description", "type", "whom", "site", "tutors"])
|
...mapState(["description", "type", "whom", "site", "tutors"])
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
@ -80,89 +80,91 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import "vue-awesome/icons/spinner";
|
import "vue-awesome/icons/spinner";
|
||||||
import "vue-awesome/icons/exclamation-circle";
|
import "vue-awesome/icons/exclamation-circle";
|
||||||
import {mapState, mapMutations} from "vuex";
|
import { mapState, mapMutations } from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "startnew",
|
name: "startnew",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
siteOptions: [],
|
siteOptions: [],
|
||||||
tutorOptions: [],
|
tutorOptions: [],
|
||||||
loadingTutors: false,
|
loadingTutors: false,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
errorMessage: null,
|
errorMessage: null,
|
||||||
errorStatus: null
|
errorStatus: null
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.resetStore();
|
|
||||||
Vue.axios
|
|
||||||
.get("/site")
|
|
||||||
.then(response => {
|
|
||||||
this.siteOptions = response.data;
|
|
||||||
this.loaded = true;
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
if(error.response.status === 404){
|
|
||||||
this.$router.push("/dberror");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.errorStatus = error.response.status;
|
|
||||||
this.errorMessage = error.response.data;
|
|
||||||
this.$refs.errorModal.show();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(["site", "description", "type", "tutors", "whom"])
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
site: function () {
|
|
||||||
this.loadingTutors = true;
|
|
||||||
this.tutorOptions = [];
|
|
||||||
this.tutors = [];
|
|
||||||
this.getTutors();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapMutations([
|
|
||||||
"setSite",
|
|
||||||
"setDescription",
|
|
||||||
"setType",
|
|
||||||
"setTutors",
|
|
||||||
"setWhom",
|
|
||||||
"resetStore"
|
|
||||||
]),
|
|
||||||
getTutors: function () {
|
|
||||||
if (this.site != null) {
|
|
||||||
Vue.axios.get("/site/" + this.site + "/tutors").then(response => {
|
|
||||||
this.tutorOptions = response.data;
|
|
||||||
this.loadingTutors = false;
|
|
||||||
}).catch(error => {
|
|
||||||
if(error.response.status === 404){
|
|
||||||
this.$router.push("/dberror");
|
|
||||||
return;
|
|
||||||
|
|
||||||
}
|
|
||||||
this.errorStatus = error.response.status;
|
|
||||||
this.errorMessage = error.response.data;
|
|
||||||
this.$refs.errorModal.show();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSubmit: function (e) {
|
|
||||||
console.log("submit");
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var form = document.getElementById("submission-form");
|
|
||||||
if (form.checkValidity() && this.tutors.length > 0) {
|
|
||||||
console.log("valid");
|
|
||||||
this.$router.push("/observation");
|
|
||||||
}
|
|
||||||
form.classList.add("was-validated");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.resetStore();
|
||||||
|
Vue.axios
|
||||||
|
.get("/site")
|
||||||
|
.then(response => {
|
||||||
|
this.siteOptions = response.data;
|
||||||
|
this.loaded = true;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.response.status === 404) {
|
||||||
|
this.$router.push("/dberror");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.errorStatus = error.response.status;
|
||||||
|
this.errorMessage = error.response.data;
|
||||||
|
this.$refs.errorModal.show();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["site", "description", "type", "tutors", "whom"])
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
site: function() {
|
||||||
|
this.loadingTutors = true;
|
||||||
|
this.tutorOptions = [];
|
||||||
|
this.tutors = [];
|
||||||
|
this.getTutors();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
"setSite",
|
||||||
|
"setDescription",
|
||||||
|
"setType",
|
||||||
|
"setTutors",
|
||||||
|
"setWhom",
|
||||||
|
"resetStore"
|
||||||
|
]),
|
||||||
|
getTutors: function() {
|
||||||
|
if (this.site != null) {
|
||||||
|
Vue.axios
|
||||||
|
.get("/site/" + this.site + "/tutors")
|
||||||
|
.then(response => {
|
||||||
|
this.tutorOptions = response.data;
|
||||||
|
this.loadingTutors = false;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.response.status === 404) {
|
||||||
|
this.$router.push("/dberror");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.errorStatus = error.response.status;
|
||||||
|
this.errorMessage = error.response.data;
|
||||||
|
this.$refs.errorModal.show();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSubmit: function(e) {
|
||||||
|
console.log("submit");
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
var form = document.getElementById("submission-form");
|
||||||
|
if (form.checkValidity() && this.tutors.length > 0) {
|
||||||
|
console.log("valid");
|
||||||
|
this.$router.push("/observation");
|
||||||
|
}
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user