Merge branch 'mkozhukh-master'

.gitignore

@@ -3,3 +3,11 @@ node_modules/
 dist/
 npm-debug.log
 yarn-error.log
+
+# IDE files #
+nbproject
+.~lock.*
+.buildpath
+.idea
+.project
+.settings

src/App.vue

@@ -6,23 +6,23 @@
           <h2>{{selectedTask.text}}</h2>
           <span><b>ID: </b>{{selectedTask.id}}</span><br/>
           <span><b>Progress: </b>{{selectedTask.progress|toPercent}}%</span><br/>
-          <span><b>Start Date: </b>{{selectedTask.start_date}}</span><br/>
-          <span><b>End Date: </b>{{selectedTask.end_date}}</span><br/>
+          <span><b>Start Date: </b>{{selectedTask.start_date|niceDate}}</span><br/>
+          <span><b>End Date: </b>{{selectedTask.end_date|niceDate}}</span><br/>
+        </div>
+        <div v-else class="select-task-prompt">
+          <h2>Click any task</h2>
         </div>
-		<div v-else class="select-task-prompt">
-			<h2>Click any task</h2>
-		</div>
       </div>
       <ul class="gantt-messages">
-        <li class="gantt-message" v-for="message in lastMessages">{{message}}</li>
+        <li class="gantt-message" v-for="message in messages">{{message}}</li>
       </ul>
     </div>
-    <gantt class="left-container" :gantt-tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate" @task-selected="selectTask"></gantt>
+    <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate" @task-selected="selectTask"></gantt>
   </div>
 </template>
 
 <script>
-import Gantt from './components/Gantt.vue';
+import Gantt from './components/Gantt.vue'
 
 export default {
   name: 'app',
@@ -38,42 +38,41 @@ export default {
           {id: 1, source: 1, target: 2, type: '0'}
         ]
       },
-	  selectedTask: null,
+    selectedTask: null,
       messages: []
     }
   },
   filters: {
-    toPercent: function (val) {
-      if(!val) return "0"
-      return Math.round((+val)*100)
-    }
-  },
-  computed: {
-    lastMessages: function () {
-      return this.messages.slice().reverse()
+    toPercent (val) {
+      if(!val) return '0'
+      return Math.round((+val) * 100)
+    },
+    niceDate (obj){
+      return `${obj.getFullYear()} / ${obj.getMonth()} / ${obj.getDate()}`
     }
   },
   methods: {
-    selectTask: function(task){
+    selectTask (task) {
       this.selectedTask = task
     },
   
-    addMessage: function (message) {
-      this.messages.push(message)
+    addMessage (message) {
+      this.messages.unshift(message)
       if(this.messages.length > 40) {
-        this.messages.shift()
+        this.messages.pop()
       }
     },
 
-    logTaskUpdate: function (id, mode, task) {
-      var message = "Task " + mode + ": "  + id + (task && task.text ? " (" + task.text + ")": "")
+    logTaskUpdate (id, mode, task) {
+      let text = (task && task.text ? ` (${task.text})`: '')
+      let message = `Task ${mode}: ${id} ${text}`
       this.addMessage(message)
     },
 
-    logLinkUpdate: function (id, mode, link) {
-      var message = "Link " + mode + ": "  + id
+    logLinkUpdate (id, mode, link) {
+      let message = `Link ${mode}: ${id}`
       if(link){
-        message += " ( source: " + link.source + ", target: " + link.target + " )"
+        message += ` ( source: ${link.source}, target: ${link.target} )`
       }
       this.addMessage(message)
     }
@@ -95,14 +94,18 @@ export default {
 
   .left-container {
     overflow: hidden;
+    position: relative;
     height: 100%;
   }
 
   .right-container {
-	border-right: 1px solid #cecece;
+    border-right: 1px solid #cecece;
     float: right;
     height: 100%;
     width: 340px;
+    box-shadow: 0 0 5px 2px #aaa;
+    position: relative;
+    z-index:2;
   }
 
   .gantt-messages {
@@ -124,7 +127,7 @@ export default {
   }
 
   .gantt-selected-info {
-	border-bottom: 1px solid #cecece;
+  border-bottom: 1px solid #cecece;
     box-sizing: border-box;
     font-family: Geneva, Arial, Helvetica, sans-serif;
     height: 50%;

src/components/Gantt.vue

@@ -4,94 +4,58 @@
 
 <script>
 import 'dhtmlx-gantt'
+
 export default {
   name: 'gantt',
   props: {
-    ganttTasks: {
+    tasks: {
       type: Object,
-      default: function () {
-        return {data: [], links: []};
+      default () {
+        return {data: [], links: []}
       }
     }
   },
- data: function () {
-    return {
-      tasks: this.ganttTasks
-    }
-  },
 
-  mounted: function () {
-    var _this = this
+  mounted () {
 
-    gantt.attachEvent('onTaskSelected', function(id){
-      var task = gantt.getTask(id)
-      task = _this.serializeTask(task)
-      _this.$emit('task-selected', task)
-    });
+    gantt.attachEvent('onTaskSelected', (id) => {
+      let task = gantt.getTask(id)
+      this.$emit('task-selected', task)
+    })
 
-    gantt.attachEvent('onAfterTaskAdd', function(id, task){
-      task = _this.serializeTask(task)
-      _this.$emit('task-updated', id, 'inserted', task)
+    gantt.attachEvent('onAfterTaskAdd', (id, task) => {
+      this.$emit('task-updated', id, 'inserted', task)
+      task.progress = task.progress || 0
       if(gantt.getSelectedId() == id) {
-        _this.$emit('task-selected', task)
+        this.$emit('task-selected', task)
       }
-    });
+    })
 
-    gantt.attachEvent('onAfterTaskUpdate', function(id, task){
-      task = _this.serializeTask(task)
-      _this.$emit('task-updated', id, 'updated', task)
-      if(gantt.getSelectedId() == id) {
-        _this.$emit('task-selected', task)
-      }
-    });
+    gantt.attachEvent('onAfterTaskUpdate', (id, task) => {
+      this.$emit('task-updated', id, 'updated', task)
+    })
 
-    gantt.attachEvent('onAfterTaskDelete', function(id){
-      _this.$emit('task-updated', id, 'deleted')
+    gantt.attachEvent('onAfterTaskDelete', (id) => {
+      this.$emit('task-updated', id, 'deleted')
       if(!gantt.getSelectedId()) {
-        _this.$emit('task-selected', null)
+        this.$emit('task-selected', null)
       }
-    });
-
-    gantt.attachEvent('onAfterLinkAdd', function(id, link){
-      link = _this.serializeLink(link)
-      _this.$emit('link-updated', id, 'inserted', link)
-    });
+    })
 
-    gantt.attachEvent('onAfterLinkUpdate', function(id, link){
-      link = _this.serializeLink(link)
-      _this.$emit('link-updated', id, 'updated', link)
-    });
+    gantt.attachEvent('onAfterLinkAdd', (id, link) => {
+      this.$emit('link-updated', id, 'inserted', link)
+    })
 
-    gantt.attachEvent('onAfterLinkDelete', function(id, link){
-      link = _this.serializeLink(link)
-      _this.$emit('link-updated', id, 'deleted')
-    });
-  
-    gantt.init(this.$refs.gantt)
-    gantt.parse(this.tasks)
-  },
-  
-  methods: {
-    dateToStr: gantt.date.date_to_str("%F %j, %Y"),
+    gantt.attachEvent('onAfterLinkUpdate', (id, link) => {
+      this.$emit('link-updated', id, 'updated', link)
+    })
 
-    serializeTask: function(task){
-      return {
-        id: task.id,
-        text: task.text,
-        progress: task.progress,
-        start_date: this.dateToStr(task.start_date),
-        end_date: this.dateToStr(task.end_date)
-      }
-    },
+    gantt.attachEvent('onAfterLinkDelete', (id, link) => {
+      this.$emit('link-updated', id, 'deleted')
+    })
 
-    serializeLink: function(link){
-      return {
-        id: link.id,
-        source: link.source,
-        target: link.target,
-        type: link.type
-      }
-    }
+    gantt.init(this.$refs.gantt)
+    gantt.parse(this.$props.tasks)
   }
 }
 </script>