date-ago pipe for web ui

main/http_server/axe-os/.gitignore

@@ -22,7 +22,7 @@ yarn-error.log
 
 # Visual Studio Code
 .vscode/*
-!.vscode/settings.json
+# !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

main/http_server/axe-os/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { HeaderComponent } from './components/header/header.component';
 import { HomeComponent } from './components/home/home.component';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ANSIPipe } from './pipes/ansi.pipe';
+import { DateAgoPipe } from './pipes/date-ago.pipe';
 
 const components = [
   AppComponent,
@@ -25,7 +26,8 @@ const components = [
     EditComponent,
     HomeComponent,
     LoadingComponent,
-    ANSIPipe
+    ANSIPipe,
+    DateAgoPipe
   ],
   imports: [
     BrowserModule,

main/http_server/axe-os/src/app/components/edit/edit.component.html

@@ -25,6 +25,7 @@
 
         </form>
     </ng-container>
+    <div>You must restart this device after saving for changes to take effect.</div>
     <div class="mt-2">
         <button (click)="updateSystem()" class="btn btn-primary mr-2">Save</button>
         <button [routerLink]="['/']" class="btn btn-secondary">Cancel</button>

main/http_server/axe-os/src/app/components/home/home.component.html

@@ -17,8 +17,8 @@
                         <td>{{info.ASICModel}}</td>
                     </tr>
                     <tr>
-                        <td>Uptime (seconds):</td>
-                        <td>{{info.uptimeSeconds}}</td>
+                        <td>Uptime:</td>
+                        <td>{{info.uptimeSeconds | dateAgo}}</td>
 
                     </tr>
                     <tr>

main/http_server/axe-os/src/app/pipes/date-ago.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DateAgoPipe } from './date-ago.pipe';
+
+describe('DateAgoPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DateAgoPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

main/http_server/axe-os/src/app/pipes/date-ago.pipe.ts

@@ -0,0 +1,37 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dateAgo',
+  pure: true
+})
+export class DateAgoPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    if (value) {
+      const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
+      if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
+        return 'Just now';
+      const intervals: { [key: string]: number } = {
+        'year': 31536000,
+        'month': 2592000,
+        'week': 604800,
+        'day': 86400,
+        'hour': 3600,
+        'minute': 60,
+        'second': 1
+      };
+      let counter;
+      for (const i in intervals) {
+        counter = Math.floor(seconds / intervals[i]);
+        if (counter > 0)
+          if (counter === 1) {
+            return counter + ' ' + i + ''; // singular (1 day ago)
+          } else {
+            return counter + ' ' + i + 's'; // plural (2 days ago)
+          }
+      }
+    }
+    return value;
+  }
+
+}