✨ Site > Versions > Add content

package-lock.json

@@ -4998,6 +4998,12 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+      "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8=",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

package.json

@@ -65,6 +65,7 @@
     "html-entities": "^1.2.1",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
+    "moment": "^2.18.1",
     "npm-run-all": "^4.0.2",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",

site/src/components/version/script.js

@@ -1,3 +1,5 @@
+import moment from 'moment'
+
 export default
 {
     name: 'version',
@@ -5,5 +7,119 @@ export default
     props:
     {
         content: { type: Object }
+    },
+
+    data()
+    {
+        return {
+            fromNow: ''
+        }
+    },
+
+    computed:
+    {
+        isActive()
+        {
+            return this.$store.state.files.currentVersion.date === this.content.date
+        },
+
+        date()
+        {
+            return this.moment.format('hh:mm')
+        },
+
+        modifiedLines()
+        {
+            let modifiedLines = this.content.addedLines.length + this.content.removedLines.length
+
+            if(modifiedLines === 0)
+            {
+                modifiedLines = (this.content.content.match(/\n/g) || []).length + 1
+            }
+
+            return modifiedLines
+        },
+
+        repartition()
+        {
+            const repartition = {}
+            repartition.added = 0
+            repartition.removed = 0
+
+            const modifiedLines = this.content.addedLines.length + this.content.removedLines.length
+
+            // New file
+            if(modifiedLines === 0)
+            {
+                const lineBreaks = (this.content.content.match(/\n/g) || []).length + 1
+
+                repartition.added = lineBreaks < 10 ? lineBreaks : 10
+                repartition.removed = 0
+            }
+
+            // Less than 10 modified lines
+            else if(modifiedLines <= 10)
+            {
+                repartition.added = this.content.addedLines.length
+                repartition.removed = this.content.removedLines.length
+            }
+
+            // More than 10 modified lines
+            else
+            {
+                // Only added
+                if(this.content.addedLines.length === modifiedLines)
+                {
+                    repartition.added = 10
+                    repartition.removed = 0
+                }
+
+                // Only removed lines
+                else if(this.content.removedLines.length === modifiedLines)
+                {
+                    repartition.added = 0
+                    repartition.removed = 10
+                }
+
+                // else
+                else
+                {
+                    let addedRatio = this.content.addedLines.length / modifiedLines
+                    let removedRatio = this.content.removedLines.length / modifiedLines
+
+                    if(addedRatio < 0.1)
+                    {
+                        addedRatio = 0.1
+                        removedRatio = 0.9
+                    }
+                    else if(removedRatio < 0.1)
+                    {
+                        addedRatio = 0.9
+                        removedRatio = 0.1
+                    }
+
+                    repartition.added = Math.round(addedRatio * 10)
+                    repartition.removed = 10 - repartition.added
+                }
+            }
+
+            return repartition
+        }
+    },
+
+    created()
+    {
+        this.moment = moment(this.content.date)
+        this.fromNow = this.moment.fromNow()
+
+        this.fromNowInterval = window.setInterval(() =>
+        {
+            this.fromNow = this.moment.fromNow()
+        }, 5000)
+    },
+
+    destroyed()
+    {
+        window.clearTimeout(this.fromNowInterval)
     }
 }

site/src/components/version/template.html

@@ -1,3 +1,14 @@
-<a href="#" class="version">
-    {{ content.date }}
+<a href="#" class="version" :class="[isActive ? 'active' : '']">
+    <div class="date">
+        {{ date }}
+    </div>
+    <div class="from-now">
+        {{ fromNow }}
+    </div>
+    <div class="repartition">
+        <span v-for="added in repartition.added">1</span><span v-for="removed in repartition.removed">0</span>
+    </div>
+    <div class="modified-lines">
+        {{ modifiedLines }}
+    </div>
 </a>