@tuki-io/tuki-widgets 0.0.134 → 0.0.136

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

@@ -1,281 +0,0 @@
-
-
-<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>