Commit 2d828bcb authored by Lasse Overgaard Møldrup's avatar Lasse Overgaard Møldrup
Browse files

Merge branch 'feature/backend-integration' into 'develop'

Feature/backend integration

See merge request !24
parents 225e6788 c87445d6
Pipeline #52477 passed with stages
in 2 minutes and 52 seconds
......@@ -6,8 +6,8 @@ hostName = '0.0.0.0'
serverPort = 1337
db = {
'katrine-marie' : '{"left":[],"right":[{"height":400,"blocks":[{"type":"Calendar","width":100}]}]}',
'isaac' : '{"left":[],"right":[{"height":400,"blocks":[{"type":"Feed","width":100}]}]}'
'katrine-marie' : '[{"height":400,"blocks":[{"type":"Calendar","width":75},{"type":"ActiveCourses","width":25}]},{"height":250,"blocks":[{"type":"Deadlines","width":100}]},{"height":300,"blocks":[{"type":"Feed","width":50},{"type":"Mail","width":25},{"type":"Mail","width":25}]}]',
'isaac' : '[{"height":400,"blocks":[{"type":"Calendar","width":75},{"type":"ActiveCourses","width":25}]},{"height":250,"blocks":[{"type":"Deadlines","width":100}]},{"height":300,"blocks":[{"type":"Feed","width":50},{"type":"Mail","width":25},{"type":"Mail","width":25}]}]'
}
class MyServer(BaseHTTPRequestHandler):
......
<template>
<div class="home">
<div id="grid">
<div @mousedown="resizeVertical($event, rowIndex)" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
<div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
@dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
<span class="col-preview">
<component :is="previewType"></component>
</span>
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" :id="rowIndex+','+colIndex" class="col" v-show="!isDragged(rowIndex, colIndex)"
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" v-show="!isDragged(rowIndex, colIndex)"
v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
<component :is="colBlock.type" :row="rowIndex" :col="colIndex"></component>
<button class="hidden-row-item pencil">
......@@ -54,7 +54,10 @@ const maxBlocks = 3;
export default {
name: 'Home',
deleting: false,
created() {
this.loadLayout("isaac");
},
data() {
return {
......@@ -78,7 +81,9 @@ export default {
prevWinWidth: 1000,
draggedBlock: null,
activePreview: null,
dragEnabled: true
dragEnabled: true,
deleting: false,
resizing: false
}
},
......@@ -88,6 +93,7 @@ export default {
height: 300,
blocks: [{ type: "ActiveCourses", width: 30 },{ type: "Feed", width: 70 }]
});
this.saveLayout("isaac");
},
blurRow(rowIndex) {
......@@ -141,6 +147,7 @@ export default {
removeRow(rowIndex) {
this.cancelRemoveRow(rowIndex);
this.layout.splice(rowIndex, 1);
this.saveLayout("isaac");
},
cancelRemoveRow(rowIndex) {
......@@ -217,6 +224,7 @@ export default {
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("no-select");
this.dragEnabled = false;
this.resizing = true;
},
resizeVertical(event, index) {
......@@ -239,6 +247,14 @@ export default {
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("no-select");
this.dragEnabled = false;
this.resizing = true;
},
saveAndStopResizing() {
if(this.resizing) {
this.saveLayout("isaac");
}
this.resizing = false;
},
eventRemover() {
......@@ -420,6 +436,7 @@ export default {
}
this.draggedBlock = null;
this.saveLayout("isaac");
},
hidePreview() {
......@@ -438,13 +455,9 @@ export default {
saveLayout(id) {
const type = "save"
const payload = "id=" + id + "&" + "data=" + JSON.stringify(this.$data);
const payload = "id=" + id + "&" + "data=" + JSON.stringify(this.layout);
const request = sendServerRequest(type, payload);
request.onload = () => {
const response = request.response;
console.log(response);
}
sendServerRequest(type, payload);
},
loadLayout(id) {
......@@ -454,7 +467,10 @@ export default {
const request = sendServerRequest(type, payload);
request.onload = () => {
const response = request.response;
Object.assign(this.$data, JSON.parse(response));
// Resetting layout to get Object.assign to work
this.layout = [];
Object.assign(this.layout, JSON.parse(response));
}
},
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment