Styling af Payload decoder

Author: Allan Asp Christensen

src/app/payload-decoder/payload-decoder/payload-decoder-detail/payload-decoder-detail.component.html

@@ -1,32 +1,41 @@
-<ng-container *ngIf="payloadDecoder">
-    <app-top-bar-single [data]="payloadDecoder" [backButton]="backButton" [buttons]="buttons"></app-top-bar-single>
-    <div class="p-5">
-        <div class="application-component">
-            <div class="col d-flex top-bar">
-                <button class="btn btn-primary py-3" [routerLink]="['../../payload-decoder-edit', payloadDecoder.id]" routerLinkActive="active">{{ 'PAYLOAD-DECODER.EDIT' | translate }}</button>
-            </div>
-            <div class="col-12 mb-4 py-3 bottom-separator">
-                <div class="col-8 py-4">
-                    <div class="col-12 col-sm-12">
-                    <h4>{{ 'PAYLOAD-DECODER.NAME' | translate }}</h4>
-                    </div>
-                    <div class="col-12 pt-2 col-sm-8">
-                    <p>{{payloadDecoder.name}}</p>
-                    </div>
-                </div>
-                <div class="col-12 py-4">
-                    <div class="col-12 col-sm-12">
-                        <h4>{{ 'PAYLOAD-DECODER.DECODINGFUNCTION' | translate }}</h4>
-                    </div>
+<app-top-bar-single [data]="payloadDecoder" [backButton]="backButton" [buttons]="buttons"></app-top-bar-single>
+<div *ngIf="payloadDecoder">
+    <div class=" jumbotron m-md-4 p-md-3">
+        <div class="row">
+            <div class="col-xs-12">
+                <div class="float-left">
+                    <h4> {{ 'PAYLOAD-DECODER.NAME' | translate }} {{payloadDecoder.name}}</h4>
                 </div>
-                <div class="col-12 pt-2 col-sm-8">
-                    <pre>
-                        <code>
-                            {{payloadDecoder.decodingFunction}}
-                        </code>
-                    </pre>
+                <div class="btn-group float-right">
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false">
+                        {{'PAYLOAD-DECODER.DETAIL.DROPDOWN' | translate}} <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu" attr.aria-labelledby="tableRowDropdown-{{payloadDecoder.id}}">
+                        <li class="dropdown-item">
+                            <a [routerLink]="['../../payload-decoder-edit', payloadDecoder.id]"
+                                routerLinkActive="active">{{ 'PAYLOAD-DECODER.DETAIL.EDIT' | translate }}
+                            </a>
+                        </li>
+                        <!-- <li class="dropdown-item">
+                            <a (click)="onDeletePayloadDecoder()" [routerLink]="">{{ 'PAYLOAD-DECODER.DETAIL.DELETE' | translate }}
+                            </a>
+                        </li> -->
+                    </ul>
                 </div>
             </div>
         </div>
     </div>
-</ng-container>
+    <div class=" jumbotron m-md-4 p-md-3">
+        <div class="row">
+            <div class="col-xs-12">
+                <h4>{{ 'PAYLOAD-DECODER.DECODINGFUNCTION' | translate }}</h4>
+                <pre>
+                    <code>
+                        {{payloadDecoder.decodingFunction}}
+                    </code>
+                </pre>
+            </div>
+        </div>
+    </div>
+</div>

src/app/payload-decoder/payload-decoder/payload-decoder-detail/payload-decoder-detail.component.ts

@@ -20,12 +20,12 @@ export class PayloadDecoderDetailComponent implements OnInit {
   public backButton: BackButton = { label: '', routerLink: '/datatarget-list' };
   public buttons: QuickActionButton[] = [
     {
-        label: 'PAYLOAD-DECODER.DELETE',
-        type: 'delete',
+      label: 'PAYLOAD-DECODER.DELETE',
+      type: 'delete',
     },
     {
-        label: 'PAYLOAD-DECODER.EDIT',
-        type: 'edit',
+      label: 'PAYLOAD-DECODER.EDIT',
+      type: 'edit',
     },
   ];
   id: number;
@@ -34,24 +34,29 @@ export class PayloadDecoderDetailComponent implements OnInit {
   constructor(
     public translate: TranslateService,
     private route: ActivatedRoute,
-    private payloadDecoderService: PayloadDecoderService
-    ) {
-    }
+    private payloadDecoderService: PayloadDecoderService,
+  ) {
+  }
 
   ngOnInit(): void {
     this.translate.use('da');
+
+    this.translate.get(['PAYLOAD-DECODER.TITLE'])
+      .subscribe(translations => {
+        this.backButton.label = translations['PAYLOAD-DECODER.TITLE'];
+      });
     this.id = +this.route.snapshot.paramMap.get('id');
     if (this.id > 0) {
       this.getPayloadDecoder(this.id);
     }
   }
 
   private getPayloadDecoder(id: number) {
-    this.subscription =  this.payloadDecoderService.getOne(id)
+    this.subscription = this.payloadDecoderService.getOne(id)
       .subscribe(
         (response) => {
-        this.payloadDecoder = response;
-    });
+          this.payloadDecoder = response;
+        });
   }
 
 }

src/assets/i18n/da.json

@@ -111,11 +111,16 @@
     "EDIT": "Redigér"
   },
   "PAYLOAD-DECODER": {
+    "TITLE": "Payload decoder",
     "SAVE": "Gem Payload Decoder",
-    "NAME": "Navn",
+    "NAME": "Navn: ",
     "ID": "Payload Decoder Id",
     "DECODINGFUNCTION": "Decoder funktion",
-    "EDIT": "Redigér Payload Decoder"
+    "DETAIL": {
+      "DROPDOWN": "Håndter Payload Decoder",
+      "EDIT": "Redigér",
+      "DELETE": "Slet"
+    }
   },
   "PAYLOAD-DECODER-TABLE-ROW": {
     "EDIT": "Redigér",