nira-falcon 0.1.21 → 0.1.23

package/src/lib/core-time-picker/time-picker-modal/time-picker-modal.component.scss

@@ -0,0 +1,424 @@
+.timepicker {
+  width: 300px;
+  height: 450px;
+  background-color: var(--default-time-picker-background-color);
+  position: relative;
+  font-family: Calibri;
+  .top {
+    background-color: var(--default-time-picker-header-background-color);
+    color: var(--default-time-picker-header-text-color);
+    height: 100px;
+    line-height: 100px;
+    font-size: 50px;
+    text-align: center;
+    .h {
+      :hover {
+        cursor: pointer;
+      }
+    }
+    .m {
+      :hover {
+        cursor: pointer;
+      }
+    }
+    .active {
+      color: var(--default-time-picker-header-item-active-text-color);
+    }
+  }
+  .circle {
+    user-select: none;
+    background-color: var(--default-time-picker-circle-background-color);
+    width: 250px;
+    height: 250px;
+    border-radius: 1000px;
+    position: relative;
+    top: 25px;
+    right: 25px;
+    box-sizing: border-box;
+    .mid {
+      position: absolute;
+      left: calc(50%);
+      top: calc(50%);
+      width: 2px;
+      height: 2px;
+      border-radius: 10px;
+      background-color: var(--default-time-picker-point-background-color);
+    }
+    .hour {
+      position: absolute;
+      height: 40px;
+      line-height: 40px;
+      width: 40px;
+      border-radius: 40px;
+      text-align: center;
+      &.selected {
+        background-color: var(
+          --default-time-picker-hour-hover-background-color
+        );
+        &::after {
+          content: "";
+        }
+      }
+      &::after {
+        z-index: -1;
+        background-color: var(
+          --default-time-picker-hour-hover-background-color
+        );
+        height: 1px;
+        width: 100%;
+        position: absolute;
+        transform: rotate(-90deg);
+        transform-origin: 100% 0%;
+        top: 50%;
+        width: 101px;
+        right: 50%;
+      }
+      &:hover {
+        color: var(--default-time-picker-hour-hover-text-color);
+        z-index: 2;
+        cursor: pointer;
+        &::after {
+          content: "";
+        }
+      }
+      &:nth-child(12):after {
+        transform: rotate(330deg);
+      }
+      &:nth-child(11):after {
+        transform: rotate(300deg);
+      }
+      &:nth-child(10):after {
+        transform: rotate(270deg);
+      }
+      &:nth-child(9):after {
+        transform: rotate(240deg);
+      }
+      &:nth-child(8):after {
+        transform: rotate(210deg);
+      }
+      &:nth-child(7):after {
+        transform: rotate(180deg);
+      }
+      &:nth-child(6):after {
+        transform: rotate(150deg);
+      }
+      &:nth-child(5):after {
+        transform: rotate(120deg);
+      }
+      &:nth-child(4):after {
+        transform: rotate(90deg);
+      }
+      &:nth-child(3):after {
+        transform: rotate(60deg);
+      }
+      &:nth-child(2):after {
+        transform: rotate(30deg);
+      }
+      &:nth-child(1):after {
+        transform: rotate(0deg);
+      }
+    }
+    .hour2 {
+      z-index: 2;
+      position: absolute;
+      height: 30px;
+      line-height: 30px;
+      width: 30px;
+      border-radius: 40px;
+      text-align: center;
+      font-size: 14px;
+      &:hover {
+        color: var(--default-time-picker-hour-hover-text-color);
+        cursor: pointer;
+        &::after {
+          content: "";
+          background-color: var(
+            --default-time-picker-hour-hover-background-color
+          );
+          height: 1px;
+          width: 100%;
+          position: absolute;
+          transform: rotate(-90deg);
+          transform-origin: 100% 0%;
+          top: 50%;
+          width: 64px;
+          right: 50%;
+          z-index: -1;
+        }
+      }
+      &:nth-child(24):after {
+        transform: rotate(690deg);
+      }
+      &:nth-child(23):after {
+        transform: rotate(660deg);
+      }
+      &:nth-child(22):after {
+        transform: rotate(630deg);
+      }
+      &:nth-child(21):after {
+        transform: rotate(600deg);
+      }
+      &:nth-child(20):after {
+        transform: rotate(570deg);
+      }
+      &:nth-child(19):after {
+        transform: rotate(540deg);
+      }
+      &:nth-child(18):after {
+        transform: rotate(510deg);
+      }
+      &:nth-child(17):after {
+        transform: rotate(480deg);
+      }
+      &:nth-child(16):after {
+        transform: rotate(450deg);
+      }
+      &:nth-child(15):after {
+        transform: rotate(420deg);
+      }
+      &:nth-child(14):after {
+        transform: rotate(390deg);
+      }
+      &:nth-child(13):after {
+        transform: rotate(360deg);
+      }
+    }
+    .min {
+      position: absolute;
+      height: 20px;
+      line-height: 20px;
+      width: 20px;
+      border-radius: 40px;
+      text-align: center;
+      font-size: 12px;
+      &:hover {
+        background-color: var(
+          --default-time-picker-hour-hover-background-color
+        );
+        color: var(--default-time-picker-hour-hover-text-color);
+        cursor: pointer;
+        &::after {
+          content: "";
+          background-color: var(
+            --default-time-picker-hour-hover-background-color
+          );
+          height: 1px;
+          width: 100%;
+          position: absolute;
+          transform: rotate(-90deg);
+          transform-origin: 100% 0%;
+          top: 50%;
+          width: 101px;
+          right: 50%;
+        }
+      }
+      &:nth-child(60):after {
+        transform: rotate(354deg);
+      }
+      &:nth-child(59):after {
+        transform: rotate(348deg);
+      }
+      &:nth-child(58):after {
+        transform: rotate(342deg);
+      }
+      &:nth-child(57):after {
+        transform: rotate(336deg);
+      }
+      &:nth-child(56):after {
+        transform: rotate(330deg);
+      }
+      &:nth-child(55):after {
+        transform: rotate(324deg);
+      }
+      &:nth-child(54):after {
+        transform: rotate(318deg);
+      }
+      &:nth-child(53):after {
+        transform: rotate(312deg);
+      }
+      &:nth-child(52):after {
+        transform: rotate(306deg);
+      }
+      &:nth-child(51):after {
+        transform: rotate(300deg);
+      }
+      &:nth-child(50):after {
+        transform: rotate(294deg);
+      }
+      &:nth-child(49):after {
+        transform: rotate(288deg);
+      }
+      &:nth-child(48):after {
+        transform: rotate(282deg);
+      }
+      &:nth-child(47):after {
+        transform: rotate(276deg);
+      }
+      &:nth-child(46):after {
+        transform: rotate(270deg);
+      }
+      &:nth-child(45):after {
+        transform: rotate(264deg);
+      }
+      &:nth-child(44):after {
+        transform: rotate(258deg);
+      }
+      &:nth-child(43):after {
+        transform: rotate(252deg);
+      }
+      &:nth-child(42):after {
+        transform: rotate(246deg);
+      }
+      &:nth-child(41):after {
+        transform: rotate(240deg);
+      }
+      &:nth-child(40):after {
+        transform: rotate(234deg);
+      }
+      &:nth-child(39):after {
+        transform: rotate(228deg);
+      }
+      &:nth-child(38):after {
+        transform: rotate(222deg);
+      }
+      &:nth-child(37):after {
+        transform: rotate(216deg);
+      }
+      &:nth-child(36):after {
+        transform: rotate(210deg);
+      }
+      &:nth-child(35):after {
+        transform: rotate(204deg);
+      }
+      &:nth-child(34):after {
+        transform: rotate(198deg);
+      }
+      &:nth-child(33):after {
+        transform: rotate(192deg);
+      }
+      &:nth-child(32):after {
+        transform: rotate(186deg);
+      }
+      &:nth-child(31):after {
+        transform: rotate(180deg);
+      }
+      &:nth-child(30):after {
+        transform: rotate(174deg);
+      }
+      &:nth-child(29):after {
+        transform: rotate(168deg);
+      }
+      &:nth-child(28):after {
+        transform: rotate(162deg);
+      }
+      &:nth-child(27):after {
+        transform: rotate(156deg);
+      }
+      &:nth-child(26):after {
+        transform: rotate(150deg);
+      }
+      &:nth-child(25):after {
+        transform: rotate(144deg);
+      }
+      &:nth-child(24):after {
+        transform: rotate(138deg);
+      }
+      &:nth-child(23):after {
+        transform: rotate(132deg);
+      }
+      &:nth-child(22):after {
+        transform: rotate(126deg);
+      }
+      &:nth-child(21):after {
+        transform: rotate(120deg);
+      }
+      &:nth-child(20):after {
+        transform: rotate(114deg);
+      }
+      &:nth-child(19):after {
+        transform: rotate(108deg);
+      }
+      &:nth-child(18):after {
+        transform: rotate(102deg);
+      }
+      &:nth-child(17):after {
+        transform: rotate(96deg);
+      }
+      &:nth-child(16):after {
+        transform: rotate(90deg);
+      }
+      &:nth-child(15):after {
+        transform: rotate(84deg);
+      }
+      &:nth-child(14):after {
+        transform: rotate(78deg);
+      }
+      &:nth-child(13):after {
+        transform: rotate(72deg);
+      }
+      &:nth-child(12):after {
+        transform: rotate(66deg);
+      }
+      &:nth-child(11):after {
+        transform: rotate(60deg);
+      }
+      &:nth-child(10):after {
+        transform: rotate(54deg);
+      }
+      &:nth-child(9):after {
+        transform: rotate(48deg);
+      }
+      &:nth-child(8):after {
+        transform: rotate(42deg);
+      }
+      &:nth-child(7):after {
+        transform: rotate(36deg);
+      }
+      &:nth-child(6):after {
+        transform: rotate(30deg);
+      }
+      &:nth-child(5):after {
+        transform: rotate(24deg);
+      }
+      &:nth-child(4):after {
+        transform: rotate(18deg);
+      }
+      &:nth-child(3):after {
+        transform: rotate(12deg);
+      }
+      &:nth-child(2):after {
+        transform: rotate(6deg);
+      }
+      &:nth-child(1):after {
+        transform: rotate(0deg);
+      }
+    }
+  }
+  .actions {
+    color: var(--default-time-picker-button-text-color);
+    font-weight: bold;
+    font-size: 20px;
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    width: 100%;
+    box-sizing: border-box;
+    bottom: 10px;
+    padding-inline: 12px;
+    .action {
+      display: inline-block;
+      text-align: center;
+      font-size: 18px;
+      padding-inline: 12px;
+      height: 37.5px;
+      line-height: 37.5px;
+      margin-right: 10px;
+      cursor: pointer;
+      border-radius: 2px;
+    }
+  }
+}
+.timepicker .circle .hour:hover,
+.timepicker .circle .hour2:hover {
+  background-color: var(--default-time-picker-hour-hover-background-color);
+}

package/src/lib/core-time-picker/time-picker-modal/time-picker-modal.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimePickerModalComponent } from './time-picker-modal.component';
+
+describe('TimePickerModalComponent', () => {
+  let component: TimePickerModalComponent;
+  let fixture: ComponentFixture<TimePickerModalComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TimePickerModalComponent]
+    });
+    fixture = TestBed.createComponent(TimePickerModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/core-time-picker/time-picker-modal/time-picker-modal.component.ts

@@ -0,0 +1,172 @@
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { IModal, NiraModalConfig } from 'nira-modal';
+import { BehaviorSubject, Subject } from 'rxjs';
+type Location = {
+  left: string;
+  top: string;
+  text: string;
+  value: string;
+};
+@Component({
+  selector: 'lib-time-picker-modal',
+  templateUrl: './time-picker-modal.component.html',
+  styleUrls: ['./time-picker-modal.component.scss'],
+})
+export class TimePickerModalComponent implements IModal {
+  @Input() config!: NiraModalConfig;
+  @Input() closeSubject!: Subject<any>;
+  hoursSubject: BehaviorSubject<Location[]> = new BehaviorSubject<Location[]>(
+    []
+  );
+  hours2Subject: BehaviorSubject<Location[]> = new BehaviorSubject<Location[]>(
+    []
+  );
+  minutesSubject: BehaviorSubject<Location[]> = new BehaviorSubject<Location[]>(
+    []
+  );
+  showHour: boolean = true;
+  showMin: boolean = false;
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    const defaultTime = this.config.data;
+    let topElement = document
+      .getElementsByClassName('timepicker')[0]
+      .getElementsByClassName('top')[0];
+    if (defaultTime) {
+      const items = defaultTime.split(':');
+      topElement.getElementsByClassName('h')[0].innerHTML = items[0];
+      topElement.getElementsByClassName('m')[0].innerHTML = items[1];
+    } else {
+      var currentTime = new Date();
+
+      if (topElement.getElementsByClassName('h').length > 0)
+        document.getElementsByClassName('h')[0].innerHTML = String(
+          currentTime.getHours().toString().length > 1
+            ? currentTime.getHours().toString()
+            : '0' + currentTime.getHours().toString()
+        );
+      if (topElement.getElementsByClassName('m').length > 0)
+        document.getElementsByClassName('m')[0].innerHTML = String(
+          currentTime.getMinutes().toString().length > 1
+            ? currentTime.getMinutes().toString()
+            : '0' + currentTime.getMinutes().toString()
+        );
+    }
+
+    this.selectHours();
+  }
+  close() {
+    this.closeSubject.next('');
+  }
+  submit() {
+    let topElement = document
+      .getElementsByClassName('timepicker')[0]
+      .getElementsByClassName('top')[0];
+    const h = topElement.getElementsByClassName('h');
+    const m = topElement.getElementsByClassName('m');
+    let selectedTime;
+    if (h.length > 0 && m.length > 0) {
+      selectedTime = h[0].textContent + ':' + m[0].textContent;
+    }
+    this.closeSubject.next(selectedTime);
+  }
+
+  ngAfterViewInit(): void {
+    this.cdr.detectChanges();
+  }
+
+  onHourClick() {
+    this.selectHours();
+  }
+
+  onMinutesClick() {
+    this.selectMinutes();
+  }
+
+  createCircleOfDivs(
+    num: any,
+    radius: number,
+    offsetX: number,
+    offsetY: number,
+    add: number,
+    teilbar: number
+  ) {
+    let x, y;
+    let items: Location[] = [];
+    for (let n = 0; n < num; n++) {
+      let item: Location = {} as Location;
+      x = radius * Math.cos((n / num) * 2 * Math.PI);
+      y = radius * Math.sin((n / num) * 2 * Math.PI);
+      if (teilbar == 1) {
+        if (n + 3 > 12) {
+          item.text = String(n + 3 - 12 + add);
+        } else {
+          if (n + 3 + add == 24) {
+            item.text = '0';
+          } else {
+            item.text = String(n + 3 + add);
+          }
+        }
+      } else {
+        if (n % teilbar == 0) {
+          if (n + 15 >= 60) {
+            item.value = String(n + 15 - 60);
+            item.text = String(n + 15 - 60 + add);
+          } else {
+            item.value = String(n + 15);
+            item.text = String(n + 15 + add);
+          }
+        } else {
+          if (n + 15 >= 60) {
+            item.value = String(n + 15 - 60);
+            item.text = '⋅';
+          } else {
+            item.value = String(n + 15);
+            item.text = '\u00B7';
+          }
+        }
+      }
+
+      item.left = x + offsetX + 'px';
+      item.top = y + offsetY + 'px';
+
+      items.push(item);
+    }
+    return items;
+  }
+
+  onHourSelect(item: Location) {
+    let topElement = document
+      .getElementsByClassName('timepicker')[0]
+      .getElementsByClassName('top')[0];
+    if (topElement.getElementsByClassName('h').length > 0)
+      document.getElementsByClassName('h')[0].innerHTML = String(
+        item.text.length > 1 ? item.text : '0' + item.text
+      );
+    this.selectMinutes();
+  }
+
+  onMinutesSelect(item: Location) {
+    let topElement = document
+      .getElementsByClassName('timepicker')[0]
+      .getElementsByClassName('top')[0];
+    if (topElement.getElementsByClassName('m').length > 0)
+      document.getElementsByClassName('m')[0].innerHTML = String(
+        item.value.length > 1 ? item.value : '0' + item.value
+      );
+  }
+
+  selectHours() {
+    this.showHour = true;
+    this.showMin = false;
+    this.hoursSubject.next(this.createCircleOfDivs(12, 101, 105, 105, 0, 1));
+    this.hours2Subject.next(this.createCircleOfDivs(12, 64, 110, 110, 12, 1));
+  }
+
+  selectMinutes() {
+    this.showHour = false;
+    this.showMin = true;
+    this.minutesSubject.next(this.createCircleOfDivs(60, 101, 115, 115, 0, 5));
+  }
+}