Created edit-booking component and related changes

frontend/package.json

@@ -31,7 +31,7 @@
     "popper.js": "^1.14.4",
     "socket.io-client": "^2.1.1",
     "v-dragged": "0.0.5",
-    "vue": "^2.5.17",
+    "vue": "^2.5.22",
     "vue-full-calendar": "^2.7.0",
     "vue-router": "^3.0.2",
     "vue-video-player": "^5.0.2",

frontend/src/App.vue

@@ -15,20 +15,20 @@ limitations under the License.*/
 <template>
   <div id="App">
     <Header />
-    <div id="fixed-viewport-app" :style="{width:`${x}px`, height:`${y}px`,}">
+    <div :style="style">
       <Alert />
       <ExamAlert />
       <Nav v-if="isLoggedIn" />
       <Socket v-show="1===2" />
       <Feedback />
       <Response />
     </div>
-    <Footer />
+      <Footer />
   </div>
 </template>
 
 <script>
-  import { mapState, mapMutations, mapActions } from 'vuex'
+  import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
   import Alert from './alert'
   import ExamAlert from './exam-alert'
   import Header from './layout/header'
@@ -40,37 +40,19 @@ limitations under the License.*/
   export default {
     name: 'App',
     components: { Nav, Alert, ExamAlert, Header, Socket, Footer, Feedback, Response },
-    created() {
-      this.getSize()
-    },
-    mounted() {
-      this.$nextTick(function() {
-        window.addEventListener('resize', this.getSize)
-      })
-    },
     computed: {
-      ...mapState(['isLoggedIn']),
-    },
-    data() {
-      return {
-        x: 0,
-        y: 0,
+      ...mapState(['isLoggedIn', 'showSchedulingIndicator']),
+      style() {
+        let output = {marginTop: 72+'px', width: '100%', overflowY: 'auto'}
+        if (this.showSchedulingIndicator) {
+          output['marginBottom'] = 100+'px'
+        }
+        if (!this.showSchedulingIndicator) {
+          output['marginBottom'] = 40+'px'
+        }
+        return output
       }
     },
-    methods: {
-      ...mapMutations(['updateViewportSizes']),
-      getSize() {
-        this.x = window.innerWidth
-        this.y = window.innerHeight - 110
-        this.updateStore()
-      },
-      updateStore() {
-        let x =  parseInt(this.x)
-        let y = parseInt(this.y)
-        this.updateViewportSizes({w: x})
-        this.updateViewportSizes({h: y})
-      }
-    }
   }
 </script>
 
@@ -100,8 +82,12 @@ limitations under the License.*/
     display: block;
     overflow-y: auto;
     overflow-x: auto;
+    background-color: blue;
     margin: 0px;
     padding: 0px;
+    position: absolute;
+    left: 0px;
+    top: 72px;
   }
   .view-screen-title {
     font-family: "Helvetica Neue",Arial,sans-serif;

frontend/src/admin.vue

@@ -32,16 +32,17 @@
 <script>
   import Vue from 'vue'
 
-  import { mapState, mapActions, mapMutations } from 'vuex'
+  import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
   export default {
     name: "Admin",
     created() {
       this.loginIframe()
     },
     computed: {
-      ...mapState(['viewPortSizes', 'iframeLogedIn', 'adminNavigation']),
+      ...mapGetters(['view_port']),
+      ...mapState(['iframeLogedIn', 'adminNavigation']),
       frameHeight() {
-        return this.viewPortSizes.h - 80
+        return this.view_port.h - 80
       },
       frameStyle() {
         return {

frontend/src/assets/css/q.css

@@ -70,7 +70,7 @@
 }
 
 .q-calendar-margins {
-  margin-top: -35px;
+  margin-top: -15px;
   margin-left: 15px;
   margin-right: 15px;
   padding: 0px;

frontend/src/booking/booking-modal.vue

@@ -8,6 +8,7 @@
            lazy
            @cancel="cancel"
            @ok="postEvent"
+           @show="show"
            hide-header
            size="md">
     <div v-if="showModal">
@@ -103,6 +104,9 @@
         this.toggleSchedulingIndicator(true)
         this.setClickedDate(null)
       },
+      show() {
+        this.selectedInvigilator = null
+      },
       postEvent(e) {
         e.preventDefault()
         let start = new moment(this.date.start).utc()