Added period display to editor

amd/src/studyplan-editor-components.js

@@ -1362,10 +1362,13 @@ export default {
                     </drop-list>
                 </div>
                 <div class='t-studyplan-content' v-else>
-                    <!-- First paint the headings-->
+
+                    <!-- Now paint the headings column -->
                     <div class='t-studyplan-headings'>
+                        <s-studyline-header-heading></s-studyline-header-heading>
                         <t-studyline-heading  v-for="(line,lineindex) in page.studylines"
                             :key="line.id"
+                            @resize="headingresized(lineindex,$event)"
                             v-model="page.studylines[lineindex]"
                             :layers='countLineLayers(line)+1'
                             :class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
@@ -1376,6 +1379,15 @@ export default {
                     <!-- Next, paint all the cells in the scrollable -->
                     <div class="t-studyplan-scrollable" >
                         <div class="t-studyplan-timeline" :style="columns_stylerule">
+                        <!-- add period information -->
+                        <template v-for="(n,index) in (page.periods+1)">
+                            <s-studyline-header-period 
+                                v-if="index > 0"
+                                v-model="page.perioddesc[index-1]"
+                            ></s-studyline-header-period>
+                            <div class="s-studyline-header-filter"></div>
+                        </template>
+                             
                         <!-- Line by line add the items -->
                         <!-- The grid layout handles putting it in rows and columns -->
                         <template v-for="(line,lineindex) in page.studylines"
@@ -1512,9 +1524,9 @@ export default {
                 };
             },
             created() {
-                    // Listener for the signal that a new connection was made and needs to be drawn
+                // Listener for the signal that a new connection was made and needs to be drawn
-                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines
+                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines
-                    ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);
+                ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);
             },
             computed: {
                 
@@ -1524,7 +1536,7 @@ export default {
                     // All layers for this line have the first slot send an update message on layer height change.
                     // When one of those updates is received, record the height and recalculate the total height of the 
                     // header
-                    if(this.$refs.mainEl && lineid == this.value.id){
+                    if(this.$refs.main && lineid == this.value.id){
                         const items = document.querySelectorAll(
                             `.t-studyline-slot-0[data-studyline='${this.value.id}']`);
                         
@@ -1538,13 +1550,13 @@ export default {
                         });
 
                         const heightStyle=`${heightSum}px`;
-                        this.$refs.mainEl.style.height = heightStyle;
+                        this.$refs.main.style.height = heightStyle;
                     }
                 }
             },
             template: `
             <div class="t-studyline t-studyline-heading " 
-                :data-studyline="value.id" ref="mainEl"
+                :data-studyline="value.id" ref="main"
                 ><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
                 <div class="t-studyline-title">
                     <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>
@@ -1658,11 +1670,12 @@ export default {
                 const self=this;
                 if(self.type == "gradable" && self.slotindex == 1){
                     self.resizeListener = new ResizeObserver(() => {
-                        if(self.$refs.sizeElement){
+                        if(self.$refs.main){
-                            const height = self.$refs.sizeElement.getBoundingClientRect().height;
+                            const size = self.$refs.main.getBoundingClientRect();
-                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);
+                            
+                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);
                         }
-                    }).observe(self.$refs.sizeElement);
+                    }).observe(self.$refs.main);
                 }
             },
             unmounted() {
@@ -1812,7 +1825,7 @@ export default {
             },
             template: `
             <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')"
-                :data-studyline="line.id" ref="sizeElement"
+                :data-studyline="line.id" ref="main"
                 ><drag v-if="item"
                     
                     :key="item.id" 

amd/src/treestudyplan-components.js

@@ -27,6 +27,8 @@ export default {
                 noenddate: "noenddate",
             }
         });
+        // Create new eventbus for interaction between item components
+        const ItemEventBus = new Vue();
 
         Vue.component('s-studyplan-card', {
             props: {
@@ -103,5 +105,76 @@ export default {
             </b-card>
             `,
         });
+
+        /*
+        * S-STUDYLINE-HEADER-HEADING
+        * The only reasing this is not a simple empty div, is the fact that the header height
+        * needs to match that of the period headers
+        */
+        Vue.component('s-studyline-header-heading', {
+            props: {
+
+            },
+            data() {
+                return {
+                    layerHeights: {}
+                };
+            },
+            created() {
+                // Listener for the signal that a new connection was made and needs to be drawn
+                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines
+                ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);
+            },
+            computed: {
+                
+            },
+            methods: {
+                onHeaderHeightChange(newheight){
+                    console.info("Height change event to",newheight);
+                    this.$refs.main.style.height = `${newheight}px`;
+                }
+            },
+            template: `
+            <div class="s-studyline-header-heading" ref="main"></div>
+            `,
+        });
+
+        Vue.component('s-studyline-header-period', {
+            props: {
+                value: {
+                    type: Object, // dict with layer as index
+                },
+            },
+            mounted() {
+                const self=this;
+                if(self.value.period == 1){
+                    self.resizeListener = new ResizeObserver(() => {
+                        if(self.$refs.main){
+                            const size = self.$refs.main.getBoundingClientRect();
+                            ItemEventBus.$emit('headerHeightChange', size.height);
+                        }
+                    }).observe(self.$refs.main);
+                }
+            },
+            unmounted() {
+                if(this.resizeListener) {
+                    this.resizeListener.disconnect();
+                }
+            },
+            computed: {
+               
+            },
+            data() {
+                return {
+                };
+            },
+            template: `
+            <div class="s-studyline-header-period" ref="main"
+                ><abbr v-b-tooltip.hover :title="value.fullname">{{ value.shortname }}</abbr>
+            </div>
+            `,
+        });
+
+
     }
 };