mirror of
https://github.com/henrywhitaker3/Speedtest-Tracker.git
synced 2025-12-21 13:23:04 +01:00
Order/location of columns is now variable
This commit is contained in:
Henry Whitaker
51
app/Casts/CommaSeparatedArrayCast.php
Normal file
51
app/Casts/CommaSeparatedArrayCast.php
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
];
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
70
resources/js/components/Graphics/TableRow.js
vendored
70
resources/js/components/Graphics/TableRow.js
vendored
@@ -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>
|
||||
|
||||
59
resources/js/components/Graphics/TestsTable.js
vendored
59
resources/js/components/Graphics/TestsTable.js
vendored
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user