Revize b287ef3e

Re #7253 Off days component implemented

frontend/src/app/off-days-info/off-days-info.component.html

@@ +1 @@
+<div class="off-days-info-container">
+
+  <div class="component-header">
+    Zbývající volno
+  </div>
+
+  <div class="off-days-type-container">
+    <span class="off-days-remaining">{{extraVacationRemaining}}</span>
+    <span class="off-days-type">Extra dovolená</span>
+  </div>
+
+  <div class="off-days-type-container">
+    <span class="off-days-remaining">{{sickDaysRemaining}}</span>
+    <span class="off-days-type">Sickdays</span>
+    <span class="sickdays-used">Využito {{sickDaysUsed}} sickdays</span>
+  </div>
+
+</div>

frontend/src/app/off-days-info/off-days-info.component.sass

@@ +1 @@
+@import '../../common-styles/basic-component'
+
+.off-days-info-container
+  @extend .basic-component
+
+.off-days-type-container
+  border-bottom: 1px solid gainsboro
+
+.off-days-remaining
+  color: green
+  font-size: 30px
+  font-weight: bold
+
+.off-days-type
+  color: black
+  font-weight: bold
+  display: block
+
+.sickdays-used
+  color: grey
+  font-size: 10px
+  font-style: italic

frontend/src/app/off-days-info/off-days-info.component.ts

@@ +1 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-off-days-info',
+  templateUrl: './off-days-info.component.html',
+  styleUrls: ['./off-days-info.component.sass']
+})
+export class OffDaysInfoComponent {
+
+  @Input() sickDaysRemaining: number;
+  @Input() sickDaysUsed: number;
+
+  @Input() extraVacationRemaining: number;
+
+  constructor() { }
+}

frontend/src/app/off-days-info/off-days-info.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { OffDaysInfoComponent } from './off-days-info.component';
+
+@NgModule({
+  declarations: [ OffDaysInfoComponent ],
+  exports:      [ OffDaysInfoComponent ]
+})
+export class OffDaysInfoModule { }