refs #1827. UX changes. New calendar styles

2025-04-30 13:17:16 +02:00 · 2025-04-30 13:17:16 +02:00 · 1e05176758
parent 83ab784c48
commit 1e05176758
5 changed files with 167 additions and 34 deletions
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
@ -22,7 +22,12 @@

 .time-fields {
  display: flex;
-  gap: 15px; /* Espacio entre los campos */
+  gap: 15px;
+}
+
+.hour-fields {
+  display: flex;
+  gap: 15px;
 }

 .time-field {
@ -34,4 +39,74 @@
  justify-content: flex-end;
  gap: 1em;
  padding: 1.5em;
-}
+}
+
+.custom-text {
+  font-style: italic;
+  font-size: 0.875rem;
+  color: #666;
+  margin: 4px 0 12px;
+}
+
+.weekday-toggle-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 40px 0 40px 0;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.weekday-toggle {
+  flex: 1 1 calc(14.28% - 10px);
+  padding: 10px 0;
+  border-radius: 999px;
+  border: 1px solid #ccc;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: center;
+  transition: all 0.2s ease;
+  min-width: 40px;
+}
+
+.weekday-toggle.selected {
+  background-color: #1976d2;
+  color: white;
+  border-color: #1976d2;
+}
+
+
+.availability-summary {
+  background-color: #e3f2fd;
+  border-left: 4px solid #2196f3;
+  padding: 12px 16px;
+  margin-top: 16px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.summary-text {
+  color: #0d47a1;
+  line-height: 1.4;
+}
+
+.unavailability-summary {
+  background-color: #ffebee;
+  border-left: 4px solid #d32f2f;
+  padding: 12px 16px;
+  margin-top: 16px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.summary-text {
+  color: #b71c1c;
+  line-height: 1.4;
+}
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
@ -1,24 +1,26 @@
 <h2 mat-dialog-title>{{ isEditMode ? ('editCalendar' | translate) : ('addCalendar' | translate) }}</h2>
 <mat-dialog-content class="form-container">
-  <mat-slide-toggle [(ngModel)]="isRemoteAvailable" class="example-margin">
+  <mat-checkbox [(ngModel)]="isRemoteAvailable">
    {{ 'remoteAvailability' | translate }}
-  </mat-slide-toggle>
+  </mat-checkbox>
+
+  <mat-divider style="margin: 10px 0;"></mat-divider>

  <div *ngIf="!isRemoteAvailable" class="form-group">
    <mat-label>{{ 'selectWeekDays' | translate }}</mat-label>
-    <div class="row">
-      <div class="col-md-6 checkbox-group">
-        <mat-checkbox *ngFor="let day of weekDays.slice(0, (weekDays.length / 2) + 1)" [(ngModel)]="busyWeekDays[day]">
-          {{ day }}
-        </mat-checkbox>
-      </div>
-      <div class="col-md-6 checkbox-group">
-        <mat-checkbox *ngFor="let day of weekDays.slice(weekDays.length / 2 + 1)" [(ngModel)]="busyWeekDays[day]">
-          {{ day }}
-        </mat-checkbox>
-      </div>
+    <p class="custom-text"> (Los dias y horas seleccionados se marcarán como aula no disponible para remote pc.) </p>
+    <div class="weekday-toggle-group full-width">
+      <button
+        *ngFor="let day of weekDays"
+        type="button"
+        class="weekday-toggle"
+        [class.selected]="busyWeekDays[day]"
+        (click)="busyWeekDays[day] = !busyWeekDays[day]">
+        {{ day.slice(0, 3) }}
+      </button>
    </div>

+
    <div class="time-fields">
      <mat-form-field appearance="fill" class="time-field">
        <mat-label>{{ 'startTime' | translate }}</mat-label>
@ -30,12 +32,24 @@
        <input matInput [(ngModel)]="busyToHour" type="time" placeholder="{{ 'endTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
      </mat-form-field>
    </div>
+
+    <mat-divider></mat-divider>
+
+    <div class="unavailability-summary" *ngIf="busyFromHour && busyToHour && busyWeekDays && getSelectedDays().length">
+      <mat-icon style="width: 50px;" color="warn">block</mat-icon>
+      <span class="summary-text">
+      El aula estará <strong>no disponible</strong> para Remote PC los días:
+      <strong>{{ getSelectedDays().join(', ') }}</strong> de
+      <strong>{{ busyFromHour }}</strong> a <strong>{{ busyToHour }}</strong>.
+    </span>
+    </div>
  </div>

  <div *ngIf="isRemoteAvailable" class="form-group">
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'reasonLabel' | translate }}</mat-label>
      <input matInput [(ngModel)]="availableReason" placeholder="{{ 'reasonPlaceholder' | translate }}" [required]="isRemoteAvailable">
+      <mat-hint>Razón por la cual el aula SI está disponible para su uso en Remote PC</mat-hint>
    </mat-form-field>
    <div class="time-fields">
      <mat-form-field appearance="fill" class="full-width">
@ -53,6 +67,32 @@
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
    </div>
+    <div class="hour-fields">
+      <mat-form-field appearance="fill" class="time-field">
+        <mat-label>{{ 'startTime' | translate }}</mat-label>
+        <input matInput [(ngModel)]="busyFromHour" type="time" placeholder="{{ 'startTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="time-field">
+        <mat-label>{{ 'endTime' | translate }}</mat-label>
+        <input matInput [(ngModel)]="busyToHour" type="time" placeholder="{{ 'endTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
+      </mat-form-field>
+    </div>
+
+    <mat-divider></mat-divider>
+
+    <div class="availability-summary" *ngIf="availableFromDate && availableToDate">
+      <mat-icon color="primary" style="width: 50px;">info</mat-icon>
+      <span class="summary-text">
+        El aula estará <strong>disponible</strong> para reserva desde el
+        <strong>{{ availableFromDate | date:'fullDate' }}</strong> hasta el
+        <strong>{{ availableToDate | date:'fullDate' }}</strong>
+        <span *ngIf="busyFromHour && busyToHour">
+          en el horario de <strong>{{ busyFromHour }}</strong> a <strong>{{ busyToHour }}</strong>.
+      </span>
+    </span>
+    </div>
+
  </div>
 </mat-dialog-content>

--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.ts
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.ts
@ -64,8 +64,8 @@ export class CreateCalendarRuleComponent {
    this.dialogRef.close();
  }

-  toggleAdditionalForm(): void {
-    this.showAdditionalForm = !this.showAdditionalForm;
+  getSelectedDays(): string[] {
+    return Object.keys(this.busyWeekDays || {}).filter(day => this.busyWeekDays[day]);
  }

  getSelectedDaysIndices() {
@ -93,7 +93,7 @@ export class CreateCalendarRuleComponent {
      this.http.put(`${this.baseUrl}${this.ruleId}`, formData)
        .subscribe({
          next: (response) => {
-            this.toastService.success('Calendar updated successfully');
+            this.toastService.success('Calendar rule updated successfully');
            this.dialogRef.close(true);
          },
          error: (error) => {
@ -105,7 +105,7 @@ export class CreateCalendarRuleComponent {
      this.http.post(`${this.baseUrl}/remote-calendar-rules`, formData)
        .subscribe({
          next: (response) => {
-            this.toastService.success('Calendar created successfully');
+            this.toastService.success('Calendar rule created successfully');
            this.dialogRef.close(true);
          },
          error: (error) => {
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
@ -25,7 +25,7 @@

 .time-fields {
  display: flex;
-  gap: 15px; /* Espacio entre los campos */
+  gap: 15px;
 }

 .time-field {
@ -34,24 +34,25 @@

 .list-item-content {
  display: flex;
-  align-items: flex-start; /* Alinea el contenido al inicio */
-  justify-content: space-between; /* Espacio entre los textos y los íconos */
-  width: 100%; /* Asegúrate de que el contenido ocupe todo el ancho */
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 }

 .text-content {
-  flex-grow: 1; /* Permite que este contenedor ocupe el espacio disponible */
-  margin-right: 16px; /* Espaciado a la derecha para separar de los íconos */
+  flex-grow: 1;
+  margin-right: 16px;
  margin-left: 10px;
+  margin-bottom: 16px;
 }

 .icon-container {
  display: flex;
-  align-items: center; /* Alinea los íconos verticalmente */
+  align-items: center;
 }

 .right-icon {
-  margin-left: 8px; /* Espaciado entre los íconos */
+  margin-left: 8px;
  cursor: pointer;
 }

@ -60,4 +61,15 @@
  justify-content: flex-end;
  gap: 1em;
  padding: 1.5em;
-}
+}
+
+.rule-available {
+  background-color: #e8f5e9;
+  border-left: 4px solid #4caf50;
+}
+
+.rule-unavailable {
+  background-color: #ffebee;
+  border-left: 4px solid #f44336;
+}
+
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
@ -6,7 +6,7 @@
    <input matInput [(ngModel)]="name" required>
    <mat-icon *ngIf="isEditMode" matSuffix (click)="submitForm()">mode_edit</mat-icon>
  </mat-form-field>
-  
+
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div *ngIf="isEditMode" mat-subheader>{{ 'rulesHeader' | translate }}</div>
    <button class="action-button" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
@ -18,14 +18,20 @@

  <mat-list *ngIf="isEditMode">
    <ng-container *ngFor="let rule of remoteCalendarRules;">
-      <mat-list-item>
+      <mat-list-item
+        [ngClass]="{
+          'rule-available': rule.isRemoteAvailable,
+          'rule-unavailable': !rule.isRemoteAvailable
+        }"
+      >
        <div class="list-item-content">
          <mat-icon matListItemIcon>event_available</mat-icon>
          <div class="text-content">
-            <div matListItemTitle>{{ rule.isRemoteAvailable ? ('statusAvailable' | translate) : ('statusUnavailable' | translate) }}</div>
-            <div matListItemLine *ngIf="!rule.isRemoteAvailable">{{ rule.busyFromHour }} - {{ rule.busyToHour }}</div>
-            <div matListItemLine *ngIf="!rule.isRemoteAvailable">{{ rule.busyWeekDaysMap }}</div>
-            <div matListItemLine *ngIf="rule.isRemoteAvailable">{{ rule.availableReason }} | {{ rule.availableFromDate | date }} - {{ rule.availableToDate | date }}</div>
+            <div matListItemTitle>{{ rule.isRemoteAvailable ? ('remotePcStatusAvailable' | translate) : ('remotePcStatusUnavailable' | translate) }}</div>
+            <div matListItemLine *ngIf="!rule.isRemoteAvailable">Días: <strong>{{ rule.busyWeekDaysMap }}</strong></div>
+            <div matListItemLine *ngIf="rule.isRemoteAvailable">Razón: {{ rule.availableReason }}</div>
+            <div matListItemLine *ngIf="rule.isRemoteAvailable">Días: <strong>{{ rule.availableFromDate | date }} - {{ rule.availableToDate | date }}</strong></div>
+            <div matListItemLine>Horario: {{ rule.busyFromHour }} - {{ rule.busyToHour }}</div>
          </div>
          <div class="icon-container">
            <button mat-icon-button color="primary" class="right-icon" (click)="createRule(rule)">