Commit 4b4f1170 authored by 神楽坂玲奈's avatar 神楽坂玲奈

backbone

parent 750d9bf8
Pipeline #4720 canceled with stages
{
"singleQuote": true,
"printWidth": 140
}
......@@ -26,6 +26,7 @@
"@angular-devkit/build-angular": "~12.2.1",
"@angular/cli": "~12.2.1",
"@angular/compiler-cli": "~12.2.0",
"@types/feather-icons": "^4.7.0",
"@types/node": "^12.11.1",
"typescript": "~4.3.5"
}
......@@ -2391,6 +2392,12 @@
"integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
"dev": true
},
"node_modules/@types/feather-icons": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/@types/feather-icons/-/feather-icons-4.7.0.tgz",
"integrity": "sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==",
"dev": true
},
"node_modules/@types/glob": {
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
......@@ -17657,6 +17664,12 @@
"integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
"dev": true
},
"@types/feather-icons": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/@types/feather-icons/-/feather-icons-4.7.0.tgz",
"integrity": "sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==",
"dev": true
},
"@types/glob": {
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
......@@ -27,6 +27,7 @@
"@angular-devkit/build-angular": "~12.2.1",
"@angular/cli": "~12.2.1",
"@angular/compiler-cli": "~12.2.0",
"@types/feather-icons": "^4.7.0",
"@types/node": "^12.11.1",
"typescript": "~4.3.5"
}
......
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AppComponent} from "./app/app.component";
const routes: Routes = [];
const routes: Routes = [
{path: 'apps/:id', component: AppComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export class AppRoutingModule {
}
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">MyCard Partner Console</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Apps</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column">
<li class="nav-item" *ngFor="let app of apps | async">
<a class="nav-link" href="#">
<img class="feather" [src]="app.icon">
{{app.id}}
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>random</td>
<td>data</td>
<td>placeholder</td>
<td>text</td>
</tr>
<tr>
<td>1,002</td>
<td>placeholder</td>
<td>irrelevant</td>
<td>visual</td>
<td>layout</td>
</tr>
<tr>
<td>1,003</td>
<td>data</td>
<td>rich</td>
<td>dashboard</td>
<td>tabular</td>
</tr>
<tr>
<td>1,003</td>
<td>information</td>
<td>placeholder</td>
<td>illustrative</td>
<td>data</td>
</tr>
<tr>
<td>1,004</td>
<td>text</td>
<td>random</td>
<td>layout</td>
<td>dashboard</td>
</tr>
<tr>
<td>1,005</td>
<td>dashboard</td>
<td>irrelevant</td>
<td>text</td>
<td>placeholder</td>
</tr>
<tr>
<td>1,006</td>
<td>dashboard</td>
<td>illustrative</td>
<td>rich</td>
<td>data</td>
</tr>
<tr>
<td>1,007</td>
<td>placeholder</td>
<td>tabular</td>
<td>information</td>
<td>irrelevant</td>
</tr>
<tr>
<td>1,008</td>
<td>random</td>
<td>data</td>
<td>placeholder</td>
<td>text</td>
</tr>
<tr>
<td>1,009</td>
<td>placeholder</td>
<td>irrelevant</td>
<td>visual</td>
<td>layout</td>
</tr>
<tr>
<td>1,010</td>
<td>data</td>
<td>rich</td>
<td>dashboard</td>
<td>tabular</td>
</tr>
<tr>
<td>1,011</td>
<td>information</td>
<td>placeholder</td>
<td>illustrative</td>
<td>data</td>
</tr>
<tr>
<td>1,012</td>
<td>text</td>
<td>placeholder</td>
<td>layout</td>
<td>dashboard</td>
</tr>
<tr>
<td>1,013</td>
<td>dashboard</td>
<td>irrelevant</td>
<td>text</td>
<td>visual</td>
</tr>
<tr>
<td>1,014</td>
<td>dashboard</td>
<td>illustrative</td>
<td>rich</td>
<td>data</td>
</tr>
<tr>
<td>1,015</td>
<td>random</td>
<td>tabular</td>
<td>information</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
......@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyCardComponent } from './mycard.component';
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app/app.component';
@NgModule({
declarations: [
MyCardComponent,
AppComponent
],
imports: [
......@@ -15,6 +17,6 @@ import {HttpClientModule} from '@angular/common/http';
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [MyCardComponent]
})
export class AppModule { }
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">提交</button>
<button type="button" class="btn btn-sm btn-outline-secondary">重置</button>
</div>
<!-- <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">-->
<!-- <span data-feather="calendar"></span>-->
<!-- This week-->
<!-- </button>-->
</div>
</div>
{{app | async | json}}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { mergeMap } from 'rxjs/operators';
import { AppService } from './app.service';
@Component({
selector: 'app-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
app = this.route.params.pipe(mergeMap((params) => this.appService.getApp(params['id'])));
constructor(private route: ActivatedRoute, private appService: AppService) {}
ngOnInit(): void {}
}
import {AfterViewInit, Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Injectable} from '@angular/core';
import {Observable} from "rxjs";
import {HttpClient} from "@angular/common/http";
import {map} from "rxjs/operators";
import feather from 'feather-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
@Injectable({
providedIn: 'root'
})
export class AppComponent implements AfterViewInit {
title = 'console-web';
export class AppService {
apps: Observable<AppsJson.App[]> = this.http.get<AppsJson.App[]>('https://api.mycard.moe/apps.json');
constructor(private http: HttpClient) {
}
ngAfterViewInit(): void {
feather.replace();
getApp(id: string) {
return this.apps.pipe(map(apps => apps.find(app => app.id == id)))
}
// getI18nName(app: AppsJson.App){
// return app.name['']
// }
}
export namespace AppsJson {
export const enum Locale {
......
<header class='navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow'>
<a class='navbar-brand col-md-3 col-lg-2 me-0 px-3' href='#'>MyCard Partner Console</a>
<button class='navbar-toggler position-absolute d-md-none collapsed' type='button' data-bs-toggle='collapse'
data-bs-target='#sidebarMenu' aria-controls='sidebarMenu' aria-expanded='false'
aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'></span>
</button>
<input class='form-control form-control-dark w-100' type='text' placeholder='Search' aria-label='Search'>
<div class='navbar-nav'>
<div class='nav-item text-nowrap'>
<a class='nav-link px-3' href='#'>Sign out</a>
</div>
</div>
</header>
<div class='container-fluid'>
<div class='row'>
<nav id='sidebarMenu' class='col-md-3 col-lg-2 d-md-block bg-light sidebar collapse'>
<div class='position-sticky pt-3'>
<h6 class='sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted'>
<span>Apps</span>
<a class='link-secondary' href='#' aria-label='Add a new report'>
<span data-feather='plus-circle'></span>
</a>
</h6>
<ul class='nav flex-column'>
<li class='nav-item' *ngFor='let app of apps | async'>
<a class='nav-link' [routerLink]="['apps', app.id]">
<img class='feather' [src]='app.icon'>
{{app.id}}
</a>
</li>
</ul>
</div>
</nav>
<main class='col-md-9 ms-sm-auto col-lg-10 px-md-4'>
<router-outlet></router-outlet>
</main>
</div>
</div>
import {AfterViewInit, Component} from '@angular/core';
import feather from 'feather-icons';
import {AppService} from "./app/app.service";
@Component({
selector: 'app-root',
templateUrl: './mycard.component.html',
styleUrls: ['./mycard.component.css']
})
export class MyCardComponent implements AfterViewInit {
title = 'console-web';
apps = this.appService.apps;
constructor(private appService: AppService) {
}
ngAfterViewInit(): void {
feather.replace();
}
// getI18nName(app: AppsJson.App){
// return app.name['']
// }
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment