MikroWizard Initial commit | MikroFront Welcome to the world :)

This commit is contained in:
sepehr 2024-07-07 14:48:52 +03:30
commit b97aec6b97
203 changed files with 41097 additions and 0 deletions

View file

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SettingsComponent } from './settings.component';
const routes: Routes = [
{
path: '',
component: SettingsComponent,
data: {
title: $localize`Settings`
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SettingsRoutingModule {
}

View file

@ -0,0 +1,227 @@
<c-row>
<c-col xs>
<c-card class="mb-4">
<c-card-header>Firmware Manager</c-card-header>
<c-card-body>
<c-input-group class="mb-3">
<h5>Firmware in repository:</h5>
<gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
[infoPanel]="infoPanel" [autoResizeWidth]=true [paging]="paging">
<gui-grid-column header="Version" field="version">
<ng-template let-value="item.version" let-item="item" let-index="index">
&nbsp; {{value}} </ng-template>
</gui-grid-column>
<gui-grid-column header="arch" field="architecture">
<ng-template let-value="item.architecture" let-item="item" let-index="index">
{{value}}
</ng-template>
</gui-grid-column>
<gui-grid-column header="sha256" field="sha256">
<ng-template let-value="item.sha256" let-item="item" let-index="index">
{{value}}
</ng-template>
</gui-grid-column>
</gui-grid>
</c-input-group>
<hr />
<table>
<td>
<span>Add new Permission</span>
</td>
<td *ngIf="loading">
<button cButton class="m-1" disabled>
<c-spinner aria-hidden="true" size="sm"></c-spinner>
Fetching Information from mikrotik website...
</button>
</td>
<td *ngIf="!loading">
<mat-form-field>
<mat-select cFormControl [(ngModel)]="firmtodownload" placeholder="Select Version For Download Group"
#singleSelect>
<mat-option>
<ngx-mat-select-search placeholderLabel="Search"
[hideClearSearchButton]="true"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let firm of firms" [value]="firm">
{{firm}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td>
<button *ngIf="!loading" cButton color="primary" (click)="ConfirmModalVisible=true">Download to
repository</button>
<!-- <button *ngIf="SelectedUser['action']=='add'" cButton color="primary" (click)="loading=!loading">++</button> -->
</td>
</table>
<hr />
<c-input-group class="mb-3">
<label cInputGroupText for="inputGroupSelect01">
V6 Firmware update Behavior
</label>
<select cSelect [(ngModel)]="updateBehavior" id="inputGroupSelect01">
<option>Choose...</option>
<option value="keep">Keep v6 and don't update to v7</option>
<option value="update">install latest</option>
</select>
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Choose how Mikrowizard should update old v6 firmwares</c-form-feedback>
</c-input-group>
<c-input-group class="mb-3">
<label cInputGroupText for="inputGroupSelect01">
Firmware version to install
</label>
<select cSelect [(ngModel)]="firmwaretoinstall" 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'" class="mb-3">
<label cInputGroupText for="inputGroupSelect01">
Firmware version v6 to install
</label>
<select cSelect [(ngModel)]="firmwaretoinstallv6" 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>
<button cButton color="primary" (click)="saveFirmwareSetting()">Save</button>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>System Settings</c-card-header>
<c-card-body *ngIf="!SysConfigloading">
<c-input-group class="mt-3">
<span cInputGroupText>Rad Secret</span>
<input cFormControl id="floatingInput" placeholder="rad_secret"
[(ngModel)]="sysconfigs['rad_secret']['value']" />
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Radius Secret of Mikrowizard Radius Server</c-form-feedback>
</c-input-group>
<c-input-group class="mt-3">
<span cInputGroupText>System URL</span>
<input cFormControl id="floatingInput" placeholder="System URL"
[(ngModel)]="sysconfigs['system_url']['value']" />
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Default system access URl</c-form-feedback>
</c-input-group>
<c-input-group class="mt-3">
<span cInputGroupText>Default IP</span>
<input cFormControl id="floatingInput" placeholder="System URL"
[(ngModel)]="sysconfigs['default_ip']['value']" />
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Default Mikrowizard Access IP</c-form-feedback>
</c-input-group>
<c-input-group class="mt-3">
<span cInputGroupText>System Time Zone</span>
<mat-form-field class="form-control" subscriptSizing="dynamic">
<mat-label>Select event type</mat-label>
<mat-select cFormControl [(ngModel)]="sysconfigs['timezone']['value']"
placeholder="Select Version For Download Group" #singleSelect>
<mat-option>
<ngx-mat-select-search placeholderLabel="Search" [hideClearSearchButton]="true"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let tz of timezones" [value]="tz.utc[0]">
{{tz.text}}
</mat-option>
</mat-select>
</mat-form-field>
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Default TimeZone for the system</c-form-feedback>
</c-input-group>
<c-input-group class="mt-3">
<span cInputGroupText>Default User</span>
<input aria-label="Username" type="password" [(ngModel)]="sysconfigs['default_user']['value']" cFormControl />
<span cInputGroupText>Default password</span>
<input aria-label="Password" type="password" [(ngModel)]="sysconfigs['default_password']['value']"
cFormControl />
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Default username and Password for searching new devices</c-form-feedback>
</c-input-group>
<c-input-group class="mt-3 mb-3">
<span cInputGroupText>License Username</span>
<input aria-label="Username" type="text" [(ngModel)]="sysconfigs['username']['value']" cFormControl />
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* The username that you registred in Mikrowizard.com,Required for License Activation</c-form-feedback>
</c-input-group>
<c-form-check [switch]="true" sizing="xl">
<input cFormCheckInput [(ngModel)]="sysconfigs['force_perms']['value']" type="checkbox" />
<label cFormCheckLabel>Force Perms</label>
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Force User Groups under user>groups configuration of each router to match Mikrowizard Permissions and
monitor for any change to prevent/fix the configuration.</c-form-feedback>
</c-form-check>
<c-form-check [switch]="true" sizing="xl">
<input cFormCheckInput [(ngModel)]="sysconfigs['force_radius']['value']" type="checkbox" />
<label cFormCheckLabel>Force Radius</label>
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Force Radius config under radius>client and user>aaa setting of each router that added to Mikrowizard and
monitor for any change to prevent/fix the configuration.</c-form-feedback>
</c-form-check>
<c-form-check [switch]="true" sizing="xl">
<input cFormCheckInput [(ngModel)]="sysconfigs['force_syslog']['value']" type="checkbox" />
<label cFormCheckLabel>Force Syslog</label>
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Force Syslog config under system>logs setting of each router that added to Mikrowizard and monitor syslog
setting for any change to prevent/fix the configuration.</c-form-feedback>
</c-form-check>
<c-form-check [switch]="true" sizing="xl">
<input cFormCheckInput [(ngModel)]="sysconfigs['safe_install']['value']" type="checkbox" />
<label cFormCheckLabel>Safe Update</label>
<c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
* Download and install reqired firmware before installing the target firmware . for example it will install
latest 7.12 then upgrade to newer version >7.13</c-form-feedback>
</c-form-check>
<button cButton color="primary" (click)="saveSysSetting()">Save</button>
</c-card-body>
</c-card>
</c-col>
</c-row>
<c-modal #ConfirmModal backdrop="static" [(visible)]="ConfirmModalVisible" id="runConfirmModal">
<c-modal-header>
<h6 cModalTitle>Downloading RouterOS ver {{firmtodownload}} </h6>
<button [cModalToggle]="ConfirmModal.id" cButtonClose></button>
</c-modal-header>
<c-modal-body>
Are you sure that You want to download RouterOS version {{firmtodownload}} to the Repository?
<br />
</c-modal-body>
<c-modal-footer>
<button *ngIf="loading" cButton cButton color="danger" class="m-1" disabled>
<c-spinner aria-hidden="true" size="sm"></c-spinner>
Downloading...
</button>
<button *ngIf="!loading" (click)="start_download()" cButton color="danger">
Yes,Download!
</button>
<button [cModalToggle]="ConfirmModal.id" cButton color="info">
No!,Close
</button>
</c-modal-footer>
</c-modal>
<c-toaster position="fixed" placement="top-end"></c-toaster>

View file

@ -0,0 +1,10 @@
:host {
.legend {
small {
font-size: x-small;
}
}
}
.mdc-line-ripple.mdc-line-ripple--deactivating.ng-star-inserted {
display: none!important;
}

View file

@ -0,0 +1,259 @@
import {
Component,
OnInit,
QueryList,
ViewChildren,
ViewEncapsulation,
} from "@angular/core";
import { dataProvider } from "../../providers/mikrowizard/data";
import { Router } from "@angular/router";
import { loginChecker } from "../../providers/login_checker";
import {
GuiSelectedRow,
GuiInfoPanel,
GuiColumn,
GuiColumnMenu,
GuiPaging,
GuiPagingDisplay,
GuiRowSelectionMode,
GuiRowSelection,
GuiRowSelectionType,
} from "@generic-ui/ngx-grid";
import { ToasterComponent } from "@coreui/angular";
import { AppToastComponent } from "../toast-simple/toast.component";
import { TimeZones } from "./timezones-data";
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: "settings.component.html",
styleUrls: ["settings.component.scss"],
encapsulation: ViewEncapsulation.None,
})
export class SettingsComponent implements OnInit {
public uid: number;
public uname: string;
public filterText: string;
public filters: any = {};
public firms: any = {};
public firmtodownload: any = {};
constructor(
private data_provider: dataProvider,
private router: Router,
private TimeZones: TimeZones,
private login_checker: loginChecker
) {
var _self = this;
if (!this.login_checker.isLoggedIn()) {
setTimeout(function() {
_self.router.navigate(['login']);
}, 100);
}
this.data_provider.getSessionInfo().then((res) => {
_self.uid = res.uid;
_self.uname = res.name;
const userId = _self.uid;
if (res.role != "admin") {
setTimeout(function () {
_self.router.navigate(["/user/dashboard"]);
}, 100);
}
});
//get datagrid data
function isNotEmpty(value: any): boolean {
return value !== undefined && value !== null && value !== "";
}
}
@ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
public source: Array<any> = [];
public columns: Array<GuiColumn> = [];
public loading: boolean = true;
public SysConfigloading: boolean = true;
public ConfirmModalVisible: boolean = false;
public rows: any = [];
public Selectedrows: any;
public updateBehavior: string = "keep";
public firmwaretoinstall: string = "none";
public firmwaretoinstallv6: string = "none";
public available_firmwares: any = [];
public available_firmwaresv6: any = [];
public sysconfigs: any = [];
toasterForm = {
autohide: true,
delay: 3000,
position: "fixed",
fade: true,
closeButton: true,
};
public sorting = {
enabled: true,
multiSorting: true,
};
public paging: GuiPaging = {
enabled: true,
page: 1,
pageSize: 5,
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,
};
public timezones = this.TimeZones.timezones;
ngOnInit(): void {
this.initAvailbleFirms();
this.initFirmsTable();
this.initsettings();
}
start_download() {
var _self = this;
this.loading = true;
this.data_provider
.download_firmware_to_repository(this.firmtodownload)
.then((res) => {
if (res.status == true) {
// show toast that we are already downloading
_self.show_toast(
"Firmware Download",
"Firmware download in progress",
"warning"
);
} else {
// show toast that download started
_self.show_toast(
"Firmware Download",
"Firmware download started",
"success"
);
}
_self.ConfirmModalVisible = !_self.ConfirmModalVisible;
_self.loading = false;
});
}
onSelectedRows(rows: Array<GuiSelectedRow>): void {
this.rows = rows;
this.Selectedrows = rows.map((m: GuiSelectedRow) => m.source.id);
}
show_toast(title: string, body: string, color: string) {
const { ...props } = { ...this.toasterForm, color, title, body };
const componentRef = this.viewChildren.first.addToast(
AppToastComponent,
props,
{}
);
componentRef.instance["closeButton"] = props.closeButton;
}
saveFirmwareSetting() {
var _self = this;
this.data_provider
.save_firmware_setting(
this.updateBehavior,
this.firmwaretoinstall,
this.firmwaretoinstallv6
)
.then((res) => {
_self.initFirmsTable();
});
}
saveSysSetting() {
var _self = this;
this.data_provider.save_sys_setting(this.sysconfigs).then((res) => {
_self.initsettings();
});
}
initFirmsTable(): void {
var _self = this;
this.data_provider.get_firms(0, 10000, false).then((res) => {
let index = 1;
_self.source = res.firms;
_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.firmwaretoinstall = res.firmwaretoinstall;
_self.firmwaretoinstallv6 = res.firmwaretoinstallv6;
});
}
initsettings(): void {
var _self = this;
this.data_provider.get_settings().then((res) => {
_self.sysconfigs = res.sysconfigs;
_self.sysconfigs["default_user"]["value"] = "";
_self.sysconfigs["default_password"]["value"] = "";
_self.timezones = _self.TimeZones.timezones;
_self.sysconfigs["force_syslog"]["value"] = /true/i.test(
_self.sysconfigs["force_syslog"]["value"]
);
_self.sysconfigs["force_radius"]["value"] = /true/i.test(
_self.sysconfigs["force_radius"]["value"]
);
_self.sysconfigs["force_perms"]["value"] = /true/i.test(
_self.sysconfigs["force_perms"]["value"]
);
_self.sysconfigs["safe_install"]["value"] = /true/i.test(
_self.sysconfigs["safe_install"]["value"]
);
_self.SysConfigloading = false;
});
}
initAvailbleFirms(): void {
var _self = this;
this.data_provider.get_downloadable_firms().then((res) => {
let index = 1;
_self.firms = res.versions;
_self.loading = false;
});
}
}

View file

@ -0,0 +1,41 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
ButtonGroupModule,
ButtonModule,
CardModule,
FormModule,
GridModule,
SpinnerModule,
ToastModule,
ModalModule,
} from "@coreui/angular";
import { SettingsRoutingModule } from "./settings-routing.module";
import { SettingsComponent } from "./settings.component";
import { GuiGridModule } from "@generic-ui/ngx-grid";
import { FormsModule } from "@angular/forms";
import { MatSelectModule } from "@angular/material/select";
import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
@NgModule({
imports: [
SettingsRoutingModule,
CardModule,
CommonModule,
GridModule,
FormsModule,
FormModule,
ButtonModule,
ButtonGroupModule,
GuiGridModule,
MatSelectModule,
NgxMatSelectSearchModule,
SpinnerModule,
ToastModule,
ModalModule,
],
declarations: [SettingsComponent],
})
export class SettingsModule {}

File diff suppressed because it is too large Load diff