From 305e4bb17f5404e9dafaa7ba7917831b843702c7 Mon Sep 17 00:00:00 2001
From: Henry Whitaker <henrywhitaker3@outlook.com>
Date: Sat, 10 Apr 2021 11:22:37 +0100
Subject: [PATCH] Order/location of columns is now variable

---
 app/Casts/CommaSeparatedArrayCast.php         | 51 +++++++++++++
 app/Helpers/SettingsHelper.php                |  3 +
 app/Setting.php                               |  5 ++
 ..._10_082758_add_visible_columns_setting.php | 38 ++++++++++
 resources/js/components/Graphics/TableRow.js  | 72 +++++++++++++++----
 .../js/components/Graphics/TestsTable.js      | 59 +++++++++++++--
 6 files changed, 209 insertions(+), 19 deletions(-)
 create mode 100644 app/Casts/CommaSeparatedArrayCast.php
 create mode 100644 database/migrations/2021_04_10_082758_add_visible_columns_setting.php

diff --git a/app/Casts/CommaSeparatedArrayCast.php b/app/Casts/CommaSeparatedArrayCast.php
new file mode 100644
index 00000000..c8331835
--- /dev/null
+++ b/app/Casts/CommaSeparatedArrayCast.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Casts;
+
+use Illuminate\Contracts\Database\Eloquent\CastsAttributes;
+
+class CommaSeparatedArrayCast implements CastsAttributes
+{
+    /**
+     * Array of settings that should be cast
+     */
+    private array $shouldCast = [
+        'visible_columns',
+    ];
+
+    /**
+     * Cast the given value.
+     *
+     * @param  \Illuminate\Database\Eloquent\Model  $model
+     * @param  string  $key
+     * @param  mixed  $value
+     * @param  array  $attributes
+     * @return mixed
+     */
+    public function get($model, $key, $value, $attributes)
+    {
+        if (!in_array($model->name, $this->shouldCast)) {
+            return $value;
+        }
+
+        return explode(',', $value);
+    }
+
+    /**
+     * Prepare the given value for storage.
+     *
+     * @param  \Illuminate\Database\Eloquent\Model  $model
+     * @param  string  $key
+     * @param  mixed  $value
+     * @param  array  $attributes
+     * @return mixed
+     */
+    public function set($model, $key, $value, $attributes)
+    {
+        if (!in_array($model->name, $this->shouldCast)) {
+            return $value;
+        }
+
+        return implode(',', $value);
+    }
+}
diff --git a/app/Helpers/SettingsHelper.php b/app/Helpers/SettingsHelper.php
index 1ff03877..a314f4d9 100644
--- a/app/Helpers/SettingsHelper.php
+++ b/app/Helpers/SettingsHelper.php
@@ -168,6 +168,9 @@ class SettingsHelper
                 'telegram_bot_token' => SettingsHelper::settingIsEditable('telegram_bot_token'),
                 'telegram_chat_id' => SettingsHelper::settingIsEditable('telegram_chat_id'),
             ],
+            'tables' => [
+                'visible_columns' => SettingsHelper::get('visible_columns')->value,
+            ],
             'auth' => (bool)SettingsHelper::get('auth')->value
         ];
     }
diff --git a/app/Setting.php b/app/Setting.php
index 78c78765..075fa304 100644
--- a/app/Setting.php
+++ b/app/Setting.php
@@ -2,6 +2,7 @@
 
 namespace App;
 
+use App\Casts\CommaSeparatedArrayCast;
 use App\Helpers\SettingsHelper;
 use Illuminate\Database\Eloquent\Model;
 
@@ -17,4 +18,8 @@ class Setting extends Model
     ];
 
     protected $table = 'settings';
+
+    protected $casts = [
+        'value' => CommaSeparatedArrayCast::class,
+    ];
 }
diff --git a/database/migrations/2021_04_10_082758_add_visible_columns_setting.php b/database/migrations/2021_04_10_082758_add_visible_columns_setting.php
new file mode 100644
index 00000000..4d17b3dc
--- /dev/null
+++ b/database/migrations/2021_04_10_082758_add_visible_columns_setting.php
@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddVisibleColumnsSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('visible_columns')) {
+            Setting::create([
+                'name' => 'visible_columns',
+                'value' => 'id,created_at,download,upload,ping',
+                'description' => 'Columns visible in the "All Tests" table.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'visible_columns',
+        ])->delete();
+    }
+}
diff --git a/resources/js/components/Graphics/TableRow.js b/resources/js/components/Graphics/TableRow.js
index 30180892..4e1f9d44 100644
--- a/resources/js/components/Graphics/TableRow.js
+++ b/resources/js/components/Graphics/TableRow.js
@@ -47,18 +47,62 @@ export default class TableRow extends Component {
         this.toggleShow();
     }
 
+    getDataFields = () => {
+        let allFields = this.props.allFields;
+        let data = this.state.data;
+        let processedFields = [];
+
+        for(var key in allFields) {
+            let field = allFields[key];
+
+            let value = data[key];
+
+            if(field.type === 'date') {
+                value = new Date(value).toLocaleString();
+            } else if(field.type === 'bool') {
+                value = Boolean(value) ? field.if_true : field.if_false
+            }
+
+            let final = {
+                name: key,
+                key: field.alias,
+                value: value,
+                type: field.type
+            };
+
+            processedFields.push(final);
+        }
+
+        let visible = [];
+        let inModal = [];
+
+        window.config.tables.visible_columns.forEach(column => {
+            visible.push(processedFields.find(x => x.name == column));
+        });
+
+        inModal = processedFields.filter(el => {
+            return !visible.includes(el);
+        });
+
+        return {
+            visible: visible,
+            modal: inModal
+        };
+    }
+
     render() {
         var e = this.state.data;
         var show = this.state.show;
+        var fields = this.getDataFields();
 
         if(e.failed != true) {
             return (
                 <tr>
-                    <td>{e.id}</td>
-                    <td>{new Date(e.created_at).toLocaleString()}</td>
-                    <td>{e.download}</td>
-                    <td>{e.upload}</td>
-                    <td>{e.ping}</td>
+                    {fields.visible.map((e, i) => {
+                        return (
+                            <td key={i}>{e.value}</td>
+                        );
+                    })}
                     {e.server_host != null ?
                         <td>
                             <span onClick={this.toggleShow} className="ti-arrow-top-right mouse"></span>
@@ -67,13 +111,17 @@ export default class TableRow extends Component {
                                     <Modal.Title>More info</Modal.Title>
                                 </Modal.Header>
                                 <Modal.Body className="text-center">
-                                    <p>Server ID: {e.server_id}</p>
-                                    <p>Name: {e.server_name}</p>
-                                    <p>Host: {e.server_host}</p>
-                                    <p>URL: <a href={e.url} target="_blank" rel="noopener noreferer">Speedtest.net</a></p>
-                                    {e.scheduled != undefined &&
-                                        <p>Type: {e.scheduled == true ? 'scheduled' : 'manual'}</p>
-                                    }
+                                    {fields.modal.map((e, i) => {
+                                        if(e.type === 'url') {
+                                            return (
+                                                <p key={i}>{e.key}: <a href={e.value} target="_blank" rel="noopener noreferer">Speedtest.net</a></p>
+                                            );
+                                        } else {
+                                            return (
+                                                <p key={i}>{e.key}: {e.value}</p>
+                                            );
+                                        }
+                                    })}
                                     <Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button>
                                 </Modal.Body>
                             </Modal>
diff --git a/resources/js/components/Graphics/TestsTable.js b/resources/js/components/Graphics/TestsTable.js
index 700398ab..9b137eb3 100644
--- a/resources/js/components/Graphics/TestsTable.js
+++ b/resources/js/components/Graphics/TestsTable.js
@@ -14,7 +14,51 @@ export default class TestsTable extends Component {
             data: [],
             showTable: false,
             refresh: true,
-            interval: null
+            interval: null,
+            allFields: {
+                id: {
+                    type: 'int',
+                    alias: 'ID'
+                },
+                created_at: {
+                    type: 'date',
+                    alias: 'Time'
+                },
+                download: {
+                    type: 'float',
+                    alias: 'Download (Mbit/s)'
+                },
+                upload: {
+                    type: 'float',
+                    alias: 'Upload (Mbit/s)'
+                },
+                ping: {
+                    type: 'float',
+                    alias: 'Ping (ms)'
+                },
+                server_id: {
+                    type: 'int',
+                    alias: 'Server ID'
+                },
+                server_name: {
+                    type: 'string',
+                    alias: 'Name'
+                },
+                server_host: {
+                    type: 'string',
+                    alias: 'Host'
+                },
+                url: {
+                    type: 'url',
+                    alias: 'URL'
+                },
+                scheduled: {
+                    type: 'bool',
+                    alias: 'Type',
+                    if_true: 'scheduled',
+                    if_false: 'manual'
+                }
+            }
         }
     }
 
@@ -84,6 +128,7 @@ export default class TestsTable extends Component {
         var data = this.state.data;
         var show = this.state.showTable;
         var refresh = this.state.refresh;
+        let allFields = this.state.allFields;
 
         if(data.length > 0) {
             return (
@@ -102,18 +147,18 @@ export default class TestsTable extends Component {
                                 <Table responsive>
                                     <thead>
                                         <tr>
-                                            <th>ID</th>
-                                            <th>Time</th>
-                                            <th>Download (Mbit/s)</th>
-                                            <th>Upload (Mbit/s)</th>
-                                            <th>Ping (ms)</th>
+                                            {window.config.tables.visible_columns.map((e, i) => {
+                                                return (
+                                                    <th key={i}>{allFields[e].alias}</th>
+                                                );
+                                            })}
                                             <th>More</th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         {data.map((e,i) => {
                                             return (
-                                                <TableRow key={e.id} data={e} refresh={this.getData} />
+                                                <TableRow key={e.id} data={e} allFields={allFields} refresh={this.getData} />
                                             );
                                         })}
                                     </tbody>