Skip to content

GitLab

Commit 0dfbd9af authored by Muhammad Saroosh Asif's avatar Muhammad Saroosh Asif
Browse files

Commit

parent b861e96e
Hide whitespace changes
Inline Side-by-side
MIT-IOSAPP/src/app/app.component.css
View file @ 0dfbd9af
......@@ -20,11 +20,17 @@
flex: 1 1 auto;
}
mat-form-field.mat-form-field {
.search,
.langbar {
height: 60px;
color: #000;
}
.langbar {
width: 50px;
margin-right: 1%;
}
.btndiv {
margin-top: 2em !important;
}
......
MIT-IOSAPP/src/app/app.component.html
View file @ 0dfbd9af
<!-- first header -->
<div class="mainheader">
<mat-toolbar class="firstnav">
<!-- search bar -->
<form [style.fontSize.px]="15">
<mat-form-field appearance="outline">
<mat-form-field class="search" appearance="outline">
<input matInput placeholder="Search">
</mat-form-field>
</form>
<mat-icon>search</mat-icon>
<!-- spacer -->
<span class="spacer"></span>
<app-select-language></app-select-language>
<!-- select language -->
<mat-form-field class="langbar">
<mat-select [(value)]="selectedlang" (selectionChange)="translate.use($event.value)">
<mat-option *ngFor="let lang of translate.getLangs()" [value]="lang"> {{ lang }}</mat-option>
</mat-select>
</mat-form-field>
<!-- login button -->
<button mat-icon-button routerLink="/login">
<mat-icon routerLink="/login">person_outline</mat-icon>
</button>
<mat-icon routerLink="/login">person_outline</mat-icon>
</button>
</mat-toolbar>
<br>
......@@ -22,27 +27,39 @@
<!-- 2nd header -->
<mat-toolbar class="secondnav">
<div>
<!-- DIT-Logo -->
<div *ngIf="translate.currentLang === 'en'">
<img src="assets/DIT-Logo.png" alt="DIT logo" height="50">
</div>
<!-- THD-Logo -->
<div *ngIf="translate.currentLang === 'de'">
<img src="assets/THD-Logo.png" alt="THD logo" height="50">
</div>
<!-- spacer -->
<span class="spacer"></span>
<!-- pages -->
<div class="btndiv">
<button mat-icon-button routerLink="/">
{{'cHomepage'|translate}}
</button>
{{'cHomepage'|translate}}
</button>
<button mat-icon-button routerLink="/events">
{{'cEvents'|translate}}
</button>
{{'cEvents'|translate}}
</button>
<button mat-icon-button routerLink="/internalinfo">
{{'cInfo'|translate}}
</button>
{{'cInfo'|translate}}
</button>
<button mat-icon-button routerLink="/international">
{{'cInternational'|translate}}
</button>
{{'cInternational'|translate}}
</button>
<button mat-icon-button routerLink="/navigation">
{{'cNavigation'|translate}}
</button>
{{'cNavigation'|translate}}
</button>
</div>
</mat-toolbar>
</div>
<router-outlet></router-outlet>
\ No newline at end of file
<router-outlet></router-outlet>
<!-- <br>
<hr class="line">
<br> -->
\ No newline at end of file
MIT-IOSAPP/src/app/app.component.ts
View file @ 0dfbd9af
import { Component } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
......@@ -6,5 +7,14 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'mit-ws-20-21';
title = 'MIT-PROJECT-21-22';
selectedlang = 'en';
constructor(public translate: TranslateService) {
translate.addLangs(['en', 'de']);
translate.setDefaultLang('en');
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|de/) ? browserLang : 'en');
}
}
MIT-IOSAPP/src/app/app.module.ts
View file @ 0dfbd9af
......@@ -15,55 +15,46 @@ import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
import { NavigationComponent } from './navigation/navigation.component';
import { RoomsComponent } from './rooms/rooms.component';
import { LoginComponent, RegisterDialog } from './login/login.component';
// import { RoomsComponent } from './rooms/rooms.component';
import { LoginComponent } from './login/login.component';
import { InternationalComponent } from './international/international.component';
import { AdminComponent } from './admin/admin.component';
import { MatTableModule } from '@angular/material/table';
import { NewsComponent } from './news/news.component';
import { EventsComponent } from './events/events.component';
import { InternalinfoComponent } from './internalinfo/internalinfo.component';
import { JwtGuard } from './jwt.guard';
// Modules
import { InternationalModule } from './international/international.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from "@angular/flex-layout";
import { I18nModule } from './i18n/i18n.module';
// Material Components
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import {
MatSidenavModule,
} from '@angular/material/sidenav';
import {
MatListModule,
} from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { TranslateLoader, TranslateModule, TranslateService } from
'@ngx-translate/core';
import { I18nModule } from './i18n/i18n.module';
import { SelectLanguageComponent } from './select-language/select-language.component';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { NewsComponent } from './news/news.component';
import { EventsComponent } from './events/events.component';
import { InternalinfoComponent } from './internalinfo/internalinfo.component';
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
NavigationComponent,
RoomsComponent,
// RoomsComponent,
LoginComponent,
RegisterDialog,
SelectLanguageComponent,
AdminComponent,
NewsComponent,
EventsComponent,
InternalinfoComponent,
InternationalComponent,
],
imports: [
......@@ -74,17 +65,17 @@ import { InternalinfoComponent } from './internalinfo/internalinfo.component';
{ path: 'events', component: EventsComponent },
{ path: 'news', component: NewsComponent },
{ path: 'rooms', component: RoomsComponent },
// { path: 'rooms', component: RoomsComponent },
{ path: 'international', component: InternationalComponent },
// { path: 'international', loadChildren: './international/international.module#InternationalModule' },
{ path: 'admin', component: AdminComponent, canActivate: [JwtGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'internalinfo', component: InternalinfoComponent }
]),
InternationalModule,
FlexLayoutModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatListModule,
MatToolbarModule,
MatSidenavModule,
......@@ -101,7 +92,7 @@ import { InternalinfoComponent } from './internalinfo/internalinfo.component';
exports: [
RouterModule,
],
entryComponents: [LoginComponent, RegisterDialog],
entryComponents: [LoginComponent],
providers: [], // SocketioService
bootstrap: [AppComponent]
})
......
MIT-IOSAPP/src/app/homepage/homepage.component.css
View file @ 0dfbd9af
.heading {
font-family: 'Orator_Std_Medium';
color: #1a4273;
text-align: center;
margin-bottom: 5%;
......
MIT-IOSAPP/src/app/international/international.component.html
View file @ 0dfbd9af
<h1>{{'cInternational'|translate}}</h1>
<br>
<hr class="line">
<br>
<br>
<div class="grid">
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="3px">
<mat-grid-tile class="m1">
<pre><h1>EVENTS.</h1>
<h2>EXPLORE YOUR UNIVERSITY.</h2></pre>
<p>{{'cOutgoings'|translate}}</p>
</mat-grid-tile>
<mat-grid-tile class="m2">
<h1>CURRENT INFORMATION ABOUT THE CORONAVIRUS.</h1>
<p>{{'cExchangeS'|translate}}</p>
</mat-grid-tile>
<mat-grid-tile class="m3">
<h1>Apply Now.</h1>
</mat-grid-tile>
<mat-grid-tile class="m4">
<pre> <h1>BACHELOR.</h1>
<h1>MASTER.</h1></pre>
</mat-grid-tile>
<mat-grid-tile class="m5">
<h1>Research Groups</h1>
</mat-grid-tile>
<mat-grid-tile class="m6">
<h1>International students</h1>
</mat-grid-tile>
<mat-grid-tile class="m7">
<h1>INFORMATION</h1>
</mat-grid-tile>
<mat-grid-tile class="m8">
<h1>schedule</h1>
</mat-grid-tile>
<mat-grid-tile class="m9">
<h1>admissions</h1>
<p>{{'cInternationalR'|translate}}</p>
</mat-grid-tile>
</mat-grid-list>
</div>
\ No newline at end of file
MIT-IOSAPP/src/app/international/international.component.ts
View file @ 0dfbd9af
import { Component, OnInit } from '@angular/core';
import { SocketioService } from './socketio.service'
@Component({
selector: 'app-international',
templateUrl: './international.component.html',
styleUrls: ['./international.component.css']
})
export class InternationalComponent implements OnInit {
public socket: any;
newMessage: string;
messageList: string[] = [];
constructor(private socketService: SocketioService) { } // sets up connection to socketio-server
constructor() { }
ngOnInit(): void {
console.log("international component init");
/*
this.socketService.sendMessage("Hello");
this.socketService.getMessage();
*/
//this.socketService.setupSocketConnection();
// this.setupSocketConnection();
/*
this.socketService
.getEventListener()
.subscribe((msg: string) => {
console.log("Received and stored message: " + msg);
this.messageList.push(msg);
});
*/
this.socketService.setupSocketConnection();
// this.socketService.sendMessage("Hello World from socket.io");
}
/*
sendMessage() {
this.socketService.sendMessage(this.newMessage);
this.newMessage = '';
}
*/
/*
private setupSocketConnection() {
this.socketService.sendGetRequest();
this.socket = io('http://localhost:3000',
{
// path: '/'
reconnectionDelay: 1000,
reconnection: true,
reconnectionAttempts: 10,
transports: ['websocket'],
agent: false,
upgrade: false,
rejectUnauthorized: false
}
);
this.socket.on('connection', (socket) => {
console.log('connected to server');
});
this.socket.on('disconnect', () => { console.log('user disconnected'); });
this.socket.on('message', (msg) => { console.log('message: ' + msg); });
this.socket.send("Hello from client");
}
*/
} // class InternationalComponent
}
MIT-IOSAPP/src/app/international/international.module.ts deleted 100644 → 0
View file @ b861e96e
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { TranslateLoader, TranslateModule, TranslateService } from
'@ngx-translate/core';
import { I18nModule } from '../i18n/i18n.module';
import { InternationalComponent } from './international.component';
import { SocketioService } from './socketio.service';
//import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
// const config: SocketIoConfig = { url: 'http://localhost:3000', options: { path: '/international' } }; //
@NgModule({
declarations: [InternationalComponent],
imports: [
CommonModule,
I18nModule,
// SocketIoModule.forRoot(config),
],
providers: [SocketioService]
// exports: [I18nModule]
})
export class InternationalModule { }
MIT-IOSAPP/src/app/international/message.ts deleted 100644 → 0
View file @ b861e96e
export interface Message {
id: string;
body: string;
}
\ No newline at end of file
MIT-IOSAPP/src/app/international/socketio.service.ts deleted 100644 → 0
View file @ b861e96e
import { Injectable } from '@angular/core';
//import { HttpClient } from '@angular/common/http';
// import { Socket } from 'ngx-socket-io';
import { io } from 'socket.io-client';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { Message } from './message';
import { environment } from '../../environments/environment';
@Injectable({
providedIn: 'root' // 'root'
})
export class SocketioService {
socket: any;
// apiUrl = environment.SOCKET_ENDPOINT;
public constructor() { // private socket: Socket private httpClient: HttpClient) {
console.log("SocketioService Constructor");
/*
socket.connect();
console.log(socket);
*/
}
/*
public getEventListener() {
return this.socket.fromEvent('message');
}
public sendMessage(msg: string) {
this.socket.emit("message", msg);
}
getMessage() {
return this.socket
.fromEvent("message")
.pipe(map((data: any) => data.msg));
}
*/
/*
public getMessages = () => {
return Observable.create((observer) => {
this.socket.on('message', (message) => {
observer.next(message);
});
});
}
*/
public setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT, {
// path: '/'
});
//this.socket.connect();
console.log("SocketioService this.socket");
console.log(this.socket);
this.socket.emit('message', 'Hello there from Angular.');
return this;
}
} // class SocketioService
// send get to upgrade to websocket
/*
sendGetRequest(): Observable<any> {
console.log("Calling: " + environment.SOCKET_ENDPOINT);
return this.httpClient.get<any>(environment.SOCKET_ENDPOINT)
.pipe(
catchError(this.handleError<any>('get', []))
); // this.apiUrl
}
private handleError<T>(operation = 'operation', result?: T) {
console.error("handleError:");
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
*/
// private socket: Socket
/*
*/
/*
getMessage() {
return this.socket
.fromEvent("message")
.pipe(map((data) => data));
}
}
*/
\ No newline at end of file
MIT-IOSAPP/src/app/login/login.component.html
View file @ 0dfbd9af
<h1>{{'cLogin'|translate}}</h1>
<br>
<div>
<h2>{{'cLoginText'|translate}}</h2>
<form [formGroup]="loginForm" (ngSubmit)="login()">
<p [ngClass]="{ 'has-error': isSubmitted && formControls.username.errors }">
<input type="username" placeholder="Username" formControlName="username">
</p>
<div *ngIf="isSubmitted && formControls.email.errors">
<div *ngIf="formControls.email.errors.required">E-Mail is required</div>
</div>
<p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
<input type="email" placeholder="E-Mail" formControlName="email">
</p>
<div *ngIf="isSubmitted && formControls.email.errors">
<div *ngIf="formControls.email.errors.required">E-Mail is required</div>
</div>
<p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
<input type="password" placeholder="Password" formControlName="password">
</p>
<div *ngIf="isSubmitted && formControls.password.errors">
<div *ngIf="formControls.password.errors.required">Password is required</div>
</div>
<p>
<button mat-button type="submit" color="warn">LOGIN</button>
<!-- <input type="submit" value="Log in">-->
</p>
<p>Not registered yet? <button mat-flat-button (click)="openDialog()">Register</button></p>
</form>
</div>
<mat-card class="logincard">
<form [formGroup]="loginForm" (ngSubmit)="login()">
<div>
<mat-label>Email</mat-label><br>
<input type="email" id="email" name="email" placeholder="Email" required formControlName="email" [ngClass]="{ 'has-error': formControls.email.errors }" />
<div *ngIf="formControls.email.errors">
<mat-error *ngIf="formControls.email.errors?.required">Email is required</mat-error>
<mat-error *ngIf="formControls.email.errors?.email">Email must be valid</mat-error>
</div>
</div>
<br>
<div>
<mat-label>Password</mat-label><br>
<input type="password" id="password" name="password" placeholder="Password" required formControlName="password" [ngClass]="{ 'has-error': formControls.password.errors }">
<div *ngIf="formControls.password.errors">
<mat-error *ngIf="formControls.password.errors?.required">Password is required</mat-error>
<mat-error *ngIf="formControls.password.errors?.password">Password must be valid</mat-error>
</div>
</div>
<br>
<p><button mat-raised-button class="button">Login</button></p>
</form>
<p>Not registered yet? <button mat-raised-button>Register</button></p>
<!-- <p>Not registered yet? <button mat-raised-button (click)="register()">Register</button></p> -->
</mat-card>
</div>
\ No newline at end of file
MIT-IOSAPP/src/app/login/login.component.scss deleted 100644 → 0
View file @ b861e96e
.form-error {
color: red !important;
}
.has-error {
margin-bottom: 5px;
}
\ No newline at end of file
MIT-IOSAPP/src/app/international/socketio.service.spec.ts → MIT-IOSAPP/src/app/login/login.service.spec.ts
View file @ 0dfbd9af
import { TestBed } from '@angular/core/testing';
import { SocketioService } from './socketio.service';
import { LoginService } from './login.service';
describe('SocketioService', () => {
let service: SocketioService;
describe('LoginService', () => {
let service: LoginService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SocketioService);
service = TestBed.inject(LoginService);
});
it('should be created', () => {
......
MIT-IOSAPP/src/app/login/register-dialog.html
View file @ 0dfbd9af
<h1 mat-dialog-title>Hello {{data.username}}, please register with the following data</h1>
<!-- <h1 mat-dialog-title>Hello {{data.username}}, please register with the following data</h1>
<div mat-dialog-content>
<p>Enter your username, email and password</p>
<mat-form-field>
......@@ -21,4 +21,4 @@
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button mat-dialog-close="data.username" cdkFocusInitial>Ok</button>
</div>
</div> -->
\ No newline at end of file
MIT-IOSAPP/src/app/register/register.component.spec.ts 0 → 100644
View file @ 0dfbd9af
import { async, ComponentFixture, TestBed } from '@angular/core/testing';