Store + display more info form speedtests

app/Helpers/SpeedtestHelper.php

@@ -32,6 +32,10 @@ class SpeedtestHelper {
                 'ping' => $output['ping']['latency'],
                 'download' => SpeedtestHelper::convert($output['download']['bandwidth']),
                 'upload' => SpeedtestHelper::convert($output['upload']['bandwidth']),
+                'server_id' => $output['server']['id'],
+                'server_name' => $output['server']['name'],
+                'server_host' => $output['server']['host'] . ':' . $output['server']['port'],
+                'url' => $output['result']['url'],
             ]);
         } catch(JsonException $e) {
             Log::error('Failed to parse speedtest JSON');

app/Speedtest.php

@@ -12,7 +12,14 @@ class Speedtest extends Model
      * @var array
      */
     protected $fillable = [
-        'ping', 'download', 'upload', 'created_at'
+        'ping',
+        'download',
+        'upload',
+        'created_at',
+        'server_id',
+        'server_name',
+        'server_host',
+        'url',
     ];
 
     protected $table = 'speedtests';

changelog.json

@@ -1,4 +1,10 @@
 {
+    "1.5.5": [
+        {
+            "description": "Store host/id of speedtes.net server",
+            "link": ""
+        }
+    ],
     "1.5.4": [
         {
             "description": "Updated dependencies",

composer.json

@@ -9,6 +9,7 @@
     "license": "MIT",
     "require": {
         "php": "^7.2.5",
+        "doctrine/dbal": "^2.10",
         "dragonmantank/cron-expression": "^2",
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^2.0",

config/speedtest.php

@@ -7,7 +7,7 @@ return [
     |--------------------------------------------------------------------------
     */
 
-    'version' => '1.5.4',
+    'version' => '1.5.5',
 
     /*
     |--------------------------------------------------------------------------

database/migrations/2020_06_20_164502_update_speedtests_table.php

@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class UpdateSpeedtestsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('speedtests', function($table) {
+            $table->integer('server_id')->nullable();
+            $table->string('server_name')->nullable();
+            $table->string('server_host')->nullable();
+            $table->string('url')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('speedtests', function($table) {
+            $table->dropColumn('server_id');
+        });
+
+        Schema::table('speedtests', function($table) {
+            $table->dropColumn('server_name');
+        });
+
+        Schema::table('speedtests', function($table) {
+            $table->dropColumn('server_host');
+        });
+
+        Schema::table('speedtests', function($table) {
+            $table->dropColumn('url');
+        });
+    }
+}

public/js/app.js.LICENSE.txt

@@ -4,6 +4,13 @@ object-assign
 @license MIT
 */
 
+/* @license
+Papa Parse
+v5.2.0
+https://github.com/mholt/PapaParse
+License: MIT
+*/
+
 /*!
   * Bootstrap v4.5.0 (https://getbootstrap.com/)
   * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)

resources/js/components/Graphics/TableRow.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal } from 'react-bootstrap';
+
+export default class TableRow extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data,
+            show: false,
+        }
+    }
+
+    toggleShow = () => {
+        var show = this.state.show;
+        if(show) {
+            this.setState({
+                show: false
+            });
+        } else {
+            this.setState({
+                show: true
+            });
+        }
+    }
+
+    render() {
+        var e = this.state.data;
+        var show = this.state.show;
+        console.log(e.server_host == null);
+
+        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>
+                {e.server_host != null ?
+                    <td>
+                        <span onClick={this.toggleShow} className="ti-arrow-top-right mouse"></span>
+                        <Modal show={show} onHide={this.toggleShow}>
+                            <Modal.Header>
+                                <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>
+                                <a href={e.url} target="_blank" rel="noopener noreferer">Speedtest.net</a>
+                            </Modal.Body>
+                        </Modal>
+                    </td>
+                :
+                    <td></td>
+                }
+            </tr>
+        );
+    }
+}
+
+if (document.getElementById('tableRow')) {
+    ReactDOM.render(<TableRow />, document.getElementById('tableRow'));
+}

resources/js/components/Graphics/TestsTable.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Axios from 'axios';
 import { Container, Row, Table, Col, Collapse, Button } from 'react-bootstrap';
+import TableRow from './TableRow';
 
 export default class TestsTable extends Component {
     constructor(props) {
@@ -93,18 +94,13 @@ export default class TestsTable extends Component {
                                                 <th>Download (Mbit/s)</th>
                                                 <th>Upload (Mbit/s)</th>
                                                 <th>Ping (ms)</th>
+                                                <th>More</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             {data.map((e,i) => {
                                                 return (
-                                                    <tr key={e.id}>
+                                                    <TableRow key={e.id} data={e} />
-                                                        <td>{e.id}</td>
-                                                        <td>{new Date(e.created_at).toLocaleString()}</td>
-                                                        <td>{e.download}</td>
-                                                        <td>{e.upload}</td>
-                                                        <td>{e.ping}</td>
-                                                    </tr>
                                                 );
                                             })}
                                         </tbody>