feat: proxy download image
This commit is contained in:
loveuer
16
front/.editorconfig
Normal file
16
front/.editorconfig
Normal file
@ -0,0 +1,16 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
42
front/.gitignore
vendored
Normal file
42
front/.gitignore
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
27
front/README.md
Normal file
27
front/README.md
Normal file
@ -0,0 +1,27 @@
|
||||
# Front
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.4.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
110
front/angular.json
Normal file
110
front/angular.json
Normal file
@ -0,0 +1,110 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"packageManager": "pnpm",
|
||||
"analytics": false
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"front": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/front",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"proxyConfig": "src/proxy.conf.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "front:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "front:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "front:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
41
front/package.json
Normal file
41
front/package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "front",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.3.0",
|
||||
"@angular/cdk": "17.3.4",
|
||||
"@angular/common": "^17.3.0",
|
||||
"@angular/compiler": "^17.3.0",
|
||||
"@angular/core": "^17.3.0",
|
||||
"@angular/forms": "^17.3.0",
|
||||
"@angular/material": "17.3.4",
|
||||
"@angular/material-experimental": "17.3.4",
|
||||
"@angular/platform-browser": "^17.3.0",
|
||||
"@angular/platform-browser-dynamic": "^17.3.0",
|
||||
"@angular/router": "^17.3.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.3.4",
|
||||
"@angular/cli": "^17.3.4",
|
||||
"@angular/compiler-cli": "^17.3.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.1.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.4.2"
|
||||
}
|
||||
}
|
||||
8107
front/pnpm-lock.yaml
generated
Normal file
8107
front/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
97
front/src/app/app.component.html
Normal file
97
front/src/app/app.component.html
Normal file
@ -0,0 +1,97 @@
|
||||
<div>
|
||||
<mat-toolbar color="primary">
|
||||
<button mat-icon-button class="favorite-icon" aria-label="icon-button with heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<span>NF Repo</span>
|
||||
|
||||
<div style="margin-left:auto;">
|
||||
<button mat-icon-button matTooltip="帮我下载镜像" (click)="downloadImage()">
|
||||
<mat-icon>cloud_download</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<mat-form-field class="search-field" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>搜索镜像</mat-label>
|
||||
<input matInput type="text" [formControl]="keyword" (change)="search()">
|
||||
<button matSuffix mat-icon-button matTooltip="搜索" (click)="search()">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
|
||||
<table mat-table [dataSource]="repo_svc.catalog().list" multiTemplateDataRows>
|
||||
|
||||
<ng-container matColumnDef="expand">
|
||||
<th mat-header-cell *matHeaderCellDef aria-label="row actions"> </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-icon-button aria-label="expand row" (click)="showTags($event, element)">
|
||||
@if (expandedElement === element) {
|
||||
<mat-icon>keyboard_arrow_up</mat-icon>
|
||||
} @else {
|
||||
<mat-icon>keyboard_arrow_down</mat-icon>
|
||||
}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let element"> {{ element.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="updated_at">
|
||||
<th mat-header-cell *matHeaderCellDef>更新时间</th>
|
||||
<td mat-cell *matCellDef="let element"> {{ element.updated_at | date:'yy-MM-dd HH:mm:ss' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="repo">
|
||||
<th mat-header-cell *matHeaderCellDef>镜像</th>
|
||||
<td mat-cell *matCellDef="let element"> {{ element.repo }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="tag">
|
||||
<th mat-header-cell *matHeaderCellDef>标签</th>
|
||||
<td mat-cell *matCellDef="let element"> {{ element.tag }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="size">
|
||||
<th mat-header-cell *matHeaderCellDef>占用</th>
|
||||
<td mat-cell *matCellDef="let element"> {{ element.size | capacity }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="operation">
|
||||
<th mat-header-cell *matHeaderCellDef>操作</th>
|
||||
<td mat-cell *matCellDef="let element" style="padding-left: 4px !important;">
|
||||
<button mat-icon-button matTooltip="复制镜像地址" (click)="copyImageCommand(element)">
|
||||
<mat-icon>file_copy</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="expandedDetail">
|
||||
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
|
||||
<div class="repo-element-detail"
|
||||
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
|
||||
@if (element.Tags) {
|
||||
@for (tag of element.Tags.list; track tag) {
|
||||
<mat-chip-option color="primary">{{ tag.tag }}</mat-chip-option>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
|
||||
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
|
||||
class="repo-element-row"
|
||||
[class.repo-expanded-row]="expandedElement === element"
|
||||
(click)="expandedElement = expandedElement === element ? null : element">
|
||||
</tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="repo-detail-row"></tr>
|
||||
</table>
|
||||
</div>
|
||||
36
front/src/app/app.component.scss
Normal file
36
front/src/app/app.component.scss
Normal file
@ -0,0 +1,36 @@
|
||||
mat-form-field.search-field {
|
||||
margin-top: 1rem;
|
||||
margin-left: 1rem;
|
||||
min-width: 40rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr.repo-detail-row {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
tr.repo-element-row:not(.repo-expanded-row):hover {
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
tr.repo-element-row:not(.repo-expanded-row):active {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.repo-element-row td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.repo-element-detail {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
mat-chip-option {
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
29
front/src/app/app.component.spec.ts
Normal file
29
front/src/app/app.component.spec.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have the 'front' title`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('front');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, front');
|
||||
});
|
||||
});
|
||||
100
front/src/app/app.component.ts
Normal file
100
front/src/app/app.component.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {Repo} from "./interface/repo";
|
||||
import {RepoService} from "./service/repo.service";
|
||||
import {FormControl, ReactiveFormsModule} from "@angular/forms";
|
||||
import {MatToolbar} from "@angular/material/toolbar";
|
||||
import {MatIconButton} from "@angular/material/button";
|
||||
import {MatFormField, MatLabel, MatSuffix} from "@angular/material/form-field";
|
||||
import {MatTooltip} from "@angular/material/tooltip";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatInput} from "@angular/material/input";
|
||||
import {Clipboard} from '@angular/cdk/clipboard';
|
||||
import {
|
||||
MatCell,
|
||||
MatCellDef,
|
||||
MatColumnDef,
|
||||
MatHeaderCell,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
|
||||
MatTable
|
||||
} from "@angular/material/table";
|
||||
import {DatePipe} from "@angular/common";
|
||||
import {animate, state, style, transition, trigger} from "@angular/animations";
|
||||
import {MatChipOption} from "@angular/material/chips";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {DownloadImageComponent} from "./component/download-image/download-image.component";
|
||||
import {CapacityPipe} from "./pipe/capacity.pipe";
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatToolbar,
|
||||
MatIconButton,
|
||||
MatSuffix,
|
||||
MatTooltip,
|
||||
MatIcon,
|
||||
MatFormField,
|
||||
MatInput,
|
||||
ReactiveFormsModule,
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCell,
|
||||
MatHeaderCellDef,
|
||||
MatCell,
|
||||
MatCellDef,
|
||||
MatHeaderRow,
|
||||
MatRow,
|
||||
MatHeaderRowDef,
|
||||
MatRowDef,
|
||||
MatLabel,
|
||||
DatePipe,
|
||||
MatChipOption,
|
||||
CapacityPipe,
|
||||
],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss',
|
||||
animations: [
|
||||
trigger('detailExpand', [
|
||||
state('collapsed', style({height: '0px', minHeight: '0'})),
|
||||
state('expanded', style({height: '*'})),
|
||||
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'front';
|
||||
columnsToDisplay: string[] = ['id', 'updated_at', "repo", "tag", 'size', 'operation'];
|
||||
columnsToDisplayWithExpand = ['expand', ...this.columnsToDisplay];
|
||||
expandedElement: Repo | null = null;
|
||||
keyword = new FormControl('');
|
||||
|
||||
constructor(
|
||||
public repo_svc: RepoService,
|
||||
private clipboard: Clipboard,
|
||||
public dialog: MatDialog,
|
||||
) {
|
||||
this.downloadImage()
|
||||
}
|
||||
|
||||
search(limit: number = 20, last: number = 0) {
|
||||
this.repo_svc.GetCatalog(limit, last, this.keyword.value ?? '')
|
||||
}
|
||||
|
||||
showTags(event: Event, element: Repo) {
|
||||
if (!(this.expandedElement === element)) {
|
||||
this.repo_svc.GetTags(element.repo)
|
||||
}
|
||||
|
||||
this.expandedElement = this.expandedElement === element ? null : element;
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
copyImageCommand(item: Repo) {
|
||||
this.clipboard.copy(`docker pull ${this.repo_svc.settings().base_address}/${item.repo}:${item.tag}`)
|
||||
}
|
||||
|
||||
downloadImage() {
|
||||
this.dialog.open(DownloadImageComponent, {data: {}})
|
||||
}
|
||||
}
|
||||
19
front/src/app/app.config.ts
Normal file
19
front/src/app/app.config.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import {ApplicationConfig} from '@angular/core';
|
||||
import {provideRouter} from '@angular/router';
|
||||
|
||||
import {routes} from './app.routes';
|
||||
import {alerterInterceptor} from "./interceptor/alerter.interceptor";
|
||||
import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
|
||||
import {provideAnimations} from "@angular/platform-browser/animations";
|
||||
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideRouter(routes),
|
||||
provideHttpClient(withInterceptorsFromDi()), {
|
||||
provide: HTTP_INTERCEPTORS, useClass: alerterInterceptor, multi: true
|
||||
},
|
||||
provideAnimations(),
|
||||
]
|
||||
};
|
||||
|
||||
3
front/src/app/app.routes.ts
Normal file
3
front/src/app/app.routes.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
||||
@ -0,0 +1,36 @@
|
||||
<h2 mat-dialog-title>{{ title }}</h2>
|
||||
<div class="content">
|
||||
<div [class]="inProgress? 'download-overlay in-progress':'download-overlay'">
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
<div [class]="inProgress? 'forms in-progress':'forms'">
|
||||
<mat-dialog-content class="mat-typography">
|
||||
<p>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>云上镜像名称</mat-label>
|
||||
<input matInput placeholder="golang:1.22.2-alpine3.19" [(ngModel)]="source">
|
||||
<mat-icon matSuffix>clear</mat-icon>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
<p>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label style="margin-left: 1.5rem">本地镜像名称</mat-label>
|
||||
<span matTextPrefix>{{ repo_svc.settings().base_address + '/ ' }}</span>
|
||||
<input matInput placeholder="external/golang:latest" [(ngModel)]="target">
|
||||
<mat-icon matSuffix>clear</mat-icon>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
<p>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>代理</mat-label>
|
||||
<input matInput placeholder="socks5://127.0.0.1:7890" [(ngModel)]="proxy">
|
||||
<mat-icon matSuffix>clear</mat-icon>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close>取消</button>
|
||||
<button mat-button cdkFocusInitial color="primary" (click)="proxyDownload()">下载</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,38 @@
|
||||
mat-dialog-content {
|
||||
min-width: 40rem;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div.content {
|
||||
position: relative;
|
||||
|
||||
div.download-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -2rem;
|
||||
z-index: 1000;
|
||||
|
||||
&.in-progress {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
div.forms {
|
||||
opacity: 1;
|
||||
|
||||
&.in-progress {
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DownloadImageComponent } from './download-image.component';
|
||||
|
||||
describe('DownloadImageComponent', () => {
|
||||
let component: DownloadImageComponent;
|
||||
let fixture: ComponentFixture<DownloadImageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [DownloadImageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DownloadImageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,106 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatDialogContent,
|
||||
MatDialogRef,
|
||||
MatDialogTitle
|
||||
} from "@angular/material/dialog";
|
||||
import {MatButton} from "@angular/material/button";
|
||||
import {MatFormField, MatLabel, MatPrefix, MatSuffix} from "@angular/material/form-field";
|
||||
import {MatInput} from "@angular/material/input";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {RepoService} from "../../service/repo.service";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {CdkConnectedOverlay, CdkOverlayOrigin} from "@angular/cdk/overlay";
|
||||
import {MatProgressSpinner} from "@angular/material/progress-spinner";
|
||||
import {MsgService} from "../../service/msg.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-download-image',
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatButton,
|
||||
MatLabel,
|
||||
MatInput,
|
||||
MatSuffix,
|
||||
MatIcon,
|
||||
MatFormField,
|
||||
MatPrefix,
|
||||
FormsModule,
|
||||
CdkConnectedOverlay,
|
||||
MatProgressSpinner,
|
||||
CdkOverlayOrigin
|
||||
],
|
||||
templateUrl: './download-image.component.html',
|
||||
styleUrl: './download-image.component.scss'
|
||||
})
|
||||
export class DownloadImageComponent {
|
||||
|
||||
target = ''
|
||||
source = ''
|
||||
proxy = ''
|
||||
title = '下载云上镜像'
|
||||
inProgress = false
|
||||
|
||||
readonly url_proxy_download = '/api/repo/proxy'
|
||||
|
||||
constructor(
|
||||
public repo_svc: RepoService,
|
||||
private dialogRef: MatDialogRef<DownloadImageComponent>,
|
||||
private msg_svc: MsgService,
|
||||
) {
|
||||
let evt = new EventSource(this.url_proxy_download)
|
||||
evt.onmessage = (ev: MessageEvent) => {
|
||||
console.log('[D] event source on message =', ev)
|
||||
}
|
||||
evt.onerror = (ev: Event) => {
|
||||
console.log('[D] event source on error=', ev)
|
||||
}
|
||||
}
|
||||
|
||||
async proxyDownload() {
|
||||
const response = await fetch(this.url_proxy_download, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({target: this.target, source: this.source, proxy: this.proxy}),
|
||||
headers: {"Content-Type": "application/json"},
|
||||
})
|
||||
const reader = response.body?.pipeThrough(new TextDecoderStream()).getReader()
|
||||
if (reader) {
|
||||
this.inProgress = true
|
||||
while (true) {
|
||||
const {value, done} = await reader.read()
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (value) {
|
||||
const msgs = value.split('\n')
|
||||
if (msgs.length > 2) {
|
||||
const sse_type = msgs[0].slice(6)
|
||||
const sse_data = msgs[1].slice(5)
|
||||
const sse_json = JSON.parse(sse_data)
|
||||
if (sse_json['msg']) {
|
||||
this.title = sse_json['msg']
|
||||
}
|
||||
|
||||
if (sse_json['action'] && sse_json['action'] === 'done') {
|
||||
this.repo_svc.GetCatalog(this.repo_svc.catalog().limit, this.repo_svc.catalog().last, this.repo_svc.catalog().keyword)
|
||||
this.msg_svc.success('获取镜像成功')
|
||||
this.dialogRef.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.inProgress = false
|
||||
}
|
||||
|
||||
}
|
||||
52
front/src/app/interceptor/alerter.interceptor.ts
Normal file
52
front/src/app/interceptor/alerter.interceptor.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import {
|
||||
HttpEvent,
|
||||
HttpHandler,
|
||||
HttpInterceptor,
|
||||
HttpRequest,
|
||||
HttpResponse
|
||||
} from '@angular/common/http';
|
||||
import {map, Observable} from "rxjs";
|
||||
import {Response} from "../interface/response";
|
||||
import {MsgService} from "../service/msg.service";
|
||||
import {Router} from "@angular/router";
|
||||
import {Injectable} from "@angular/core";
|
||||
|
||||
// import {MsgService} from "../service/msg.service";
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class alerterInterceptor implements HttpInterceptor {
|
||||
constructor(
|
||||
private msg_srv: MsgService,
|
||||
private router: Router,
|
||||
) {
|
||||
}
|
||||
|
||||
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
|
||||
// const nr = req.clone().headers.set("Authorization", localStorage.getItem("ult-token"))
|
||||
req = req.clone({headers: req.headers.append("Authorization", localStorage.getItem("ult-token") ?? "")})
|
||||
return next.handle(req).pipe(
|
||||
map((event) => {
|
||||
if (event instanceof HttpResponse) {
|
||||
try {
|
||||
const rs = (event.body) as Response<any>
|
||||
console.log(`[D] ${req.method} - ${req.url} =>`, rs)
|
||||
if (rs.status > 200) {
|
||||
this.msg_srv.error(rs.msg)
|
||||
}
|
||||
|
||||
if (rs.status === 401) {
|
||||
this.router.navigate(['login'])
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[E] http err=',e)
|
||||
this.msg_srv.error('无法连接服务器')
|
||||
}
|
||||
}
|
||||
return event
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
21
front/src/app/interface/repo.ts
Normal file
21
front/src/app/interface/repo.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export interface Repo {
|
||||
id: number
|
||||
created_at: number
|
||||
updated_at: number
|
||||
digest_id: number
|
||||
digest: string
|
||||
size: number
|
||||
repo: string
|
||||
tag: string
|
||||
Tags: {
|
||||
list: Repo[]
|
||||
total: number
|
||||
limit: number
|
||||
last: number
|
||||
keyword: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
base_address: string
|
||||
}
|
||||
5
front/src/app/interface/response.ts
Normal file
5
front/src/app/interface/response.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface Response<T> {
|
||||
status: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
8
front/src/app/pipe/capacity.pipe.spec.ts
Normal file
8
front/src/app/pipe/capacity.pipe.spec.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { CapacityPipe } from './capacity.pipe';
|
||||
|
||||
describe('CapacityPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new CapacityPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
20
front/src/app/pipe/capacity.pipe.ts
Normal file
20
front/src/app/pipe/capacity.pipe.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'capacity',
|
||||
standalone: true
|
||||
})
|
||||
export class CapacityPipe implements PipeTransform {
|
||||
|
||||
transform(value: number, ...args: unknown[]): string {
|
||||
if (value === 0) {
|
||||
return '0 Bytes';
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const i = Math.floor(Math.log(value) / Math.log(k));
|
||||
|
||||
return parseFloat((value / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
}
|
||||
214
front/src/app/service/msg.service.ts
Normal file
214
front/src/app/service/msg.service.ts
Normal file
@ -0,0 +1,214 @@
|
||||
import { Injectable, Inject } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
|
||||
import {
|
||||
MatSnackBar,
|
||||
MatSnackBarHorizontalPosition,
|
||||
MatSnackBarVerticalPosition,
|
||||
} from '@angular/material/snack-bar';
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
|
||||
interface SnackMessage {
|
||||
type: "success" | "error" | "warning" | "info"
|
||||
duration: number
|
||||
data: string
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MsgService {
|
||||
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
|
||||
verticalPosition: MatSnackBarVerticalPosition = 'top';
|
||||
|
||||
constructor(
|
||||
private _snackBar: MatSnackBar
|
||||
) { }
|
||||
|
||||
|
||||
success(data: string) {
|
||||
this.open({ type: "success", duration: 1500, data: data })
|
||||
}
|
||||
|
||||
info(data: string) {
|
||||
this.open({ type: "info", duration: 2000, data: data })
|
||||
}
|
||||
|
||||
warning(data: string) {
|
||||
this.open({ type: "warning", duration: 3000, data: data })
|
||||
}
|
||||
|
||||
error(data: string) {
|
||||
this.open({ type: "error", duration: 3500, data: data })
|
||||
}
|
||||
|
||||
open(msg: SnackMessage) {
|
||||
switch (msg.type) {
|
||||
case "success":
|
||||
this._snackBar.openFromComponent(SnackMessageSuccess, {
|
||||
data: msg.data,
|
||||
duration: msg.duration,
|
||||
horizontalPosition: this.horizontalPosition,
|
||||
verticalPosition: this.verticalPosition,
|
||||
panelClass: ['success-snackbar'],
|
||||
})
|
||||
break;
|
||||
case "info":
|
||||
this._snackBar.openFromComponent(SnackMessageInfo, {
|
||||
data: msg.data,
|
||||
duration: msg.duration,
|
||||
horizontalPosition: this.horizontalPosition,
|
||||
verticalPosition: this.verticalPosition,
|
||||
panelClass: ['info-snackbar'],
|
||||
})
|
||||
break
|
||||
case "warning":
|
||||
this._snackBar.openFromComponent(SnackMessageWarning, {
|
||||
data: msg.data,
|
||||
duration: msg.duration,
|
||||
horizontalPosition: this.horizontalPosition,
|
||||
verticalPosition: this.verticalPosition,
|
||||
panelClass: ['warning-snackbar'],
|
||||
})
|
||||
break
|
||||
case "error":
|
||||
this._snackBar.openFromComponent(SnackMessageError, {
|
||||
data: msg.data,
|
||||
duration: msg.duration,
|
||||
horizontalPosition: this.horizontalPosition,
|
||||
verticalPosition: this.verticalPosition,
|
||||
panelClass: ['error-snackbar'],
|
||||
})
|
||||
break
|
||||
default:
|
||||
this._snackBar.openFromComponent(SnackMessageInfo, {
|
||||
data: msg.data,
|
||||
duration: msg.duration,
|
||||
horizontalPosition: this.horizontalPosition,
|
||||
verticalPosition: this.verticalPosition,
|
||||
panelClass: ['info-snackbar'],
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'snack-message-success',
|
||||
template: `
|
||||
<div class="snack-message-success snack-message">
|
||||
<div>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</div>
|
||||
<div class="snack-message-content">
|
||||
{{ data }}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatIconModule
|
||||
],
|
||||
styles: [`
|
||||
.snack-message-success {
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class SnackMessageSuccess {
|
||||
constructor(
|
||||
@Inject(MAT_SNACK_BAR_DATA) public data: string,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
|
||||
) { }
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'snack-message-info',
|
||||
template: `
|
||||
<div class="snack-message-info snack-message">
|
||||
<div>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</div>
|
||||
<div class="snack-message-content">
|
||||
{{ data }}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatIconModule
|
||||
],
|
||||
styles: [`
|
||||
.snack-message-info {
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class SnackMessageInfo {
|
||||
constructor(
|
||||
@Inject(MAT_SNACK_BAR_DATA) public data: string,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
|
||||
) { }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'snack-message-warning',
|
||||
template: `
|
||||
<div class="snack-message-warning snack-message">
|
||||
<div>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</div>
|
||||
<div class="snack-message-content">
|
||||
{{ data }}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatIconModule
|
||||
],
|
||||
styles: [`
|
||||
.snack-message-warning {
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class SnackMessageWarning {
|
||||
constructor(
|
||||
@Inject(MAT_SNACK_BAR_DATA) public data: string,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
|
||||
) { }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'snack-message-error',
|
||||
template: `
|
||||
<div class="snack-message-error snack-message">
|
||||
<div>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</div>
|
||||
<div class="snack-message-content">
|
||||
{{ data }}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatIconModule
|
||||
],
|
||||
styles: [`
|
||||
`]
|
||||
})
|
||||
export class SnackMessageError {
|
||||
constructor(
|
||||
@Inject(MAT_SNACK_BAR_DATA) public data: string,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
|
||||
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
|
||||
) { }
|
||||
}
|
||||
16
front/src/app/service/repo.service.spec.ts
Normal file
16
front/src/app/service/repo.service.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RepoService } from './repo.service';
|
||||
|
||||
describe('RepoService', () => {
|
||||
let service: RepoService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(RepoService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
101
front/src/app/service/repo.service.ts
Normal file
101
front/src/app/service/repo.service.ts
Normal file
@ -0,0 +1,101 @@
|
||||
import {Injectable, signal, WritableSignal} from '@angular/core';
|
||||
import {Repo, Settings} from '../interface/repo'
|
||||
import {Response} from "../interface/response";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {MsgService} from "./msg.service";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class RepoService {
|
||||
|
||||
readonly init_catalog = [
|
||||
{id: 1, created_at: 1713164091576, updated_at: 1713164091576, digest_id: 1, repo: "external/golang", tag: "latest"},
|
||||
{id: 2, created_at: 1713164091576, updated_at: 1713164091576, digest_id: 2, repo: "external/alpine", tag: "latest"},
|
||||
{id: 3, created_at: 1713164091576, updated_at: 1713164091576, digest_id: 3, repo: "external/nginx", tag: "latest"},
|
||||
] as Repo[]
|
||||
|
||||
readonly url_settings = '/api/repo/settings'
|
||||
readonly url_catalog = '/api/repo/list'
|
||||
readonly url_tag = '/api/repo/tag/list'
|
||||
|
||||
settings = signal({} as Settings)
|
||||
|
||||
catalog = signal({
|
||||
total: 0,
|
||||
limit: 0,
|
||||
last: 0,
|
||||
keyword: '',
|
||||
list: [] as Repo[],
|
||||
})
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private msg_svc: MsgService,
|
||||
) {
|
||||
this.GetSettings()
|
||||
this.GetCatalog()
|
||||
}
|
||||
|
||||
GetSettings() {
|
||||
this.http.get<Response<Settings>>(this.url_settings).subscribe(res => {
|
||||
if (res.status === 200) {
|
||||
this.settings.update(v => res.data)
|
||||
return
|
||||
}
|
||||
|
||||
this.msg_svc.error(res.msg)
|
||||
})
|
||||
}
|
||||
|
||||
GetCatalog(limit: number = 20, last: number = 0, keyword: string = '') {
|
||||
this.http.get<Response<{ total: number, list: Repo[] }>>(this.url_catalog, {
|
||||
params: {
|
||||
n: limit,
|
||||
last: last,
|
||||
keyword: keyword
|
||||
}
|
||||
}).subscribe(res => {
|
||||
if (res.status === 200) {
|
||||
this.catalog.update(v => {
|
||||
return {...v, limit: limit, last: last, keyword: keyword, list: res.data.list, total: res.data.total}
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
this.msg_svc.error(res.msg)
|
||||
})
|
||||
}
|
||||
|
||||
GetTags(repo: string, limit: number = 20, last: number = 0, keyword: string = '') {
|
||||
console.log(`[D] GetTags: repo=${repo} limit=${limit} last=${last} keyword=${keyword}`)
|
||||
|
||||
this.http.get<Response<{ total: number, list: Repo[] }>>(this.url_tag, {
|
||||
params: {
|
||||
repo: repo,
|
||||
n: limit,
|
||||
last: last,
|
||||
keyword: keyword
|
||||
}
|
||||
}).subscribe(res => {
|
||||
if (res.status === 200) {
|
||||
this.catalog().list.forEach(v => {
|
||||
if (v.repo === repo) {
|
||||
v.Tags = {
|
||||
list: res.data.list,
|
||||
total: res.data.total,
|
||||
limit: limit,
|
||||
last: last,
|
||||
keyword: keyword,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
this.msg_svc.error(res.msg)
|
||||
})
|
||||
}
|
||||
}
|
||||
0
front/src/assets/.gitkeep
Normal file
0
front/src/assets/.gitkeep
Normal file
BIN
front/src/favicon.ico
Normal file
BIN
front/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
15
front/src/index.html
Normal file
15
front/src/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Front</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
6
front/src/main.ts
Normal file
6
front/src/main.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
6
front/src/proxy.conf.json
Normal file
6
front/src/proxy.conf.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"/api": {
|
||||
"target": "https://repo.me",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
72
front/src/styles.scss
Normal file
72
front/src/styles.scss
Normal file
@ -0,0 +1,72 @@
|
||||
:root {
|
||||
--primary-color: rgb(63, 81, 181);
|
||||
--my-primary-color: rgb(67, 80, 175);
|
||||
--my-success-text-color: rgb(94, 140, 117);
|
||||
--my-success-backgroud-color: rgb(203, 228, 216);
|
||||
--my-warning-text-color: rgb(132, 113, 56);
|
||||
--my-warning-backgroud-color: rgb(254, 243, 200);
|
||||
--my-error-text-color: rgb(136, 52, 61);
|
||||
--my-error-backgroud-color: rgb(246, 209, 213);
|
||||
--my-info-text-color: rgb(60, 64, 69);
|
||||
--my-info-backgroud-color: rgb(222, 223, 225);
|
||||
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.mat-mdc-snack-bar-container {
|
||||
|
||||
&.info-snackbar {
|
||||
--mdc-snackbar-container-color: var(--my-info-backgroud-color);
|
||||
--mdc-snackbar-supporting-text-color: var(--my-info-text-color);
|
||||
}
|
||||
|
||||
&.success-snackbar {
|
||||
--mdc-snackbar-container-color: var(--my-success-backgroud-color);
|
||||
--mdc-snackbar-supporting-text-color: var(--my-success-text-color);
|
||||
}
|
||||
|
||||
&.warning-snackbar {
|
||||
--mdc-snackbar-container-color: var(--my-warning-backgroud-color);
|
||||
--mdc-snackbar-supporting-text-color: var(--my-warning-text-color);
|
||||
}
|
||||
|
||||
&.error-snackbar {
|
||||
--mdc-snackbar-container-color: var(--my-error-backgroud-color);
|
||||
--mdc-snackbar-supporting-text-color: var(--my-error-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.snack-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.snack-message-content {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
14
front/tsconfig.app.json
Normal file
14
front/tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
32
front/tsconfig.json
Normal file
32
front/tsconfig.json
Normal file
@ -0,0 +1,32 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
14
front/tsconfig.spec.json
Normal file
14
front/tsconfig.spec.json
Normal file
@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user