advancing

proxy.conf.json

@@ -29,6 +29,16 @@
     "changeOrigin": true,
     "logLevel": "info"
   },
+  "/galimg": {
+    "target": {
+      "host": "172.27.0.1",
+      "protocol": "http:",
+      "port": 8000
+    },
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "info"
+  },
   "/i18n": {
     "target": {
       "host": "172.27.0.1",

src/app/services/services.component.css

@@ -0,0 +1,157 @@
+.group-title {
+    height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.group-img {
+    width: 2.5rem;
+}
+
+.tab-content {
+    margin-top: 16px;
+}
+
+.with-tooltip {
+    z-index: 1000;
+}
+
+ul.transports > li {
+    list-style-type: none;
+}
+
+img.transport {
+    display: inline-block;
+    vertical-align: middle;
+    height: 32px;
+    width: 32px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+}
+
+div.service-container {
+    display: inline-block;
+    width: 162px;
+    height: 162px;
+    margin: 0px 8px 24px 8px;
+}
+
+div.service {
+    padding: 6px 6px 6px 16px;
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    box-shadow: 6px 6px 5px #E0E0E0;
+    cursor: pointer;
+    float: left;
+}
+
+div.service.disabled {
+    opacity: 0.4;
+    filter: alpha(opacity=40);
+}
+
+div.service.maintenance {
+    opacity: 0.6;
+    filter: alpha(opacity=60);
+}
+
+div.service.inuse {
+    background-color: #DCDCFF;
+
+}
+
+div.service.to_be_replaced {
+  background-color: #B22222 !important;
+}
+
+div.service-image {
+    width: 128px;
+    height: 128px;
+}
+
+
+img.se-agranda {
+    max-width: 100%;
+    opacity: .8;
+    -webkit-transform: scale(.8,.8);
+            transform: scale(.8,.8);
+    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+li.active > a > img.se-agranda,
+img.se-agranda:hover,
+img.se-agranda:focus {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+div.service.over:not(.disabled) {
+    background-color: #F0F0F0;
+    animation: pulse 0.5s infinite alternate;
+    animation-name: pulse;
+    animation-duration: 0.8s;
+    animation-iteration-count: infinite;
+    animation-timing-function: alternate;
+    -webkit-animation-name: pulse;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: alternate;
+}
+
+@keyframes pulse {
+  from { box-shadow: 0px 0px 3px 3px #0066cc; }
+  to { box-shadow: 0px 0px 8px 5px #0066cc; }
+}
+
+@-webkit-keyframes pulse {
+  from { box-shadow: 0px 0px 3px 3px #0066cc; }
+  to { box-shadow: 0px 0px 8px 5px #0066cc; }
+}
+
+div.notaccesible {
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+div.service > img {
+    width: 100%;
+}
+
+div.service > span {
+    display: inline-block;
+    position: absolute;
+    vertical-align: bottom;
+    text-align: center;
+    left: 0px;
+    bottom: 0px;
+    width: 100%;
+}
+
+div.service > span.gear {
+    text-align: right;
+    padding-right: 8px;
+}
+
+div.service > span.trash {
+    text-align: right;
+    padding-right: 24px;
+}
+
+span.gear > span.connection {
+    cursor: zoom-in;
+}
+
+span.gear > span.release {
+    cursor: cell;
+}
+
+span.gear > span.reseter {
+    cursor: cell;
+}

src/app/services/services.component.html

@@ -1,14 +1,35 @@
 <div class="container">
-  <div class="card-deck mb-3">
-    <div class="card mb-4" *ngFor="let p of api.plugins">
-      <img class="card-img-top" src="/static/modern/img/{{ p.name }}.png">
-      <div class="card-body d-flex flex-column">
-        <h4 class="card-title">{{ p.name }}</h4>
-        <p class="card-text">{{ p.description }}</p>
-        <a class="btn btn-lg btn-block btn-outline-primary mt-auto" href="{{ p.url }}">
-          <uds-translate>Download</uds-translate>
-        </a>
-      </div>
-    </div>
-  </div>
+
+  <ngb-tabset justify="fill">
+    <ngb-tab *ngFor="let g of group">
+      <ng-template ngbTabTitle>
+        <div class="group-title"><img class="img-rounded group-img title" [src]="groupImage(g.group)"> {{ g.group.name }}</div>
+      </ng-template>
+      <ng-template ngbTabContent>
+              <div class="service-container" *ngFor="let s of g.services">
+                        
+                  <div class="service">
+                       <div class="service-image">
+                          <img class="se-agranda" [src]="serviceImage(s)">
+                      </div>
+                      <span>{{ s.name }}</span>
+                      
+                      <span class="gear">
+                        
+                        
+                        <span data-href="/release/Fc99ab60a-abca-5f2a-a277-93f782654231" class="release fa fa-trash"> </span>
+                        
+                        
+                        <span data-href="/reset/Fc99ab60a-abca-5f2a-a277-93f782654231" class="reseter fa fa-refresh"> </span>
+                        
+                      </span>
+                      
+                  </div>
+
+            </div>
+          
+      </ng-template>
+    </ngb-tab>
+  </ngb-tabset>
+
 </div>

src/app/services/services.component.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { JSONServicesInformation, JSONGroup, JSONService } from '../types/services';
 import { Plugin } from '../helpers/plugin';
 
-class GroupedServices  {
+class GroupedServices {
   services: JSONService[];
 
   constructor(public group: JSONGroup) {
@@ -30,21 +30,21 @@ export class ServicesComponent implements OnInit {
    * check autorun of service and lauchs it if needed
    */
   private autorun(): boolean {
-      // If autorun, and there is only one service, launch it
-      if (this.servicesInformation.autorun && this.servicesInformation.services.length === 1) {
-        if (!this.servicesInformation.services[0].maintenance) {
-          this.api.executeCustomJSForServiceLaunch();
-          // Launch url
-          this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
-          return true;
-        } else {
-          this.api.gui.alert(django.gettext('Warning'), django.gettext('Service is in maintenance and cannot be executed'));
-        }
+    // If autorun, and there is only one service, launch it
+    if (this.servicesInformation.autorun && this.servicesInformation.services.length === 1) {
+      if (!this.servicesInformation.services[0].maintenance) {
+        this.api.executeCustomJSForServiceLaunch();
+        // Launch url
+        this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
+        return true;
+      } else {
+        this.api.gui.alert(django.gettext('Warning'), django.gettext('Service is in maintenance and cannot be executed'));
       }
+    }
 
-      // TODO: remove this
-      // this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
-      return false;
+    // TODO: remove this
+    // this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
+    return false;
   }
 
   private loadServices() {
@@ -64,21 +64,21 @@ export class ServicesComponent implements OnInit {
           } else {
             if (a.group.id > b.group.id) {
               return 1;
-            } else if (a.group.id < b.group.id ) {
+            } else if (a.group.id < b.group.id) {
               return -1;
             }
           }
           return 0;
         }).forEach(element => {
-          if (current === null || element.group.id !== current.group.id ) {
-            if ( current !== null) {
+          if (current === null || element.group.id !== current.group.id) {
+            if (current !== null) {
               this.group.push(current);
             }
             current = new GroupedServices(element.group);
           }
           current.services.push(element);
-      });
-      if (current !== null ) {
+        });
+      if (current !== null) {
         this.group.push(current);
       }
       console.log(this.group);
@@ -92,6 +92,14 @@ export class ServicesComponent implements OnInit {
     }
 
     this.loadServices(); // Loads service related data
-}
+  }
 
+  // Utility
+  groupImage(g: JSONGroup) {
+    return this.api.galeryImageURL(g.imageUuid);
+  }
+
+  serviceImage(s: JSONService) {
+    return this.api.galeryImageURL(s.imageId);
+  }
 }

src/app/types/config.ts

@@ -22,6 +22,7 @@ export interface UDSUrls {
     readonly services: string;
     readonly admin: string;
     readonly enabler: string;
+    readonly galeryImage: string;
 }
 
 export interface UDSConfig {

src/app/uds-api.service.ts

@@ -35,6 +35,10 @@ export class UdsApiService {
     return this.http.get<JSONEnabledService>(enabler);
   }
 
+  galeryImageURL(imageUuid: string) {
+    return this.config.urls.galeryImage.replace('param1', imageUuid);
+  }
+
   /**
    * Gets services information
    */