mirrors/Speedtest-Tracker
1
0
Fork 0
mirror of https://github.com/henrywhitaker3/Speedtest-Tracker.git synced 2025-12-21 11:35:00 +01:00
Code Issues Projects Releases Wiki Activity

Added sortable list for visible columns

Browse Source 
Need to add handling for multiple lists on the page
This commit is contained in:
Henry Whitaker
2021-04-10 11:30:39 +01:00
parent b232c21ae1
commit c9e86ac5aa
6 changed files with 25019 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13287
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -10,8 +10,8 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21",
"@babel/preset-react": "^7.12.13",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"cross-env": "^7.0",
"jquery": "^3.5",
@@ -29,6 +29,7 @@
"chart.js": "^2.9.4",
"csv-file-validator": "^1.10.1",
"js-cookie": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap": "^1.5.1",
"react-chartjs-2": "^2.11.1",
"react-router": "^5.2.0",

11718
public/js/app.js vendored
View File

File diff suppressed because it is too large Load Diff

10
resources/js/components/Settings/SettingsIndex.js vendored
View File

@@ -63,6 +63,16 @@ export default class SettingsIndex extends Component {
type: 'checkbox',
}
],
Tables: [
{
obj: data.visible_columns,
type: 'list'
},
{
obj: data.hidden_columns,
type: 'list'
}
],
Graphs: [
{
obj: data.download_upload_graph_enabled,

8
resources/js/components/Settings/SettingsTabs.js vendored
View File

@@ -11,13 +11,14 @@ import GraphsSettings from './tabs/GraphsSettings';
import HealthchecksSettings from './tabs/HealthchecksSettings';
import NotificationsSettings from './tabs/NotificationsSettings';
import Authentication from '../Authentication/Authentication';
import TableSettings from './tabs/TableSettings';
export default class SettingsTabs extends Component {
constructor(props) {
super(props)
this.state = {
tab: "General",
tab: "Tables",
data: this.props.data
}
}
@@ -26,6 +27,7 @@ export default class SettingsTabs extends Component {
var tabs = [
'General',
'Graphs',
'Tables',
'Notifications',
'healthchecks.io',
'Reset',
@@ -121,6 +123,10 @@ export default class SettingsTabs extends Component {
data={data.Graphs}
generateInputs={this.generateInputs}
save={this.save} />
case 'Tables':
return <TableSettings
data={data.Tables}
save={this.save} />
case 'Notifications':
return <NotificationsSettings
data={data.Notifications}

105
resources/js/components/Settings/tabs/TableSettings.js vendored Normal file
View File

@@ -0,0 +1,105 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
export default class TableSettings extends Component {
constructor(props) {
super(props)
this.state = {
visible: this.props.data[0],
hidden: this.props.data[1],
}
}
handleOnDragEnd = (result) => {
if (!result.destination) return;
let data = this.state.visible;
let array = data.obj.value;
let reorderedItem = array.splice(result.source.index, 1);
array.splice(result.destination.index, 0, reorderedItem[0]);
data.obj.value = array;
console.log(array);
this.setState({
visible: data
});
}
save = () => {
var url = 'api/settings?token=' + window.token;
Axios.post(url, {
name: 'visible_columns',
value: this.state.data.obj.value
})
.then((resp) => {
console.log(resp);
})
.catch((err) => {
console.log(err);
})
}
render() {
let visible = this.state.visible;
let hidden = this.state.hidden;
return (
<Tab.Content>
<div>
<p>{visible.obj.description}</p>
<DragDropContext onDragEnd={this.handleOnDragEnd}>
<Droppable droppableId="visibleColumns">
{(provided) => (
<ul className="visibleColumns" {...provided.droppableProps} ref={provided.innerRef}>
{visible.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
<Droppable droppableId="hiddenColumns">
{(provided) => (
<ul className="hiddenColumns" {...provided.droppableProps} ref={provided.innerRef}>
{hidden.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.save() }}>Save</button>
</div>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('TableSettings')) {
ReactDOM.render(<TableSettings />, document.getElementById('TableSettings'));
}