Add snippet execute , and show executed results

src/app/providers/mikrowizard/data.ts

@@ -249,13 +249,23 @@ export class dataProvider {
         return this.MikroWizardRPC.sendJsonRequest("/api/snippet/save", {...data});
     }
 
+    Exec_snipet(data:any,members:any) {
+        data['members']=members;
+        return this.MikroWizardRPC.sendJsonRequest("/api/snippet/exec", data);
+    }
+
     delete_snippet(id:number){
         var data={
             'id':id
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/snippet/delete", data);
     }
-
+    get_executed_snipet(id:number){
+        var data={
+            'id':id
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/snippet/executed", data);
+    }
     get_user_task_list() {
         return this.MikroWizardRPC.sendJsonRequest("/api/user_tasks/list", {});
     }
@@ -266,6 +276,7 @@ export class dataProvider {
         return this.MikroWizardRPC.sendJsonRequest("/api/user_tasks/create", data);
     }
     
+
     Delete_task(taskid:Number) {
         var data={
             'taskid':taskid,

src/app/views/devices/devices.component.html

@@ -30,7 +30,6 @@
                 </option>
               </select>
             </c-input-group>
-
           </c-col>
         </c-row>
         <gui-grid #grid [rowClass]="rowClass" [source]="source" [searching]="searching" [paging]="paging"

src/app/views/snippets/snippets.component.html

@@ -32,15 +32,18 @@
           </gui-grid-column>
           <gui-grid-column header="Created" field="created">
             <ng-template let-value="item.created" let-item="item" let-index="index">
-
               <div>{{value}}</div>
             </ng-template>
           </gui-grid-column>
-          <gui-grid-column header="Actions" field="action">
+          <gui-grid-column header="Actions" field="action" align="center">
             <ng-template let-value="item.id" let-item="item" let-index="index">
-              <button cButton color="warning" size="sm" (click)="Edit_Snippet(item,'edit')" class="mx-1"><i
+              <button cButton color="primary" size="sm" (click)="Edit_Snippet(item,'edit')" class=""><i
                   class="fa-regular fa-pen-to-square mx-1"></i>Edit</button>
-              <button cButton color="danger" size="sm" (click)="confirm_delete(item,false)" class="mx-1"><i
+              <button cButton color="warning" size="sm" (click)="Run_Snippet(item,'exec')" class="mx-1"><i
+                    class="fa-solid fa-bolt mx-1"></i>Execute</button>
+              <button cButton color="info" size="sm" (click)="show_exec(item)" class="mx-1"><i
+                      class="fa-solid fa-bolt mx-1"></i>Data</button>
+              <button cButton color="danger" size="sm" (click)="confirm_delete(item,false)" class=""><i
                   class="fa-regular fa-trash-can mx-1"></i>Delete</button>
             </ng-template>
           </gui-grid-column>
@@ -52,6 +55,147 @@
 
 
 
+
+<c-modal #ExecSnipetModal backdrop="static" size="xl" [(visible)]="ExecSnipetModalVisible" id="ExecSnipetModal">
+  <c-modal-header>
+    <h5 cModalTitle>Exec Snipet</h5>
+    <button [cModalToggle]="ExecSnipetModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div [cFormFloating]="true" class="mb-3">
+      <input cFormControl id="floatingInput" placeholder="current_snippet['name']" [(ngModel)]="current_snippet['name']" disabled="true"/>
+      <label cLabel for="floatingInput">Snipet Name</label>
+    </div>
+
+    <div [cFormFloating]="true" class="mb-3">
+      <input cFormControl id="floatingInput" placeholder="current_snippet['description']"
+        [(ngModel)]="current_snippet['description']" />
+      <label cLabel for="floatingInput">Description</label>
+    </div>
+
+    <c-input-group class="mb-3">
+      <label cInputGroupText for="inputGroupSelect01">
+        Member type
+      </label>
+      <select cSelect id="inputGroupSelect01" (change)="form_changed()" [(ngModel)]="current_snippet['selection_type']">
+        <option value="devices">Devices</option>
+        <option value="groups">Groups</option>
+      </select>
+    </c-input-group>
+
+    <h5>Members :</h5>
+    <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
+      [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>
+      </gui-grid-column>
+      <gui-grid-column *ngIf="current_snippet['selection_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" (click)="remove_member(item)"><i
+              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>
+
+  </c-modal-body>
+  <c-modal-footer>
+    <button  (click)="submit('exec')" cButton color="primary">Execute</button>
+    <button [cModalToggle]="ExecSnipetModal.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">
+            &nbsp; {{value}} </ng-template>
+        </gui-grid-column>
+        <gui-grid-column *ngIf="current_snippet['selection_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="current_snippet['selection_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 #ExecutedDataModal backdrop="static" size="lg" [(visible)]="ExecutedDataModalVisible" id="ExecutedDataModal">
+  <c-modal-header>
+    <h5 cModalTitle>Editing Group </h5>
+    <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <c-input-group class="mb-3">
+      <h5>Group Members :</h5>
+      <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
+        [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+       [autoResizeWidth]=true
+        [paging]="paging">
+        <gui-grid-column header="Start time" field="start">
+          <ng-template let-value="item['started']" let-item="item" let-index="index">
+            &nbsp; {{value}} </ng-template>
+        </gui-grid-column>
+        <gui-grid-column   header="End time" field="end">
+          <ng-template let-value="item['ended']" let-item="item" let-index="index">
+            {{value}}
+          </ng-template>
+        </gui-grid-column>
+        <gui-grid-column header="info" field="mac" align="center">
+          <ng-template let-value="item['result']" let-item="item" let-index="index">
+            <button (click)="exportToCsv(value)"  color="primary" cButton>download</button>
+          </ng-template>
+        </gui-grid-column>
+      </gui-grid>
+      <br />
+    </c-input-group>
+    <hr />
+  </c-modal-body>
+
+  <c-modal-footer>
+    <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButton color="secondary">
+      Close
+    </button>
+  </c-modal-footer>
+</c-modal>
+
 <c-modal #EditModal backdrop="static" [(visible)]="EditModalVisible" id="runEditModal">
   <c-modal-header>
     <h6 *ngIf="ModalAction=='add'" cModalTitle>Add New Snippet</h6>
@@ -59,7 +203,6 @@
     <button [cModalToggle]="EditModal.id" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
-
     <c-input-group class="mb-3">
       <div [cFormFloating]="true" class="mb-3">
         <input cFormControl id="floatingInput" placeholder="Snippet Name" [(ngModel)]="current_snippet['name']" />
@@ -77,6 +220,7 @@
         <textarea   [style.height.px]="50 + (23 * lineNum)"
         cFormControl (ngModelChange)="calcline($event)" id="floatingInput" placeholder="Snippet code" [(ngModel)]="current_snippet['content']" ></textarea>
         <label cLabel for="floatingInput">Code</label>
+        <div class="col-sm-12 c-d-block c-text-truncate">Note : In case of multiple IP addresses for the MikroWizard server, use<code style="padding: 0!important;">[mikrowizard]</code> instead of the MikroWizard server IP.</div>
       </div>
     </c-input-group>
     <br />
@@ -87,8 +231,6 @@
   </c-modal-footer>
 </c-modal>
 
-
-
 <c-modal #DeleteConfirmModal backdrop="static"  [(visible)]="DeleteConfirmModalVisible"
   id="DeleteConfirmModal">
   <c-modal-header>
@@ -122,9 +264,6 @@
   </c-modal-footer>
 </c-modal>
 
-
-
-
 <c-toaster position="fixed" placement="top-end"></c-toaster>
 
 

src/app/views/snippets/snippets.component.ts

@@ -1,214 +1,410 @@
-import { Component, OnInit, OnDestroy, Inject, Renderer2, ViewChild, ElementRef, TemplateRef } from '@angular/core';
+import {
-import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+  Component,
-import { dataProvider } from '../../providers/mikrowizard/data';
+  OnInit,
+  OnDestroy,
+  Inject,
+  Renderer2,
+  ViewChild,
+  ElementRef,
+  TemplateRef,
+} from "@angular/core";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
+import { dataProvider } from "../../providers/mikrowizard/data";
 import { Router } from "@angular/router";
-import { loginChecker } from '../../providers/login_checker';
+import { loginChecker } from "../../providers/login_checker";
-import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
-import { DOCUMENT } from '@angular/common';
+import {
-import { GuiCellView,GuiSearching, GuiSelectedRow, GuiInfoPanel, GuiColumn, GuiColumnMenu, GuiDataType, GuiPaging, GuiPagingDisplay, GuiRowColoring, GuiRowSelectionMode, GuiRowSelection, GuiRowSelectionType } from '@generic-ui/ngx-grid';
+  GuiCellView,
+  GuiSearching,
+  GuiSelectedRow,
+  GuiInfoPanel,
+  GuiColumn,
+  GuiColumnMenu,
+  GuiDataType,
+  GuiPaging,
+  GuiPagingDisplay,
+  GuiRowColoring,
+  GuiRowSelectionMode,
+  GuiRowSelection,
+  GuiRowSelectionType,
+} from "@generic-ui/ngx-grid";
+import { formatInTimeZone } from "date-fns-tz";
 
-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: 'snippets.component.html',
+  templateUrl: "snippets.component.html",
 })
+export class SnippetsComponent implements OnInit, OnDestroy {
+  public uid: number;
+  public uname: string;
+  public tz: string;
 
-export class SnippetsComponent implements OnInit, OnDestroy  {
+  constructor(
-	public uid: number;
+    private data_provider: dataProvider,
-	public uname: string;
+    private router: Router,
+    private login_checker: loginChecker,
+    private renderer: Renderer2,
+    private httpClient: HttpClient,
+  ) {
+    var _self = this;
+    if (!this.login_checker.isLoggedIn()) {
+      // setTimeout(function() {
+      // 		_self.router.navigate(['login']);
+      // 	}, 100);
+    }
+    this.data_provider.getSessionInfo().then((res) => {
+      // console.dir("res",res)
+      _self.uid = res.uid;
+      _self.uname = res.name;
+	  _self.tz = res.tz;
+      // console.dir("role",res.role);
+      const userId = _self.uid;
 
-	constructor(
+      if (res.role != "admin") {
-		private data_provider: dataProvider,
+        // console.dir(res.role);
-		private router: Router,
+        setTimeout(function () {
-		private login_checker: loginChecker,
+          _self.router.navigate(["/user/dashboard"]);
-		private renderer: Renderer2,
+        }, 100);
-		private httpClient: HttpClient,
+      }
-		@Inject(DOCUMENT) _document?: any,
+    });
-	) {
+    //get datagrid data
-		var _self = this;
+    function isNotEmpty(value: any): boolean {
-		if (!this.login_checker.isLoggedIn()) {
+      return value !== undefined && value !== null && value !== "";
-			// setTimeout(function() {
+    }
-			// 		_self.router.navigate(['login']);
+  }
-			// 	}, 100);
+  @ViewChild("nameSummaryCell")
-		}
+  nameSummaryCell: TemplateRef<any>;
-		this.data_provider.getSessionInfo().then(res => {
+  public source: Array<any> = [];
-			// console.dir("res",res)
+  public columns: Array<GuiColumn> = [];
-			_self.uid = res.uid;
+  public loading: boolean = true;
-			_self.uname = res.name;
+  public rows: any = [];
-			// console.dir("role",res.role);
+  public Selectedrows: any;
-			const userId = _self.uid;
+  public EditModalVisible: boolean = false;
+  public ModalAction: string = "checkfirm";
+  public lineNum: number = 0;
+  public DeleteConfirmModalVisible: boolean = false;
+  public ExecSnipetModalVisible: boolean = false;
+  public NewMemberModalVisible: boolean = false;
+  public ExecutedDataModalVisible: boolean = false;
+  public ExecutedData: any = [];
+  public SelectedSnippet: any = { name: "" };
+  public SelectedMembers: any = [];
+  public SelectedTaskItems: any = "";
+  public availbleMembers: any = [];
+  public NewMemberRows: any = [];
+  public SelectedNewMemberRows: any;
 
-			if (res.role != "admin") {
+  public current_snippet: any = {
-				// console.dir(res.role);
+    content: "",
-				setTimeout(function () {
+    created: "",
-					_self.router.navigate(['/user/dashboard']);
+    description: "",
-				}, 100);
+    id: 0,
-			}
+    name: "",
-		});
+  };
-		//get datagrid data
-		function isNotEmpty(value: any): boolean {
-			return value !== undefined && value !== null && value !== "";
-		}
-	}
-	@ViewChild('nameSummaryCell')
-	nameSummaryCell: TemplateRef<any>;
-	public source: Array<any> = [];
-	public columns: Array<GuiColumn> = [];
-	public loading: boolean = true;
-	public rows: any=[];
-	public Selectedrows: any;
-	public EditModalVisible:boolean=false;
-	public ModalAction:string="checkfirm";
-	public lineNum:number=0;
-	public DeleteConfirmModalVisible:boolean = false;
-	public SelectedSnippet:any={'name':'',};
 
-	public current_snippet:any={
+  public default_snippet: any = {
-		"content": "",
+    content: "",
-		"created": "",
+    created: "",
-		"description": "",
+    description: "",
-		"id": 0,
+    id: 0,
-		"name": ""
+    name: "",
-	};
+  };
 
-	public default_snippet:any={
+  public sorting = {
-		"content": "",
+    enabled: true,
-		"created": "",
+    multiSorting: true,
-		"description": "",
+  };
-		"id": 0,
-		"name": ""
-	};
 
-	public sorting = {
+  public ip_scanner: any;
-		enabled: true,
-		multiSorting: true
-	};
-	
-	public ip_scanner:any;
-	
-	searching: GuiSearching = {
-		enabled: true,
-		placeholder: 'Search Devices'
-	};
 
-	public paging: GuiPaging = {
+  searching: GuiSearching = {
-		enabled: true,
+    enabled: true,
-		page: 1,
+    placeholder: "Search Devices",
-		pageSize: 10,
+  };
-		pageSizes: [5, 10, 25, 50],
-		display: GuiPagingDisplay.ADVANCED
-	};
 
-	public columnMenu: GuiColumnMenu = {
+  public paging: GuiPaging = {
-		enabled: true,
+    enabled: true,
-		sort: true,
+    page: 1,
-		columnsManager: true
+    pageSize: 10,
-	};
+    pageSizes: [5, 10, 25, 50],
+    display: GuiPagingDisplay.ADVANCED,
+  };
 
-	public infoPanel: GuiInfoPanel = {
+  public columnMenu: GuiColumnMenu = {
-		enabled: true,
+    enabled: true,
-		infoDialog: false,
+    sort: true,
-		columnsManager: true,
+    columnsManager: true,
-		schemaManager: true
+  };
-	};
 
-	public rowSelection: boolean | GuiRowSelection = {
+  public infoPanel: GuiInfoPanel = {
-		enabled: true,
+    enabled: true,
-		type: GuiRowSelectionType.CHECKBOX,
+    infoDialog: false,
-		mode: GuiRowSelectionMode.MULTIPLE,
+    columnsManager: true,
-	};
+    schemaManager: true,
+  };
+
+  public rowSelection: boolean | GuiRowSelection = {
+    enabled: true,
+    type: GuiRowSelectionType.CHECKBOX,
+    mode: GuiRowSelectionMode.MULTIPLE,
+  };
+
+  ngOnInit(): void {
+    this.initGridTable();
+  }
+
+  confirm_delete(item: any = "", del: boolean = false) {
+    if (!del) {
+      this.SelectedSnippet = { ...item };
+      this.DeleteConfirmModalVisible = true;
+      console.dir(this.SelectedSnippet);
+    } else {
+      var _self = this;
+      this.data_provider
+        .delete_snippet(_self.SelectedSnippet["id"])
+        .then((res) => {
+          _self.initGridTable();
+          _self.DeleteConfirmModalVisible = false;
+        });
+    }
+  }
+
+  Edit_Snippet(item: any, action: string = "showadd") {
+    if (action == "showadd") {
+      this.current_snippet = { ...this.default_snippet };
+      this.EditModalVisible = true;
+      this.ModalAction = "add";
+    } else {
+      this.current_snippet = item;
+      this.EditModalVisible = true;
+      this.lineNum = this.current_snippet["content"].match(/\n/g).length;
+
+      this.ModalAction = "edit";
+    }
+  }
+  show_exec(item:any){
+	var _self=this;
+	this.SelectedSnippet = item;
+	this.ExecutedDataModalVisible = true;
+	this.data_provider
+	.get_executed_snipet(_self.SelectedSnippet["id"])
+	.then((res) => {
+		let index = 1;
+		_self.ExecutedData= res.map((d: any) => {
+			d.index = index;
+			d.ended = formatInTimeZone(
+			  d.created.split(".")[0] + ".000Z",
+			  _self.tz,
+			  "yyyy-MM-dd HH:mm:ss XXX"
+			);
+			d.started = formatInTimeZone(
+				d.info.created.split(".")[0] + ".000Z",
+				_self.tz,
+				"yyyy-MM-dd HH:mm:ss XXX"
+			  );
+			index += 1;
+			return d;
+		  });
 
 
-	ngOnInit(): void {
-		this.initGridTable();
-	}
-
-	confirm_delete(item: any="",del:boolean=false) {
-		if (!del){
-			this.SelectedSnippet={...item};
-			this.DeleteConfirmModalVisible = true;
-			console.dir(this.SelectedSnippet);
-		}
-		else{
-			var _self=this;
-			this.data_provider.delete_snippet(_self.SelectedSnippet['id']).then(res => {
-				_self.initGridTable();
-				_self.DeleteConfirmModalVisible = false;
-			});
-
-		}
-		
-	}
-
-	Edit_Snippet(item: any,action:string="showadd") {
-		
-		if(action=="showadd"){
-			this.current_snippet={...this.default_snippet};
-			this.EditModalVisible=true;
-			this.ModalAction="add";
-		}
-		else{
-			this.current_snippet=item;
-			this.EditModalVisible=true;
-			this.lineNum = this.current_snippet['content'].match(/\n/g) .length ;
-
-			this.ModalAction="edit";
-		}
-
-	}
-
-	calcline($ev:any){
-		if($ev)
-			this.lineNum = $ev.match(/\n/g) .length ;
-		else
-			this.lineNum = 0;
-	}
-
-	save_snippet(){
-		this.data_provider.save_snippet(this.current_snippet).then(res =>{
-			this.EditModalVisible=false;
-			this.initGridTable();
-		})
-	}
-
-	onSelectedRows(rows: Array<GuiSelectedRow>): void {
-		this.rows = rows;
-		this.Selectedrows = rows.map((m: GuiSelectedRow) => m.source.id);
-	}
-
-	remove(item: any) {
-		console.dir(item);
-	}
-
-	logger(item: any) {
-		console.dir(item)
-	}
-
-	initGridTable(): void {
-		var _self=this;
-		_self.data_provider.get_snippets("","","",0,1000).then(res => {
-			_self.source =res.map( (x:any) => {
-				x.created = [x.created.split("T")[0],x.created.split("T")[1].split(".")[0]].join(" ")
-				return x;
-
-			});
-			_self.loading = false;
-		});
-	}
 
 
-	ngOnDestroy(): void {
+
-	}
+
+
+
+
+
+
+	  _self.DeleteConfirmModalVisible = false;
+	});
+  }
+
+  form_changed() {
+    // this.editAddTask(this.SelectedTask, "select_change");
+    this.SelectedMembers = [];
+    this.SelectedTaskItems = [];
+  }
+  remove_member(item: any) {
+    var _self = this;
+    _self.SelectedMembers = _self.SelectedMembers.filter(
+      (x: any) => x.id != item.id
+    );
+    _self.SelectedTaskItems = _self.SelectedMembers.map((x: any) => {
+      return x.id;
+    });
+  }
+
+  show_new_member_form() {
+    this.NewMemberModalVisible = true;
+    var _self = this;
+    _self.availbleMembers = [];
+    this.SelectedNewMemberRows = [];
+    this.NewMemberRows = [];
+
+    var data = {
+      group_id: false,
+      search: false,
+      page: false,
+      size: 10000,
+    };
+
+    if (this.current_snippet["selection_type"] == "devices")
+      _self.data_provider.get_dev_list(data).then((res) => {
+        _self.availbleMembers = res.filter(
+          (x: any) => !_self.SelectedTaskItems.includes(x.id)
+        );
+        _self.NewMemberModalVisible = true;
+      });
+    else
+      _self.data_provider.get_devgroup_list().then((res) => {
+        _self.availbleMembers = res.filter(
+          (x: any) => !_self.SelectedTaskItems.includes(x.id)
+        );
+        _self.NewMemberModalVisible = true;
+      });
+  }
+
+  onSelectedRowsNewMembers(rows: Array<GuiSelectedRow>): void {
+    this.NewMemberRows = rows;
+    this.SelectedNewMemberRows = rows.map((m: GuiSelectedRow) => m.source);
+  }
+  
+  add_new_members() {
+    var _self = this;
+    _self.SelectedMembers = [
+      ...new Set(_self.SelectedMembers.concat(_self.SelectedNewMemberRows)),
+    ];
+
+    _self.SelectedTaskItems = _self.SelectedMembers.map((x: any) => {
+      return x.id;
+    });
+
+    this.NewMemberModalVisible = false;
+  }
+
+  submit(action: string) {
+    var _self = this;
+	this.data_provider
+	.Exec_snipet(_self.current_snippet, _self.SelectedTaskItems)
+	.then((res) => {
+		_self.initGridTable();
+	});
+    
+    this.ExecSnipetModalVisible = false;
+  }
+
+  Run_Snippet(item: any, action: string = "showadd") {
+    this.current_snippet = item;
+    this.current_snippet["task_type"] = "snipet_exec";
+    this.current_snippet["selection_type"] = "devices";
+	this.form_changed();
+    this.ExecSnipetModalVisible = true;
+    this.ModalAction = "exec";
+  }
+  calcline($ev: any) {
+    if ($ev) this.lineNum = $ev.match(/\n/g).length;
+    else this.lineNum = 0;
+  }
+
+  save_snippet() {
+    this.data_provider.save_snippet(this.current_snippet).then((res) => {
+      this.EditModalVisible = false;
+      this.initGridTable();
+    });
+  }
+
+  onSelectedRows(rows: Array<GuiSelectedRow>): void {
+    this.rows = rows;
+    this.Selectedrows = rows.map((m: GuiSelectedRow) => m.source.id);
+  }
+
+  remove(item: any) {
+    console.dir(item);
+  }
+
+  logger(item: any) {
+    console.dir(item);
+  }
+
+  initGridTable(): void {
+    var _self = this;
+    _self.data_provider.get_snippets("", "", "", 0, 1000).then((res) => {
+      _self.source = res.map((x: any) => {
+        x.created = [
+          x.created.split("T")[0],
+          x.created.split("T")[1].split(".")[0],
+        ].join(" ");
+        return x;
+      });
+      _self.loading = false;
+    });
+  }
+
+
+  exportToCsv(jsonResponse:any) {
+	console.dir(jsonResponse);
+    const data = jsonResponse;
+    const columns = this.getColumns(data);
+    const csvData = this.convertToCsv(data, columns);
+    this.downloadFile(csvData, 'data.csv', 'text/csv');
+  }
+
+  getColumns(data: any[]): string[] {
+    const columns : any  = [];
+    data.forEach(row => {
+      Object.keys(row).forEach((col) => {
+        if (!columns.includes(col)) {
+          columns.push(col);
+        }
+      });
+    });
+    return columns;
+  }
+
+  convertToCsv(data: any[], columns: string[]): string {
+    let csv = '';
+    csv += columns.join(',') + '\n';
+    data.forEach(row => {
+      const values : any = [];
+      columns.forEach((col:any) => {
+        values.push(row[col]);
+      });
+      csv += values.join(',') + '\n';
+    });
+    return csv;
+  }
+
+  downloadFile(data: string, filename: string, type: string) {
+    const blob = new Blob([data], { type: type });
+	const nav = (window.navigator as any);
+
+    if (nav.msSaveOrOpenBlob) {
+		nav.msSaveBlob(blob, filename);
+    } else {
+      const link = document.createElement('a');
+      link.setAttribute('href', URL.createObjectURL(blob));
+      link.setAttribute('download', filename);
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  ngOnDestroy(): void {}
 }