mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-12-26 20:09:30 +00:00
239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
|
<c-row>
|
||
|
|
<c-col xs>
|
||
|
|
<c-card class="mb-4">
|
||
|
|
<c-card-header>
|
||
|
|
<c-row>
|
||
|
|
<c-col xs [lg]="10">
|
||
|
|
Config synchronization and cloners
|
||
|
|
</c-col>
|
||
|
|
<c-col xs [lg]="2" style="text-align: right;">
|
||
|
|
<button cButton color="primary" (click)="editAddCloner({},'showadd')"><i
|
||
|
|
class="fa-solid fa-plus"></i></button>
|
||
|
|
</c-col>
|
||
|
|
</c-row>
|
||
|
|
</c-card-header>
|
||
|
|
<c-card-body>
|
||
|
|
<gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
|
||
|
|
[infoPanel]="infoPanel" [autoResizeWidth]=true>
|
||
|
|
<gui-grid-column header="Description" field="description">
|
||
|
|
<ng-template let-value="item.description" let-item="item" let-index="index">
|
||
|
|
{{value}}
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column header="Members type" field="pair_type">
|
||
|
|
<ng-template let-value="item.pair_type" let-item="item" let-index="index">
|
||
|
|
{{value}}
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column header="Runtime" field="desc_cron">
|
||
|
|
<ng-template let-value="item.desc_cron" let-item="item" let-index="index">
|
||
|
|
{{value}}
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column header="Actions" width="120" field="action">
|
||
|
|
<ng-template let-value="item.id" let-item="item" let-index="index">
|
||
|
|
<button cButton color="warning" size="sm" (click)="editAddCloner(item,'edit');"><i
|
||
|
|
class="fa-regular fa-pen-to-square"></i></button>
|
||
|
|
<!-- <button cButton color="info" size="sm" (click)="confirm_run(item);" class="mx-1"><i
|
||
|
|
class="fa-solid fa-bolt"></i></button> -->
|
||
|
|
<button class=" mx-1" cButton color="danger" size="sm" (click)="confirm_delete(item);"><i
|
||
|
|
class="fa-regular fa-trash-can"></i></button>
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
</gui-grid>
|
||
|
|
</c-card-body>
|
||
|
|
</c-card>
|
||
|
|
</c-col>
|
||
|
|
</c-row>
|
||
|
|
|
||
|
|
<c-modal #EditClonerModal backdrop="static" size="xl" [(visible)]="EditClonerModalVisible" id="EditClonerModal">
|
||
|
|
<c-modal-header>
|
||
|
|
<h5 *ngIf="SelectedCloner['action']=='edit'" cModalTitle>Editing Cloner {{SelectedCloner['name']}}</h5>
|
||
|
|
<h5 *ngIf="SelectedCloner['action']=='add'" cModalTitle>Adding new task</h5>
|
||
|
|
<button [cModalToggle]="EditClonerModal.id" cButtonClose></button>
|
||
|
|
</c-modal-header>
|
||
|
|
<c-modal-body>
|
||
|
|
<label cLabel >General data:</label>
|
||
|
|
<c-input-group class="mb-3">
|
||
|
|
<label cInputGroupText for="floatingInput">Name</label>
|
||
|
|
<input cFormControl id="floatingInput" placeholder="SelectedCloner['name']" [(ngModel)]="SelectedCloner['name']" />
|
||
|
|
<label cInputGroupText for="floatingInput">Description</label>
|
||
|
|
<input cFormControl id="floatingInput" placeholder="SelectedCloner['description']"
|
||
|
|
[(ngModel)]="SelectedCloner['description']" />
|
||
|
|
</c-input-group>
|
||
|
|
<label cLabel >Sync config and Oprating Modes:</label>
|
||
|
|
<c-input-group class="mb-3">
|
||
|
|
<label cInputGroupText for="Direction">
|
||
|
|
Direction
|
||
|
|
</label>
|
||
|
|
<select cSelect id="Direction" [(ngModel)]="SelectedCloner['direction']">
|
||
|
|
<option value="twoway">Two way</option>
|
||
|
|
<option value="oneway">Master mode</option>
|
||
|
|
</select>
|
||
|
|
<label cInputGroupText for="inputGroupSelect01">
|
||
|
|
Live Mode
|
||
|
|
</label>
|
||
|
|
<select cSelect id="inputGroupSelect01" [(ngModel)]="SelectedCloner['live_mode']">
|
||
|
|
<option [ngValue]="false">Deactive</option>
|
||
|
|
<option [ngValue]="true">Active</option>
|
||
|
|
</select>
|
||
|
|
<label *ngIf="SelectedCloner['direction']=='oneway'" cInputGroupText for="inputGroupSelect02">
|
||
|
|
Schedule
|
||
|
|
</label>
|
||
|
|
<select *ngIf="SelectedCloner['direction']=='oneway'" cSelect id="inputGroupSelect02" [(ngModel)]="SelectedCloner['schedule']">
|
||
|
|
<option [ngValue]="false">Deactive</option>
|
||
|
|
<option [ngValue]="true">Active</option>
|
||
|
|
</select>
|
||
|
|
<label cInputGroupText *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'" for="cron">cron</label>
|
||
|
|
<input cFormControl *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'" id="cron" placeholder="Cron" [(ngModel)]="SelectedCloner['cron']" />
|
||
|
|
</c-input-group>
|
||
|
|
<label cLabel >Peers Setting:</label>
|
||
|
|
<c-input-group class="mb-3">
|
||
|
|
<label cInputGroupText for="inputGroupSelect03">
|
||
|
|
Peers type
|
||
|
|
</label>
|
||
|
|
<select cSelect id="inputGroupSelect03" (change)="form_changed()" [(ngModel)]="SelectedCloner['pair_type']">
|
||
|
|
<option value="devices">Devices</option>
|
||
|
|
<option value="groups" *ngIf="SelectedCloner['direction']=='oneway'">Groups</option>
|
||
|
|
</select>
|
||
|
|
</c-input-group>
|
||
|
|
|
||
|
|
<c-col xs style="border: 1px solid #ddd; border-radius: 4px; padding: 0;">
|
||
|
|
<div class="nav nav-underline" style="background: #fff; border-bottom: 2px solid #2c3e50;">
|
||
|
|
<div class="nav-item" *ngFor="let tab of tabs; let i = index">
|
||
|
|
<a class="nav-link" [active]="i==0" [cTabContent]="tabContent" [tabPaneIdx]="i">{{ tab.name }}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<c-tab-content class="command-sections" style="padding: 10px!important;min-height: 150px;" #tabContent="cTabContent">
|
||
|
|
<c-tab-pane *ngFor="let tab of tabs; let i = index">
|
||
|
|
<div class="section" *ngFor="let section of tab.sections">
|
||
|
|
<h5 class="cloner-sections">{{ section.title }}</h5>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-4" *ngFor="let command of section.commands">
|
||
|
|
<c-card style="margin-bottom: 5px;">
|
||
|
|
<c-card-body class="p-2">
|
||
|
|
<h6 class="card-title mb-1">{{ command }}</h6>
|
||
|
|
<div class="custom-switch">
|
||
|
|
<input type="checkbox" class="custom-control-input" [checked]="in_active_commands(command)" (click)="activate_command(command)" [id]="command.replace('/', '')">
|
||
|
|
<label class="custom-control-label" [for]="command.replace('/', '')"></label>
|
||
|
|
</div>
|
||
|
|
</c-card-body>
|
||
|
|
</c-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</c-tab-pane>
|
||
|
|
</c-tab-content>
|
||
|
|
</c-col>
|
||
|
|
|
||
|
|
<h5>Peers :</h5>
|
||
|
|
<gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
|
||
|
|
[rowSelection]="rowSelection" [autoResizeWidth]=true [paging]="paging">
|
||
|
|
<gui-grid-column header="Name" field="name">
|
||
|
|
<ng-template let-value="item.name" let-item="item" let-index="index">
|
||
|
|
<i class="fa-solid fa-m" style="color: #ff3300;" *ngIf="SelectedCloner['direction']=='oneway' && item.id==master"></i>
|
||
|
|
{{value}} </ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC" field="mac">
|
||
|
|
<ng-template let-value="item.mac" let-item="item" let-index="index">
|
||
|
|
{{value}}
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column header="Actions" width="120" field="action">
|
||
|
|
<ng-template let-value="item.id" let-item="item" let-index="index">
|
||
|
|
<button cButton color="danger" size="sm" [cTooltip]="'Delete Member'" (click)="remove_member(item)"><i
|
||
|
|
class="fa-regular fa-trash-can"></i></button>
|
||
|
|
<button *ngIf="SelectedCloner['direction']=='oneway'" cButton color="success" size="sm" style="margin-left: 5px;" [cTooltip]="'Set as Master'" (click)="set_master(item.id)"><i class="fa-regular fa-star"></i></button>
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
</gui-grid>
|
||
|
|
<hr />
|
||
|
|
<button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
|
||
|
|
</c-modal-body>
|
||
|
|
<c-modal-footer>
|
||
|
|
<button *ngIf="SelectedCloner['action']=='add'" (click)="submit('add')" cButton color="primary">Add</button>
|
||
|
|
<button *ngIf="SelectedCloner['action']=='edit'" (click)="submit('edit')" cButton color="primary">save</button>
|
||
|
|
<button [cModalToggle]="EditClonerModal.id" cButton color="secondary">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
</c-modal-footer>
|
||
|
|
</c-modal>
|
||
|
|
|
||
|
|
|
||
|
|
<c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
|
||
|
|
<c-modal-header>
|
||
|
|
<h5 cModalTitle>Editing Group </h5>
|
||
|
|
<button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
|
||
|
|
</c-modal-header>
|
||
|
|
<c-modal-body>
|
||
|
|
<c-input-group class="mb-3">
|
||
|
|
<h5>Group Members :</h5>
|
||
|
|
<gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
|
||
|
|
[source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
|
||
|
|
[rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
|
||
|
|
[paging]="paging">
|
||
|
|
<gui-grid-column header="Member Name" field="name">
|
||
|
|
<ng-template let-value="item.name" let-item="item" let-index="index">
|
||
|
|
{{value}} </ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="IP Address" field="ip">
|
||
|
|
<ng-template let-value="item.ip" let-item="item" let-index="index">
|
||
|
|
{{value}}
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
<gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC Address" field="mac">
|
||
|
|
<ng-template let-value="item.mac" let-item="item" let-index="index">
|
||
|
|
{{value}}
|
||
|
|
</ng-template>
|
||
|
|
</gui-grid-column>
|
||
|
|
</gui-grid>
|
||
|
|
<br />
|
||
|
|
</c-input-group>
|
||
|
|
<hr />
|
||
|
|
</c-modal-body>
|
||
|
|
|
||
|
|
<c-modal-footer>
|
||
|
|
<button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
|
||
|
|
NewMemberRows.length }}</button>
|
||
|
|
<button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
</c-modal-footer>
|
||
|
|
</c-modal>
|
||
|
|
|
||
|
|
|
||
|
|
<c-modal #DeleteConfirmModal backdrop="static" [(visible)]="DeleteConfirmModalVisible" id="DeleteConfirmModal">
|
||
|
|
<c-modal-header>
|
||
|
|
<h5 cModalTitle>Confirm delete {{ SelectedCloner['name'] }}</h5>
|
||
|
|
<button [cModalToggle]="DeleteConfirmModal.id" cButtonClose></button>
|
||
|
|
</c-modal-header>
|
||
|
|
<c-modal-body>
|
||
|
|
Are you sure that You want to delete following task ?
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<table style="width: 100%;">
|
||
|
|
<tr>
|
||
|
|
<td><b>Taks name : </b></td>
|
||
|
|
<td>{{ SelectedCloner['name'] }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Description : </b></td>
|
||
|
|
<td>{{ SelectedCloner['description'] }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Cron exec : </b></td>
|
||
|
|
<td>{{ SelectedCloner['desc_cron'] }}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</c-modal-body>
|
||
|
|
<c-modal-footer>
|
||
|
|
<button (click)="confirm_delete('',true)" cButton color="danger">
|
||
|
|
Yes,Delete!
|
||
|
|
</button>
|
||
|
|
<button [cModalToggle]="DeleteConfirmModal.id" cButton color="info">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
</c-modal-footer>
|
||
|
|
</c-modal>
|
||
|
|
|
||
|
|
<c-toaster position="fixed" placement="top-end"></c-toaster>
|