Fix style according to eslint with activated airbnb style

Author: pascalseeland

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: '18.13.0'
+          node-version: '18'
 
       - name: npm install, build
         env: 

viplab-standalone-frontend-vue/.eslintrc

@@ -21,5 +21,6 @@
          "vue"
     ],
     "rules": {
+         "max-len" :"off"
     }
 }

viplab-standalone-frontend-vue/src/App.vue

@@ -36,6 +36,7 @@
 <script>
 import base64url from 'base64url';
 
+// eslint-disable-next-line global-require
 global.Buffer = global.Buffer || require('buffer').Buffer;
 // const Base64 = require('js-base64');
 
@@ -109,15 +110,11 @@ export default {
       // this.token = appDiv.getAttribute("data-token");
 
       // if there are parameters in parts, set var accordingly for rendering of button
-      for (const file in this.json.files) {
-        for (const part in this.json.files[file].parts) {
-          const parti = this.json.files[file].parts[part];
-          if (parti.access == 'template' && parti.parameters) {
-            this.isPartParameters++;
-            break;
-          }
+      Object.values(this.json.files).forEach((file) => {
+        if (Object.values(file.parts).find((part) => part.access === 'template' && part.parameters)) {
+          this.isPartParameters += 1;
         }
-      }
+      });
     },
   },
   created() {

viplab-standalone-frontend-vue/src/components/AnsiOutput.vue

@@ -33,15 +33,15 @@ export default {
     };
   },
   watch: {
-    content(concat_content, old_content) {
-      if (concat_content === '') {
+    content(concatContent, oldContent) {
+      if (concatContent === '') {
         // should never come to that branch; instead component is mounted again
         // when content resets
         console.log('Clearing out content of ansioutput');
         this.lines = [];
       } else {
-        const new_content = concat_content.substring(old_content.length);
-        this.renderContent(new_content);
+        const newContent = concatContent.substring(oldContent.length);
+        this.renderContent(newContent);
       }
     },
   },
@@ -51,6 +51,7 @@ export default {
     this.$el.scrollTop = this.$el.scrollHeight
     }, */
   beforeMount() {
+    // eslint-disable-next-line new-cap
     this.ansi = new AU.default();
   },
   mounted() {
@@ -60,12 +61,12 @@ export default {
   methods: {
     renderContent(content) {
       // console.log(this.lines.length);
-      const new_lines = content.split(/\r?\n/);
-      for (const line_idx in new_lines) {
+      const newLines = content.split(/\r?\n/);
+      Object.values(newLines).forEach((newLine) => {
         this.lines.push(`${this.ansi.ansi_to_html(
-          new_lines[line_idx],
+          newLine,
         )}<br/>`);
-      }
+      });
     },
   },
 };

viplab-standalone-frontend-vue/src/components/CheckBox.vue

@@ -34,7 +34,7 @@ extend('required', {
 
 extend('checkboxOneOf', (value) => {
   // console.log("checkbox oneof " + value);
-  if (value.length > 0 && value.length == 1) {
+  if (value.length > 0 && value.length === 1) {
     return true;
   }
   return 'Only choose one!';
@@ -68,16 +68,10 @@ export default {
       },
     },
     onlyone() {
-      if (this.checkbox.validation === 'onlyone') {
-        return true;
-      }
-      return false;
+      return this.checkbox.validation === 'onlyone';
     },
     minone() {
-      if (this.checkbox.validation === 'minone') {
-        return true;
-      }
-      return false;
+      return this.checkbox.validation === 'minone';
     },
   },
   data() {

viplab-standalone-frontend-vue/src/components/DropDown.vue

@@ -94,16 +94,10 @@ export default {
       },
     },
     onlyone() {
-      if (this.dropitem.validation === 'onlyone') {
-        return true;
-      }
-      return false;
+      return this.dropitem.validation === 'onlyone';
     },
     minone() {
-      if (this.dropitem.validation === 'minone') {
-        return true;
-      }
-      return false;
+      return this.dropitem.validation === 'minone';
     },
   },
   data() {
@@ -115,7 +109,7 @@ export default {
     /** get all values of an item that are not disabled */
     itemWithoutDisabled(item) {
       const array = [];
-      for (let i = 0; i < item.options.length; i++) {
+      for (let i = 0; i < item.options.length; i += 1) {
         if (!item.options[i].disabled) {
           array.push(item.options[i]);
         }
@@ -124,7 +118,7 @@ export default {
     },
     itemsDisabled(item) {
       const array = [];
-      for (let i = 0; i < item.options.length; i++) {
+      for (let i = 0; i < item.options.length; i += 1) {
         if (item.options[i].disabled) {
           array.push(item.options[i]);
         }

viplab-standalone-frontend-vue/src/components/Parameters.vue

@@ -64,6 +64,7 @@ export default {
     InputField,
     AceEditorComponent,
   },
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'Parameters',
   props: {
     parameters: Array,

viplab-standalone-frontend-vue/src/components/ToggleButton.vue

@@ -25,7 +25,7 @@ extend('required', {
 
 extend('toggleOneOf', (value) => {
   // console.log("toggle oneof " + value);
-  if (value.length > 0 && value.length == 1) {
+  if (value.length > 0 && value.length === 1) {
     return true;
   }
   return 'Only choose one!';

viplab-standalone-frontend-vue/src/components/csv-plots/CsvPlot.vue

@@ -109,11 +109,11 @@ export default {
       // map the row-values to the header to create header:value type entries
       const data = rows.map((row) => {
         const values = row.split(delimiter);
-        const element = headers.reduce((object, header, index) => {
-          object[header] = values[index];
-          return object;
+        return headers.reduce((object, header, index) => {
+          const newObject = object;
+          newObject[header] = values[index];
+          return newObject;
         }, {});
-        return element;
       });
       this.processData(data);
     },
@@ -123,9 +123,9 @@ export default {
       // create an object, where there is an array for each column name
       const obj = [];
       const keys = Object.keys(data[0]);
-      keys.forEach((element) => obj[element] = []);
+      keys.forEach((element) => { obj[element] = []; });
       // fill the object with the data depending on the keys (column names)
-      for (let i = 0; i < data.length; i++) {
+      for (let i = 0; i < data.length; i *= 1) {
         const row = data[i];
         keys.forEach((element) => obj[element].push(row[element]));
       }
@@ -139,28 +139,28 @@ export default {
 
       // multiply x-axis by factor if given
       if (this.labelProp.factor !== undefined) {
-        for (let j = 0; j < obj[(xkey)].length; j++) {
-          obj[(xkey)][j] = obj[(xkey)][j] * this.labelProp.factor;
+        for (let j = 0; j < obj[(xkey)].length; j += 1) {
+          obj[(xkey)][j] *= this.labelProp.factor;
         }
       }
-      const xkey_ind = keys.indexOf(xkey);
-      if (xkey_ind > -1) {
-        keys.splice(xkey_ind, 1);
+      const xKeyIndex = keys.indexOf(xkey);
+      if (xKeyIndex > -1) {
+        keys.splice(xKeyIndex, 1);
       }
       // create traces to be rendered later; the first column is always x; the others are ys
-      for (let k = 0; k < keys.length; k++) {
+      for (let k = 0; k < keys.length; k += 1) {
         if (this.datasetProp.key) {
           // multiply y-axis by factor if given
           if (keys[k] === this.datasetProp.key || this.datasetProp.key.includes(keys[k])) {
             if (this.datasetProp.factor !== undefined) {
-              for (let j = 0; j < obj[(xkey)].length; j++) {
-                obj[(keys[k])][j] = obj[(keys[k])][j] * this.datasetProp.factor;
+              for (let j = 0; j < obj[(xkey)].length; j += 1) {
+                obj[(keys[k])][j] *= this.datasetProp.factor;
               }
             }
             const trace = {
               x: obj[(xkey)],
               y: obj[(keys[k])],
-              name: (typeof this.datasetProp.key == 'string') ? this.datasetProp.label : keys[k],
+              name: (typeof this.datasetProp.key === 'string') ? this.datasetProp.label : keys[k],
             };
             traces.push(trace);
           }
@@ -179,9 +179,9 @@ export default {
       let title = 'Graph';
       if (this.areUrlsProp) {
         let startIndex = this.csvs[this.fileIndex].lastIndexOf('/');
-        startIndex = (startIndex != -1) ? startIndex : 0;
+        startIndex = (startIndex !== -1) ? startIndex : 0;
         let endIndex = this.csvs[this.fileIndex].lastIndexOf('?');
-        endIndex = (endIndex != -1) ? endIndex : this.csvs[this.fileIndex].length;
+        endIndex = (endIndex !== -1) ? endIndex : this.csvs[this.fileIndex].length;
         title = this.csvs[this.fileIndex].substring(startIndex + 1, endIndex);
       }
 

viplab-standalone-frontend-vue/src/components/viplab-plots/gridplot/DataSet.js

@@ -1,5 +1,5 @@
-export function DataSet(w, h, xmin, xmax, ymin, ymax, time, label) {
-  this.data = new Array();
+export default function DataSet(w, h, xmin, xmax, ymin, ymax, time, label) {
+  this.data = [];
   this.width = w;
   this.height = h;
   this.xmin = xmin;
@@ -10,57 +10,46 @@ export function DataSet(w, h, xmin, xmax, ymin, ymax, time, label) {
   this.label = label;
 
   this.getWidth = function () {
-    // console.log(this.width);
     return this.width;
   };
 
   this.getHeight = function () {
-    // console.log(this.height);
     return this.height;
   };
 
   this.getData = function () {
-    // console.log(this.data);
     return this.data;
   };
 
   this.getXMin = function () {
-    // console.log(this.xmin);
     return this.xmin;
   };
 
   this.getXMax = function () {
-    // console.log(this.xmax);
     return this.xmax;
   };
 
   this.getYMin = function () {
-    // console.log(this.xmin);
-    return this.xmin;
+    return this.ymin;
   };
 
   this.getYMax = function () {
-    // console.log(this.xmax);
-    return this.xmax;
+    return this.ymax;
   };
 
   this.getXMin = function () {
-    // console.log(this.xmin);
     return this.xmin;
   };
 
   this.getTime = function () {
-    // console.log(this.time);
     return this.time;
   };
 
   this.getXMin = function () {
-    // console.log(this.xmin);
     return this.xmin;
   };
 
   this.getLabel = function () {
-    // console.log(this.label);
     return this.label;
   };
 }

viplab-standalone-frontend-vue/src/components/viplab-plots/gridplot/GridPlot.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { Plotly } from '@rleys/vue-plotly-basic';
-import * as Parser from '../parse.js';
+import Parse from '../parse';
 
 export default {
   name: 'GridPlot',
@@ -47,17 +47,17 @@ export default {
     };
   },
   mounted() {
-    const parseTest = new Parser.Parse(this.plotData);
+    const parseTest = new Parse(this.plotData);
     const testJson = parseTest.parseFileToJson();
     this.datasetList = parseTest.parseValues(testJson);
     this.minColor = parseTest.getMinColor();
     this.maxColor = parseTest.getMaxColor();
 
-    for (var i = 0; i < this.datasetList[0].getWidth(); i++) {
+    for (let i = 0; i < this.datasetList[0].getWidth(); i += 1) {
       this.xArray.push(this.datasetList[0].getXMin() * 1 + (i * ((this.datasetList[0].getXMax() - this.datasetList[0].getXMin()) / this.datasetList[0].getWidth())));
     }
 
-    for (i = 0; i < this.datasetList[0].getHeight(); i++) {
+    for (let i = 0; i < this.datasetList[0].getHeight(); i += 1) {
       this.yArray.push(this.datasetList[0].getYMin() * 1 + (i * ((this.datasetList[0].getYMax() - this.datasetList[0].getYMin()) / this.datasetList[0].getHeight())));
     }
 
@@ -102,26 +102,26 @@ export default {
           y: this.yArray,
           type: 'heatmap',
           hoverongaps: false,
-          xgap:	0.5,
-          ygap:	0.5,
+          xgap: 0.5,
+          ygap: 0.5,
           colorscale: [[0, this.minColor[0]], [1, this.maxColor[0]]],
         },
       ];
     },
     create3dKaestchen() {
-      const xScatterArray = new Array();
-      const yScatterArray = new Array();
+      const xScatterArray = [];
+      const yScatterArray = [];
 
-      for (var j = 0; j < this.datasetList[0].getData()[0].length; j++) {
+      for (let j = 0; j < this.datasetList[0].getData()[0].length; j += 1) {
         Array.prototype.push.apply(xScatterArray, this.xArray);
       }
 
-      for (j = 0; j < this.datasetList[0].getData().length; j++) {
+      for (let j = 0; j < this.datasetList[0].getData().length; j += 1) {
         Array.prototype.push.apply(yScatterArray, this.yArray);
       }
 
-      let zScatterArray = new Array();
-      for (let i = 0; i < this.datasetList[0].getData().length; i++) {
+      let zScatterArray = [];
+      for (let i = 0; i < this.datasetList[0].getData().length; i += 1) {
         zScatterArray = zScatterArray.concat(this.datasetList[0].getData()[i]);
       }
       yScatterArray.sort((a, b) => a - b);