Pages now have proper titles.

frontend/src/main.js

@@ -10,9 +10,11 @@ import "bootstrap-vue/dist/bootstrap-vue.css";
 import datePicker from "vue-bootstrap-datetimepicker";
 import "pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css";
 import Icon from "vue-awesome/components/Icon";
+import titleMixin from './mixins/titleMixin';
 
 Vue.config.productionTip = false;
 axios.defaults.baseURL = "/api";
+Vue.mixin(titleMixin);
 Vue.use(VueAxios, axios);
 Vue.use(BootstrapVue);
 Vue.use(datePicker);

frontend/src/mixins/titleMixin.js

@@ -0,0 +1,15 @@
+function getTitle(vm) {
+  const { title } = vm.$options;
+  if (title) {
+    return typeof title === "function" ? title.call(vm) : title;
+  }
+}
+
+export default {
+  created() {
+    const title = getTitle(this);
+    if (title) {
+      document.title = title;
+    }
+  }
+};

frontend/src/views/About.vue

@@ -25,7 +25,8 @@
 import "vue-awesome/icons/briefcase";
 import "vue-awesome/icons/home";
 export default {
-  name: "About"
+  name: "About",
+  title: "About"
 };
 </script>
 

frontend/src/views/DatabaseUnavailable.vue

@@ -27,7 +27,8 @@ import "vue-awesome/icons/database";
 import "vue-awesome/icons/unlink";
 import "vue-awesome/icons/desktop";
 export default {
-  name: "DatabaseUnavailable"
+  name: "DatabaseUnavailable",
+  title: "Database Error"
 };
 </script>
 

frontend/src/views/Home.vue

@@ -28,7 +28,8 @@ import "vue-awesome/icons/file-alt";
 import "vue-awesome/icons/th-list";
 import "vue-awesome/icons/chart-line";
 export default {
-  name: "Home"
+  name: "Home",
+  title: "Observations Database"
 };
 </script>
 

frontend/src/views/NewSite.vue

@@ -23,6 +23,7 @@ import Vue from "vue";
 
 export default {
   name: "newSite",
+  title: "New Site",
   data: function() {
     return {
       siteName: null,

frontend/src/views/NewTutor.vue

@@ -24,6 +24,7 @@
 import Vue from "vue";
 export default {
   name: "newTutor",
+  title: "New Tutor",
   data() {
     return {
       siteOptions: [],

frontend/src/views/Observation.vue

@@ -127,6 +127,7 @@ import Vue from "vue";
 
 export default {
   name: "observation",
+  title: "Observation",
   data: function() {
     return {
       observations: [

frontend/src/views/ObservationComplete.vue

@@ -12,6 +12,7 @@
 import { mapState } from "vuex";
 export default {
   name: "ObservationComplete",
+  title: "Observation Complete",
   computed: {
     ...mapState(["description", "type", "whom", "site", "tutors"])
   }

frontend/src/views/StartNew.vue

@@ -87,6 +87,7 @@ import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "startnew",
+  title: "Start New Observation",
   data() {
     return {
       siteOptions: [],

frontend/src/views/Stats.vue

@@ -67,6 +67,7 @@ var moment = require("moment");
 
 export default {
   name: "stats",
+  title: "Statistics",
   components: { StatsView },
   data: function() {
     return {

frontend/src/views/ViewObservations.vue

@@ -108,6 +108,7 @@ import "vue-awesome/icons/search";
 var moment = require("moment");
 export default {
   name: "viewobservations",
+  title: "Observations History",
   data: function() {
     return {
       startDate: moment().subtract(7, "days"),