@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/user-device-manage/src/device-manage-widget.component.html

@@ -0,0 +1,281 @@
+
+
+<app-loader *ngIf="dataPending"></app-loader>
+<div *ngIf="!dataPending">
+  <!-- <div class="go-back-box" (click)="onGoBack()"> -->
+  <div class="go-back-box">
+    <div class="go-back-box-container">
+      <span class="app-icon icon-webex-left-arrow"></span>
+      <span class="go-back-title">Devices</span>
+    </div>
+  </div>
+
+  <app-device-info 
+    [device]="device" 
+    [firstName]="firstName" 
+    [lastName]="lastName"
+    (onclickBack)="onGoBack()"
+    >
+    
+  </app-device-info>
+  <div class="device-info">
+
+    <div class="device-info-part">
+
+        <section class="card">
+            <div class="header">
+                <span class="title">Details</span>
+            </div>
+            <div class="main-content">
+                <div class="detail-row">
+                    <div class="side left-part">
+                        <span class="main-value">{{ form?.get('maxLineCount')?.value || 'N/A' }}</span>
+                        <span class="extra-info">Lines</span>
+                    </div>
+                    <div class="side right-part">
+                        <span class="main-value">{{ (form?.get('macAddress')?.value | macAddress) || 'N/A' }}</span>
+                        <span class="extra-info">MAC address</span>
+                    </div>
+                </div>
+                <mat-divider></mat-divider>
+                <div class="detail-row">
+                    <div class="side left-part">
+                        <span class="main-value">{{ form?.get('ipAddress')?.value || 'N/A' }}</span>
+                        <span class="extra-info">Host IP address</span>
+                    </div>
+                    <div class="side right-part">
+                        <span class="main-value">{{ form?.get('remoteIpAddress')?.value || 'N/A' }}</span>
+                        <span class="extra-info">Remote IP address</span>
+                    </div>
+                </div>
+                <mat-divider></mat-divider>
+                <div class="detail-row">
+                    <div class="side left-part">
+                        <span class="main-value">Cisco</span>
+                        <span class="extra-info">Managed By</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="card">
+            <div class="header">
+                <span class="title">Software</span>
+                <div class="icon-bordered-wrapper">
+                    <i class="icon configure-icon rem1"></i>
+                </div>
+            </div>
+            <div class="main-content">
+                <div class="detail-row">
+                    <div class="side left-part">
+                        <span class="main-value">{{ form?.get('softwareVersion')?.value || 'N/A'}}</span>
+                        <span class="extra-info">Software Channel</span>
+                    </div>
+                    <div class="side right-part">
+                        <span class="main-value">{{ form?.get('softwareChannel')?.value || 'N/A'}}</span>
+                        <span class="extra-info">Software version</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="card">
+            <div class="header">
+                <span class="title">Tags</span>
+            </div>
+            <div class="main-content">
+                <div class="detail-row" style="flex-direction: column; gap: 1rem;">
+                    <div class="tags-list-container">
+                        <div *ngFor="let tag of tags; let i = index" class="tag-label">
+                            <span class="tag-desccription">{{ tag }}</span>
+                            <i class="icon close-icon" (click)="removeTag(i)" style="width: 0.75rem; height: 0.75rem; flex: 0 0 auto;"></i>
+                        </div>
+                    </div>
+                    <div class="tags-list-container">
+                        <button class="tag-label add-tag" (click)="showInput()">
+                            <span class="icon plus-icon" style="width: 0.75rem; height: 0.75rem;"></span>
+                            <span>Add tag</span>
+                        </button>
+                        <input 
+                            #tagInput
+                            id="enter-tag-input" 
+                            *ngIf="isAdding"
+                            [(ngModel)]="newTag"
+                            (blur)="onBlur()"
+                            type="text"
+                            class="add-tag-input" 
+                            placeholder="Enter tag..."
+                        >
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+
+    <div class="device-info-part">
+        <section class="card">
+             <div class="header">
+                <span class="title">Issues & Information</span>
+            </div>
+            <div class="main-content">
+                <div class="detail-row">
+                    <div class="description">
+                        <i class="icon check-icon rem1" style="filter: invert(26%) sepia(27%) saturate(1093%) hue-rotate(114deg) brightness(93%) contrast(90%);"></i>
+                        <span class="text-description">No reported issues at this time</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="card">
+             <div class="header">
+                <span class="title">Hoteling</span>
+            </div>
+            <div class="main-content">
+                <div class="detail-row flex-column gap-0_75">
+                    <span class="text-description">Allow this device to be used as a Hoteling Host by visiting guests.</span>
+                    <div class="toggle-wrapper">
+                        <mat-slide-toggle class="custom-toggle" name="logMissedCalls" [formControl]="hotelingEnabled"></mat-slide-toggle>
+                        <i class="icon info-icon rem1" 
+                            style="filter: invert(20%) sepia(99%) saturate(2065%) hue-rotate(197deg) brightness(92%) contrast(101%);"
+                            [matTooltip]="'Enabling this device for Hoteling means that a guest (end user) can log into this host (workspace phone) and use this phone as if it were their own. This is useful when traveling to a remote office but still needing to place/receive calls with their telephone number and to access features normally available to them on their own office phone.'"
+                        ></i>
+                    </div>
+                    <span class="text-description">Limit the time a guest can use this phone to</span>
+                    <mat-select [formControl]="guestHoursLimit">
+                        <mat-option *ngFor="let type of HOTELING_TIME_HOURS" [value]="type">
+                            {{type}}
+                        </mat-option>
+                    </mat-select>
+                </div>
+            </div>
+        </section>
+        <section class="card">
+            <div class="header">
+                <span class="title">Device Management</span>
+            </div>
+            <div class="main-content">
+                <div class="detail-row flex-column gap-0_75">
+                    <p class="text-description">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>
+                    <div class="flex-column">
+                        <span class="text-description">To add and remove users and workspaces, select <b>Configure Lines.</b></span>
+                        <span class="text-description">To customize the programmable Line Keys, select <b>Configure Layout.</b></span>
+                        <span class="text-description">To set up the display settings and dialing options, select <b>Device Settings</b>.</span>
+                    </div>
+                    <table style="border-collapse:collapse;">
+                        <thead>
+                        <tr style="background:#ededed;">
+                            <th style="padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;">Index #</th>
+                            <th style="padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;">Name</th>
+                            <th style="padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;">Number/Extension</th>
+                            <th style="padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;">Appearances</th>
+                            <th style="padding:10px 16px; font-size:.75rem; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;">Registered</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <ng-container *ngIf="device?.lines && device?.lines.length">
+                            <tr style="background:#fff; cursor:pointer;" onmouseover="this.style.background='#fafafa'" onmouseout="this.style.background='#fff'"
+                            
+                            *ngFor="let line of device.lines">
+                                <td style="padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;">
+                                    <span style="display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;"></span>
+                                </td>
+                                <td style="padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;">
+                                    <span style="display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;">{{line?.name}}</span>
+                                </td>
+                                <td style="padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;">
+                                    <span style="display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;">NA/{{line?.extension}}</span>
+                                </td>
+                                <td style="padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;">
+                                    <span style="display:inline-block; color:#000000f2; padding:4px 14px; font-size:.875rem; font-weight:400;">1</span>
+                                </td>
+                                <td style="padding: .25rem 1.25rem .25rem .75rem;; border-bottom:1px solid #e8e8e8;">
+                                    <i class="icon warning-icon rem1" [matTooltip]="'Unregistered'"></i>
+                                </td>
+                        </tr>
+                        </ng-container>
+                        
+                        </tbody>
+                    </table>
+                    <div class="totals">
+                       <span class="text-description">15 of 16 total lines available</span>
+                    </div>
+                    <div class="configure-lines">
+                        <div class="line">
+                            <div>
+                                <i class="icon configure-icon rem1-25"></i>
+                                <span class="text-description">Configure Lines</span>
+                            </div>
+                            <div style="cursor: pointer">
+                                <span class="text-description" style="font-weight: 500;">Manage</span>
+                                <i class="icon arrow-right-icon rem1-25"></i>
+                            </div>
+                        </div>
+                        <mat-divider></mat-divider>
+                        <div class="line">
+                            <div>
+                                <i class="icon configure-icon rem1-25"></i>
+                                <span class="text-description">Configure Layout</span>
+                            </div>
+                            <div style="cursor: pointer">
+                                <span class="text-description" style="font-weight: 500;">Manage</span>
+                                <i class="icon arrow-right-icon rem1-25"></i>
+                            </div>
+                        </div>
+                        <mat-divider></mat-divider>
+                        <div class="line">
+                            <div>
+                                <i class="icon configure-icon rem1-25"></i>
+                                <span class="text-description">Device Settings</span>
+                            </div>
+                            <div style="cursor: pointer">
+                                <span class="text-description" style="font-weight: 500;">Manage</span>
+                                <i class="icon arrow-right-icon rem1-25"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="card">
+             <div class="header">
+                <span class="title">Support</span>
+            </div>
+            <div class="main-content">
+                <div class="detail-row flex-column gap-0_75">
+                    <div class="configure-lines">
+                        <div class="line">
+                            <div>
+                                <span class="text-description">Meetings & Calls</span>
+                                <span class="label new">New</span>
+                                <i class="icon info-icon rem1"
+                                    [matTooltip]="'Troubleshooting provides details about the device related to status, network activity, and call information.'"
+                                ></i>
+                            </div>
+                            <div style="cursor: pointer">
+                                <span class="text-description" style="font-weight: 500;">Go to troubleshooting</span>
+                                <i class="icon arrow-right-icon rem1-25"></i>
+                            </div>
+                        </div>
+                        <mat-divider></mat-divider>
+                        <div class="line">
+                            <div>
+                                <span class="text-description">Device Logs</span>
+                                <i class="icon info-icon rem1" [matTooltip]="'Generate device logs and download them to your computer.'"></i>
+                            </div>
+                            <div style="cursor: pointer">
+                                <span class="text-description" style="font-weight: 500;">Manage</span>
+                                <i class="icon arrow-right-icon rem1-25"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+  </div>
+  
+</div>