mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2026-05-17 17:21:30 +00:00
MikroWizard Initial commit | MikroFront Welcome to the world :)
This commit is contained in:
sepehr
commit
b97aec6b97
203 changed files with 41097 additions and 0 deletions
21
src/app/views/snippets/snippets-routing.module.ts
Normal file
21
src/app/views/snippets/snippets-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { SnippetsComponent } from './snippets.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: SnippetsComponent,
|
||||
data: {
|
||||
title: $localize`Snippets`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class SnippetsRoutingModule {
|
||||
}
|
||||
130
src/app/views/snippets/snippets.component.html
Normal file
130
src/app/views/snippets/snippets.component.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<c-row>
|
||||
<c-col xs>
|
||||
<c-card class="mb-4">
|
||||
<c-card-header>
|
||||
<c-row>
|
||||
<c-col xs [lg]="3">
|
||||
Devices
|
||||
</c-col>
|
||||
<c-col xs [lg]="9">
|
||||
<h6 style="text-align: right;">
|
||||
<button cButton color="dark" class="mx-1" size="sm" (click)="Edit_Snippet('','showadd')"
|
||||
style="color: #fff;"><i class="fa-solid fa-plus"></i> </button>
|
||||
</h6>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</c-card-header>
|
||||
<c-card-body>
|
||||
<gui-grid [source]="source" [searching]="searching" [paging]="paging" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
|
||||
[rowSelection]="rowSelection" (selectedRows)="onSelectedRows($event)" [autoResizeWidth]=true>
|
||||
<gui-grid-column header="Name" field="name">
|
||||
<ng-template let-value="item.name" let-item="item" let-index="index">
|
||||
<img *ngIf="item.status=='updating'" width="20px" src="assets/img/loading.svg" />
|
||||
<i *ngIf="item.status=='updated'" style="color: green;margin: 5px;" class="fa-solid fa-check"></i>
|
||||
<i *ngIf="item.status=='failed'" style="color: red;margin: 5px;" class="fa-solid fa-x"></i>
|
||||
{{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">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</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">
|
||||
<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
|
||||
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
|
||||
class="fa-regular fa-trash-can mx-1"></i>Delete</button>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
</gui-grid>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
</c-row>
|
||||
|
||||
|
||||
|
||||
<c-modal #EditModal backdrop="static" [(visible)]="EditModalVisible" id="runEditModal">
|
||||
<c-modal-header>
|
||||
<h6 *ngIf="ModalAction=='add'" cModalTitle>Add New Snippet</h6>
|
||||
<h6 *ngIf="ModalAction=='edit'" cModalTitle>Editing snippet {{current_snippet.name}}</h6>
|
||||
<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']" />
|
||||
<label cLabel for="floatingInput">Name</label>
|
||||
</div>
|
||||
</c-input-group>
|
||||
<c-input-group class="mb-3">
|
||||
<div [cFormFloating]="true" class="mb-3">
|
||||
<input cFormControl id="floatingInput" placeholder="Snippet Description" [(ngModel)]="current_snippet['description']" />
|
||||
<label cLabel for="floatingInput">Description</label>
|
||||
</div>
|
||||
</c-input-group>
|
||||
<c-input-group class="mb-3">
|
||||
<div [cFormFloating]="true" class="mb-3">
|
||||
<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>
|
||||
</c-input-group>
|
||||
<br />
|
||||
</c-modal-body>
|
||||
<c-modal-footer>
|
||||
<button cButton color="danger" (click)="save_snippet()">save</button>
|
||||
<button cButton [cModalToggle]="EditModal.id" color="info">Close</button>
|
||||
</c-modal-footer>
|
||||
</c-modal>
|
||||
|
||||
|
||||
|
||||
<c-modal #DeleteConfirmModal backdrop="static" [(visible)]="DeleteConfirmModalVisible"
|
||||
id="DeleteConfirmModal">
|
||||
<c-modal-header>
|
||||
<h5 cModalTitle>Confirm delete {{ SelectedSnippet['name'] }}</h5>
|
||||
<button [cModalToggle]="DeleteConfirmModal.id" cButtonClose></button>
|
||||
</c-modal-header>
|
||||
<c-modal-body>
|
||||
Are you sure that You want to delete following Snippet ?
|
||||
<br/>
|
||||
<br/>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td><b>Snippet name : </b>{{ SelectedSnippet['name'] }}
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p ><code style="padding: 0!important;"><b>Warning:</b> ALL <b>Tasks</b> related to this snippet Will be <b>modifed or deleted</b> and stop working!</code></p>
|
||||
</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>
|
||||
|
||||
|
||||
214
src/app/views/snippets/snippets.component.ts
Normal file
214
src/app/views/snippets/snippets.component.ts
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
import { Component, 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 { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { GuiCellView,GuiSearching, GuiSelectedRow, GuiInfoPanel, GuiColumn, GuiColumnMenu, GuiDataType, GuiPaging, GuiPagingDisplay, GuiRowColoring, GuiRowSelectionMode, GuiRowSelection, GuiRowSelectionType } from '@generic-ui/ngx-grid';
|
||||
|
||||
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',
|
||||
})
|
||||
|
||||
export class SnippetsComponent implements OnInit, OnDestroy {
|
||||
public uid: number;
|
||||
public uname: string;
|
||||
|
||||
constructor(
|
||||
private data_provider: dataProvider,
|
||||
private router: Router,
|
||||
private login_checker: loginChecker,
|
||||
private renderer: Renderer2,
|
||||
private httpClient: HttpClient,
|
||||
@Inject(DOCUMENT) _document?: any,
|
||||
) {
|
||||
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;
|
||||
// console.dir("role",res.role);
|
||||
const userId = _self.uid;
|
||||
|
||||
if (res.role != "admin") {
|
||||
// console.dir(res.role);
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(['/user/dashboard']);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
//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={
|
||||
"content": "",
|
||||
"created": "",
|
||||
"description": "",
|
||||
"id": 0,
|
||||
"name": ""
|
||||
};
|
||||
|
||||
public default_snippet:any={
|
||||
"content": "",
|
||||
"created": "",
|
||||
"description": "",
|
||||
"id": 0,
|
||||
"name": ""
|
||||
};
|
||||
|
||||
public sorting = {
|
||||
enabled: true,
|
||||
multiSorting: true
|
||||
};
|
||||
|
||||
public ip_scanner:any;
|
||||
|
||||
searching: GuiSearching = {
|
||||
enabled: true,
|
||||
placeholder: 'Search Devices'
|
||||
};
|
||||
|
||||
public paging: GuiPaging = {
|
||||
enabled: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [5, 10, 25, 50],
|
||||
display: GuiPagingDisplay.ADVANCED
|
||||
};
|
||||
|
||||
public columnMenu: GuiColumnMenu = {
|
||||
enabled: true,
|
||||
sort: true,
|
||||
columnsManager: true
|
||||
};
|
||||
|
||||
public infoPanel: GuiInfoPanel = {
|
||||
enabled: true,
|
||||
infoDialog: false,
|
||||
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";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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 {
|
||||
}
|
||||
}
|
||||
34
src/app/views/snippets/snippets.module.ts
Normal file
34
src/app/views/snippets/snippets.module.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
|
||||
import {
|
||||
ButtonGroupModule,
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
FormModule,
|
||||
GridModule,
|
||||
ToastModule,
|
||||
ModalModule,
|
||||
} from "@coreui/angular";
|
||||
import { SnippetsRoutingModule } from "./snippets-routing.module";
|
||||
import { SnippetsComponent } from "./snippets.component";
|
||||
import { GuiGridModule } from "@generic-ui/ngx-grid";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SnippetsRoutingModule,
|
||||
CardModule,
|
||||
CommonModule,
|
||||
GridModule,
|
||||
FormModule,
|
||||
ButtonModule,
|
||||
ButtonGroupModule,
|
||||
GuiGridModule,
|
||||
ModalModule,
|
||||
ToastModule,
|
||||
FormsModule,
|
||||
],
|
||||
declarations: [SnippetsComponent],
|
||||
})
|
||||
export class SnippetsModule {}
|
||||
Loading…
Add table
Add a link
Reference in a new issue