Order/location of columns is now variable

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>