Works on BrightSign now.

2022-10-18 16:41:26 +02:00
parent d60a377c20
commit e3e0b6c45d
4 changed files with 69 additions and 30 deletions
@@ -30,6 +30,9 @@ switch ($_GET['fetch']) {
        $params['limit'] = 50;
        $params['order_by'] = 'job_id_desc';
        $params['history'] = 'false';
+        if (isset($_GET['q']) && strlen($_GET['q']) > 0 && $_GET['q'] != 'null') {
+            $params['text'] = $_GET['q'];
+        }
        break;

    case 'jobdetails':
@@ -2,8 +2,8 @@
    text-align: center;
 }

-tr.state10 {
-    color: #ccc;
+tr.state5 {
+    color: #00c;
 }

 span.state2 {
@@ -79,7 +79,8 @@ class AremaRest

    getJoblist()
    {
-        var url = 'aremaproxy.php?fetch=joblist';
+        var current_url = new URL(window.location.href);
+        var url = 'aremaproxy.php?fetch=joblist&q=' + encodeURIComponent(current_url.searchParams.get('q'));
        return this.fetchPromise(url);
    }

@@ -98,29 +99,33 @@ class AremaRest

 class JobRow extends React.Component
 {
-    job_states = {
-        2: "Queued",
-        3: "Started",
-        4: "Dispatched",
-        5: "Running",
-        6: "Cancelling",
-        8: "Waiting for Resource",
-        9: "Waiting for Trigger",
-        10: "Finished",
-        11: "Finished with Problems",
-        12: "Finished with Errors",
-        13: "Finished but Dependency Error",
-        14: "Cancelled",
-        20: "Finished with Warnings",
-        30: "Skipped"
-    };
-    
+
    constructor(props)
    {
        super(props);
+        this.job_states = {
+            2: "Queued",
+            3: "Started",
+            4: "Dispatched",
+            5: "Running",
+            6: "Cancelling",
+            8: "Waiting for Resource",
+            9: "Waiting for Trigger",
+            10: "Finished",
+            11: "Finished with Problems",
+            12: "Finished with Errors",
+            13: "Finished but Dependency Error",
+            14: "Cancelled",
+            20: "Finished with Warnings",
+            30: "Skipped"
+        };
+
        this.state = {
            jobId: props.jobId,
            name: '... fetching details ...',
+            created: '',
+            created_date: '',
+            created_time: '--:--:--',
            state_numeric: -1,
            state: '---',
            percent: 0
@@ -132,14 +137,23 @@ class JobRow extends React.Component
        var req = new AremaRest();
        req.getJobDetails(this.state.jobId)
        .then((data) => {
-            console.log('updateDetails got data: %o', data);
+            // console.log('updateDetails got data: %o', data);
            var cur = this.state;
            cur.name = data.job.param.title;
+
+            // Creation time
+            var ctime = new Date(data.job.creation_time);
+            cur.created = data.job.creation_time;
+            cur.created_date = ctime.toLocaleDateString();
+            cur.created_time = ctime.toLocaleTimeString();
+
+            // Status / Progress
            cur.state_numeric = data.job.state;
            cur.state = this.job_states[data.job.state];
            if (data.job.state == 10) {
                cur.percent = 100;
            }
+
            this.setState(cur);
            if (data.job.state < 10) {
                // job still running, query progress in 1 second
@@ -157,7 +171,7 @@ class JobRow extends React.Component
        var req = new AremaRest();
        req.getJobProgress(this.state.jobId)
        .then((data) => {
-            console.log('updateProgress got data: %o', data);
+            // console.log('updateProgress got data: %o', data);
            var cur = this.state;

            cur.state_numeric = data.state;
@@ -180,7 +194,7 @@ class JobRow extends React.Component
                }
            }
            cur.percent = Math.floor( overall_percent / num_steps );
-            console.log('calculated: %o', cur.percent);
+            //console.log('calculated: %o', cur.percent);

            this.setState(cur);
            if (data.state < 10) {
@@ -202,10 +216,16 @@ class JobRow extends React.Component
    render()
    {
        //console.log('Obj: %o', this);
+        var now = new Date();
+        var date_str = '';
+        if (now.toLocaleDateString() != this.state.created_date) {
+            date_str = this.state.created_date + "\n";
+        }
        return React.createElement('tr', { className: 'state'+this.state.state_numeric },
            React.createElement('td', null, this.state.jobId),
            React.createElement('td', null, this.state.name),
-            React.createElement('td', null,
+            React.createElement('td', { style: { textAlign: 'center', verticalAlign: 'middle' } }, date_str + this.state.created_time),
+            React.createElement('td', { style: { verticalAlign: 'middle' } },
                React.createElement('span', { className: 'uk-label state'+this.state.state_numeric }, this.state.state)
            ),
            React.createElement('td', { style: { verticalAlign: 'middle' } },
@@ -230,7 +250,7 @@ class JobList extends React.Component
        var req = new AremaRest();
        req.getJoblist()
        .then((data) => {
-            console.log('updateJobs got data: %o', data);
+            // console.log('updateJobs got data: %o', data);
            this.setState({
                jobIds: data.jobs.job
            });
@@ -250,7 +270,7 @@ class JobList extends React.Component
        }
        window.appendJobList = (data) => {
            var list = this.state;
-            console.log('Current state: %o', list);
+            // console.log('Current state: %o', list);
            for (var i=0; i<data.length; i++) {
                list.jobIds.push(data[i]);
            }
@@ -271,6 +291,7 @@ class JobList extends React.Component
                    React.createElement('tr', null,
                        React.createElement('th', null, 'ID'),
                        React.createElement('th', null, 'Name'),
+                        React.createElement('th', null, 'Created'),
                        React.createElement('th', null, 'Status'),
                        React.createElement('th', null, 'Progress')
                    )
@@ -288,4 +309,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
        document.getElementById('joblist')
    );

+    var current_url = new URL(window.location.href);
+    if (current_url.searchParams.get('q')) {
+        document.forms[0].elements.q.value = current_url.searchParams.get('q');
+    }
+
 });
@@ -2,10 +2,10 @@
 <html>
  <head>
    <title>AREMA JobMonitor</title>
-    <!-- <script src="reactjs/react.production.min.js" type="text/javascript"></script>
-    <script src="reactjs/react-dom.production.min.js" type="text/javascript"></script> -->
-    <script src="reactjs/react.development.js" type="text/javascript"></script>
-    <script src="reactjs/react-dom.development.js" type="text/javascript"></script>
+    <script src="reactjs/react.production.min.js" type="text/javascript"></script>
+    <script src="reactjs/react-dom.production.min.js" type="text/javascript"></script>
+    <!-- <script src="reactjs/react.development.js" type="text/javascript"></script>
+    <script src="reactjs/react-dom.development.js" type="text/javascript"></script> -->
    <script src="uikit/uikit.min.js" type="text/javascript"></script>
    <script src="uikit/uikit-icons.min.js" type="text/javascript"></script>
    <script src="assets/main.js" type="text/javascript"></script>
@@ -20,6 +20,16 @@
        <ul class="uk-navbar-nav">
        </ul>
      </div>
+      <div class="uk-navbar-right">
+        <div>
+          <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
+          <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0;">
+            <form class="uk-search uk-search-navbar uk-width-1-1" method="GET">
+              <input class="uk-search-input" type="search" name="q" placeholder="Filter" autofocus />
+            </form>
+          </div>
+        </div>
+      </div>
    </nav>
    <div class="uk-section">
      <div class="uk-container">