Commit 82c24d21 authored by Lukas Burgey's avatar Lukas Burgey

Rework the component structure

parent 9261c69b
<app-header></app-header>
<!--
<div class="outer">
<div class="inner">
<div class="mat-typography">
<app-body></app-body>
</div>
<header feudal-header></header>
<div class="mat-typography" class="body" >
<div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px;" class="centered">
<div *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
<div style="margin-bottom: 50px;">
<h3>Your services</h3>
<mat-accordion *ngIf="(userService.subscribeServices() | async) as services; else noServices">
<app-service *ngFor="let service of services" [service]="service"></app-service>
</mat-accordion>
<ng-template #noServices>
<p>
You are not permitted to use any services.
</p>
</ng-template>
</div>
<div>
<h3>Your Virtual Organisations</h3>
<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos; else noVOs">
<app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
</mat-accordion>
<ng-template #noVOs>
<p>
You are not member in any Virtual Organisations.
</p>
</ng-template>
</div>
</div>
<ng-template #noCredentials>
<div class="mat-typography">
<div style="margin-bottom: 50px;">
<p>
Before you can start using FEUDAL you need to upload an SSH public key.
Please do so below.
</p>
<p>
Once you have uploaded a key, the SSH Key Management will be available in the toolbar above.
</p>
</div>
<app-sshkeys></app-sshkeys>
</div>
</ng-template>
</div>
</div>
-->
<app-body></app-body>
<app-footer></app-footer>
<footer feudal-footer class="footer"></footer>
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-root',
selector: '[feudal-root]',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() { }
constructor(
public userService: UserService,
) { }
}
......@@ -26,7 +26,6 @@ import { SshkeysModule } from './sshkeys/sshkeys.module';
// declarations
import { AppComponent } from './app.component';
import { BodyComponent } from './body/body.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { VoDataComponent } from './vo-data/vo-data.component';
......@@ -54,7 +53,6 @@ import { DeploymentActionRowComponent } from './deployment-action-row/deployment
declarations: [
AppComponent,
HeaderComponent,
BodyComponent,
FooterComponent,
VoDataComponent,
ServiceComponent,
......
<div class="body" class="mat-typography" class="body" >
<div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px; margin: auto;">
<div *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
<div style="margin-bottom: 50px;">
<h3>Your services</h3>
<mat-accordion *ngIf="(userService.subscribeServices() | async) as services; else noServices">
<app-service *ngFor="let service of services" [service]="service"></app-service>
</mat-accordion>
<ng-template #noServices>
<p>
You are not permitted to use any services.
</p>
</ng-template>
</div>
<div>
<h3>Your Virtual Organisations</h3>
<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos; else noVOs">
<app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
</mat-accordion>
<ng-template #noVOs>
<p>
You are not member in any Virtual Organisations.
</p>
</ng-template>
</div>
</div>
<ng-template #noCredentials>
<div class="mat-typography">
<div style="margin-bottom: 50px;">
<p>
Before you can start using FEUDAL you need to upload an SSH public key.
Please do so below.
</p>
<p>
Once you have uploaded a key, the SSH Key Management will be available in the toolbar above.
</p>
</div>
<app-sshkeys></app-sshkeys>
</div>
</ng-template>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
@Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {
constructor(
public userService: UserService,
) {
}
ngOnInit() {
}
}
......@@ -9,6 +9,6 @@
<input matInput required
placeholder="{{stateItem.questionnaire[key]}}" [(ngModel)]="answers[key]" name="key">
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!questionnaireForm.form.valid">Submit</button>
<button mat-dialog-close mat-raised-button color="primary" type="submit" [disabled]="!questionnaireForm.form.valid">Submit</button>
</form>
</div>
<footer class="docs-footer">
<div class="docs-footer-list" class="mat-typography">
<div>
<span>
<a href="/static/privacy_policy.html">FEUDAL Privacy Policy</a>
</span>
</div>
</div>
</footer>
<div class="mat-typography">
<div style="display: flex;">
<span class="centered">
<a href="/static/privacy_policy.html">FEUDAL Privacy Policy</a>
</span>
</div>
</div>
.docs-footer {
padding: 12px;
font-size: 12px;
margin-top: 40px;
}
.docs-footer-list {
align-items: center;
display: flex;
flex-flow: row wrap;
padding: 8px;
}
.docs-footer-logo {
flex: 1;
}
.docs-footer-angular-logo {
height: 50px;
}
.docs-footer-version {
flex: 1;
text-align: center;
}
.docs-footer-copyright {
display: flex;
flex: 1;
justify-content: flex-end;
flex-direction: column;
min-width: 225px;
text-align: center;
}
.docs-footer-logo span {
display: inline-block;
line-height: 50px;
margin: 0 40px;
vertical-align: bottom;
a {
font-size: 16px;
padding: 0;
text-decoration: none;
color: inherit;
&:hover {
text-decoration: underline;
}
}
}
@media screen and (max-width: 884px){
.docs-footer-list {
flex-direction: column;
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
selector: '[feudal-footer]',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
......
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import { IdP } from '../types/types.module';
import { IdpService } from '../idp.service';
import { DialogService } from '../dialogues/dialog.service';
import { IdP } from '../types/types.module';
@Component({
selector: 'app-header',
selector: '[feudal-header]',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
......
......@@ -262,10 +262,15 @@ export class UserService {
}
public sentQuestionnaire(stateItemID: number, answers: Object) {
return this.http.post<Deployment>('/backend/api/questionnaire?id='+String(stateItemID), answers).pipe(
return this.http.patch<DeploymentState>(
`/rest/dep-state?id=${ stateItemID }`,
{
'questionnaire': answers,
},
).pipe(
catchError(this.handleError(true, "Error submitting questionnaire")),
).subscribe(
(dep: Deployment) => this.updateDeployment(dep),
(state: DeploymentState) => this.updateDeploymentState(state),
this.logErrorAndFetch,
);
}
......
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FEUDAL</title>
<base href="/">
<head>
<meta charset="utf-8">
<title>FEUDAL</title>
<base href="/">
<!-- favicon stuff -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"><Paste>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body feudal-root></body>
</html>
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body {
height: 100%;
}
body {
margin: 0px;
display: flex;
flex-direction: column
}
.body {
margin: 50px;
margin-top: 50px;
margin-bottom: 15px;
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
padding-bottom: 5px;
}
table {
......@@ -101,3 +114,8 @@ mat-checkbox {
mat-panel-description > * {
margin: 0px 16px 0px auto;
}
.centered {
margin-left: auto;
margin-right: auto;
}
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