merge feature/sidebar

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { SprintTableComponent } from './sprint-table/sprint-table.component';
 // import { DashboardComponent } from './dashboard/dashboard.component';
 
 
+
 const routes: Routes = [
   { path: 'tasks', component: TaskTableComponent },
   { path: 'userstories', component: UserstoryTableComponent },

src/app/app.component.css

@@ -0,0 +1,22 @@
+.sidebar {
+  width: 150px;
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  bottom: 0;
+  opacity: 95%;
+}
+
+.nav a {
+    font-size: 1em;
+}
+
+.nav a:hover:not(.active) {
+    font-size: 1.15em;
+  }
+
+.content {
+    position: relative;
+    float: right;
+    margin-top: 10px;
+}

src/app/app.component.html

@@ -1,39 +1,75 @@
-<router-outlet></router-outlet>
-<div class=" fixed-plugin">
-    <div class=" show-dropdown" ngbDropdown>
-      <a data-toggle="dropdown" ngbDropdownToggle>
-        <i class="fa fa-cog fa-2x"></i>
+<div class="container-fluid">
+
+  <div class="sidebar">
+    <div class="logo">
+      <a class="simple-text logo-normal">
+        Taskboard
       </a>
-      <ul ngbDropdownMenu>
-          <!--
-        <li class=" header-title">Sidebar Background</li>
-        <li class=" adjustments-line">
-          <a class=" switch-trigger background-color" href="javascript:void(0)">
-            <div class=" badge-colors text-center">
-              <span
-                class=" badge filter badge-danger"
-                [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
-              >
-              </span>
-              <span
-                class=" badge filter badge-primary"
-                [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
-              >
-              </span>
-              <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
-              <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
-              </span>
-            </div>
-            <div class=" clearfix"></div>
+    </div>
+      <ul class="nav">
+        <li class="active ">
+          <a href="/dashboard">
+            <p>Dashboard</p>
           </a>
         </li>
-        -->
-        <li class=" adjustments-line text-center color-change">
-          <span class=" color-label"> LIGHT MODE </span>
-          <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
-          <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
-          <span class=" color-label"> DARK MODE </span>
+        <li>
+          <a href="/sprints">
+            <p>Sprints</p>
+          </a>
+        </li>
+        <li>
+          <a href="/userstories">
+            <p>Userstories</p>
+          </a>
+        </li>
+        <li>
+          <a href="/tasks">
+            <p>Tasks</p>
+          </a>
         </li>
       </ul>
+  </div>
+
+  <router-outlet></router-outlet>
+
+  <div class="content">
+    <div class=" fixed-plugin">
+      <div class=" show-dropdown" ngbDropdown>
+        <a data-toggle="dropdown" ngbDropdownToggle>
+          <i class="fa fa-cog fa-2x"></i>
+        </a>
+        <ul ngbDropdownMenu>
+          <!--
+          <li class=" header-title">Sidebar Background</li>
+          <li class=" adjustments-line">
+            <a class=" switch-trigger background-color" href="javascript:void(0)">
+              <div class=" badge-colors text-center">
+                <span
+                  class=" badge filter badge-danger"
+                  [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
+                >
+                </span>
+                <span
+                  class=" badge filter badge-primary"
+                  [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
+                >
+                </span>
+                <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
+                <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
+                </span>
+              </div>
+              <div class=" clearfix"></div>
+            </a>
+          </li>
+          -->
+          <li class=" adjustments-line text-center color-change">
+            <span class=" color-label"> LIGHT MODE </span>
+            <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
+            <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
+            <span class=" color-label"> DARK MODE </span>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
+  </div>
+</div>

src/app/dashboard/dashboard.component.html

@@ -92,6 +92,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   </div>
 

src/app/sprint-table/sprint-table.component.css

@@ -1,3 +1,11 @@
 th.sortable:hover {
     text-decoration: underline;
-}
+}
+
+.content {
+    position: relative;
+    float: left;
+    margin-top: 10px;
+    margin-left: 20px;
+    width: 80%;
+}

src/app/sprint-table/sprint-table.component.html

@@ -1,36 +1,36 @@
 <div class="container-fluid">
-
+  <div class="content">
     <h3>
       Sprints
     </h3>
-  
+
     <button class="btn btn-secondary" (click)="openSprintForm()">Neuer Sprint</button>
     <table class="table">
       <thead>
-      <tr>
-        <th (click)="sortById()" class="sortable">
-          <span>ID</span>
-          <span>
-            <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
-            <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
-            <span *ngIf="sortDescending === false && sortBy === 'id'"><i class="fa fa-sort-down fa-lg"></i></span>
-        </span>
-        </th>
-        <th (click)="sortByTitle()" class="sortable">
-          <span>Titel</span>
-          <span>
-            <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
-            <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
-            <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
-        </span>
-        </th>
-        <th (click)="sortByStartDate()" class="sortable">
+        <tr>
+          <th (click)="sortById()" class="sortable">
+            <span>ID</span>
+            <span>
+              <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'id'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th (click)="sortByTitle()" class="sortable">
+            <span>Titel</span>
+            <span>
+              <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th (click)="sortByStartDate()" class="sortable">
             <span>Start</span>
             <span>
               <span *ngIf="sortBy != 'startDate'"><i class="fa fa-sort fa-lg"></i></span>
               <span *ngIf="sortDescending && sortBy === 'startDate'"><i class="fa fa-sort-up fa-lg"></i></span>
               <span *ngIf="sortDescending === false && sortBy === 'startDate'"><i class="fa fa-sort-down fa-lg"></i></span>
-          </span>
+            </span>
           </th>
           <th (click)="sortByEndDate()" class="sortable">
             <span>End</span>
@@ -38,29 +38,29 @@
               <span *ngIf="sortBy != 'endDate'"><i class="fa fa-sort fa-lg"></i></span>
               <span *ngIf="sortDescending && sortBy === 'endDate'"><i class="fa fa-sort-up fa-lg"></i></span>
               <span *ngIf="sortDescending === false && sortBy === 'endDate'"><i class="fa fa-sort-down fa-lg"></i></span>
-          </span>
+            </span>
           </th>
-        <th></th>
-      </tr>
+          <th></th>
+        </tr>
       </thead>
-  
+
       <tbody>
-      <tr *ngFor="let sprint of filteredItems" [class.table-info]="sprint.id === highlightId">
-        <td>{{sprint.id}}</td>
-        <td>{{sprint.title}}</td>
-        <td>{{sprint.startDate | date:'dd.MM.yyyy'}}</td>
-        <td>{{sprint.endDate | date:'dd.MM.yyyy'}}</td>
-        <td>
-          <button type="button" rel="tooltip" (click)="openSprintForm(sprint)" class="btn btn-success btn-sm btn-icon">
-            <i class="fa fa-pencil-alt"></i>
-        </button>
-        <button type="button" rel="tooltip" (click)="deleteSprint(sprint)" class="btn btn-danger btn-sm btn-icon">
-            <i class="fa fa-trash"></i>
-        </button>
-        </td>
-      </tr>
+        <tr *ngFor="let sprint of filteredItems" [class.table-info]="sprint.id === highlightId">
+          <td>{{sprint.id}}</td>
+          <td>{{sprint.title}}</td>
+          <td>{{sprint.startDate | date:'dd.MM.yyyy'}}</td>
+          <td>{{sprint.endDate | date:'dd.MM.yyyy'}}</td>
+          <td>
+            <button type="button" rel="tooltip" (click)="openSprintForm(sprint)" class="btn btn-success btn-sm btn-icon">
+              <i class="fa fa-pencil-alt"></i>
+            </button>
+            <button type="button" rel="tooltip" (click)="deleteSprint(sprint)" class="btn btn-danger btn-sm btn-icon">
+              <i class="fa fa-trash"></i>
+            </button>
+          </td>
+        </tr>
       </tbody>
-  
+
     </table>
   </div>
-  
+</div>

src/app/task-table/task-table.component.css

@@ -1,3 +1,11 @@
 th.sortable:hover {
   text-decoration: underline;
 }
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}

src/app/task-table/task-table.component.html

@@ -1,126 +1,126 @@
 <div class="container-fluid">
-
+  <div class="content">
     <h3>
-        <a *ngIf="filterUserstoryId" [routerLink]="['/userstories', {id: filterUserstoryId}]">
-            Userstory #{{filterUserstoryId}}
-            &gt;
-        </a>
-        Tasks
+      <a *ngIf="filterUserstoryId" [routerLink]="['/userstories', {id: filterUserstoryId}]">
+        Userstory #{{filterUserstoryId}}
+        &gt;
+      </a>
+      Tasks
     </h3>
     <div *ngIf="filterUserstoryId">
-        <a [routerLink]="'/tasks'">Alle Tasks anzeigen</a>
+      <a [routerLink]="'/tasks'">Alle Tasks anzeigen</a>
     </div>
 
     <button class="btn btn-secondary" (click)="openTaskForm()">Neuer Task</button>
 
     <table class="table">
-        <thead>
-            <tr>
-                <th (click)="sortById()" class="sortable">
-                    <span>ID</span>
-                    <span>
-                        <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
-                        <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
-                        <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
-                    </span>
-                </th>
-                <th (click)="sortByTitle()" class="sortable">
-                    <span>Titel</span>
-                    <span>
-                        <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
-                        <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
-                        <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
-                    </span>
-                </th>
-                <th (click)="sortByTasks()" class="sortable">
-                    <span>Userstory</span>
-                    <span>
-                        <span *ngIf="sortBy != 'userstory'"><i class="fa fa-sort fa-lg"></i></span>
-                        <span *ngIf="sortDescending && sortBy === 'userstory'"><i class="fa fa-sort-up fa-lg"></i></span>
-                        <span *ngIf="sortDescending === false && sortBy === 'userstory'"><i class="fa fa-sort-down fa-lg"></i></span>
-                    </span>
-                </th>
-                <th (click)="sortByStatus()" class="sortable">
-                    <span>Status</span>
-                    <span>
-                        <span *ngIf="sortBy != 'statusid'"><i class="fa fa-sort fa-lg"></i></span>
-                        <span *ngIf="sortDescending && sortBy === 'statusid'"><i class="fa fa-sort-up fa-lg"></i></span>
-                        <span *ngIf="sortDescending === false && sortBy === 'statusid'"><i class="fa fa-sort-down fa-lg"></i></span>
-                    </span>
-                </th>
-                <th class="sortable">
-                    <div class="d-inline-block">
-                        <span (click)="sortByPrio()">Priorität: </span>
-                        <div ngbDropdown class="d-inline-block">
-                            <span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
-                            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                                <option ngbDropdownItem (click)="filterPriority=null">All</option>
-                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}</option>
-                            </div>
-                        </div>
-                        <span (click)="sortByPrio()">
-                                <span *ngIf="sortBy != 'priority'"><i class="fa fa-sort fa-lg"></i></span>
-                                <span *ngIf="sortDescending && sortBy === 'priority'"><i class="fa fa-sort-up fa-lg"></i></span>
-                                <span *ngIf="sortDescending === false && sortBy === 'priority'"><i class="fa fa-sort-down fa-lg"></i></span>
-                        </span>
-                    </div>
-                </th>
-                <th (click)="sortByAssigned()" class="sortable">
-                    <span>Assigned To</span>
-                    <span>
-                        <span *ngIf="sortBy != 'assignedtoid'"><i class="fa fa-sort fa-lg"></i></span>
-                        <span *ngIf="sortDescending && sortBy === 'assignedtoid'"><i class="fa fa-sort-up fa-lg"></i></span>
-                        <span *ngIf="sortDescending === false && sortBy === 'assignedtoid'"><i class="fa fa-sort-down fa-lg"></i></span>
-                    </span>
-                </th>
-                <th (click)="sortByCategory()" class="sortable">
-                    <span>Category</span>
-                    <span>
-                        <span *ngIf="sortBy != 'categoryid'"><i class="fa fa-sort fa-lg"></i></span>
-                        <span *ngIf="sortDescending && sortBy === 'categoryid'"><i class="fa fa-sort-up fa-lg"></i></span>
-                        <span *ngIf="sortDescending === false && sortBy === 'categoryid'"><i class="fa fa-sort-down fa-lg"></i></span>
-                    </span>
-                </th>
-                <th></th>
-            </tr>
-        </thead>
+      <thead>
+        <tr>
+          <th (click)="sortById()" class="sortable">
+            <span>ID</span>
+            <span>
+              <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th (click)="sortByTitle()" class="sortable">
+            <span>Titel</span>
+            <span>
+              <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th (click)="sortByTasks()" class="sortable">
+            <span>Userstory</span>
+            <span>
+              <span *ngIf="sortBy != 'userstory'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'userstory'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'userstory'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th (click)="sortByStatus()" class="sortable">
+            <span>Status</span>
+            <span>
+              <span *ngIf="sortBy != 'statusid'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'statusid'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'statusid'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th class="sortable">
+            <div class="d-inline-block">
+              <span (click)="sortByPrio()">Priorität: </span>
+              <div ngbDropdown class="d-inline-block">
+                <span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
+                <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                  <option ngbDropdownItem (click)="filterPriority=null">All</option>
+                  <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}</option>
+                </div>
+              </div>
+              <span (click)="sortByPrio()">
+                <span *ngIf="sortBy != 'priority'"><i class="fa fa-sort fa-lg"></i></span>
+                <span *ngIf="sortDescending && sortBy === 'priority'"><i class="fa fa-sort-up fa-lg"></i></span>
+                <span *ngIf="sortDescending === false && sortBy === 'priority'"><i class="fa fa-sort-down fa-lg"></i></span>
+              </span>
+            </div>
+          </th>
+          <th (click)="sortByAssigned()" class="sortable">
+            <span>Assigned To</span>
+            <span>
+              <span *ngIf="sortBy != 'assignedtoid'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'assignedtoid'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'assignedtoid'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th (click)="sortByCategory()" class="sortable">
+            <span>Category</span>
+            <span>
+              <span *ngIf="sortBy != 'categoryid'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortDescending && sortBy === 'categoryid'"><i class="fa fa-sort-up fa-lg"></i></span>
+              <span *ngIf="sortDescending === false && sortBy === 'categoryid'"><i class="fa fa-sort-down fa-lg"></i></span>
+            </span>
+          </th>
+          <th></th>
+        </tr>
+      </thead>
 
-        <tbody>
-            <tr *ngFor="let task of filteredItems" [class.table-info]="task.id === highlightId">
-                <td>{{task.id}}</td>
-                <td>{{task.title}}</td>
-                <td>
-                    <a [routerLink]="['/userstories', {id: task.userstoryid}]">
-                        US #{{task.userstoryid}}
-                    </a>
-                </td>
-                <td>
-                    <a [routerLink]="['/status', {id: task.statusid}]">
-                        {{getStatusTitleById(task.statusid)}}
-                    </a>
-                </td>
-                <td>{{task.priority}}</td>
-                <td>
-                    <a [routerLink]="['/users', {id: task.assignedtoid}]">
-                        {{getUserNameById(task.assignedtoid)}}
-                    </a>
-                </td>
-                <td>
-                    <a [routerLink]="['/categories', {id: task.categoryid}]">
-                        {{getCategoryTitleById(task.categoryid)}}
-                    </a>
-                </td>
-                <td>
-                    <button type="button" rel="tooltip" (click)="openTaskForm(task)" class="btn btn-success btn-sm btn-icon">
-                        <i class="fa fa-pencil-alt"></i>
-                    </button>
-                    <button type="button" rel="tooltip" (click)="deleteTask(task)" class="btn btn-danger btn-sm btn-icon">
-                        <i class="fa fa-trash"></i>
-                    </button>
-                </td>
-            </tr>
-        </tbody>
+      <tbody>
+        <tr *ngFor="let task of filteredItems" [class.table-info]="task.id === highlightId">
+          <td>{{task.id}}</td>
+          <td>{{task.title}}</td>
+          <td>
+            <a [routerLink]="['/userstories', {id: task.userstoryid}]">
+              US #{{task.userstoryid}}
+            </a>
+          </td>
+          <td>
+            <a [routerLink]="['/status', {id: task.statusid}]">
+              {{getStatusTitleById(task.statusid)}}
+            </a>
+          </td>
+          <td>{{task.priority}}</td>
+          <td>
+            <a [routerLink]="['/users', {id: task.assignedtoid}]">
+              {{getUserNameById(task.assignedtoid)}}
+            </a>
+          </td>
+          <td>
+            <a [routerLink]="['/categories', {id: task.categoryid}]">
+              {{getCategoryTitleById(task.categoryid)}}
+            </a>
+          </td>
+          <td>
+            <button type="button" rel="tooltip" (click)="openTaskForm(task)" class="btn btn-success btn-sm btn-icon">
+              <i class="fa fa-pencil-alt"></i>
+            </button>
+            <button type="button" rel="tooltip" (click)="deleteTask(task)" class="btn btn-danger btn-sm btn-icon">
+              <i class="fa fa-trash"></i>
+            </button>
+          </td>
+        </tr>
+      </tbody>
 
     </table>
+  </div>
 </div>
-

src/app/userstory-table/userstory-table.component.css

@@ -1,3 +1,11 @@
 th.sortable:hover {
   text-decoration: underline;
 }
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}