BTB-10 Als Benutzer möchte ich Indikatoren per Mausklick setzen können, damit die Meldungen im BTB sichtbar priorisiert werden können.

26 files changed, 464 insertions, 19 deletions

diff --git a/ng tools.txt b/ng tools.txt
index a80d2bb..edef696 100644
--- a/ng tools.txt
+++ b/ng tools.txt
@@ -11,4 +11,5 @@ Build Production:
 ng build -prod
 
 Code coverage:
-ng test --code-coverage --single-run
\ No newline at end of file
+ng test --code-coverage --single-run
+ng test --code-coverage --watch=false
\ No newline at end of file
diff --git a/src/app/common/globals.ts b/src/app/common/globals.ts
index eca474d..68d8b0a 100644
--- a/src/app/common/globals.ts
+++ b/src/app/common/globals.ts
@@ -18,6 +18,7 @@ export class Globals {
     static BASE_URL = '/elogbook/rest/beservice';
     static BRANCHESNAME = 'BRANCHES';
     static STATUSES = 'STATUSES';
+    static PRIORITIES = 'PRIORITIES';
     static FILTER_MATRIX = 'FILTER_MATRIX';
     static DATE_RANGE_FUTURE = 'DATE_RANGE_FUTURE';
     static DATE_RANGE_PAST = 'DATE_RANGE_PAST';
diff --git a/src/app/common/session-context.ts b/src/app/common/session-context.ts
index 44818f2..01f1583 100644
--- a/src/app/common/session-context.ts
+++ b/src/app/common/session-context.ts
@@ -27,6 +27,7 @@ import { SortingState } from '../model/sorting-state';
 import { JwtPayload } from '../model/jwt-payload';
 import { UserMap } from '../common/user-map';
 import { UserSettings } from 'app/model/user-settings';
+import { Priority } from 'app/model/priority';
 
 @Injectable()
 export class SessionContext {
@@ -210,6 +211,34 @@ export class SessionContext {
         return JSON.parse(statuses);
     }
 
+    setPriorities(priority: Priority[]): void {
+        localStorage.setItem(Globals.PRIORITIES, JSON.stringify(priority));
+    }
+
+    getPriorities(): Priority[] {
+        const priorities = localStorage.getItem(Globals.PRIORITIES);
+        return JSON.parse(priorities);
+    }
+
+    getPrioById(id: number): Priority {
+        const priorities = this.getPriorities();        
+        if (priorities) {
+            const priority = priorities.filter(s => s.id === id)[0];
+            if (priority) {
+                return priority;
+            } 
+        }
+        return null;
+    }
+
+    getPrioImagePathById(id: number): string{
+        const priority = this.getPrioById(id);
+        if (priority) {
+
+        }
+        return "";
+    }
+
     getStatusById(id: number): Status {
         const statuses = this.getStatuses();
         if (statuses) {
@@ -340,6 +369,7 @@ export class SessionContext {
         this.globalSearchFilter.statusClosedSelection = true;
         this.globalSearchFilter.fkRefBranch = -1;
         this.globalSearchFilter.fkRefGridTerritory = -1;
+        this.globalSearchFilter.fkRefNotificationPriority = -1;
         this.globalSearchFilter.fastSearchSelected = true;
         localStorage.setItem(Globals.SEARCHOBJECT, JSON.stringify(this.globalSearchFilter));
     }
diff --git a/src/app/dialogs/entry/entry.component.html b/src/app/dialogs/entry/entry.component.html
index ff9c16e..a7cb628 100644
--- a/src/app/dialogs/entry/entry.component.html
+++ b/src/app/dialogs/entry/entry.component.html
@@ -57,6 +57,19 @@
           <tbody>
             <tr>
               <td class="text-right">
+                <label>Priorität</label>
+              </td>
+              <td class="text-left" style="width: 17%">
+                <div class="form-group">
+                  <select class="form-control" [(ngModel)]="notification.fkRefNotificationPriority"
+                  (ngModelChange)="notification.fkRefNotificationPriority = $event ? $event : null" name="prioSelection">
+                    <option value=""></option>
+                    <option *ngFor="let priority of priorities" value="{{ priority.id }}">{{ priority.name }}</option>
+                  </select>
+                </div>
+              </td>
+              <td></td>              
+              <td class="text-right">
                 <label>Bereich</label>
               </td>
               <td class="text-left" style="width: 17%">
diff --git a/src/app/dialogs/entry/entry.component.ts b/src/app/dialogs/entry/entry.component.ts
index 2c6a6d3..d5d877c 100644
--- a/src/app/dialogs/entry/entry.component.ts
+++ b/src/app/dialogs/entry/entry.component.ts
@@ -26,6 +26,7 @@ import { BannerMessage } from '../../common/banner-message';
 import { StatusEn, BannerMessageStatusEn, ErrorType } from '../../common/enums';
 import { FormattedTimestampPipe } from '../../common-components/pipes/formatted-timestamp.pipe';
 import { MessageService } from '../../services/message.service';
+import { Priority } from 'app/model/priority';
 @Component({
   selector: 'app-entry',
   templateUrl: './entry.component.html',
@@ -45,6 +46,7 @@ export class EntryComponent implements OnInit {
   gridTerritories: GridTerritory[];
   branches: Branch[];
   statuses: Status[];
+  priorities: Priority[];
   defaultBranch = '';
   defaultGridTerritory = '';
 
@@ -60,6 +62,7 @@ export class EntryComponent implements OnInit {
     this.gridTerritories = this.sessionContext.getMasterGridTerritories();
     this.branches = this.sessionContext.getBranches();
     this.statuses = this.sessionContext.getStatuses();
+    this.priorities = this.sessionContext.getPriorities();
     this.user = this.sessionContext.getCurrUser();
 
     this.daterangepickerConfig.settings = {
diff --git a/src/app/filter/filter.component.html b/src/app/filter/filter.component.html
index 007f1ad..bed93eb 100644
--- a/src/app/filter/filter.component.html
+++ b/src/app/filter/filter.component.html
@@ -67,7 +67,7 @@
                 mapUserName(getResponsiblity(responsibilityRow, 'W').responsibleUser) }}</span>
             </td>
             <td>
-              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'W')"
+              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'Z')"
                   (change)="responsibilitiesSelectionChanged(true)" class="responsibility-checkbox-wr" [(ngModel)]="getResponsiblity(responsibilityRow,'Z').isActive"></span>
               <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'Z')">{{
                 mapUserName(getResponsiblity(responsibilityRow, 'Z').responsibleUser) }}</span>
@@ -76,8 +76,7 @@
         </tbody>
       </table>
       <button id="selectAllButton" class="btn btn-primary btn-sm" (click)="selectAllResponsibilities()">Alle setzen</button>
-      <button id="deselectAllButton" class="btn btn-primary btn-sm" (click)="deselectAllResponsibilities()">Alle
-        löschen</button>
+      <button id="deselectAllButton" class="btn btn-primary btn-sm" (click)="deselectAllResponsibilities()">Alle löschen</button>
       <button id="resetAllButton" class="btn btn-primary btn-sm" (click)="resetToDefaultAllResponsibilities()">Filter & Sortierung zurücksetzen</button>
     </div>
   </div>
diff --git a/src/app/lists/abstract-list/abstract-list.component.css b/src/app/lists/abstract-list/abstract-list.component.css
index ba4aa70..2849492 100644
--- a/src/app/lists/abstract-list/abstract-list.component.css
+++ b/src/app/lists/abstract-list/abstract-list.component.css
@@ -52,6 +52,14 @@ td {
     padding-right: 6px;
 }
 
+.notification-tab-prio-col {
+    line-height: 1.42857143;
+    width: 3%;
+    min-width: 40px;
+    max-width: 50px;
+    text-align: center;
+}
+
 .notification-tab-first-col {
     line-height: 1.42857143;
     width: 12%;
diff --git a/src/app/lists/abstract-list/abstract-list.component.ts b/src/app/lists/abstract-list/abstract-list.component.ts
index 26c606c..4075a4f 100644
--- a/src/app/lists/abstract-list/abstract-list.component.ts
+++ b/src/app/lists/abstract-list/abstract-list.component.ts
@@ -374,10 +374,12 @@ export class AbstractListComponent implements OnInit, OnChanges, OnDestroy {
       case 'fkRefGridTerritory':
         return this.sessionContext.getGridTerritoryById(notification.fkRefGridTerritory) ?
           this.sessionContext.getGridTerritoryById(notification.fkRefGridTerritory).name.toLowerCase() : null;
+      case 'fkRefNotificationPriority':
+        return this.sessionContext.getPrioById(notification.fkRefNotificationPriority) ?
+          this.sessionContext.getPrioById(notification.fkRefNotificationPriority).weighting * -1 : null;
       default:
         return notification[columnName] ? notification[columnName].toLowerCase() : null;
     }
-
   }
 
   public getListHelperTool() {
diff --git a/src/app/lists/finished-notifications/finished-notifications.component.html b/src/app/lists/finished-notifications/finished-notifications.component.html
index 2c3f975..7386951 100644
--- a/src/app/lists/finished-notifications/finished-notifications.component.html
+++ b/src/app/lists/finished-notifications/finished-notifications.component.html
@@ -42,6 +42,9 @@
             <th *ngIf="withCheckboxes" class="notification-check-col">
               <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
             </th>
+            <th class="notification-tab-prio-col">
+              <app-sorting [initColumnName]="'fkRefNotificationPriority'" (click)=" sort('fkRefNotificationPriority')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Prio</app-sorting>
+            </th>
             <th class="notification-tab-first-col">
               <app-sorting [initColumnName]="'beginDate'" (click)=" sort('beginDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
             </th>
@@ -65,12 +68,16 @@
         </thead>
         <tbody>
           <tr *ngFor="let notification of notifications" class='notification_row_testable'>
-            <td [attr.colspan]="(withCheckboxes && withEditButtons)?9:8" style="padding:0px;">
+            <td [attr.colspan]="(withCheckboxes && withEditButtons)?10:9" style="padding:0px;">
               <table style="width:100%">
                 <tr>
                   <td *ngIf="withCheckboxes" class="notification-check-col">
                     <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                   </td>
+                  <td class="notification-tab-prio-col">                                                   
+                    <img *ngIf="sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName" 
+                    src="assets/img/{{sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                  </td>
                   <td class="notification-tab-first-col" ngInit="notification.historyOpen=false">
                     <a *ngIf="notification.version > 1 && isCollapsible" href="#history_finishedNot_{{notification.id}}" data-toggle="collapse"
                       class="glyphicon glyphicon-menu-down glyphicon-menu-up" (click)="toggleHistoryTab(notification)" [ngClass]="{'glyphicon-menu-up': notification.historyOpen, 'glyphicon-menu-down': !notification.historyOpen}"
@@ -108,10 +115,14 @@
                   </td>
                 </tr>
                 <tr id="history_openNot_{{notification.id}}" [ngClass]="{'panel-collapse': notification.historyOpen}" *ngIf="isCollapsible && notification.historyOpen">
-                  <td [attr.colspan]="8">
+                  <td [attr.colspan]="9">
                     <table style="width:100%;" class="notificationVersions">
                       <tbody>
                         <tr *ngFor="let notificationVersion of notification.decoratorNotificationVersions">
+                          <td class="notification-tab-prio-col">                                                   
+                            <img *ngIf="sessionContext.getPrioById(notificationVersion.fkRefNotificationPriority)?.imageName" 
+                            src="assets/img/{{sessionContext.getPrioById(notificationVersion.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                          </td>
                           <td class="notification-tab-version-col">
                             <span>
                             {{ notificationVersion.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
diff --git a/src/app/lists/future-notifications/future-notifications.component.html b/src/app/lists/future-notifications/future-notifications.component.html
index 4dfd4a1..58754e6 100644
--- a/src/app/lists/future-notifications/future-notifications.component.html
+++ b/src/app/lists/future-notifications/future-notifications.component.html
@@ -45,6 +45,9 @@
             <th *ngIf="withCheckboxes" class="notification-check-col">
               <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
             </th>
+            <th class="notification-tab-prio-col">
+              <app-sorting [initColumnName]="'fkRefNotificationPriority'" (click)=" sort('fkRefNotificationPriority')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Prio</app-sorting>
+            </th>
             <th class="notification-tab-first-col">
               <app-sorting [initColumnName]="'beginDate'" (click)=" sort('beginDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
             </th>
@@ -68,13 +71,17 @@
         </thead>
         <tbody>
           <tr *ngFor="let notification of notifications">
-            <td [attr.colspan]="(withCheckboxes && withEditButtons)?8:7" style="padding:0px;">
+            <td [attr.colspan]="(withCheckboxes && withEditButtons)?9:8" style="padding:0px;">
               <table style="width:100%">
                 <tbody>
                   <tr>
                     <td *ngIf="withCheckboxes" class="notification-check-col" >
                       <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                     </td>
+                    <td class="notification-tab-prio-col">                                                   
+                      <img *ngIf="sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName" 
+                      src="assets/img/{{sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                    </td>
                     <td class="notification-tab-first-col"  ngInit="notification.historyOpen=false">
                       <a *ngIf="notification.version > 1 && isCollapsible" href="#history_futureNot_{{notification.id}}" data-toggle="collapse"
                         class="glyphicon glyphicon-menu-down glyphicon-menu-up" (click)="toggleHistoryTab(notification)" [ngClass]="{'glyphicon-menu-up': notification.historyOpen, 'glyphicon-menu-down': !notification.historyOpen}"
@@ -109,10 +116,14 @@
                     </td>
                   </tr>
                   <tr id="history_openNot_{{notification.id}}" [ngClass]="{'panel-collapse': notification.historyOpen}" *ngIf="isCollapsible && notification.historyOpen">
-                    <td colspan="8">
+                    <td colspan="9">
                       <table style="width:100%;" class="notificationVersions">
                         <tbody>
                           <tr *ngFor="let notificationVersion of notification.decoratorNotificationVersions">
+                            <td class="notification-tab-prio-col">                                                   
+                              <img *ngIf="sessionContext.getPrioById(notificationVersion.fkRefNotificationPriority)?.imageName" 
+                              src="assets/img/{{sessionContext.getPrioById(notificationVersion.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                            </td>
                             <td class="notification-tab-version-col">{{ notificationVersion.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</td>
                             <td class="notification-tab-branch" >
                               {{ sessionContext.getBrancheById(notificationVersion.fkRefBranch)?.name }}
diff --git a/src/app/lists/open-notifications/open-notifications.component.html b/src/app/lists/open-notifications/open-notifications.component.html
index 28bdb21..1ea2ae6 100644
--- a/src/app/lists/open-notifications/open-notifications.component.html
+++ b/src/app/lists/open-notifications/open-notifications.component.html
@@ -25,6 +25,9 @@
             <th *ngIf="withCheckboxes" class="notification-check-col">
               <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
             </th>
+            <th class="notification-tab-prio-col">
+              <app-sorting [initColumnName]="'fkRefNotificationPriority'" (click)=" sort('fkRefNotificationPriority')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Prio</app-sorting>
+            </th>
             <th class="notification-tab-first-col">
               <app-sorting [initColumnName]="'beginDate'" (click)=" sort('beginDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
             </th>
@@ -51,13 +54,17 @@
         </thead>
         <tbody>
           <tr *ngFor="let notification of notifications">
-            <td [attr.colspan]="(withCheckboxes && withEditButtons)?9:8" style="padding:0px;">              
+            <td [attr.colspan]="(withCheckboxes && withEditButtons)?10:9" style="padding:0px;">              
               <table style="width:100%">
                 <tbody>
                   <tr>
                     <td *ngIf="withCheckboxes" class="notification-check-col">
                       <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                     </td>
+                    <td class="notification-tab-prio-col">                                                   
+                      <img *ngIf="sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName" 
+                      src="assets/img/{{sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                    </td>
                     <td class="notification-tab-first-col" ngInit="notification.historyOpen=false">
                       <a *ngIf="notification.version > 1 && isCollapsible" href="#history_openNot_{{notification.id}}" data-toggle="collapse" class="glyphicon glyphicon-menu-down glyphicon-menu-up"
                         (click)="toggleHistoryTab(notification)" [ngClass]="{'glyphicon-menu-up': notification.historyOpen, 'glyphicon-menu-down': !notification.historyOpen}"
@@ -109,10 +116,14 @@
                     </td>
                   </tr>
                   <tr id="history_openNot_{{notification.id}}" [ngClass]="{'panel-collapse': notification.historyOpen}" *ngIf="isCollapsible && notification.historyOpen">
-                    <td [attr.colspan]="8">
+                    <td [attr.colspan]="9">
                       <table style="width:100%;" class="notificationVersions">
                         <tbody>
                           <tr *ngFor="let notificationVersion of notification.decoratorNotificationVersions">
+                            <td class="notification-tab-prio-col">                                                   
+                              <img *ngIf="sessionContext.getPrioById(notificationVersion.fkRefNotificationPriority)?.imageName" 
+                              src="assets/img/{{sessionContext.getPrioById(notificationVersion.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                            </td>
                             <td class="notification-tab-version-col">{{ notificationVersion.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</td>
                             <td class="notification-tab-branch">
                               <span *ngIf="sessionContext.getBrancheById(notificationVersion.fkRefBranch)">
diff --git a/src/app/lists/search-result-list/search-result-list.component.html b/src/app/lists/search-result-list/search-result-list.component.html
index e3f7474..49fa698 100644
--- a/src/app/lists/search-result-list/search-result-list.component.html
+++ b/src/app/lists/search-result-list/search-result-list.component.html
@@ -25,6 +25,10 @@
             <th *ngIf="withCheckboxes" class="notification-check-col">
               <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
             </th>
+            <th class="notification-tab-prio-col">
+              <app-sorting [initColumnName]="'fkRefNotificationPriority'" (click)=" sort('fkRefNotificationPriority')" [isDesc]="sortingState?.isDesc" 
+              [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Prio</app-sorting>
+            </th>
             <th class="search-result-tab-first-col">
               <app-sorting [initColumnName]="'beginDate'" (click)="sort('beginDate')" [isDesc]="sortingState?.isDesc"
                 [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
@@ -61,13 +65,17 @@
         </thead>
         <tbody>
           <tr *ngFor="let notification of notifications; let  i = index">
-            <td colspan="9" style="padding:0px;" border=3>
+            <td colspan="10" style="padding:0px;" border=3>
               <table style="width:100%">
                 <tbody>
                   <tr [ngClass]="{'incident-id-change' : notifications[i] && notifications[i+1] && notifications[i].incidentId !== notifications[i+1].incidentId}">
                     <td *ngIf="withCheckboxes" class="notification-check-col">
                       <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                     </td>
+                    <td class="notification-tab-prio-col">                                                   
+                      <img *ngIf="sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName" 
+                      src="assets/img/{{sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName}}" width="18">                      
+                    </td>
                     <td class="search-result-tab-first-col">{{ notification.beginDate | formattedTimestamp: 'DD.MM.YYYY
                       HH:mm' }}
                     </td>
diff --git a/src/app/model/global-search-filter.ts b/src/app/model/global-search-filter.ts
index cf8a0a9..8227da1 100644
--- a/src/app/model/global-search-filter.ts
+++ b/src/app/model/global-search-filter.ts
@@ -21,4 +21,5 @@ export class GlobalSearchFilter {
     fkRefBranch: number;
     fkRefGridTerritory: number;
     fastSearchSelected: boolean;
+    fkRefNotificationPriority: number;
 }
\ No newline at end of file
diff --git a/src/app/model/notification.ts b/src/app/model/notification.ts
index a91ace2..18b9574 100644
--- a/src/app/model/notification.ts
+++ b/src/app/model/notification.ts
@@ -13,6 +13,7 @@ export class Notification {
     id: number;
     selected: boolean;
     incidentId: number;
+    fkRefNotificationPriority: number;
     status: string;
     fkRefBranch: number;
     fkRefGridTerritory: number;
diff --git a/src/app/model/priority.ts b/src/app/model/priority.ts
new file mode 100644
index 0000000..e17db1b
--- /dev/null
+++ b/src/app/model/priority.ts
@@ -0,0 +1,17 @@
+/**
+******************************************************************************
+* Copyright © 2017-2018 PTA GmbH.
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Eclipse Public License v1.0
+* which accompanies this distribution, and is available at
+* 
+*     http://www.eclipse.org/legal/epl-v10.html
+* 
+******************************************************************************
+*/
+export class Priority {
+    id: number;
+    name: string;
+    weighting: number;
+    imageName: string;
+}
diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html
index 7d442b2..962b5ec 100644
--- a/src/app/pages/search/search.component.html
+++ b/src/app/pages/search/search.component.html
@@ -64,7 +64,7 @@
                                                 </td>
                                                 <td colspan="2"></td>
                                             </tr>
-                                            <tr height="60px">
+                                            <tr>
                                                 <td class="text-right"><label>Bereich</label></td>
                                                 <td class="text-left" style="width: 17%">
                                                     <div class="form-group">
@@ -80,11 +80,11 @@
                                                 </td>
                                                 <td width="160">
                                                     <span class="filterCheckbox"><input type="checkbox"  
-                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusOpenSelection" name="statusOpen"></span>                                                    offen
+                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusOpenSelection" name="statusOpen"></span>offen
                                                 </td>
                                                 <td width="160">
                                                     <span class="filterCheckbox"><input type="checkbox"  
-                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusInWorkSelection" name="statusInWork"></span>                                                    in Arbeit
+                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusInWorkSelection" name="statusInWork"></span>in Arbeit
                                                 </td>
                                                 <td colspan="4"></td>
                                             </tr>
@@ -101,11 +101,28 @@
                                                 <td colspan="4" style="border: none;"></td>
                                                 <td width="160" style="border: none;">
                                                     <span class="filterCheckbox"><input type="checkbox"  
-                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusDoneSelection" name="statusDone"></span>                                                    erledigt
+                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusDoneSelection" name="statusDone"></span>erledigt
                                                 </td>
                                                 <td width="160" style="border: none;">
                                                     <span class="filterCheckbox"><input type="checkbox"  
-                                                                    class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusClosedSelection" name="statusClosed"></span>                                                    geschlossen
+                                                                    class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.statusClosedSelection" name="statusClosed"></span>geschlossen
+                                                </td>
+                                                <td style="border: none;"></td>
+                                            </tr>
+                                            <tr>
+                                                <td class="text-right" style="border: none;"><label>Priorität</label></td>
+                                                <td class="text-left" style="width: 17%; border: none;">
+                                                    <div class="form-group">
+                                                        <select class="form-control" [(ngModel)]="currentSearchFilter.fkRefNotificationPriority" name="prioSelection">
+                                                                    <option value="-1">Alle</option>
+                                                                    <option *ngFor="let priority of priorities" value="{{ priority.id }}">{{ priority.name }}</option>
+                                                                </select>
+                                                    </div>
+                                                </td>
+                                                <td colspan="4" style="border: none;"></td>
+                                                <td style="border: none;">                                                    
+                                                </td>
+                                                <td style="border: none;">                                                   
                                                 </td>
                                                 <td style="border: none;"></td>
                                             </tr>
@@ -113,7 +130,7 @@
                                                 <td class="text-right"><label>Schnellsuche</label></td>
                                                 <td colspan="4">
                                                     <span class="filterCheckbox"><input type="checkbox"  
-                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.fastSearchSelected" name="fastSearchSelected"></span>                                                    Schnellsuche ausführen
+                                                            class="responsibility-checkbox-gr" [(ngModel)]="currentSearchFilter.fastSearchSelected" name="fastSearchSelected"></span>Schnellsuche ausführen
                                                 </td>
                                                 <td colspan="6"></td>
                                             </tr>
diff --git a/src/app/pages/search/search.component.ts b/src/app/pages/search/search.component.ts
index f091ba1..04ee699 100644
--- a/src/app/pages/search/search.component.ts
+++ b/src/app/pages/search/search.component.ts
@@ -30,6 +30,7 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/throw';
 import { SearchResultService } from '../../services/search-result.service';
 import {  slideInOpacity } from '../../common/router.animations';
+import { Priority } from 'app/model/priority';
 
 @Component({
     selector: 'app-search',
@@ -49,6 +50,7 @@ export class SearchComponent implements OnInit {
     gridTerritories: GridTerritory[];
     branches: Branch[];
     statuses: Status[];
+    priorities: Priority[];
     public globalSearchFilter: GlobalSearchFilter;
     public currentSearchFilter: GlobalSearchFilter = new GlobalSearchFilter();
 
@@ -65,6 +67,7 @@ export class SearchComponent implements OnInit {
         this.gridTerritories = this.sessionContext.getMasterGridTerritories();
         this.branches = this.sessionContext.getBranches();
         this.statuses = this.sessionContext.getStatuses();
+        this.priorities = this.sessionContext.getPriorities();
         this.currentSearchFilter = this.sessionContext.getGlobalSearchFilter();
         
     }
diff --git a/src/app/services/base-data.service.ts b/src/app/services/base-data.service.ts
index 6f63a41..41b360a 100644
--- a/src/app/services/base-data.service.ts
+++ b/src/app/services/base-data.service.ts
@@ -24,6 +24,7 @@ import { Status } from '../model/status';
 import { GridTerritory } from '../model/gridterritory';
 import { GRIDTERRITORIES } from '../test-data/gridterritories';
 import { MessageService } from './message.service';
+import { Priority } from 'app/model/priority';
 
 @Injectable()
 export class BaseDataService extends BaseHttpService {
@@ -45,6 +46,16 @@ export class BaseDataService extends BaseHttpService {
       .catch((error) => { return super.handleErrorPromise(error); });
   }
 
+  public getPriorities(): Observable<Priority[]> {
+    const headers = new Headers();
+    const url = super.getBaseUrl() + '/notificationPriorities/';
+    this.createCommonHeaders(headers, this._sessionContext);
+
+    return this._http.get(url, { headers: headers })
+      .map(res => super.extractData(res, this._sessionContext))
+      .catch((error) => { return super.handleErrorPromise(error); });
+  }
+
   public getBranches(): Observable<Branch[]> {
     const headers = new Headers();
     const url = super.getBaseUrl() + '/branches/';
diff --git a/src/app/services/jobs/base-data-loader.service.spec.ts b/src/app/services/jobs/base-data-loader.service.spec.ts
index e3164b9..98fdb9f 100644
--- a/src/app/services/jobs/base-data-loader.service.spec.ts
+++ b/src/app/services/jobs/base-data-loader.service.spec.ts
@@ -20,15 +20,18 @@ import { SessionContext } from '../../common/session-context';
 import { BaseDataService } from '../base-data.service';
 import { USERS} from '../../test-data/users';
 import { BaseDataLoaderService } from './base-data-loader.service';
+import { Priority } from 'app/model/priority';
 
 describe('BaseDataLoaderService', () => {
   class MockDataService extends AbstractMockObservableService {
     public statusList: Status[];
     public branchList: Branch[];
+    public prioritiesList: Priority[];
     public gridTerritoryList: GridTerritory[];
     public statusError;
     public branchError;
     public gridTerritoryError;
+    public priorityError;
 
     getStatuses() {
       const newService = new MockDataService();
@@ -48,6 +51,13 @@ describe('BaseDataLoaderService', () => {
       newService.error = this.gridTerritoryError;
       return newService;
     }
+    
+    getPriorities() {    
+      const newService = new MockDataService();
+      newService.content = this.prioritiesList;
+      newService.error = this.priorityError;            
+      return newService;
+    }
   }
 
   class MockUserService extends AbstractMockObservableService {
@@ -87,10 +97,11 @@ describe('BaseDataLoaderService', () => {
 
   }));
 
-  fit('should be load the base-data after MSG_LOG_IN_SUCCEEDED-Message "', fakeAsync(() => {
+  it('should be load the base-data after MSG_LOG_IN_SUCCEEDED-Message "', fakeAsync(() => {
     mockDataService.statusList = [{ id: 1, name: 'offen' }];
     mockDataService.branchList = [{ id: 1, name: 'W', description: 'Wasser' }];
     mockDataService.gridTerritoryList = [{ id: 1, name: 'MA', description: 'Mannheim', fkRefMaster: 1 }];
+    mockDataService.prioritiesList = [{ id: 1, name: 'Wichtig', weighting: 30, imageName: "prio-important-icon-web.svg" }];
     mockUserService.userList = USERS;
 
     expect(sessionContext.getStatuses()).toBeNull();
diff --git a/src/app/services/jobs/base-data-loader.service.ts b/src/app/services/jobs/base-data-loader.service.ts
index 7ddd1a6..ec09242 100644
--- a/src/app/services/jobs/base-data-loader.service.ts
+++ b/src/app/services/jobs/base-data-loader.service.ts
@@ -48,6 +48,12 @@ export class BaseDataLoaderService {
         console.log(error);
       });
 
+    this.baseDataService.getPriorities()
+      .subscribe(res => this.sessionContext.setPriorities(res),
+      error => {
+        console.log(error);
+      });
+
     this.baseDataService.getGridTerritories()
       .subscribe(res => this.sessionContext.setGridTerritories(res),
       error => {
diff --git a/src/app/test-data/notifications.ts b/src/app/test-data/notifications.ts
index 64d2c43..a6f77c2 100644
--- a/src/app/test-data/notifications.ts
+++ b/src/app/test-data/notifications.ts
@@ -17,6 +17,7 @@ export const DUMMY_CREATED_NOTIFICATION: Notification = {
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -43,6 +44,7 @@ export const DUMMY_UPDATED_NOTIFICATION: Notification = {
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -69,6 +71,7 @@ export const DUMMY_NOTIFICATION: Notification = {
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -96,6 +99,7 @@ export const CURRENT_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -122,6 +126,7 @@ export const CURRENT_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',        
@@ -151,6 +156,7 @@ export const FUTURE_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 2,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 1,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -177,6 +183,7 @@ export const FUTURE_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',        
@@ -206,6 +213,7 @@ export const OPEN_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',            
@@ -232,6 +240,7 @@ export const OPEN_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theobald',            
@@ -258,6 +267,7 @@ export const OPEN_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo-Bold',            
@@ -284,6 +294,7 @@ export const OPEN_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theofrank',            
@@ -313,6 +324,7 @@ export const FINISHED_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 4,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'christobal',            
@@ -339,6 +351,7 @@ export const FINISHED_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 2,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 4,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'frankobal',            
@@ -365,6 +378,7 @@ export const FINISHED_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 3,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',            
@@ -394,6 +408,7 @@ export const NOTIFICATION_VERSIONS: Notification[] = [
         fkRefBranch: 2,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 1,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'christobal',            
@@ -420,6 +435,7 @@ export const NOTIFICATION_VERSIONS: Notification[] = [
         fkRefBranch: 2,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 1,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'frankobal',            
@@ -446,6 +462,7 @@ export const NOTIFICATION_VERSIONS: Notification[] = [
         fkRefBranch: 2,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 1,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',            
diff --git a/src/app/test-data/reminder-notifications.ts b/src/app/test-data/reminder-notifications.ts
index 9fbf952..ebe24bc 100644
--- a/src/app/test-data/reminder-notifications.ts
+++ b/src/app/test-data/reminder-notifications.ts
@@ -17,6 +17,7 @@ export const DUMMY_CREATED_REMINDER_NOTIFICATION: Notification = {
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -43,6 +44,7 @@ export const DUMMY_UPDATED_REMINDER_NOTIFICATION: Notification = {
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -69,6 +71,7 @@ export const DUMMY_REMINDER_NOTIFICATION: Notification = {
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -96,6 +99,7 @@ export const REMINDER_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -122,6 +126,7 @@ export const REMINDER_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',        
@@ -148,6 +153,7 @@ export const REMINDER_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo-Bold',            
diff --git a/src/app/test-data/search-result-notifications.ts b/src/app/test-data/search-result-notifications.ts
index 482b7f2..e5112fb 100644
--- a/src/app/test-data/search-result-notifications.ts
+++ b/src/app/test-data/search-result-notifications.ts
@@ -18,6 +18,7 @@ export const DUMMY_UPDATED_NOTIFICATION: Notification = {
     fkRefBranch: 1,
     fkRefGridTerritory: 1,
     fkRefNotificationStatus: 2,
+    fkRefNotificationPriority: null,
     beginDate: '2017-01-16T14:01:001',
     modDate: null,
     modUser: 'theo',
@@ -46,6 +47,7 @@ export const SEARCH_RESULT_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',
@@ -72,6 +74,7 @@ export const SEARCH_RESULT_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theobald',
@@ -98,6 +101,7 @@ export const SEARCH_RESULT_NOTIFICATIONS: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo-Bold',
@@ -127,6 +131,7 @@ export const SEARCH_RESULT_NOTIFICATIONS2: Notification[] = [
         fkRefBranch: 1,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo',            
@@ -153,6 +158,7 @@ export const SEARCH_RESULT_NOTIFICATIONS2: Notification[] = [
         fkRefBranch: 2,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theobald',            
@@ -179,6 +185,7 @@ export const SEARCH_RESULT_NOTIFICATIONS2: Notification[] = [
         fkRefBranch: 3,
         fkRefGridTerritory: 2,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theo-Bold',            
@@ -205,6 +212,7 @@ export const SEARCH_RESULT_NOTIFICATIONS2: Notification[] = [
         fkRefBranch: 4,
         fkRefGridTerritory: 1,
         fkRefNotificationStatus: 2,
+        fkRefNotificationPriority: null,
         beginDate: '2017-01-16T14:01:001',
         modDate: null,
         modUser: 'theofrank',            
diff --git a/src/assets/img/prio-important-icon-web.svg b/src/assets/img/prio-important-icon-web.svg
new file mode 100644
index 0000000..955e36a
--- /dev/null
+++ b/src/assets/img/prio-important-icon-web.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="60"
+   height="60"
+   version="1.1"
+   viewBox="0 0 15.874857 15.874857"
+   id="svg14"
+   sodipodi:docname="prio-important-icon-web.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     id="namedview16"
+     showgrid="true"
+     inkscape:zoom="12"
+     inkscape:cx="23.72977"
+     inkscape:cy="23.144116"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g10"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid10"
+       originx="4.6186399e-06"
+       originy="-3.5725197e-07" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-101.4242,-161.14419)"
+     id="g10">
+    <g
+       id="g15"
+       transform="matrix(3.0000108,0,0,3.0000108,-202.8495,-322.29012)">
+      <path
+         id="circle4"
+         style="fill:#ff0000;paint-order:stroke fill markers"
+         d="m 106.7158,163.78999 a 2.6458001,2.6458001 0 0 1 -2.6458,2.6458 2.6458001,2.6458001 0 0 1 -2.6458,-2.6458 2.6458001,2.6458001 0 0 1 2.6458,-2.6458 2.6458001,2.6458001 0 0 1 2.6458,2.6458 z" />
+      <g
+         transform="matrix(0.5996,0,0,0.5996,185.26,183.24)"
+         fill="#ffffff"
+         style="white-space:pre;shape-inside:url(#rect857-5)"
+         aria-label="!"
+         id="g8">
+        <path
+           d="m -135.87,-32.036 -0.1323,-1.9802 q -0.0372,-0.57878 -0.0372,-0.83096 0,-0.34313 0.17776,-0.5333 0.18191,-0.1943 0.47543,-0.1943 0.35553,0 0.47542,0.24805 0.11989,0.24391 0.11989,0.70693 0,0.27285 -0.0289,0.55397 l -0.17777,2.0381 q -0.0289,0.3638 -0.12402,0.55811 -0.0951,0.1943 -0.31419,0.1943 -0.22324,0 -0.31006,-0.18604 -0.0868,-0.19017 -0.12402,-0.57464 z m 0.45888,2.7202 q -0.25218,0 -0.44235,-0.16123 -0.18603,-0.16536 -0.18603,-0.45889 0,-0.25632 0.17776,-0.43408 0.18191,-0.1819 0.44235,-0.1819 0.26045,0 0.44235,0.1819 0.18604,0.17777 0.18604,0.43408 0,0.28939 -0.18604,0.45475 -0.18603,0.16536 -0.43408,0.16536 z"
+           fill="#ffffff"
+           id="path6" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/img/prio-info-icon-web.svg b/src/assets/img/prio-info-icon-web.svg
new file mode 100644
index 0000000..a72af5d
--- /dev/null
+++ b/src/assets/img/prio-info-icon-web.svg
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="60"
+   height="60"
+   version="1.1"
+   viewBox="0 0 15.874857 15.874857"
+   id="svg20"
+   sodipodi:docname="prio-info-icon-web.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <defs
+     id="defs24" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     id="namedview22"
+     showgrid="false"
+     inkscape:zoom="12"
+     inkscape:cx="-20.847125"
+     inkscape:cy="26.99095"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g18"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-93.993195,-121.2042)"
+     id="g18">
+    <path
+       id="circle4"
+       style="fill:#337ab7;stroke-width:3.00001;paint-order:stroke fill markers"
+       d="m 109.86805,129.14163 a 7.9374289,7.9374289 0 0 1 -7.93743,7.93743 7.9374289,7.9374289 0 0 1 -7.937425,-7.93743 7.9374289,7.9374289 0 0 1 7.937425,-7.93743 7.9374289,7.9374289 0 0 1 7.93743,7.93743 z" />
+    <g
+       transform="matrix(1.7988065,0,0,1.7988065,346.00043,187.45314)"
+       fill="#ffffff"
+       style="white-space:pre;shape-inside:url(#rect857)"
+       aria-label="i"
+       id="g8">
+      <path
+         d="m -135.12,-33.256 v 3.2618 q 0,0.339 -0.16123,0.51263 -0.16123,0.17363 -0.40928,0.17363 -0.24805,0 -0.40514,-0.17777 -0.15296,-0.17777 -0.15296,-0.5085 v -3.2287 q 0,-0.33486 0.15296,-0.50436 0.15709,-0.1695 0.40514,-0.1695 0.24805,0 0.40928,0.1695 0.16123,0.1695 0.16123,0.47129 z m -0.55811,-1.1658 q -0.23564,0 -0.40514,-0.14469 -0.16536,-0.14469 -0.16536,-0.40928 0,-0.23978 0.16949,-0.39274 0.17364,-0.1571 0.40101,-0.1571 0.21911,0 0.38861,0.14056 0.1695,0.14056 0.1695,0.40928 0,0.26045 -0.16537,0.40928 -0.16536,0.14469 -0.39274,0.14469 z"
+         fill="#ffffff"
+         id="path6" />
+    </g>
+    <text
+       fill="#000000"
+       font-size="20px"
+       letter-spacing="0px"
+       word-spacing="0px"
+       style="line-height:125%"
+       xml:space="preserve"
+       id="text16"><tspan
+         x="0"
+         y="0"
+         fill="#ffffff"
+         font-family="'Arial Rounded MT Bold'"
+         font-size="8.4667px"
+         font-weight="bold"
+         style="line-height:1.25;white-space:pre;shape-inside:url(#rect857)"
+         xml:space="preserve"
+         id="tspan14"><tspan
+           xml:space="preserve"
+           id="tspan12"><tspan
+             fill="#ffffff"
+             font-family="'Arial Rounded MT Bold'"
+             font-size="8.4667px"
+             font-weight="bold"
+             xml:space="preserve"
+             id="tspan10">i</tspan></tspan></tspan></text>
+  </g>
+</svg>
diff --git a/src/assets/img/prio-normal-icon-web.svg b/src/assets/img/prio-normal-icon-web.svg
new file mode 100644
index 0000000..adf6272
--- /dev/null
+++ b/src/assets/img/prio-normal-icon-web.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="60"
+   height="60"
+   version="1.1"
+   viewBox="0 0 15.874857 15.874857"
+   id="svg8"
+   sodipodi:docname="prio-normal-icon-web.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="48"
+     inkscape:cx="10.499956"
+     inkscape:cy="10.499979"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="matrix(2.9999938,0,0,2.9999938,-350.02183,-343.21185)"
+     id="g6">
+    <path
+       id="ellipse4"
+       style="fill:none;stroke:#cccccc;stroke-width:0.84263;paint-order:normal"
+       d="m 121.5445,117.05 a 2.2244999,2.2244999 0 0 1 -2.2245,2.2245 2.2244999,2.2244999 0 0 1 -2.2245,-2.2245 2.2244999,2.2244999 0 0 1 2.2245,-2.2245 2.2244999,2.2244999 0 0 1 2.2245,2.2245 z" />
+  </g>
+</svg>