1,229 package-lock.json
View file

Large diffs are not rendered by default.

2 package.json
View file
@@ -21,6 +21,8 @@
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
44 src/app/app.component.html
View file
@@ -1,20 +1,26 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/index" routerLinkActive="active">Fitnesser</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" routerLink="/program-list" routerLinkActive="active">Program liste</a>
</li>
<li class="nav-item">
<a class="nav-link active" routerLink="/program" routerLinkActive="active">Create program</a>
</li>
<li class="nav-item">
<a class="nav-link active" routerLink="/exercise" routerLinkActive="active">Create Exercise</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login" routerLinkActive="active">Link</a>
</li>
</ul>
</div>
</nav>
<div class="body-content">
<router-outlet></router-outlet>
</div>
3 src/app/app.component.scss
View file
@@ -0,0 +1,3 @@
.body-content{
margin-top:30px;
}
11 src/app/app.component.ts
View file
@@ -1,10 +1,17 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { LoginService } from './login.service';
import { ProgramService } from './program.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
export class AppComponent{
title = 'app';

constructor( public login:LoginService, public programService: ProgramService) {
console.log(this.programService.getPrograms());

}
}
46 src/app/app.module.ts
View file
@@ -1,18 +1,54 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProgramListComponent } from './program-list/program-list.component';
import { IndexComponent } from './index/index.component';
import { LoginService } from './login.service';
import { ProgramService } from './program.service';
import { HttpModule } from '@angular/http';
import { ProgramEditComponent } from './program-edit/program-edit.component';
import { ExerciseEditComponent } from './exercise-edit/exercise-edit.component';
import { ExerciseService } from './exercise.service';
import { FilterPipe } from './filter.pipe';
import { SortPipe } from './sort.pipe';
const appRoutes: Routes = [
{ path: 'index', component: IndexComponent },
{ path: 'login', component: LoginComponent },
{ path: 'program-list', component: ProgramListComponent },
{ path: 'program', component: ProgramEditComponent },
{ path: 'exercise', component: ExerciseEditComponent },
{ path: '',
redirectTo: '/index',
pathMatch: 'full'
},
];

@NgModule({
declarations: [
AppComponent
AppComponent,
LoginComponent,
ProgramListComponent,
IndexComponent,
ProgramEditComponent,
ExerciseEditComponent,
FilterPipe,
SortPipe
],
imports: [
FormsModule,
HttpModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: false } // <-- debugging purposes only
),
NgbModule.forRoot(),
BrowserModule
],
providers: [],
providers: [LoginService, ProgramService, ExerciseService],
bootstrap: [AppComponent]
})
export class AppModule { }
92 src/app/exercise-edit/exercise-edit.component.html
View file
@@ -0,0 +1,92 @@
<div class="container-fluid">
<div class="row">

<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-md-12">
<div class="card">
<h3 class="card-header">Find dine øvelser!</h3>
<div class="card-block">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Navn</span>
<input [(ngModel)]="blob" name="SearchName" type="text" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">
</div>
<br>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="card">
<h3 class="card-header">Opret øvelse</h3>
<div class="card-block">
<form #exerciseForm="ngForm" (ngSubmit)="onSubmit(exerciseForm)">
<input [(ngModel)]="model.Id" name="Id" type="hidden" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Navn</span>
<input [(ngModel)]="model.Name" name="Name" required type="text" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Sværhedsgrad</span>
<select class="form-control" [(ngModel)]="model.Difficulty" name="Difficulty" required>
<option value="0">Begynder</option>
<option value="10">Svær</option>
<option value="20">Advanceret</option>
</select>
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Beskrivelse</span>
<textarea required [(ngModel)]="model.Description" name="Description" class="form-control" cols="1000" rows="5"></textarea>
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">video URL</span>
<input [(ngModel)]="model.VideoUrl" name="VideoUrl" required type="text" class="form-control" placeholder="Http://videoUrl.dk" aria-describedby="basic-addon1">
</div>
<br>
<button class="btn-success btn btn-block" [disabled]="!exerciseForm.form.valid">Opret</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-8">
<table class="table">
<thead>
<tr>
<th>Øvelses navn</th>
<th>Øvelses type</th>
<th>Sværhedsgrad</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let exercise of exerciseService.exercises | sort | filter : blob ">
<td>{{exercise.Name}}</td>
<td>{{exercise.SkillLevel}}</td>
<td>{{exercise.TimesToRepeat}}</td>
<td>
<div class="btn-group mr-2 pull-right" role="group" aria-label="First group">
<button class="btn btn-warning" (click)="selectExercise(exercise)" >
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="btn btn-danger" (click)="exerciseService.deleteExercise(exercise.Id)" >
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>

</div>

</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
7 src/app/exercise-edit/exercise-edit.component.scss
View file
@@ -0,0 +1,7 @@
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
34 src/app/exercise-edit/exercise-edit.component.ts
View file
@@ -0,0 +1,34 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ExerciseService } from '../exercise.service';
import { Exercise } from '../models/program.model';

@Component({
selector: 'app-exercise-edit',
templateUrl: './exercise-edit.component.html',
styleUrls: ['./exercise-edit.component.scss']
})
export class ExerciseEditComponent implements OnInit {
@ViewChild('exerciseForm') form;
model = {
'Name': '',
'Difficulty': 0,
'Description' : '',
'Type': 0,
'VideoUrl' : ''
};
constructor(public exerciseService: ExerciseService ) {

}
selectExercise(data) {
console.log(data);
this.form.setValue(data);
}
onSubmit(newExercise) {
console.log(newExercise.value);
this.exerciseService.addExercise(newExercise.value);
newExercise.form.reset();
}
ngOnInit() {
}

}
40 src/app/exercise.service.ts
View file
@@ -0,0 +1,40 @@
import { Injectable } from '@angular/core';
import { Exercise } from './models/program.model';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
@Injectable()
export class ExerciseService {
apiUrl = 'http://localhost:50590/api/Exercise';

SearchName = '';
exercises: Exercise[] = new Array<Exercise>();
Observable: any;

constructor(private _http: Http) {
this.getExercises().subscribe((data: Exercise[]) => {
this.exercises = data;
});

}
public getExercises() {
return this._http.get(this.apiUrl).map(response => {
const exercises = response.json();
this.exercises = exercises;
return exercises;
});
}
deleteExercise(Id) {
this._http.delete(this.apiUrl + '/' + Id).subscribe(
suc => {
this.getExercises().subscribe();
}
);

}
addExercise(data) {
this._http.post(this.apiUrl, data).subscribe(
suc => {
this.getExercises().subscribe();
}
);
}
}
19 src/app/filter.pipe.ts
View file
@@ -0,0 +1,19 @@
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) {
return [];
}
if (!searchText) { return items; }
searchText = searchText.toLowerCase();

return items.filter( (x) => {
// console.log(x);
return x.Name.toLowerCase().includes(searchText);
});
}
}
8 src/app/index/index.component.html
View file
@@ -0,0 +1,8 @@
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 (click)="AddProgram()">Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>

<p *ngFor="let program of programs | async"> {{program.Name}}</p>
</div>
</div>
0 src/app/index/index.component.scss
View file
Empty file.
20 src/app/index/index.component.ts
View file
@@ -0,0 +1,20 @@
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import { ProgramService } from '../program.service';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
constructor(public login: LoginService, public programService: ProgramService) {
}
AddProgram() {
alert("yo");
this.programService.addProgram();
}
ngOnInit() {
}

}
11 src/app/login.service.ts
View file
@@ -0,0 +1,11 @@
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
loggedIn: boolean = false;
constructor() { }

logIn(){
this.loggedIn = true;
}
}
3 src/app/login/login.component.html
View file
@@ -0,0 +1,3 @@
<p>
login works!
</p>
0 src/app/login/login.component.scss
View file
Empty file.
16 src/app/login/login.component.ts
View file
@@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

constructor(public login: LoginService) { }

ngOnInit() {
}

}
35 src/app/models/program.model.ts
View file
@@ -0,0 +1,35 @@
export class Program {
Id: string;
Title: string;
Duration: number;
Type: number;
Difficulty: number;
Description: string;
Sessions: Session[];
constructor() {
this.Sessions = new Array<Session>();
this.Difficulty = 0;
this.Type = 0;
}
}
export class Session {
Id: string;
Title: string;
Place: number;
Exercises: Exercise[];
constructor() {
this.Exercises = new Array<Exercise>();
}
}
export class Exercise {
Id: string;
Name: string;
Difficulty: number;
Place: number;
constructor(
Id: string,
Name: string,
Difficulty: number = 0,
Place: number,
) {}
}
118 src/app/program-edit/program-edit.component.html
View file
@@ -0,0 +1,118 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="text-center">
<input type="text" [(ngModel)]="sProgram.Title" name="" placeholder="Titel" class="BorderlessInput">
</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-3 mb-3">
<div class="card">
<h3 class="card-header">Program Information</h3>
<div class="card-block">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Session gentagelser</span>
<input [(ngModel)]="sProgram.Duration" name="SearchName" type="number" class="form-control" placeholder="" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon2">Gange</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Trænings type</span>
<select class="form-control" [(ngModel)]="sProgram.Type">
<option value="0">Styrke</option>
<option value="10">Størrelse</option>
<option value="20">Udholdenhed</option>
</select>
</div>
<br>

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Sværhedsgrad</span>
<select name="" id="" class="form-control" [(ngModel)]="sProgram.Difficulty">
<option value="0">Beginner</option>
<option value="10">Intermediate</option>
<option value="20">Advanced</option>
</select>
</div>

<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Beskrivelse</span>
<textarea [(ngModel)]="sProgram.Description" class="form-control" id="exampleTextarea" rows="12" placeholder=""></textarea>
</div>

</div>

</div>
</div>
<div class="col-md-12 col-lg-12 col-xl-9 mb-3">
<div class="card">
<h3 class="card-header">Sessioner</h3>
<div class="card-block" id="sessionHolder">
<div class="row">
<div class=" col-md-12 col-lg-6 col-xl-4" *ngFor="let session of sProgram.Sessions">
<div class="card">
<h5 class="card-header">
<input type="text" [(ngModel)]="session.Title" placeholder="{{session.Title}} session" class="BorderlessInput">
</h5>
<div class="card-block">
<div *ngFor="let exercise of session.Exercises">

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Øvelse</span>
<select class="form-control" [(ngModel)]="exercise.Title">
<option value="{{exercise.Id}}" *ngFor="let exercise of exerciseService.exercises | sort">{{exercise.Name}}</option>
</select>

</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Sets</span>
<input [(ngModel)]="exercise.Sets" type="number" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Reps</span>
<input [(ngModel)]="exercise.Reps" type="number" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Tempo </span>
<input [(ngModel)]="exercise.Tempo" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">


</div>
<hr>
</div>
<button class="btn btn-block btn-primary" (click)="addExercise(session)">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</button>


</div>

</div>

</div>
</div>
<hr>

<div class="row">
<div class="col">
<button class="btn btn-block btn-primary" (click)="addSession()">Opret session</button>

</div>
</div>

</div>

</div>
</div>
</div>

</div>
<nav class="navbar fixed-bottom navbar-light bg-light text-center">
<a class="btn btn-block btn-warning navbar-brand" href="#">Save</a>
</nav>
44 src/app/program-edit/program-edit.component.scss
View file
@@ -0,0 +1,44 @@


.BorderlessInput{
border:0;
text-align: center;
outline: none;
background-color:transparent;
max-width: 100%;

:focus,:hover,:active{
background-color:white !important;
border: 0;
box-shadow: 0;
}
}
#sessionHolder{
width: auto;
.card{
margin-bottom: 30px;
.card-header{
text-align: center;
}
.input-group-addon{
width:72px;
}


}
}
.card-block {
@media screen and (max-width: 768px) {
padding:5px;
}
}
.fixed-bottom{
background-color:#f7f7f9;
box-shadow: #f7f7f9 10px;
a{
color:white;
}
@media screen and (max-width: 1024px) {
position: static;
}
}
31 src/app/program-edit/program-edit.component.ts
View file
@@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { ProgramService } from '../program.service';
import { ExerciseService } from '../exercise.service';

import { Session, Exercise} from '../models/program.model';
@Component({
selector: 'app-program-edit',
templateUrl: './program-edit.component.html',
styleUrls: ['./program-edit.component.scss']
})
export class ProgramEditComponent implements OnInit {
sProgram: any;

constructor(public programService: ProgramService, public exerciseService: ExerciseService) {
this.sProgram = this.programService.selectedProgram;
}
addSession() {
this.sProgram.Sessions.push(new Session());
console.log(this.programService.selectedProgram);
}
log(stuff){
console.log(stuff);
}
addExercise(session: Session) {
session.Exercises.push(new Exercise('123', '123', 0, 1));
}

ngOnInit() {
}

}
57 src/app/program-list/program-list.component.html
View file
@@ -0,0 +1,57 @@
<div class="container-fluid">
<div class="row">

<div class="col-xs-12 col-md-4">
<div class="card">
<h3 class="card-header">Find dit program!</h3>
<div class="card-block">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Navn</span>
<input [(ngModel)]="searchName" name="SearchName" type="text" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Navn</span>
<input [(ngModel)]="programService.SearchName" name="SearchName" type="text" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">
</div>
<br>

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Navn</span>
<input [(ngModel)]="programService.SearchName" name="SearchName" type="text" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">
</div>
<br>

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Navn</span>
<input [(ngModel)]="programService.SearchName" name="SearchName" type="text" class="form-control" placeholder="Navn" aria-describedby="basic-addon1">
</div>



</div>

</div>
</div>
<div class="col-xs-12 col-md-8">
<table class="table">
<thead>
<tr>
<th>Program Name</th>
<th>Program type</th>
<th>Sværhedsgrad</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let program of programService.programs | filter:searchName | sort ">
<td>{{program.Name}}</td>
<td>{{program.SkillLevel}}</td>
<td>{{program.TimesToRepeat}}</td>
</tr>

</tbody>
</table>
</div>
</div>

</div>
0 src/app/program-list/program-list.component.scss
View file
Empty file.
19 src/app/program-list/program-list.component.ts
View file
@@ -0,0 +1,19 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { LoginService } from '../login.service';
import { ProgramService } from '../program.service';

import { Router, ActivatedRoute, ParamMap } from '@angular/router';
@Component({
selector: 'app-program-list',
templateUrl: './program-list.component.html',
styleUrls: ['./program-list.component.scss']
})
export class ProgramListComponent implements OnInit {
constructor(public login: LoginService, private router: Router, public programService: ProgramService) {
console.log(programService.programs);
}

ngOnInit() {
}

}
28 src/app/program.service.ts
View file
@@ -0,0 +1,28 @@
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Program } from './models/program.model';

@Injectable()
export class ProgramService {
apiUrl = 'http://localhost:50590/api/program';
SearchName = '';
programs: any = [];
selectedProgram: Program = new Program();
constructor(private _http: Http) {
}
getPrograms() {
return this._http.get(this.apiUrl, {
params: {
programName: this.SearchName
}}).map(response => {
const programs = response.json();
this.programs = programs;
return programs;
}).subscribe();
}
addProgram() {
this._http.post(this.apiUrl, {'value': '10'}).subscribe();
}

}

21 src/app/sort.pipe.ts
View file
@@ -0,0 +1,21 @@
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {

transform(array: Array<string>, args: string): Array<string> {
array.sort((a: any, b: any) => {
if (a.Name < b.Name) {
return -1;
} else if (a.Name > b.Name) {
return 1;
} else {
return 0;
}
});
return array;
}

}
1 src/index.html
View file
@@ -7,6 +7,7 @@

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<app-root></app-root>