Test
This commit is contained in:
parent
ed9f2d021d
commit
24ea332aff
12
client/Nightr/src/app.css
Normal file
12
client/Nightr/src/app.css
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
/*
|
||||||
|
In NativeScript, the app.css file is where you place CSS rules that
|
||||||
|
you would like to apply to your entire application. Check out
|
||||||
|
http://docs.nativescript.org/ui/styling for a full list of the CSS
|
||||||
|
selectors and properties you can use to style UI components.
|
||||||
|
|
||||||
|
/*
|
||||||
|
In many cases you may want to use the NativeScript core theme instead
|
||||||
|
of writing your own CSS rules. For a full list of class names in the theme
|
||||||
|
refer to http://docs.nativescript.org/ui/theme.
|
||||||
|
*/
|
||||||
|
@import '~nativescript-theme-core/css/core.light.css';
|
18
client/Nightr/src/app/app-routing.module.ts
Normal file
18
client/Nightr/src/app/app-routing.module.ts
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
import { NativeScriptRouterModule } from "nativescript-angular/router";
|
||||||
|
import { Routes } from "@angular/router";
|
||||||
|
|
||||||
|
import { ItemsComponent } from "./item/items.component";
|
||||||
|
import { ItemDetailComponent } from "./item/item-detail.component";
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{ path: "", redirectTo: "/items", pathMatch: "full" },
|
||||||
|
{ path: "items", component: ItemsComponent },
|
||||||
|
{ path: "item/:id", component: ItemDetailComponent }
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [NativeScriptRouterModule.forRoot(routes)],
|
||||||
|
exports: [NativeScriptRouterModule]
|
||||||
|
})
|
||||||
|
export class AppRoutingModule { }
|
2
client/Nightr/src/app/app.component.html
Normal file
2
client/Nightr/src/app/app.component.html
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
|
||||||
|
<page-router-outlet></page-router-outlet>
|
8
client/Nightr/src/app/app.component.ts
Normal file
8
client/Nightr/src/app/app.component.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "ns-app",
|
||||||
|
moduleId: module.id,
|
||||||
|
templateUrl: "./app.component.html"
|
||||||
|
})
|
||||||
|
export class AppComponent { }
|
36
client/Nightr/src/app/app.module.ts
Normal file
36
client/Nightr/src/app/app.module.ts
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
|
||||||
|
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
|
||||||
|
|
||||||
|
import { AppRoutingModule } from "./app-routing.module";
|
||||||
|
import { AppComponent } from "./app.component";
|
||||||
|
import { ItemsComponent } from "./item/items.component";
|
||||||
|
import { ItemDetailComponent } from "./item/item-detail.component";
|
||||||
|
|
||||||
|
// Uncomment and add to NgModule imports if you need to use two-way binding
|
||||||
|
// import { NativeScriptFormsModule } from "nativescript-angular/forms";
|
||||||
|
|
||||||
|
// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
|
||||||
|
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
bootstrap: [
|
||||||
|
AppComponent
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
NativeScriptModule,
|
||||||
|
AppRoutingModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
ItemsComponent,
|
||||||
|
ItemDetailComponent
|
||||||
|
],
|
||||||
|
providers: [],
|
||||||
|
schemas: [
|
||||||
|
NO_ERRORS_SCHEMA
|
||||||
|
]
|
||||||
|
})
|
||||||
|
/*
|
||||||
|
Pass your application module to the bootstrapModule function located in main.ts to start your app
|
||||||
|
*/
|
||||||
|
export class AppModule { }
|
8
client/Nightr/src/app/item/item-detail.component.html
Normal file
8
client/Nightr/src/app/item/item-detail.component.html
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
<ActionBar title="Details" class="action-bar"></ActionBar>
|
||||||
|
<FlexboxLayout flexDirection="column" class="page">
|
||||||
|
<FlexboxLayout class="m-15">
|
||||||
|
<Label class="h2" [text]="item.id + '. '"></Label>
|
||||||
|
<Label class="h2" [text]="item.name"></Label>
|
||||||
|
</FlexboxLayout>
|
||||||
|
<Label class="h4" [text]="item.role"></Label>
|
||||||
|
</FlexboxLayout>
|
24
client/Nightr/src/app/item/item-detail.component.ts
Normal file
24
client/Nightr/src/app/item/item-detail.component.ts
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
import { ActivatedRoute } from "@angular/router";
|
||||||
|
|
||||||
|
import { Item } from "./item";
|
||||||
|
import { ItemService } from "./item.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "ns-details",
|
||||||
|
moduleId: module.id,
|
||||||
|
templateUrl: "./item-detail.component.html"
|
||||||
|
})
|
||||||
|
export class ItemDetailComponent implements OnInit {
|
||||||
|
item: Item;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private itemService: ItemService,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
const id = +this.route.snapshot.params.id;
|
||||||
|
this.item = this.itemService.getItem(id);
|
||||||
|
}
|
||||||
|
}
|
41
client/Nightr/src/app/item/item.service.ts
Normal file
41
client/Nightr/src/app/item/item.service.ts
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
import { Injectable } from "@angular/core";
|
||||||
|
|
||||||
|
import { Item } from "./item";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: "root"
|
||||||
|
})
|
||||||
|
export class ItemService {
|
||||||
|
private items = new Array<Item>(
|
||||||
|
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
|
||||||
|
{ id: 3, name: "Piqué", role: "Defender" },
|
||||||
|
{ id: 4, name: "I. Rakitic", role: "Midfielder" },
|
||||||
|
{ id: 5, name: "Sergio", role: "Midfielder" },
|
||||||
|
{ id: 6, name: "Denis Suárez", role: "Midfielder" },
|
||||||
|
{ id: 7, name: "Arda", role: "Midfielder" },
|
||||||
|
{ id: 8, name: "A. Iniesta", role: "Midfielder" },
|
||||||
|
{ id: 9, name: "Suárez", role: "Forward" },
|
||||||
|
{ id: 10, name: "Messi", role: "Forward" },
|
||||||
|
{ id: 11, name: "Neymar", role: "Forward" },
|
||||||
|
{ id: 12, name: "Rafinha", role: "Midfielder" },
|
||||||
|
{ id: 13, name: "Cillessen", role: "Goalkeeper" },
|
||||||
|
{ id: 14, name: "Mascherano", role: "Defender" },
|
||||||
|
{ id: 17, name: "Paco Alcácer", role: "Forward" },
|
||||||
|
{ id: 18, name: "Jordi Alba", role: "Defender" },
|
||||||
|
{ id: 19, name: "Digne", role: "Defender" },
|
||||||
|
{ id: 20, name: "Sergi Roberto", role: "Midfielder" },
|
||||||
|
{ id: 21, name: "André Gomes", role: "Midfielder" },
|
||||||
|
{ id: 22, name: "Aleix Vidal", role: "Midfielder" },
|
||||||
|
{ id: 23, name: "Umtiti", role: "Defender" },
|
||||||
|
{ id: 24, name: "Mathieu", role: "Defender" },
|
||||||
|
{ id: 25, name: "Masip", role: "Goalkeeper" }
|
||||||
|
);
|
||||||
|
|
||||||
|
getItems(): Array<Item> {
|
||||||
|
return this.items;
|
||||||
|
}
|
||||||
|
|
||||||
|
getItem(id: number): Item {
|
||||||
|
return this.items.filter((item) => item.id === id)[0];
|
||||||
|
}
|
||||||
|
}
|
5
client/Nightr/src/app/item/item.ts
Normal file
5
client/Nightr/src/app/item/item.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export interface Item {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
role: string;
|
||||||
|
}
|
33
client/Nightr/src/app/item/items.component.html
Normal file
33
client/Nightr/src/app/item/items.component.html
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
<!--
|
||||||
|
The template defines the view of the component - what is actually rendered.
|
||||||
|
In NativeScript applications the template is defined with XML using NativeScript UI elements.
|
||||||
|
It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
|
||||||
|
The important thing is that although the elements are different - all of the Angular’s template syntax works exactly the same.
|
||||||
|
So you can still use template expressions, bindings, templates as well as all the built-in directives.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
|
||||||
|
http://docs.nativescript.org/ui/action-bar
|
||||||
|
-->
|
||||||
|
<ActionBar title="My App" class="action-bar">
|
||||||
|
</ActionBar>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The GridLayout arranges its child elements in a table structure of rows and columns.
|
||||||
|
A cell can contain multiple child elements, they can span over multiple rows and columns,
|
||||||
|
and even overlap each other. The GridLayout has one column and one row by default.
|
||||||
|
You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.
|
||||||
|
|
||||||
|
These components make use of several CSS class names that are part of the NativeScript
|
||||||
|
core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
|
||||||
|
class names available for styling your app at https://docs.nativescript.org/ui/theme.
|
||||||
|
-->
|
||||||
|
<GridLayout class="page">
|
||||||
|
<ListView [items]="items" class="list-group">
|
||||||
|
<ng-template let-item="item">
|
||||||
|
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
|
||||||
|
class="list-group-item"></Label>
|
||||||
|
</ng-template>
|
||||||
|
</ListView>
|
||||||
|
</GridLayout>
|
23
client/Nightr/src/app/item/items.component.ts
Normal file
23
client/Nightr/src/app/item/items.component.ts
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
|
import { Item } from "./item";
|
||||||
|
import { ItemService } from "./item.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "ns-items",
|
||||||
|
moduleId: module.id,
|
||||||
|
templateUrl: "./items.component.html"
|
||||||
|
})
|
||||||
|
export class ItemsComponent implements OnInit {
|
||||||
|
items: Array<Item>;
|
||||||
|
|
||||||
|
// This pattern makes use of Angular’s dependency injection implementation to
|
||||||
|
// inject an instance of the ItemService service into this class.
|
||||||
|
// Angular knows about this service because it is included in your app’s main NgModule,
|
||||||
|
// defined in app.module.ts.
|
||||||
|
constructor(private itemService: ItemService) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.items = this.itemService.getItems();
|
||||||
|
}
|
||||||
|
}
|
13
client/Nightr/src/main.ts
Normal file
13
client/Nightr/src/main.ts
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
// this import should be first in order to load some required settings (like globals and reflect-metadata)
|
||||||
|
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
|
||||||
|
|
||||||
|
import { AppModule } from "./app/app.module";
|
||||||
|
|
||||||
|
// A traditional NativeScript application starts by initializing global objects,
|
||||||
|
// setting up global CSS rules, creating, and navigating to the main page.
|
||||||
|
// Angular applications need to take care of their own initialization:
|
||||||
|
// modules, components, directives, routes, DI providers.
|
||||||
|
// A NativeScript Angular app needs to make both paradigms work together,
|
||||||
|
// so we provide a wrapper platform object, platformNativeScriptDynamic,
|
||||||
|
// that sets up a NativeScript application and can bootstrap the Angular framework.
|
||||||
|
platformNativeScriptDynamic().bootstrapModule(AppModule);
|
6
client/Nightr/src/package.json
Normal file
6
client/Nightr/src/package.json
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"main": "main.js",
|
||||||
|
"android": {
|
||||||
|
"v8Flags": "--expose_gc"
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user