add firmware update task pro feature

src/app/views/user_tasks/user_tasks.component.html

@@ -7,7 +7,8 @@
             Tasks
           </c-col>
           <c-col xs [lg]="2" style="text-align: right;">
-            <button cButton color="primary" (click)="editAddTask({},'showadd')"><i class="fa-solid fa-plus"></i></button>
+            <button cButton color="primary" (click)="editAddTask({},'showadd')"><i
+                class="fa-solid fa-plus"></i></button>
           </c-col>
 
         </c-row>
@@ -17,8 +18,10 @@
           [infoPanel]="infoPanel" [autoResizeWidth]=true>
           <gui-grid-column header="Name" field="name">
             <ng-template let-value="item.name" let-item="item" let-index="index">
-              <i *ngIf="item.task_type=='snippet'" class="fa-solid fa-code"></i><i *ngIf="item.task_type=='backup'"
-                class="fa-solid fa-database"></i>&nbsp; {{value}} </ng-template>
+              <i *ngIf="item.task_type=='snippet'" class="fa-solid fa-code"></i>
+              <i *ngIf="item.task_type=='backup'"  class="fa-solid fa-database"></i>
+              <i *ngIf="item.task_type=='firmware'"  class="fa-solid fa-upload"></i>
+              &nbsp; {{value}} </ng-template>
           </gui-grid-column>
           <gui-grid-column header="Description" field="description">
             <ng-template let-value="item.description" let-item="item" let-index="index">
@@ -39,7 +42,7 @@
 
           <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)="editAddTask(item,'edit');" ><i
+              <button cButton color="warning" size="sm" (click)="editAddTask(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>
@@ -55,7 +58,7 @@
 <c-modal-header>
 
 
-<c-modal #EditTaskModal backdrop="static" size="xl" [(visible)]="EditTaskModalVisible" id="EditTaskModal">
+  <c-modal #EditTaskModal backdrop="static" size="xl" [(visible)]="EditTaskModalVisible" id="EditTaskModal">
     <c-modal-header>
       <h5 *ngIf="SelectedTask['action']=='edit'" cModalTitle>Editing device {{SelectedTask['name']}}</h5>
       <h5 *ngIf="SelectedTask['action']=='add'" cModalTitle>Adding new task</h5>
@@ -68,7 +71,8 @@
       </div>
 
       <div [cFormFloating]="true" class="mb-3">
-    <input cFormControl id="floatingInput" placeholder="SelectedTask['description']" [(ngModel)]="SelectedTask['description']" />
+        <input cFormControl id="floatingInput" placeholder="SelectedTask['description']"
+          [(ngModel)]="SelectedTask['description']" />
         <label cLabel for="floatingInput">Description</label>
       </div>
 
@@ -80,18 +84,83 @@
           <option>Choose...</option>
           <option value="backup">Backup</option>
           <option value="snippet">Snippet</option>
+          <option value="firmware" *ngIf="ispro">Firmware</option>
         </select>
       </c-input-group>
-  <c-input-group class="mb-3">
+      <h6 *ngIf="SelectedTask['task_type']=='firmware'" >Update Version Strategy</h6>
+      <c-card  *ngIf="SelectedTask['task_type']=='firmware'">
+        <c-card-header style="padding: 0;">
+          <c-input-group>
+            <c-button-group aria-label="Basic radio toggle button group"
+              role="group">
+              <input class="btn-check" type="radio" value="Radio2" />
+              <label (click)="firmware_type_changed('system')" [active]="SelectedTask['data']['strategy']=='system'"
+                cButton cFormCheckLabel color="dark" variant="ghost">System setting
+                defined</label>
+              <input class="btn-check" type="radio" value="Radio1" />
+              <label (click)="firmware_type_changed('defined')" [active]="SelectedTask['data']['strategy']=='defined'"
+                cButton cFormCheckLabel color="dark" variant="ghost">Custom
+                Version</label>
+              <input class="btn-check" type="radio" value="Radio3" />
+              <label (click)="firmware_type_changed('latest')" [active]="SelectedTask['data']['strategy']=='latest'"
+                cButton cFormCheckLabel color="dark" variant="ghost">Latest
+                availble</label>
+            </c-button-group>
+          </c-input-group>
+        </c-card-header>
+        <c-card-body>
 
-  <ngx-super-select *ngIf="SelectedTask['task_type']=='snippet'"
-    [dataSource]="Snippets"
-    [options]="options"
-    (selectionChanged)="onSelectValueChanged($event)"
-    [selectedItemValues]="[SelectedTask['snippetid']]"
-    (searchChanged)="onSnippetsValueChanged($event)"
-    class="styled"
-    ></ngx-super-select>
+          <c-input-group
+            *ngIf="firms_loaded && SelectedTask['task_type']=='firmware' && SelectedTask['data']['strategy']=='system'">
+            <c-form-feedback style="display: block;color: #48515a;margin-top: 0;" [valid]="true">
+              The version of firmware will be selected based on global settings of Mikrowizard Update strategy.
+              <br/>
+              Please check settings page for more info and configuration
+            </c-form-feedback>
+          </c-input-group>
+          <c-input-group
+          *ngIf="firms_loaded && SelectedTask['task_type']=='firmware' && SelectedTask['data']['strategy']=='latest'">
+
+          <c-form-feedback style="display: block;color: #48515a;margin-top: 0;" [valid]="true">
+            The version of firmware will be selected based on latest availble version from Mikrotik website!.
+              <br/>
+              <b>V6 Firmware update Behavior</b> and <b>safe install</b> is based on global Mikrowizard setting.(check settings page)
+              <br/>
+              <code style="padding: 0!important;">**with this option MikroWizard will download latest availble firmware from mikrotik.com. Please keep in mind that server needs internet access to mikrotik.com</code></c-form-feedback>
+          </c-input-group>
+          <c-input-group
+            *ngIf="firms_loaded && SelectedTask['task_type']=='firmware' && SelectedTask['data']['strategy']=='defined'">
+            <c-input-group class="mb-3">
+              <label cInputGroupText for="inputGroupSelect01">
+                Firmware version to install
+              </label>
+              <select cSelect [(ngModel)]="SelectedTask['data']['version_to_install']" id="inputGroupSelect01">
+                <option>Choose...</option>
+                <option *ngFor="let f of available_firmwares" [value]="f">{{f}}</option>
+
+              </select>
+              <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+                * The version of firmware to install routers</c-form-feedback>
+            </c-input-group>
+
+            <c-input-group *ngIf="updateBehavior=='keep'" >
+              <label cInputGroupText for="inputGroupSelect01">
+                Firmware version v6 to install
+              </label>
+              <select cSelect [(ngModel)]="SelectedTask['data']['version_to_install_6']" id="inputGroupSelect01">
+                <option>Choose...</option>
+                <option *ngFor="let f of available_firmwaresv6" [value]="f">{{f}}</option>
+              </select>
+              <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+                * The version of firmware to install on V6 routers</c-form-feedback>
+            </c-input-group>
+          </c-input-group>
+        </c-card-body>
+      </c-card>
+      <c-input-group class="mb-3">
+        <ngx-super-select *ngIf="SelectedTask['task_type']=='snippet'" [dataSource]="Snippets" [options]="options"
+          (selectionChanged)="onSelectValueChanged($event)" [selectedItemValues]="[SelectedTask['snippetid']]"
+          (searchChanged)="onSnippetsValueChanged($event)" class="styled"></ngx-super-select>
       </c-input-group>
 
       <div [cFormFloating]="true" class="mb-3">
@@ -111,7 +180,7 @@
 
       <h5>Members :</h5>
       <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
-    [infoPanel]="infoPanel" [rowSelection]="rowSelection"  [autoResizeWidth]=true [paging]="paging" >
+        [infoPanel]="infoPanel" [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">
             &nbsp; {{value}} </ng-template>
@@ -124,13 +193,13 @@
         <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" (click)="remove_member(item)"><i
-            class="fa-regular fa-trash-can" ></i></button>
+                class="fa-regular fa-trash-can"></i></button>
           </ng-template>
         </gui-grid-column>
       </gui-grid>
       <hr />
-  <button cButton color="primary" (click)="show_new_member_form()" >+ Add new Members</button>
-<!--
+      <button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
+      <!--
   <c-input-group class="mb-3">
     <ngx-super-select
     [dataSource]="Members"
@@ -160,10 +229,10 @@
         Close
       </button>
     </c-modal-footer>
-</c-modal>
+  </c-modal>
 
 
-<c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
+  <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>
@@ -171,8 +240,10 @@
     <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 [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">
               &nbsp; {{value}} </ng-template>
@@ -188,39 +259,42 @@
             </ng-template>
           </gui-grid-column>
         </gui-grid>
-      <br/>
+        <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 *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>
 
 
-<c-modal #DeleteConfirmModal backdrop="static"  [(visible)]="DeleteConfirmModalVisible"
-  id="DeleteConfirmModal">
+  <c-modal #DeleteConfirmModal backdrop="static" [(visible)]="DeleteConfirmModalVisible" id="DeleteConfirmModal">
     <c-modal-header>
       <h5 cModalTitle>Confirm delete {{ SelectedTask['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/>
+      <br />
+      <br />
       <table style="width: 100%;">
         <tr>
-    <td><b>Taks name : </b></td><td>{{ SelectedTask['name'] }}</td>
+          <td><b>Taks name : </b></td>
+          <td>{{ SelectedTask['name'] }}</td>
         </tr>
         <tr>
-    <td><b>Description : </b></td><td>{{ SelectedTask['description'] }}</td>
+          <td><b>Description : </b></td>
+          <td>{{ SelectedTask['description'] }}</td>
         </tr>
         <tr>
-    <td><b>Cron exec : </b></td><td>{{ SelectedTask['desc_cron'] }}</td>
+          <td><b>Cron exec : </b></td>
+          <td>{{ SelectedTask['desc_cron'] }}</td>
         </tr>
       </table>
     </c-modal-body>
@@ -232,28 +306,31 @@
         Close
       </button>
     </c-modal-footer>
-</c-modal>
+  </c-modal>
 
 
 
-<c-modal #runConfirmModal backdrop="static"  [(visible)]="runConfirmModalVisible" id="runConfirmModal">
+  <c-modal #runConfirmModal backdrop="static" [(visible)]="runConfirmModalVisible" id="runConfirmModal">
     <c-modal-header>
       <h6 cModalTitle>Confirm RUN {{ SelectedTask['name'] }}</h6>
       <button [cModalToggle]="runConfirmModal.id" cButtonClose></button>
     </c-modal-header>
     <c-modal-body>
       Are you sure that You want to run following task ?
-    <br/>
-    <br/>
+      <br />
+      <br />
       <table style="width: 100%;">
         <tr>
-    <td><b>Taks name : </b></td><td>{{ SelectedTask['name'] }}</td>
+          <td><b>Taks name : </b></td>
+          <td>{{ SelectedTask['name'] }}</td>
         </tr>
         <tr>
-    <td><b>Description : </b></td><td>{{ SelectedTask['description'] }}</td>
+          <td><b>Description : </b></td>
+          <td>{{ SelectedTask['description'] }}</td>
         </tr>
         <tr>
-    <td><b>Cron exec : </b></td><td>{{ SelectedTask['desc_cron'] }}</td>
+          <td><b>Cron exec : </b></td>
+          <td>{{ SelectedTask['desc_cron'] }}</td>
         </tr>
       </table>
     </c-modal-body>
@@ -265,4 +342,4 @@
         Close
       </button>
     </c-modal-footer>
-</c-modal>
+  </c-modal>

src/app/views/user_tasks/user_tasks.component.ts

@@ -17,19 +17,6 @@ import {
 import { NgxSuperSelectOptions } from "ngx-super-select";
 import { _getFocusedElementPierceShadowDom } from "@angular/cdk/platform";
 
-interface IUser {
-  name: string;
-  state: string;
-  registered: string;
-  country: string;
-  usage: number;
-  period: string;
-  payment: string;
-  activity: string;
-  avatar: string;
-  status: string;
-  color: string;
-}
 
 @Component({
   templateUrl: "user_tasks.component.html",
@@ -37,6 +24,7 @@ interface IUser {
 export class UserTasksComponent implements OnInit {
   public uid: number;
   public uname: string;
+  public ispro: boolean = false;
 
   constructor(
     private data_provider: dataProvider,
@@ -52,6 +40,7 @@ export class UserTasksComponent implements OnInit {
     this.data_provider.getSessionInfo().then((res) => {
       _self.uid = res.uid;
       _self.uname = res.name;
+      _self.ispro = res['ISPRO']
       const userId = _self.uid;
 
       if (res.role != "admin") {
@@ -81,7 +70,12 @@ export class UserTasksComponent implements OnInit {
   public availbleMembers: any = [];
   public NewMemberRows: any = [];
   public SelectedNewMemberRows: any;
-
+  public available_firmwares: any = [];
+  public available_firmwaresv6: any = [];
+  public firmwaretoinstall: string = "none";
+  public firmwaretoinstallv6: string = "none";
+  public updateBehavior: string = "keep";
+  public firms_loaded: boolean = false;
   public sorting = {
     enabled: true,
     multiSorting: true,
@@ -212,6 +206,7 @@ export class UserTasksComponent implements OnInit {
         snippetid: "",
         task_type: "backup",
       };
+      this.SelectedTask['data'] = { 'strategy': 'system', 'version_to_install': '', 'version_to_install_6': '' }
       this.SelectedMembers = [];
       this.SelectedTaskItems = [];
       this.EditTaskModalVisible = true;
@@ -220,6 +215,34 @@ export class UserTasksComponent implements OnInit {
 
     var _self = this;
     this.SelectedTask = { ...item };
+    if (this.SelectedTask['task_type'] == 'firmware' && 'data' in this.SelectedTask && this.SelectedTask['data']) {
+      this.SelectedTask['data'] = JSON.parse(this.SelectedTask['data']);
+      if (this.SelectedTask['data']['strategy'] == 'defined') {
+        this.data_provider.get_firms(0, 10000, false).then((res) => {
+          let index = 1;
+          _self.available_firmwares = [
+            ...new Set(
+              res["firms"].map((x: any) => {
+                return x.version;
+              })
+            ),
+          ];
+          _self.available_firmwaresv6 = [
+            ...new Set(
+              res["firms"].map((x: any) => {
+                return x.version;
+              })
+            ),
+          ].filter((x: any) => x.match(/^6\./g));
+          _self.updateBehavior = res.updateBehavior;
+          _self.firms_loaded = true;
+        });
+      }
+      else{
+        _self.firms_loaded = true;
+      }
+
+    }
     _self.data_provider.get_snippets("", "", "", 0, 1000).then((res) => {
       _self.Snippets = res.map((x: any) => {
         return { id: x.id, name: x.name };
@@ -239,7 +262,41 @@ export class UserTasksComponent implements OnInit {
       this.SelectedTaskItems = [];
     }
   }
-
+  firmware_type_changed(type: any) {
+    this.SelectedTask['data']['strategy'] = type;
+    if (type == 'system') {
+      this.SelectedTask['data']['version_to_install'] = false
+      this.SelectedTask['data']['version_to_install_6'] = false
+    }
+    else if (type == 'defined') {
+      var _self = this;
+      this.data_provider.get_firms(0, 10000, false).then((res) => {
+        let index = 1;
+        _self.available_firmwares = [
+          ...new Set(
+            res["firms"].map((x: any) => {
+              return x.version;
+            })
+          ),
+        ];
+        _self.available_firmwaresv6 = [
+          ...new Set(
+            res["firms"].map((x: any) => {
+              return x.version;
+            })
+          ),
+        ].filter((x: any) => x.match(/^6\./g));
+        _self.updateBehavior = res.updateBehavior;
+        _self.firms_loaded = true;
+      });
+    }
+    else if (type == 'latest') {
+      this.SelectedTask['data']['version_to_install'] = false
+      this.SelectedTask['data']['version_to_install_6'] = false
+      //get firmwares to select
+    }
+    return
+  }
   remove_member(item: any) {
     var _self = this;
     _self.SelectedMembers = _self.SelectedMembers.filter(

src/app/views/user_tasks/user_tasks.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
+import { FormsModule,ReactiveFormsModule } from "@angular/forms";
 
 import {
   ButtonModule,
@@ -8,6 +8,7 @@ import {
   FormModule,
   GridModule,
   ModalModule,
+  ButtonGroupModule,
 } from "@coreui/angular";
 import { UserTasksRoutingModule } from "./user_tasks-routing.module";
 import { UserTasksComponent } from "./user_tasks.component";
@@ -23,8 +24,10 @@ import { NgxSuperSelectModule} from "ngx-super-select";
     GridModule,
     FormModule,
     ButtonModule,
+    ButtonGroupModule,
     GuiGridModule,
     ModalModule,
+    ReactiveFormsModule,
     FormsModule,
     NgxSuperSelectModule,
   ],