@cerema/cadriciel 1.0.8 → 1.1.1

package/aaaa/client/layout/app.topbar.component.ts

@@ -0,0 +1,67 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { LayoutService } from './service/app.layout.service';
+import { User } from './shared/entities/user.model';
+import { UserService } from './shared/service/user.service';
+import { MainComponent } from './main/main.component';
+
+@Component({
+  selector: 'app-topbar',
+  templateUrl: './app.topbar.component.html',
+})
+export class AppTopBarComponent implements OnInit {
+  menu: MenuItem[] = [];
+  userActif!: User;
+
+  @ViewChild('searchinput') searchInput!: ElementRef;
+
+  @ViewChild('menubutton') menuButton!: ElementRef;
+
+  searchActive: boolean = false;
+
+  constructor(
+    public layoutService: LayoutService,
+    public userService: UserService,
+    public appMain: MainComponent
+  ) {}
+
+  ngOnInit(): void {
+    this.userActif = this.userService.currentUser;
+  }
+
+  onMenuButtonClick() {
+    this.layoutService.onMenuToggle();
+  }
+
+  activateSearch() {
+    this.searchActive = true;
+    setTimeout(() => {
+      this.searchInput.nativeElement.focus();
+    }, 100);
+  }
+
+  deactivateSearch() {
+    this.searchActive = false;
+  }
+
+  removeTab(event: MouseEvent, item: MenuItem, index: number) {
+    this.layoutService.onTabClose(item, index);
+    event.preventDefault();
+  }
+
+  get layoutTheme(): string {
+    return this.layoutService.config.layoutTheme;
+  }
+
+  get colorScheme(): string {
+    return this.layoutService.config.colorScheme;
+  }
+
+  get logo(): string {
+    return 'assets/images/logo_title.png';
+  }
+
+  get tabs(): MenuItem[] {
+    return this.layoutService.tabs;
+  }
+}

package/aaaa/client/layout/common/err-403/err-403.component.html

@@ -0,0 +1,24 @@
+<button (click)="Logout()" pButton id="logout">Déconnexion</button>
+<div class='hover'>
+    <div class='background'>
+        <div class='door'>403</div>
+        <div class='rug'></div>
+    </div>
+    <div class='foreground'>
+        <div class='bouncer'>
+            <div class='head'>
+                <div class='neck'></div>
+                <div class='eye left'></div>
+                <div class='eye right'></div>
+                <div class='ear'></div>
+            </div>
+            <div class='body'></div>
+            <div class='arm'></div>
+        </div>
+        <div class='poles'>
+            <div class='pole left'></div>
+            <div class='pole right'></div>
+            <div class='rope'></div>
+        </div>
+    </div>
+</div>

package/aaaa/client/layout/common/err-403/err-403.component.scss

@@ -0,0 +1,340 @@
+#logout {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
+html,
+body {
+  width: 100%;
+  height: 100;
+  margin: 0;
+  padding: 0;
+  font-family: 'Limelight', cursive;
+  color: #38434a;
+}
+.background {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+.background::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: -100px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 450px;
+  height: 450px;
+  background: #eee8e0;
+  border-radius: 50%;
+  z-index: -1;
+}
+.background::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: -150px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 550px;
+  height: 550px;
+  background: #f3f2ee;
+  border-radius: 50%;
+  z-index: -2;
+}
+.door {
+  position: relative;
+  width: 180px;
+  height: 300px;
+  margin: 0 auto -10px;
+  background: #f3f2ee;
+  border: 10px solid #dad2c9;
+  border-radius: 3px;
+  font-size: 50px;
+  line-height: 3;
+  text-align: center;
+  text-shadow: 0 2px #f5ae4e;
+}
+.door::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 140px;
+  right: 10px;
+  width: 25px;
+  height: 25px;
+  background: #1d2528;
+  border-radius: 50%;
+}
+.door::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 148px;
+  right: 18px;
+  width: 35px;
+  height: 10px;
+  background: #49555b;
+  border-radius: 5px;
+}
+.rug {
+  width: 180px;
+  border-bottom: 120px solid #cf352c;
+  border-left: 50px solid transparent;
+  border-right: 50px solid transparent;
+}
+.rug::before {
+  display: block;
+  content: '';
+  position: relative;
+  width: 100%;
+  height: 10px;
+  background: #9c0502;
+}
+.foreground {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+.bouncer {
+  position: relative;
+  left: -130px;
+  transition: left 1.5s;
+}
+.bouncer .head {
+  position: relative;
+  left: 10px;
+  margin-bottom: 10px;
+  width: 65px;
+  height: 90px;
+  background: #ffb482;
+  border-radius: 15px;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+}
+.bouncer .head::before {
+  display: block;
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 55px;
+  height: 40px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  border-top-left-radius: 30px;
+  border-bottom-right-radius: 15px;
+  z-index: 10;
+}
+.bouncer .head .neck {
+  position: absolute;
+  bottom: -15px;
+  width: 48px;
+  height: 30px;
+  background: #ffb482;
+  z-index: 5;
+}
+.bouncer .head .neck::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 15px;
+  right: 0;
+  width: 0px;
+  height: 0px;
+  border-left: 15px solid transparent;
+  border-right: 15px solid rgba(0, 0, 0, 0.3);
+  border-top: 2px solid rgba(0, 0, 0, 0.3);
+  border-bottom: 2px solid transparent;
+}
+.bouncer .head .eye {
+  position: absolute;
+  top: 40px;
+  width: 5px;
+  height: 5px;
+  background: #1d2528;
+  border-radius: 50%;
+}
+.bouncer .head .eye.left {
+  right: 5px;
+}
+.bouncer .head .eye.right {
+  right: 30px;
+}
+.bouncer .head .eye::before {
+  display: block;
+  content: '';
+  position: relative;
+  bottom: 8px;
+  right: 5px;
+  width: 15px;
+  height: 5px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  transition: bottom 0.5s;
+}
+.bouncer .head .ear {
+  position: relative;
+  top: 40px;
+  left: -10px;
+  width: 20px;
+  height: 20px;
+  background: #ffb482;
+  border-radius: 50%;
+}
+.bouncer .head .ear::before {
+  display: block;
+  content: '';
+  position: relative;
+  top: 5px;
+  left: 5px;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border-radius: 50%;
+}
+.bouncer .head .ear::after {
+  display: block;
+  content: '';
+  position: relative;
+  top: -3px;
+  left: 10px;
+  width: 10px;
+  height: 55px;
+  border-top: 3px solid transparent;
+  border-left: 2px solid #fff;
+  border-bottom: 3px solid transparent;
+  border-radius: 50%;
+  transform: rotate(-10deg);
+  z-index: 10;
+}
+.bouncer .body {
+  position: relative;
+  width: 110px;
+  height: 270px;
+  background: #1d2528;
+  border-top-right-radius: 45px;
+  border-top-left-radius: 15px;
+}
+.bouncer .body::before {
+  display: block;
+  content: '';
+  position: relative;
+  top: 5px;
+  width: 104px;
+  height: 110px;
+  background: #fff;
+  border-top-right-radius: 42px;
+}
+.bouncer .body::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 75px;
+  height: 180px;
+  background: #38434a;
+  border-top-right-radius: 42px;
+  border-top-left-radius: 15px;
+  border-bottom-right-radius: 100px;
+  border-bottom-left-radius: 10px;
+  z-index: 15;
+}
+.bouncer .arm {
+  position: absolute;
+  top: 105px;
+  left: -20px;
+  width: 60px;
+  height: 230px;
+  background: #49555b;
+  border-radius: 30px;
+  box-shadow: -1px 0px #1d2528;
+  transform: rotate(-30deg);
+  transform-origin: top center;
+  z-index: 20;
+  transition: transform 1s;
+}
+.bouncer .arm::before {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  width: 60px;
+  height: 60px;
+  background: #ffb482;
+  border-radius: 50%;
+}
+.poles {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-25%);
+}
+.poles .pole {
+  position: absolute;
+  bottom: 0;
+  width: 15px;
+  height: 135px;
+  background: #f5ae4e;
+}
+.poles .pole.left {
+  left: 200px;
+}
+.poles .pole.right {
+  right: 200px;
+}
+.poles .pole::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 25px;
+  height: 25px;
+  background: #f5ae4e;
+  border-radius: 50%;
+  box-shadow: inset 0 -2px #df9d41;
+}
+.poles .pole::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 25px;
+  height: 4px;
+  background: #f5ae4e;
+  border-radius: 4px;
+  box-shadow: 0 2px #df9d41;
+}
+.poles .rope {
+  position: absolute;
+  top: -110px;
+  left: -218px;
+  width: 150px;
+  height: 75px;
+  border: 20px solid #cf352c;
+  border-top: 0;
+  border-bottom-left-radius: 150px;
+  border-bottom-right-radius: 150px;
+  box-shadow: 0 2px #9c0502;
+  box-sizing: border-box;
+  transition: width 1.5s;
+}
+.hover:hover .bouncer {
+  left: 130px;
+}
+.hover:hover .arm {
+  transform: rotate(-42deg);
+}
+.hover:hover .rope {
+  width: 435px;
+}
+.hover:hover .eye::before {
+  bottom: 4px;
+}

package/aaaa/client/layout/common/err-403/err-403.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { OAuthService } from 'angular-oauth2-oidc';
+
+@Component({
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './err-403.component.html',
+  styleUrls: ['./err-403.component.scss'],
+})
+export class Error403Component implements OnInit {
+  constructor(public oAuthService: OAuthService) {}
+
+  Logout() {
+    this.oAuthService.logOut();
+  }
+
+  ngOnInit(): void {}
+}

package/aaaa/client/layout/common/work-in-progress/work-in-progress.component.html

@@ -0,0 +1 @@
+<div class="logo"></div>

package/aaaa/client/layout/common/work-in-progress/work-in-progress.component.scss

@@ -0,0 +1,8 @@
+.logo {
+  background-image: url(/assets/images/work-in-progress.svg);
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 80vmax;
+  height: 40vmax;
+}

package/aaaa/client/layout/common/work-in-progress/work-in-progress.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './work-in-progress.component.html',
+  styleUrls: ['./work-in-progress.component.scss']
+})
+export class WorkInProgressComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/aaaa/client/layout/config/app.config.component.html

@@ -0,0 +1,86 @@
+<button class="layout-config-button p-link" type="button" (click)="onConfigButtonClick()">
+  <i class="pi pi-cog"></i>
+</button>
+
+
+<p-sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+  styleClass="layout-config-sidebar w-18rem">
+  <ng-container *ngIf="!minimal">
+    <h5>Menu Type</h5>
+    <div class="flex">
+      <div class="field-radiobutton flex-1">
+        <p-radioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></p-radioButton>
+        <label for="mode1">Static</label>
+      </div>
+      <div class="field-radiobutton flex-1">
+        <p-radioButton name="menuMode" value="slim" [(ngModel)]="menuMode" inputId="mode2"></p-radioButton>
+        <label for="mode2">Slim</label>
+      </div>
+    </div>
+    <hr class="surface-border" />
+  </ng-container>
+
+  <h5>Color Scheme</h5>
+  <div class="flex">
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="colorScheme" value="light" [(ngModel)]="colorScheme" inputId="scheme1"></p-radioButton>
+      <label for="scheme1">Light</label>
+    </div>
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="colorScheme" value="dark" [(ngModel)]="colorScheme" inputId="scheme2"></p-radioButton>
+      <label for="scheme2">Dark</label>
+    </div>
+  </div>
+
+  <ng-container *ngIf="!minimal">
+    <h5>Layout Theme</h5>
+    <div class="field-radiobutton">
+      <p-radioButton name="menuTheme" value="colorScheme" [(ngModel)]="menuTheme"
+        inputId="menutheme-colorscheme"></p-radioButton>
+      <label for="menutheme-colorscheme">Color Scheme</label>
+    </div>
+    <div class="field-radiobutton">
+      <p-radioButton name="menuTheme" value="primaryColor" [(ngModel)]="menuTheme" inputId="menutheme-primarycolor"
+        [disabled]="colorScheme === 'dark'"></p-radioButton>
+      <label for="menutheme-primarycolor">Primary Color (Light Only)</label>
+    </div>
+  </ng-container>
+
+  <h5>Themes</h5>
+  <div class="flex flex-wrap gap-3">
+    <div *ngFor="let theme of componentThemes">
+      <a style="cursor: pointer" (click)="changeTheme(theme.name)"
+        class="inline-flex justify-content-center align-items-center w-2rem h-2rem border-round"
+        [ngStyle]="{'background-color': colorScheme === 'light' ? theme.lightColor : theme.darkColor, 'color': colorScheme === 'light' ? '#ffffff' : '#000000'}">
+        <i class="pi pi-check" *ngIf="currentTheme === theme.name"></i>
+      </a>
+    </div>
+  </div>
+
+  <h5>Scale</h5>
+  <div class="flex align-items-center">
+    <button icon="pi pi-minus" type="button" pButton (click)="decrementScale()"
+      class="p-button-text p-button-rounded w-2rem h-2rem mr-2" [disabled]="scale === scales[0]"></button>
+    <div class="flex gap-3 align-items-center">
+      <i class="pi pi-circle-fill text-300" *ngFor="let s of scales" [ngClass]="{'text-primary-500': s === scale}"></i>
+    </div>
+    <button icon="pi pi-plus" type="button" pButton (click)="incrementScale()"
+      class="p-button-text p-button-rounded w-2rem h-2rem ml-2"
+      [disabled]="scale === scales[scales.length - 1]"></button>
+  </div>
+
+  <h5>Input Style</h5>
+  <div class="flex">
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="inputStyle1"></p-radioButton>
+      <label for="inputStyle1">Outlined</label>
+    </div>
+    <div class="field-radiobutton flex-1">
+      <p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="inputStyle2"></p-radioButton>
+      <label for="inputStyle2">Filled</label>
+    </div>
+  </div>
+
+  <h5>Ripple Effect</h5>
+  <p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
+</p-sidebar>