niggl/srumboard_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into feature/tables

Browse Source
This commit is contained in:
Nicolai Ort 2020-06-29 15:37:11 +02:00
commit 20af9e6bd0
22 changed files with 475 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.gitlab-ci.yml Normal file
View File

@ -0,0 +1,29 @@
image: docker:dind
services:
- name: docker:dind
entrypoint: ["env", "-u", "DOCKER_HOST"]
command: ["dockerd-entrypoint.sh"]
variables:
DOCKER_HOST: tcp://docker:2375/
DOCKER_DRIVER: overlay2
DOCKER_TLS_CERTDIR: ""
before_script:
- echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER --password-stdin $CI_REGISTRY
build:
stage: build
script:
- docker build . -t frontend:$CI_COMMIT_SHORT_SHA
- docker tag frontend:$CI_COMMIT_SHORT_SHA $CI_REGISTRY/taskboard/frontend:$CI_COMMIT_SHORT_SHA
- docker push $CI_REGISTRY/taskboard/frontend:$CI_COMMIT_SHORT_SHA
- docker tag frontend:$CI_COMMIT_SHORT_SHA $CI_REGISTRY/taskboard/frontend:latest
- docker push $CI_REGISTRY/taskboard/frontend:latest
tags:
- frontend
only:
refs:
- tags
- master

2
Dockerfile
View File

@ -14,5 +14,7 @@ RUN npm run build
# Stage 2: Package up with the webserver
FROM nginx:alpine AS final
ENV API_URL "http://localhost:5001"
COPY --from=build /build/dist/frontend /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

13
README.md
View File

@ -31,15 +31,14 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
> Prerequisite: Docker and/or Docker Compose have to be installed on your system </br>
> The Docker installation instructions for most operation systems can be found here: [https://docs.docker.com/get-docker/](https://docs.docker.com/get-docker/) </br>
> The Docker Compose installation instructions for most operation systems can be found here: [https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)
> To use the prebuild images log into the private registry: docker login -u testuser -p LpH2v1mShPpC8Xeimkd2AISA03zaC+vq scrumdev.azurecr.io
### Quick Deployment with Docker Compose
1. Clone the git repo
2. Open the cloned repo's folder in a shell of your choice (as long as it supports Docker)
3. Tell Docker Compose to build - if it hasn't already been built - and run the app with `docker-compose up`
3. Tell Docker Compose to run the app alongside a database with `docker-compose up`
Other useful commands:
* Just build: `docker-compose build`
* Build before running: `docker-compose up --build`
* Run attached (in the background): `docker-compose up -d`
* Stop: `docker-compose down`
* Restart: `docker-compose restart`
@ -47,9 +46,9 @@ Other useful commands:
### Build the Container yourself (and run it)
1. Clone the git repo
2. Open the cloned repo's folder in a shell of your choice (as long as it supports Docker)
3. Tell Docker to build the app under the name "frontend" with `docker build -t taskboard_frontend .`
4. Tell Docker to run the app on port 8080 with `docker run -p 8080:80 taskboard_frontend`
3. Tell Docker to build the app under the name "taskboard/frontend" with `docker build -t taskboard/frontend .`
4. Tell Docker to run the app on port 8080 with `docker run -p 8080:80 taskboard/frontend`
Other useful commands:
* Run detached: `docker run -d -p 8080:80 taskboard_frontend`
* Run under specified name: `docker run -p 8080:80 --name frontend taskboard_frontend`
* Run detached: `docker run -d -p 8080:80 taskboard/frontend`
* Run under specified name: `docker run -p 8080:80 --name frontend taskboard/frontend`

7
docker-compose.yml
View File

@ -2,10 +2,11 @@ version: "3"
services:
app:
build:
context: .
image: scrumdev.azurecr.io/taskboard/frontend:latest
restart: unless-stopped
networks:
- default
ports:
- "8080:80"
- "8080:80"
environment:
API_URL: http://localhost:5001

15
nginx.conf Normal file
View File

@ -0,0 +1,15 @@
worker_processes 1;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
location / {
try_files $uri /index.html;
}
}
}

10
package.json
View File

@ -45,5 +45,13 @@
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.7.",
"main": "karma.conf.js",
"repository": {
"type": "git",
"url": "https://git.informatik.fh-nuernberg.de/scrum-taskboard/frontend.git"
},
"author": "",
"license": "ISC"
}

7
src/app/app-routing.module.ts
View File

@ -4,7 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
import {UserstoryTableComponent} from './userstory-table/userstory-table.component';
import {TaskTableComponent} from './task-table/task-table.component';
const routes: Routes = [
{ path: 'tasks', component: TaskTableComponent },
{ path: 'userstories', component: UserstoryTableComponent },
@ -12,7 +11,7 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
export class AppRoutingModule {}

4
src/app/app.module.ts
View File

@ -9,6 +9,7 @@ import { AppComponent } from './app.component';
import { BackendService } from './services/backend.service';
import { TaskFormComponent } from './task-form/task-form.component';
import { UserstoryFormComponent } from './userstory-form/userstory-form.component';
import { SprintFormComponent } from './sprint-form/sprint-form.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { UserstoryTableComponent } from './userstory-table/userstory-table.component';
import { TaskTableComponent } from './task-table/task-table.component';
@ -20,7 +21,8 @@ import { TaskTableComponent } from './task-table/task-table.component';
TaskFormComponent,
UserstoryTableComponent,
UserstoryFormComponent,
UserstoryTableComponent
UserstoryTableComponent,
SprintFormComponent
],
imports: [
BrowserModule,

2
src/app/services/backend.service.ts
View File

@ -232,7 +232,7 @@ export interface ScrumUserstory {
export interface ScrumSprint{
id?: number;
title: string;
description: string;
description?: string;
startDate: Date;
endDate: Date;
project: number;

0
src/app/sprint-component/sprint.component.css Normal file
View File

1
src/app/sprint-component/sprint.component.html Normal file
View File

@ -0,0 +1 @@
<button class="btn btn-dark m-3" (click)="openUserstoryForm(null)">Neuer Sprint</button>

54
src/app/sprint-component/sprint.component.ts Normal file
View File

@ -0,0 +1,54 @@
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { BackendService, ScrumSprint } from '../services/backend.service';
import { SprintFormComponent } from '../sprint-form/sprint-form.component';
@Component({
selector: 'app-sprint',
templateUrl: './sprint.component.html',
styleUrls: ['./sprint.component.css']
})
export class SprintComponent implements OnInit {
public sprints: ScrumSprint[] = [];
constructor(private backendService: BackendService, private modalService: NgbModal) {
backendService.getSprints().subscribe(response => {
if (response.status > 399) {
alert('Fehler');
}
else {
this.sprints.push(...response.body);
}
});
}
ngOnInit(): void {
}
public deleteSprint(sprint: ScrumSprint) {
this.backendService.deleteSprint(sprint).subscribe(response => {
if (response.status > 399) {
alert('Fehler');
}
});
const index = this.sprints.indexOf(sprint);
if (index !== -1) {
this.sprints.splice(index, 1);
}
}
public openSprintForm(editSprint: ScrumSprint) {
const modalRef = this.modalService.open(SprintFormComponent, {
backdrop: 'static',
keyboard: true,
});
if (editSprint === null) {
modalRef.result.then(result => {
this.sprints.push(result);
});
}
modalRef.componentInstance.userstory = editSprint;
}
}

4
src/app/sprint-form/sprint-form.component.css Normal file
View File

@ -0,0 +1,4 @@
.modal-footer {
border-top: 0px solid;
padding-top: 5%;
}

33
src/app/sprint-form/sprint-form.component.html Normal file
View File

@ -0,0 +1,33 @@
<div class="modal-content p-3">
<div class="modal-header">
<h4 class="modal-title">Neuen Sprint anlegen</h4>
<button (click)="onClose()" type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="Title">Titel</label>
<input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="sprint.title"
id="titleField">
</div>
<div class="form-group">
<label for="date">Startdatum</label>
<input type="Date" class="form-control" id="Date" required name="date" [(ngModel)]="sprint.startDate"
id="titleField">
</div>
<div class="form-group">
<label for="Date">Enddatum</label>
<input type="date" class="form-control" id="Date" required name="date" [(ngModel)]="sprint.endDate"
id="titleField">
</div>
<div class="modal-footer">
<button (click)="onClose()" type="dismiss" class="btn btn-secondary"
data-dismiss="modal">Abbrechen</button>
<button type="submit" class="btn btn-primary">Sprint starten</button>
</div>
</form>
</div>
</div>

62
src/app/sprint-form/sprint-form.component.ts Normal file
View File

@ -0,0 +1,62 @@
import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import {
BackendService,
ScrumTask,
Priority,
ScrumStatus,
ScrumCategory,
ScrumUser,
ScrumProject,
ScrumUserstory,
ScrumSprint
} from '../services/backend.service';
import { Observable } from 'rxjs';
import { HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-task-form',
templateUrl: './sprint-form.component.html',
styleUrls: ['./sprint-form.component.css'],
})
export class SprintFormComponent implements OnInit {
@Input() public sprint: ScrumSprint;
public editing: Boolean;
public sprintid: string;
constructor(
private backendService: BackendService,
private activeModalService: NgbActiveModal
) { }
ngOnInit(): void {
if (this.sprint === null || this.sprint === undefined) {
this.sprint = { title: '', startDate: new Date(), endDate: new Date(), project: 0 }; //project id: static counter?
this.editing = false;
} else {
this.editing = true;
}
document.getElementById('titleField').focus();
}
onSubmit() {
if (this.editing) {
this.backendService.putSprint(this.sprint).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
});
} else {
this.backendService.postSprint(this.sprint).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
});
}
this.activeModalService.close(this.sprint);
}
onClose() {
this.activeModalService.dismiss(this.sprint);
}
}

13
src/app/task-form/task-form.component.css
View File

@ -0,0 +1,13 @@
.modal-footer {
border-top: 0px solid;
padding-top: 5%;
}
.modal-content {
width: 1040px;
right: 55%;
border: 0px;
}
.modal {
margin: 0 auto;
}

86
src/app/task-form/task-form.component.html
View File

@ -1,30 +1,68 @@
<div class="modal-content p-3">
<div>
<button (click) ="onClose()" type="button" class="close" aria-label="Close">
<div class="modal-header">
<table>
<tr>
<h4 class="modal-title">Neuen Task anlegen</h4>
</tr>
<tr>
<h6 class="modal-caption text-muted"> Gehört zu Story: <a href="#" id="userstoryTitle">{{this.userstoryId}}</a></h6>
</tr>
<!--getUserstory fehlt noch-->
</table>
<button (click)="onClose()" type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="Title">Titel</label>
<input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="task.title">
<div class="modal-body">
<form (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label for="Title">Titel</label>
<input type="text" class="form-control" id="Title" required name="title"
[(ngModel)]="task.title" id="titleField">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="form-group">
<label for="Prio">Prio</label>
<select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
[(ngModel)]="task.priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label for="Inhalt">What to do?</label>
<textarea type="text" class="form-control" id="Story" required name="story" rows="5"
[(ngModel)]="task.content"></textarea>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="form-group">
<label for="Inhalt">Status</label>
<input type="text" class="form-control" id="Status" required name="status"
[(ngModel)]="task.status">
</div>
<div class="form-group">
<label for="Inhalt">Assigned User</label>
<input type="text" class="form-control" id="Author" required name="author">
</div>
</div>
</div>
<div class="modal-footer">
<button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<button type="submit" class="btn btn-primary">Erstellen</button>
</div>
<div class="form-group">
<label for="Inhalt">Inhalt</label>
<input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="task.content">
</div>
<div class="form-group">
<label for="Prio">Prio</label>
<select class="form-control" id="prio" required name="prio" [(ngModel)]="task.priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</form>
</div>
</div>

92
src/app/task-form/task-form.component.ts
View File

@ -1,50 +1,72 @@
import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { BackendService, ScrumTask, Priority, ScrumStatus, ScrumCategory, ScrumUser, ScrumProject } from '../services/backend.service';
import {
BackendService,
ScrumTask,
Priority,
ScrumStatus,
ScrumCategory,
ScrumUser,
ScrumProject,
ScrumUserstory,
} from '../services/backend.service';
import { Observable } from 'rxjs';
import { HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-task-form',
templateUrl: './task-form.component.html',
styleUrls: ['./task-form.component.css']
selector: 'app-task-form',
templateUrl: './task-form.component.html',
styleUrls: ['./task-form.component.css'],
})
export class TaskFormComponent implements OnInit {
@Input() public task: ScrumTask;
public editing: Boolean;
public userstoryId: string;
@Input()
public task: ScrumTask;
public editing: Boolean;
constructor(
private backendService: BackendService,
private activeModalService: NgbActiveModal
) {}
constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
ngOnInit(): void {
if (this.task === null || this.task === undefined) {
this.task = {title: ""};
this.editing = false;
}
else
{
this.editing = true;
}
ngOnInit(): void {
if (this.task === null || this.task === undefined) {
this.task = { title: '' };
this.editing = false;
} else {
this.editing = true;
}
document.getElementById('titleField').focus();
this.getRelatedStory();
}
onSubmit() {
if (this.editing) {
this.backendService.putTask(this.task).subscribe(response => {
if (response.status > 399) {
alert('Fehler');
}
});
onSubmit() {
if (this.editing) {
this.backendService.putTask(this.task).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
else {
this.backendService.postTask(this.task).subscribe(response => {
if (response.status > 399) {
alert('Fehler');
}
});
});
} else {
this.backendService.postTask(this.task).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
this.activeModalService.close(this.task);
});
}
this.activeModalService.close(this.task);
}
onClose(){
this.activeModalService.dismiss(this.task);
}
onClose() {
this.activeModalService.dismiss(this.task);
}
getRelatedStory() {
this.backendService.getUserstory(2).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
} else {
this.userstoryId = response.body.title;
}
});
}
}

12
src/app/userstory-form/userstory-form.component.css
View File

@ -0,0 +1,12 @@
.modal-footer {
border-top: 0px solid;
padding-top: 5%;
}
.modal-content {
width: 1040px;
right: 55%;
}
.modal {
margin: 0 auto;
}

92
src/app/userstory-form/userstory-form.component.html
View File

@ -1,30 +1,64 @@
<div class="modal-content p-3">
<div>
<button (click) ="onClose()" type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<!-- <div class="modal-lg"> -->
<div class="modal-content p-3 text-dark">
<div class="modal-header">
<h4 class="modal-title">Neue Userstory anlegen</h4>
<button (click)="onClose()" type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label for="Title">Titel</label>
<input type="text" class="form-control" id="Title" required name="title"
[(ngModel)]="userstory.title" id="titleField">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="form-group">
<label for="Prio">Prio</label>
<select class="custom-select mr-sm-2" id="prio" required name="prio"
[(ngModel)]="userstory.priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label for="Inhalt">Story</label>
<textarea type="text" class="form-control" id="Story" required name="story" rows="5"
[(ngModel)]="userstory.content"></textarea>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="form-group">
<label for="Inhalt">Status</label>
<input type="text" class="form-control" id="Status" required name="status"
[(ngModel)]="userstory.status">
</div>
<div class="form-group">
<label for="Inhalt">Autor</label>
<input type="text" class="form-control" id="Author" required name="author"
[(ngModel)]="userstory.createdby">
</div>
</div>
</div>
<div class="modal-footer">
<button (click)="onClose()" type="dismiss" class="btn btn-secondary"
data-dismiss="modal">Abbrechen</button>
<button type="submit" class="btn btn-primary">Erstellen</button>
</div>
</form>
</div>
</div>
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="Title">Titel</label>
<input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="userstory.title">
</div>
<div class="form-group">
<label for="Inhalt">Inhalt</label>
<input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="userstory.content">
</div>
<div class="form-group">
<label for="Prio">Prio</label>
<select class="form-control" id="prio" required name="prio" [(ngModel)]="userstory.priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<!-- </div> -->

75
src/app/userstory-form/userstory-form.component.ts
View File

@ -3,48 +3,47 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { BackendService, ScrumUserstory, Priority } from '../services/backend.service';
@Component({
selector: 'app-userstory-form',
templateUrl: './userstory-form.component.html',
styleUrls: ['./userstory-form.component.css']
selector: 'app-userstory-form',
templateUrl: './userstory-form.component.html',
styleUrls: [ './userstory-form.component.css' ]
})
export class UserstoryFormComponent implements OnInit {
@Input() public userstory: ScrumUserstory;
private editing: boolean;
constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {}
@Input()
public userstory: ScrumUserstory;
private editing: boolean;
ngOnInit(): void {
if (this.userstory === null || this.userstory === undefined) {
this.userstory = { title: '' };
this.editing = false;
} else {
this.editing = true;
}
document.getElementById('titleField').focus();
}
constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
onSubmit() {
if (this.editing) {
this.backendService.putUserstory(this.userstory).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
});
} else {
this.backendService.postUserstory(this.userstory).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
});
}
this.activeModalService.close(this.userstory);
}
onClose() {
this.activeModalService.dismiss(this.userstory);
}
ngOnInit(): void {
if (this.userstory === null || this.userstory === undefined) {
this.userstory = {title: ""};
this.editing = false;
}
else
{
this.editing = true;
}
}
onSubmit() {
if (this.editing) {
this.backendService.putUserstory(this.userstory).subscribe(response => {
if (response.status > 399) {
alert('Fehler');
}
});
}
else {
this.backendService.postUserstory(this.userstory).subscribe(response => {
if (response.status > 399) {
alert('Fehler');
}
});
}
this.activeModalService.close(this.userstory);
}
onClose(){
this.activeModalService.dismiss(this.userstory);
}
//focusTitleField() {
// document.getElementById('titleField').focus();
//}
}

10
src/assets/env.js
View File

@ -1,7 +1,7 @@
(function(window) {
window["env"] = window["env"] || {};
window['env'] = window['env'] || {};
// Environment variables
window["env"]["apiUrl"] = "https://localhost:5001";
window["env"]["debug"] = false;
})(this);
// Environment variables
window['env']['apiUrl'] = 'http://taskboard.dev.nig.gl/api';
window['env']['debug'] = false;
})(this);