{{data.title}}
{{data.message}}
-
-
-
+
+
diff --git a/src/app/graph-view/graph-view-page/graph-view-page.component.css b/src/app/graph-view/graph-view-page/graph-view-page.component.css
index 9287e57..6d498e8 100644
--- a/src/app/graph-view/graph-view-page/graph-view-page.component.css
+++ b/src/app/graph-view/graph-view-page/graph-view-page.component.css
@@ -8,15 +8,12 @@
font-weight: bold;
}
-.bw {
- background-color: white;
-}
-
.memberList {
- padding-top: 15px;
+ position: fixed;
+ top: 80px;
right: 10px;
- text-align: right;
direction: rtl;
+ max-width: 290px;
}
.memberList ul {
@@ -34,15 +31,49 @@ mat-icon {
font-size: 15px;
}
-.container {
- width: 1500px;
- margin: 0 auto;
+.interaction_modes {
+ position: fixed;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.graph-view {
+ width: 100%;
+ height: 100%;
+}
+
+.mat-icon.share-icon {
+ height:32px !important;
+ width:32px !important;
+ font-size:32px !important;
+}
+
+.recommendation-card {
+ position: fixed;
+ max-width: 300px;
+ margin: 24px;
+}
+
+.example-header-image {
+ background-image: url('../../../assets/default-avatar.png');
+ background-size: cover;
+}
+
+.recommendation-link {
+ padding: 8px;
+ display: flex;
+ cursor: pointer;
}
-.spaceContent {
- width: 1150px;
+.recommendation-link:hover {
+ background-color: #F8F8FF;
}
-.spaceInfo {
- width: 400px;
+.img-avatar {
+ border-radius: 50%;
+ height: 32px;
+ width: 32px;
+ display: block;
+ object-fit: cover;
}
\ No newline at end of file
diff --git a/src/app/graph-view/graph-view-page/graph-view-page.component.html b/src/app/graph-view/graph-view-page/graph-view-page.component.html
index 29cec7a..4f51f7a 100644
--- a/src/app/graph-view/graph-view-page/graph-view-page.component.html
+++ b/src/app/graph-view/graph-view-page/graph-view-page.component.html
@@ -1,53 +1,85 @@
-
-
-
-
-
- {{getInteractionModeLabel(m)}}
-
-
-
+
+
+
+
+ Recommended For You
+
+
+
+
+
+ 
+
+
+
+ {{r.authorName}}
+ ·
+ {{GetPastTime(r)}}
+
+ {{r.question.text}}
+
+
+
+
+
+ {
+ if (this.recommenderQuestions.length > 0) {
+ return;
+ }
+ this.recommendationsLoaded = false;
+ return this.agentService.getAgent().then((agent) => {
+ return this.recommendationService.getRecommendedQuestionsForSpace(agent.agentid, this.spaceId)
+ .then((res: RecommenderQuestion[]) => {
+ this.recommenderQuestions = res;
+ }).catch(() => {
+ console.error("error while getting recommendations...");
+ }).finally(() => {
+ this.recommendationsLoaded = true;
+ })
});
}
+ recClicked(rq: RecommenderQuestion): void {
+ //let questionIds = r.questionNeighbourIds;
+ let questionIds = [];
+ questionIds.push(rq.question.questionId);
+ let navigationExtras: NavigationExtras = {
+ queryParams: {
+ sq: JSON.stringify(questionIds)
+ }
+ }
+ this.graphViewService.recommenderSubject.next(questionIds);
+ this.router.navigate(['/spaces', rq.question.spaceId], navigationExtras);
+ }
+
+ GetPastTime(rq: RecommenderQuestion): string {
+ // TODO: This is way to complicated!
+ let date = new Date(rq.question.timestampCreated);
+ let dateNow = new Date();
+
+ if (date.getFullYear() === dateNow.getFullYear()) {
+ if (date.getMonth() === dateNow.getMonth()) {
+ if (date.getDate() === dateNow.getDate()) {
+ if (date.getHours() === dateNow.getHours()) {
+ if (date.getMinutes() === dateNow.getMinutes()) {
+ // show seconds
+ return (dateNow.getSeconds() - date.getSeconds()) + ' second(s) ago';
+ } else {
+ // show minutes
+ return (dateNow.getMinutes() - date.getMinutes()) + ' minute(s) ago';
+ }
+ } else {
+ // show hours
+ return (dateNow.getHours() - date.getHours()) + ' hour(s) ago';
+ }
+ } else {
+ // show days
+ return (dateNow.getDate() - date.getDate()) + ' day(s) ago';
+ }
+ } else {
+ // show month
+ return (dateNow.getMonth() - date.getMonth()) + ' month(s) ago';
+ }
+ } else {
+ // show years
+ // year change
+ if (dateNow.getFullYear() - date.getFullYear() === 1) {
+ // show month
+ return (12 - date.getMonth() + date.getMonth()) + ' month(s) ago';
+ }
+ return (dateNow.getFullYear() - date.getFullYear()) + 'year(s) ago';
+ }
+ }
+
ngOnDestroy() {
- this.paramSubscription.unsubscribe();
- this.queryParamSubscription.unsubscribe();
+ this.subscription.unsubscribe();
}
- // @HostListener('window:resize', ['$event'])
- // onWindowResize(event) {
- // this.adjustSize();
- // }
public getInteractionModes() {
const modes = [];
for (const mode in GraphInteractionMode) {
diff --git a/src/app/graph-view/graph-view.module.ts b/src/app/graph-view/graph-view.module.ts
index 13c4d26..d7115f9 100644
--- a/src/app/graph-view/graph-view.module.ts
+++ b/src/app/graph-view/graph-view.module.ts
@@ -21,6 +21,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
imports: [
@@ -37,7 +38,8 @@ import { MatCardModule } from '@angular/material/card';
SharedModule,
MatIconModule,
MatExpansionModule,
- MatCardModule
+ MatCardModule,
+ MatProgressBarModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [
diff --git a/src/app/graph-view/graph-view/graph-data-model/graph-node.ts b/src/app/graph-view/graph-view/graph-data-model/graph-node.ts
index 9c7f4ba..9021f6e 100644
--- a/src/app/graph-view/graph-view/graph-data-model/graph-node.ts
+++ b/src/app/graph-view/graph-view/graph-data-model/graph-node.ts
@@ -24,9 +24,9 @@ export class GraphNode implements SimulationNodeDatum {
constructor(context: CanvasRenderingContext2D, public id: string,
- public question: Question, public questionAuthor: string, public questionVotes: QuestionVote[],
- relations: Relation[], public relationAuthors: string[], relationVotes: RelationVote[][],
- public isSelected = false, public isSeed = false) {
+ public question: Question, public questionAuthor: string, public questionVotes: QuestionVote[],
+ relations: Relation[], public relationAuthors: string[], relationVotes: RelationVote[][],
+ public isSelected = false, public isSeed = false) {
this.relations = relations.slice(0);
this.lines = this.wrapText((s) => context.measureText(s).width);
for (let i = 0; i < relations.length; i++) {
@@ -156,6 +156,7 @@ export class GraphNode implements SimulationNodeDatum {
this.bubbleScaleFactor = n.bubbleScaleFactor;
this.questionVotes = n.questionVotes;
this.relationVotes = n.relationVotes;
+ this.relationAuthors = n.relationAuthors;
return true;
}
@@ -171,6 +172,7 @@ export class GraphNode implements SimulationNodeDatum {
this.bubbleScaleFactor === n.bubbleScaleFactor &&
this.questionVotes.length === n.questionVotes.length &&
this.questionVotes.map((v, i) => v.value === n.questionVotes[i].value).reduce((p, c) => p && c, true) &&
+ this.relationVotes.size === n.relationVotes.size &&
this.relations.map(r =>
this.relationVotes.get(r.relationId).length === n.relationVotes.get(r.relationId).length &&
this.relationVotes.get(r.relationId).map((v, i) => v.value === n.relationVotes.get(r.relationId)[i].value &&
diff --git a/src/app/graph-view/graph-view/graph-view.component.html b/src/app/graph-view/graph-view/graph-view.component.html
index b1df56e..cb5e15c 100644
--- a/src/app/graph-view/graph-view/graph-view.component.html
+++ b/src/app/graph-view/graph-view/graph-view.component.html
@@ -1,2 +1 @@
-
+
\ No newline at end of file
diff --git a/src/app/graph-view/graph-view/graph-view.component.ts b/src/app/graph-view/graph-view/graph-view.component.ts
index c4ffc52..6012fe2 100644
--- a/src/app/graph-view/graph-view/graph-view.component.ts
+++ b/src/app/graph-view/graph-view/graph-view.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import {ForceLink, Simulation} from 'd3-force';
import {GraphNode} from './graph-data-model/graph-node';
import {Edge} from './graph-data-model/edge';
@@ -11,7 +11,7 @@ import {NodeInteractionBehavior} from './interaction-behaviors/node-interaction-
import {AddChildNodeBehavior} from './interaction-behaviors/add-child-node-behavior';
import {EditQuestionBehavior} from './interaction-behaviors/edit-question-behavior';
import {AddRelationBehavior} from './interaction-behaviors/add-relation-behavior';
-import {Subscription} from 'rxjs';
+import {BehaviorSubject, Subscription} from 'rxjs';
import {AgentService} from '../../shared/agent/agent.service';
import {QuestionVoteService} from '../../shared/question-vote/question-vote.service';
import {EdgeInteractionBehavior} from './interaction-behaviors/edge-interaction-behavior';
@@ -29,11 +29,11 @@ import { D3DragEvent, D3ZoomEvent } from 'd3';
})
export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
@ViewChild('d3root') private d3Root: ElementRef;
- @Input('height') public height = 800;
- @Input('width') public width = 1100;
- @Input('interactionMode') private interactionMode: GraphInteractionMode;
- @Input('spaceId') private spaceId = 'dummy';
- @Input('selectedQuestions') private selectedQuestions: string[];
+ @Input() height = 800;
+ @Input() width = 1100;
+ @Input() private interactionMode: GraphInteractionMode;
+ @Input() private spaceId = 'dummy';
+ @Input() private selectedQuestions: string[];
private loadedSpaceId;
private network: Network;
@@ -44,13 +44,22 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterVi
private d3Sim: Simulation;
private activatedInteractionMode: GraphInteractionMode;
private updateSubscription: Subscription;
+ private recommendingSubscription: Subscription;
constructor(private graphViewService: GraphViewService, private agentService: AgentService, private dialog: MatDialog) {
this.transform = d3.zoomIdentity;
}
- ngOnInit() {}
+ ngOnInit(): void {
+ this.recommendingSubscription = this.graphViewService.recommending.subscribe(questions => {
+ if (questions !== undefined && questions.length > 0) {
+ this.selectedQuestions = questions;
+ this.initData();
+ this.initVisualization();
+ }
+ });
+ }
ngAfterViewInit(): void {
this.canvas = this.d3Root.nativeElement;
@@ -59,30 +68,38 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterVi
this.d3Sim = d3.forceSimulation() as Simulation;
this.d3Sim.force('link', d3.forceLink().id((n, i, d) => n.id));
this.d3Sim.force('charge', d3.forceManyBody());
+
this.d3Sim.force('center', d3.forceCenter(this.width / 2, this.height / 2));
this.d3Sim.force('collide', d3.forceCollide((node: GraphNode) => (node as GraphNode).radius * 1.2));
- this.updateSubscription = this.graphViewService.getUpdateObservable().subscribe(updateData => this.processUpdate(updateData));
+ this.updateSubscription = this.graphViewService.update.subscribe(updateData => this.processUpdate(updateData));
this.initData();
this.initVisualization();
this.updateInteractionMode();
}
- ngOnDestroy() {
+ ngOnDestroy(): void {
this.updateSubscription.unsubscribe();
+ this.recommendingSubscription.unsubscribe();
this.graphViewService.initServiceForSpace(null);
}
- ngOnChanges() {
+ ngOnChanges(changes: SimpleChanges): void {
if (this.d3Sim) {
+ if (changes['selectedQuestions']) {
+ this.selectedQuestions = changes['selectedQuestions'].currentValue;
+ }
+
if (this.spaceId !== this.loadedSpaceId) {
this.initData();
this.initVisualization();
this.updateInteractionMode();
}
+
this.network.getNodes().forEach((node) => {
node.isSelected = (this.selectedQuestions.indexOf(node.id) !== -1);
});
+ // visual update of selection
this.updateInteractionMode();
}
}
@@ -123,7 +140,7 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterVi
d3Sim.restart();
}
- private updateInteractionMode() {
+ private updateInteractionMode(): void {
if (this.activatedInteractionMode === this.interactionMode) {
// no change
return;
@@ -188,6 +205,7 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterVi
}
event.subject.fx = null;
event.subject.fy = null;
+ this.updateSimulation();
})
)
.call(d3.zoom()
@@ -266,8 +284,8 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterVi
.on('end', (event: D3DragEvent) => {
if (event.subject !== undefined && event.subject.question !== undefined) {
const n = event.subject as GraphNode;
- const dx = this.transform.invertX(event.x) - n.x;
- const dy = this.transform.invertY(event.y) - n.y;
+ const dx = event.dx;
+ const dy = event.dy;
if (Math.pow(n.radius, 2) > Math.pow(dx, 2) + Math.pow(dy, 2)) {
nodeInteractionBehavior.interactWith(n).then(() => {
this.updateSimulation();
@@ -333,13 +351,13 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy, AfterVi
private processUpdate(updateData: UpdateData) {
const context = this.d3Root.nativeElement.getContext('2d');
const isSelected = this.selectedQuestions !== undefined &&
- this.selectedQuestions.findIndex((id) => id === updateData.question.questionId) !== -1;
+ this.selectedQuestions.findIndex((id) => id === updateData.question.questionId) !== -1;
const seedQuestion = this.graphViewService.getSeedQuestion();
const isSeed = (seedQuestion ? seedQuestion.questionId : null) === updateData.question.questionId;
const node = new GraphNode(context, updateData.question.questionId,
- updateData.question, updateData.questionAuthor, updateData.questionVotes,
- updateData.relations, updateData.relationAuthors, updateData.relationVotes,
- isSelected, isSeed);
+ updateData.question, updateData.questionAuthor, updateData.questionVotes,
+ updateData.relations, updateData.relationAuthors, updateData.relationVotes,
+ isSelected, isSeed);
if (this.network.addOrUpdateNode(node)) {
this.updateSimulation();
}
diff --git a/src/app/graph-view/graph-view/graph-view.service.ts b/src/app/graph-view/graph-view/graph-view.service.ts
index 4b94f9d..d7c018e 100644
--- a/src/app/graph-view/graph-view/graph-view.service.ts
+++ b/src/app/graph-view/graph-view/graph-view.service.ts
@@ -3,7 +3,7 @@ import {Question} from '../../shared/rest-data-model/question';
import {Relation} from '../../shared/rest-data-model/relation';
import {QuestionService} from '../../shared/question/question.service';
import {RelationService} from '../../shared/relation/relation.service';
-import {Subject, Observable} from 'rxjs';
+import {Subject, BehaviorSubject} from 'rxjs';
import {MyspacesService} from '../../shared/myspaces/myspaces.service';
import {Router} from '@angular/router';
import {RelationType} from './graph-data-model/relation-type.enum';
@@ -27,7 +27,13 @@ export class GraphViewService {
private spaceId = null;
private isPollScheduled = false;
private observedQuestionIds: string[] = [];
- private update = new Subject();
+ private updateSubject = new Subject();
+ private loadingSubject = new BehaviorSubject(false);
+ public recommenderSubject = new BehaviorSubject([]);
+
+ public update = this.updateSubject.asObservable();
+ public loading = this.loadingSubject.asObservable();
+ public recommending = this.recommenderSubject.asObservable();
constructor(private questionService: QuestionService, private relationService: RelationService,
private questionVoteService: QuestionVoteService, private relationVoteService: RelationVoteService,
@@ -40,10 +46,6 @@ export class GraphViewService {
this.observedQuestionIds = [];
}
- public getUpdateObservable(): Observable {
- return this.update.asObservable();
- }
-
public registerQuestionForUpdate(questionId: string): boolean {
if (this.observedQuestionIds.indexOf(questionId) === -1) {
this.observedQuestionIds.push(questionId);
@@ -61,7 +63,8 @@ export class GraphViewService {
return false;
}
- public addQuestionToParentAndRegisterForUpdate(question: Question, parentQuestionId: string) {
+ public addQuestionToParentAndRegisterForUpdate(question: Question, parentQuestionId: string): void {
+ this.loadingSubject.next(true);
this.questionService.postQuestion(this.spaceId, question).then((q) => {
const relation = new Relation();
relation.firstQuestionId = parentQuestionId;
@@ -79,11 +82,14 @@ export class GraphViewService {
this.updateSelectionRouteParams(q.questionId, true);
this.registerQuestionForUpdate(q.questionId);
this.notifyObservers();
+ }).finally(() => {
+ this.loadingSubject.next(false);
});
});
}
public updateQuestion(questionId: string, text: string) {
+ this.loadingSubject.next(true);
const question = new Question();
question.text = text;
return this.questionService.putQuestion(this.spaceId, questionId, question).then((newQ) => {
@@ -91,10 +97,13 @@ export class GraphViewService {
this.questions.push(newQ);
this.notifyObservers();
return newQ;
+ }).finally(() => {
+ this.loadingSubject.next(false);
});
}
public updateRelation(relationId: string, relationType: string) {
+ this.loadingSubject.next(true);
const relation = new Relation();
relation.name = relationType;
return this.relationService.putRelation(this.spaceId, relationId, relation).then((newR) => {
@@ -102,10 +111,13 @@ export class GraphViewService {
this.relations.push(newR);
this.notifyObservers();
return newR;
+ }).finally(() => {
+ this.loadingSubject.next(false);
});
}
public updateQuestionVote(questionId: string, agentId: string, vote: number) {
+ this.loadingSubject.next(true);
const questionVote = new QuestionVote();
questionVote.value = vote;
return this.questionVoteService.putQuestionVote(this.spaceId, questionId, agentId, questionVote)
@@ -118,10 +130,13 @@ export class GraphViewService {
qvArr.push(newQV);
this.notifyObservers();
return newQV;
+ }).finally(() => {
+ this.loadingSubject.next(false);
});
}
public updateRelationVote(relationId: string, agentId: string, vote: number) {
+ this.loadingSubject.next(true);
const relationVote = new RelationVote();
relationVote.value = vote;
return this.relationVoteService.putRelationVote(this.spaceId, relationId, agentId, relationVote)
@@ -134,22 +149,31 @@ export class GraphViewService {
rvArr.push(newRV);
this.notifyObservers();
return newRV;
+ }).finally(() => {
+ this.loadingSubject.next(false);
});
}
public addRelation(relation: Relation) {
- this.relationService.postRelation(this.spaceId, relation).then((r) => {
+ this.loadingSubject.next(true);
+ this.relationService.postRelation(this.spaceId, relation).then((r: Relation) => {
this.relations.push(r);
this.relationVotes.set(r.relationId, []);
this.relationAuthors.set(r.relationId, this.authGuardService.getUserName());
this.notifyObservers();
+ }).finally(() => {
+ this.loadingSubject.next(false);
});
}
public requestUpdate() {
if (this.spaceId !== null) {
- this.fetchAll(this.spaceId);
- this.fetchSubscribers(this.spaceId);
+ this.loadingSubject.next(true);
+ this.fetchAll(this.spaceId).then(() => {
+ this.fetchSubscribers(this.spaceId).finally(() => {
+ this.loadingSubject.next(false);
+ })
+ });
}
}
@@ -202,7 +226,7 @@ export class GraphViewService {
return this.relationAuthors.get(relationId);
}
- private fetchAll(spaceId: string) {
+ private fetchAll(spaceId: string): Promise {
// load all questions and all relations of the space
const questionsAndRelationsPromise = Promise.all([
this.questionService.getQuestionsOfSpace(spaceId).then((res: Question[]) => {
@@ -222,7 +246,7 @@ export class GraphViewService {
]);
// when all questions and relations are loaded
- questionsAndRelationsPromise.then(() => {
+ return questionsAndRelationsPromise.then(() => {
if (this.spaceId === spaceId) {
// load all related data for observed questions and relations
const allRelatedDataPromise = Promise.all(this.questions.filter(
@@ -239,18 +263,18 @@ export class GraphViewService {
this.schedulePolling();
});
}
- });
+ })
}
- private fetchSubscribers(spaceId: string) {
- this.myspacesService.getSpaceSubscribers(this.spaceId);
+ private fetchSubscribers(spaceId: string): Promise {
+ return this.myspacesService.getSpaceSubscribers(this.spaceId);
}
private loadRelationRelatedData(spaceId: string, r: Relation): Promise {
return Promise.all([
this.agentService.getAgentName(r.authorId)
.then(ra => this.relationAuthors.set(r.relationId, ra))
- ]);
+ ])
}
private loadQuestionRelatedData(spaceId: string, q: Question): Promise {
@@ -273,7 +297,7 @@ export class GraphViewService {
const votesForRelations = relationsForQuestion.map(r => this.getVotesForRelation(r.relationId));
const authorsForRelations = relationsForQuestion.map(r => this.getAuthorForRelation(r.relationId));
if (question !== undefined && relationsForQuestion !== undefined) {
- this.update.next({
+ this.updateSubject.next({
question: question,
questionAuthor: questionAuthor,
questionVotes: votesForQuestion !== undefined ? votesForQuestion : [],
@@ -288,7 +312,7 @@ export class GraphViewService {
private schedulePolling() {
if (!this.isPollScheduled) {
this.isPollScheduled = true;
- window.setTimeout(() => this.poll(), 5000);
+ window.setTimeout(() => this.poll(), 12000);
}
}
diff --git a/src/app/graph-view/graph-view/interaction-behaviors/add-child-node-behavior.ts b/src/app/graph-view/graph-view/interaction-behaviors/add-child-node-behavior.ts
index 816ee8c..d8c543f 100644
--- a/src/app/graph-view/graph-view/interaction-behaviors/add-child-node-behavior.ts
+++ b/src/app/graph-view/graph-view/interaction-behaviors/add-child-node-behavior.ts
@@ -13,7 +13,7 @@ export class AddChildNodeBehavior extends NodeInteractionBehavior {
interactWith(node: GraphNode): Promise {
const dialogRef = this.dialog.open(CreateQuestionDialogComponent, {
- width: '250px',
+ width: '300px',
data: {
title: 'Ask a Follow Up Question',
message: 'Enter the question. Parent question is: ' + node.question.text,
diff --git a/src/app/graph-view/graph-view/interaction-behaviors/edit-question-behavior.ts b/src/app/graph-view/graph-view/interaction-behaviors/edit-question-behavior.ts
index e5c56f9..15948f7 100644
--- a/src/app/graph-view/graph-view/interaction-behaviors/edit-question-behavior.ts
+++ b/src/app/graph-view/graph-view/interaction-behaviors/edit-question-behavior.ts
@@ -29,7 +29,7 @@ export class EditQuestionBehavior extends NodeInteractionBehavior {
lastModified: new Date(node.question.timestampLastModified).toLocaleString(),
inputHeading: `${authorName} (${node.question.timestampLastModified})`,
votes: votes,
- vote: myVote ? myVote.value : undefined
+ vote: myVote ? myVote.value : null
};
const dialogRef = this.dialog.open(InspectDialogComponent, {data: data});
diff --git a/src/app/graph-view/inspect-dialog/inspect-dialog.component.html b/src/app/graph-view/inspect-dialog/inspect-dialog.component.html
index 3ee7db6..afe3e6b 100644
--- a/src/app/graph-view/inspect-dialog/inspect-dialog.component.html
+++ b/src/app/graph-view/inspect-dialog/inspect-dialog.component.html
@@ -33,6 +33,6 @@
-
- Subscribing to space…
-
+
+
+
+ {{r.authorName}}
+ ·
+ {{GetPastTime(r)}}
+
+ {{r.question.text}}
+
+
+
+
+
+ Help
+
+
+
+
diff --git a/src/app/graph-view/graph-view-page/graph-view-page.component.ts b/src/app/graph-view/graph-view-page/graph-view-page.component.ts
index ff378a6..0d72a13 100644
--- a/src/app/graph-view/graph-view-page/graph-view-page.component.ts
+++ b/src/app/graph-view/graph-view-page/graph-view-page.component.ts
@@ -1,52 +1,90 @@
-import {AfterViewInit, Component, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
import {GraphInteractionMode} from '../graph-view/graph-data-model/graph-interaction-mode.enum';
-import {ActivatedRoute, Router} from '@angular/router';
-import {Subscription} from 'rxjs';
-import {MyspacesService} from '../../shared/myspaces/myspaces.service';
+import {ActivatedRoute, NavigationExtras, Router} from '@angular/router';
+import { Subscription} from 'rxjs';
+import { MyspacesService } from '../../shared/myspaces/myspaces.service';
+import { GraphViewService } from '../graph-view/graph-view.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { SpaceService } from 'src/app/shared/space/space.service';
+import { Space } from 'src/app/shared/rest-data-model/space';
+import { RecommendationService } from 'src/app/shared/recommendation/recommendation.service';
+import { RecommenderQuestion } from 'src/app/shared/rest-data-model/recommender-question';
+import { AgentService } from 'src/app/shared/agent/agent.service';
@Component({
selector: 'dnor-graph-view-page',
templateUrl: './graph-view-page.component.html',
styleUrls: ['./graph-view-page.component.css']
})
-export class GraphViewPageComponent implements OnInit, OnDestroy {
+export class GraphViewPageComponent implements OnInit, OnDestroy, OnChanges {
public subscriptionInProgress = false;
public interactionMode = GraphInteractionMode.SelectAndNavigate;
public height = 800;
public width = 1100;
- private paramSubscription: Subscription;
- private queryParamSubscription: Subscription;
public spaceId = '1';
+ public space: Space;
public selectedQuestions;
public spaceMembers = [];
+ public loading = false;
+ public recommenderQuestions: RecommenderQuestion[] = [];
+ public selectedRecommenderQuestion: [];
+ public recommendationsLoaded = false;
- // private adjustSize() {
- // this.height = (window.innerHeight
- // - this.graphContainer.nativeElement.getBoundingClientRect().top
- // - this.below.nativeElement.getBoundingClientRect().height) * 0.9;
- // this.width = window.innerWidth * 0.95;
- // }
+ private subscription: Subscription = new Subscription();
- constructor(private activatedRoute: ActivatedRoute, private router: Router, private myspacesService: MyspacesService) {}
+ constructor(
+ private activatedRoute: ActivatedRoute,
+ private router: Router,
+ private ref: ChangeDetectorRef,
+ private myspacesService: MyspacesService,
+ private graphViewService: GraphViewService,
+ private snackBar: MatSnackBar,
+ private clipboard: Clipboard,
+ private spaceService: SpaceService,
+ private recommendationService: RecommendationService,
+ private agentService: AgentService) {}
+
+ ngOnChanges(changes: SimpleChanges): void {}
+
+ copyInviteUrl() {
+ let url = window.location.href;
+ url = url.substring(0, url.indexOf('/spaces')) + `/spaces/${this.space.spaceId}?pw=${this.space.spaceSecret}`;
+ this.clipboard.copy(url);
+ this.snackBar.open('Copied invitation link to clipboard. Paste to share with friends!', 'Ok', {
+ duration: 5000
+ });
+ }
ngOnInit() {
- this.paramSubscription = this.activatedRoute.params.subscribe((params) => {
+ // TODO: This can be done way easier!
+ this.subscription.add(this.activatedRoute.params.subscribe((params) => {
this.spaceId = params['spaceId'];
this.myspacesService.getSubscribersObservable(this.spaceId).subscribe(subs => {
this.spaceMembers = subs.map(sub => sub.name);
});
- });
- this.queryParamSubscription = this.activatedRoute.queryParams.subscribe((queryParams) => {
+ this.myspacesService.getMySpaces().then(res => {
+ if (res.find(s => s.space.spaceId === this.spaceId)) {
+ this.spaceService.getSpace(this.spaceId).then((space: Space) => {
+ this.space = space;
+ });
+ }
+ });
+ }));
+ this.subscription.add(this.activatedRoute.queryParams.subscribe((queryParams) => {
const pw = queryParams['pw'];
if (pw !== undefined) {
this.subscriptionInProgress = true;
- this.myspacesService.subscribeToSpace(this.spaceId, pw).then(() => {
+ this.myspacesService.subscribeToSpace(this.spaceId, pw).then((res) => {
+ this.space = res?.space;
const qp = queryParams['sq'] !== undefined ? {sq: queryParams['sq']} : {};
- this.router.navigate([], {queryParams: qp, replaceUrl: true}).then(() =>
+ this.router.navigate([], {queryParams: qp, replaceUrl: true}).then(() => {
this.subscriptionInProgress = false
- );
+ this.loadRecommendations().then(() => {
+ this.ngOnInit(); // reload component
+ })
+ });
});
-
}
const q = queryParams['sq'];
if (q === undefined) {
@@ -54,18 +92,91 @@ export class GraphViewPageComponent implements OnInit, OnDestroy {
} else {
this.selectedQuestions = JSON.parse(q);
}
+ }));
+ this.width = window.innerWidth * 0.99;
+ this.height = window.innerHeight * 0.92;
+
+ this.subscription.add(this.graphViewService.loading.subscribe((loading) => {
+ this.loading = loading;
+ this.ref.detectChanges();
+ }));
+
+ this.loadRecommendations();
+ }
+
+ loadRecommendations(): Promise
+
- Subscribing to space…
+
-
+
+
+ {{getInteractionModeLabel(m)}}
+
+
+
+
+
-
-
-
- Participants
-
-
+
+
+
+-
-
- {{m}} -
+
+
+
+ Participants
+
+
-
-
- Help
-
-
-
-
- -
+
- {{m}} +
-
-
chat_bubble_outline selected /chat_bubble_outline deselected -
- chat_bubble_outline rated positively /chat_bubble_outline rated negatively
- - >>> follow-up question -
- ―― related question -
- ――――――――――――――――――――― -
- More questions? noracle@dbis.rwth-aachen.de -
-
+
chat_bubble_outline selected
+ chat_bubble_outline deselected
+ chat_bubble_outline rated positively
+ chat_bubble_outline rated negatively
+ - >>>follow-up question +
- ――related question +
- ――――――――――――――――――――― +
- More questions? +
- noracle@dbis.rwth-aachen.de +
-
-
+
+
diff --git a/src/app/graph-view/inspect-edge-dialog/inspect-edge-dialog.component.html b/src/app/graph-view/inspect-edge-dialog/inspect-edge-dialog.component.html
index 330c5ad..40ef911 100644
--- a/src/app/graph-view/inspect-edge-dialog/inspect-edge-dialog.component.html
+++ b/src/app/graph-view/inspect-edge-dialog/inspect-edge-dialog.component.html
@@ -38,6 +38,6 @@
-
-
+
+
diff --git a/src/app/graph-view/relation-picker-dialog/relation-picker-dialog.component.html b/src/app/graph-view/relation-picker-dialog/relation-picker-dialog.component.html
index c6cafbb..e18b4c0 100644
--- a/src/app/graph-view/relation-picker-dialog/relation-picker-dialog.component.html
+++ b/src/app/graph-view/relation-picker-dialog/relation-picker-dialog.component.html
@@ -9,6 +9,6 @@ {{data.title}}
-
-
+
+
diff --git a/src/app/graph-view/vote-donut/vote-donut.component.html b/src/app/graph-view/vote-donut/vote-donut.component.html
index 6c44bbf..5dd6d86 100644
--- a/src/app/graph-view/vote-donut/vote-donut.component.html
+++ b/src/app/graph-view/vote-donut/vote-donut.component.html
@@ -1,6 +1,6 @@
\ No newline at end of file
diff --git a/src/app/login/after-login/after-login.component.ts b/src/app/login/after-login/after-login.component.ts
index cc4d986..4f0db32 100644
--- a/src/app/login/after-login/after-login.component.ts
+++ b/src/app/login/after-login/after-login.component.ts
@@ -1,8 +1,8 @@
import {Component, OnInit} from '@angular/core';
-import {AuthGuardService} from '../../shared/auth-guard/auth-guard.service';
import {Router} from '@angular/router';
import {AgentService} from '../../shared/agent/agent.service';
import { KeycloakService } from 'keycloak-angular';
+import { AuthenticationService } from 'src/app/shared/authentication/authentication.service';
@Component({
selector: 'dnor-after-login',
@@ -10,12 +10,12 @@ import { KeycloakService } from 'keycloak-angular';
})
export class AfterLoginComponent implements OnInit {
- constructor(authGuardService: AuthGuardService, agentService: AgentService, router: Router, protected readonly keycloak: KeycloakService) {
+ constructor(authService: AuthenticationService, agentService: AgentService, router: Router, protected readonly keycloak: KeycloakService) {
this.keycloak.isLoggedIn().then((loggedIn) => {
if (loggedIn) {
agentService.getAgent().then((agent) =>
- agentService.putAgentName(agent.agentid, authGuardService.getUserName()));
- const lastRouteRequested = authGuardService.getLastRouteRequested();
+ agentService.putAgentName(agent.agentid, authService.getUserName()));
+ const lastRouteRequested = authService.getLastRouteRequested();
if (lastRouteRequested !== undefined) {
router.navigate([lastRouteRequested.url], {
queryParams: lastRouteRequested.queryParams,
diff --git a/src/app/login/welcome-page/welcome-page.component.css b/src/app/login/welcome-page/welcome-page.component.css
index a9a61b4..849df15 100644
--- a/src/app/login/welcome-page/welcome-page.component.css
+++ b/src/app/login/welcome-page/welcome-page.component.css
@@ -1,7 +1,17 @@
+.container {
+ padding: 5px;
+}
+
.banner {
width: 240px;
}
.bannerContainer {
text-align: right;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+ width: auto;
}
\ No newline at end of file
diff --git a/src/app/login/welcome-page/welcome-page.component.html b/src/app/login/welcome-page/welcome-page.component.html
index df5bdd5..d0e1586 100644
--- a/src/app/login/welcome-page/welcome-page.component.html
+++ b/src/app/login/welcome-page/welcome-page.component.html
@@ -1,23 +1,27 @@
-
-
- Noracle is a tool for question-based dialogue. The Noracle Space starts with a seed question, which is any highly relevant, complex question that has no identifiable answer but which is critical for your community.
-
- Contributors in the Noracle Space “respond” to this seed question with related follow-up questions that can help to unpack or further explore the seed question. Contributors can also respond to any follow-up questions with another question.
-
- Noracle's purpose is to uncover and represent community ignorance: the things we do not yet know and the questions we need to answer. As such, the first rule is: you may only ask questions in this tool. You may not provide any answers or answers formulated as questions (e.g.. "wouldn't it be nice if you did _____?").
-
- If you feel you have an answer, think back to what question might have helped you to arrive at that answer and add that to the Noracle Space.
-
- Noracle is non-hierarchical. In a traditional question-answer paradigm, you have experts and novices and the contributions of each group tend to be asymmetric. In Noracle, novices and experts can contribute side-by-side.
-
- Do you have further questions, ideas or feedback? Feel free to drop us an e-mail at noracle@dbis.rwth-aachen.de.
-
-
Usage Statistics
- - -
- 
+
-
+
+
+
+
\ No newline at end of file
diff --git a/src/app/navigation/nav/nav.component.html b/src/app/navigation/nav/nav.component.html
index 0a695f2..ea19333 100644
--- a/src/app/navigation/nav/nav.component.html
+++ b/src/app/navigation/nav/nav.component.html
@@ -1,10 +1,17 @@
+
+
+
+
+ Noracle is a tool for question-based dialogue. The Noracle Space starts with a seed question, which is any highly relevant, complex question that has no identifiable answer but which is critical for your community.
+
+ Contributors in the Noracle Space “respond” to this seed question with related follow-up questions that can help to unpack or further explore the seed question. Contributors can also respond to any follow-up questions with another question.
+
+ Noracle's purpose is to uncover and represent community ignorance: the things we do not yet know and the questions we need to answer. As such, the first rule is: you may only ask questions in this tool. You may not provide any answers or answers formulated as questions (e.g.. "wouldn't it be nice if you did _____?").
+
+ If you feel you have an answer, think back to what question might have helped you to arrive at that answer and add that to the Noracle Space.
+
+ Noracle is non-hierarchical. In a traditional question-answer paradigm, you have experts and novices and the contributions of each group tend to be asymmetric. In Noracle, novices and experts can contribute side-by-side.
+
+ Do you have further questions, ideas or feedback? Feel free to drop us an e-mail at noracle@dbis.rwth-aachen.de.
+
+
+
+
+
- Noracle
-
- ();
+
constructor(public authGuardService: AuthGuardService,
+ public authService: AuthenticationService,
protected readonly keycloak: KeycloakService) {
}
ngOnInit() {}
logout() {
- if (this.authGuardService.isAuthorized) {
+ if (this.authService.isAuthorized) {
this.authGuardService.logoff();
this.keycloak.logout(environment.redirectUrl);
}
}
+ onToggleSidenav(): void {
+ this.sidenavToggle.emit();
+ }
+
}
diff --git a/src/app/navigation/navigation.module.ts b/src/app/navigation/navigation.module.ts
index f391d47..49c426b 100644
--- a/src/app/navigation/navigation.module.ts
+++ b/src/app/navigation/navigation.module.ts
@@ -8,6 +8,10 @@ import {FlexLayoutModule} from '@angular/flex-layout';
import {MatMenuModule} from '@angular/material/menu';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { SidenavListComponent } from './sidenav-list/sidenav-list.component';
+import { MatListModule } from '@angular/material/list';
@NgModule({
imports: [
@@ -15,11 +19,21 @@ import {MatButtonModule} from '@angular/material/button';
MatMenuModule,
MatToolbarModule,
MatButtonModule,
+ MatIconModule,
+ MatBadgeModule,
FlexLayoutModule,
- RouterModule
+ RouterModule,
+ MatListModule
],
- declarations: [NavComponent, SpaceDropdownComponent],
- exports: [NavComponent]
+ declarations: [
+ NavComponent,
+ SpaceDropdownComponent,
+ SidenavListComponent
+ ],
+ exports: [
+ NavComponent,
+ SidenavListComponent
+ ]
})
export class NavigationModule {
}
diff --git a/src/app/navigation/sidenav-list/sidenav-list.component.css b/src/app/navigation/sidenav-list/sidenav-list.component.css
new file mode 100644
index 0000000..5feaa91
--- /dev/null
+++ b/src/app/navigation/sidenav-list/sidenav-list.component.css
@@ -0,0 +1,4 @@
+.nav-caption {
+ display: inline-block;
+ padding-left: 5px;
+}
diff --git a/src/app/navigation/sidenav-list/sidenav-list.component.html b/src/app/navigation/sidenav-list/sidenav-list.component.html
new file mode 100644
index 0000000..37419f3
--- /dev/null
+++ b/src/app/navigation/sidenav-list/sidenav-list.component.html
@@ -0,0 +1,29 @@
+
+
+ home
+
+
+
+ workspaces
+
+
+
+ login
+
+
+
+ logout
+
+
+
\ No newline at end of file
diff --git a/src/app/navigation/sidenav-list/sidenav-list.component.spec.ts b/src/app/navigation/sidenav-list/sidenav-list.component.spec.ts
new file mode 100644
index 0000000..21edeae
--- /dev/null
+++ b/src/app/navigation/sidenav-list/sidenav-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidenavListComponent } from './sidenav-list.component';
+
+describe('SidenavListComponent', () => {
+ let component: SidenavListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ SidenavListComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SidenavListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navigation/sidenav-list/sidenav-list.component.ts b/src/app/navigation/sidenav-list/sidenav-list.component.ts
new file mode 100644
index 0000000..1096088
--- /dev/null
+++ b/src/app/navigation/sidenav-list/sidenav-list.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
+import { AuthGuardService } from 'src/app/shared/auth-guard/auth-guard.service';
+import { AuthenticationService } from 'src/app/shared/authentication/authentication.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+ selector: 'dnor-sidenav-list',
+ templateUrl: './sidenav-list.component.html',
+ styleUrls: ['./sidenav-list.component.css']
+})
+export class SidenavListComponent implements OnInit {
+
+ @Output()
+ public closeSidenav = new EventEmitter();
+
+ constructor(
+ public authGuardService: AuthGuardService,
+ public authService: AuthenticationService,
+ public keycloak: KeycloakService) {}
+
+ ngOnInit(): void {}
+
+ onClose() {
+ this.closeSidenav.emit();
+ }
+
+ logout() {
+ if (this.authService.isAuthorized) {
+ this.authGuardService.logoff();
+ this.keycloak.logout(environment.redirectUrl);
+ }
+ this.closeSidenav.emit();
+ }
+
+}
diff --git a/src/app/navigation/space-dropdown/space-dropdown.component.html b/src/app/navigation/space-dropdown/space-dropdown.component.html
index d6c031a..f1f90e2 100644
--- a/src/app/navigation/space-dropdown/space-dropdown.component.html
+++ b/src/app/navigation/space-dropdown/space-dropdown.component.html
@@ -1,11 +1,5 @@
- {{space.space.name}}
-
Show Space Overview Create new Space -
diff --git a/src/app/navigation/space-dropdown/space-dropdown.component.ts b/src/app/navigation/space-dropdown/space-dropdown.component.ts
index 6fbc6a5..c37a36f 100644
--- a/src/app/navigation/space-dropdown/space-dropdown.component.ts
+++ b/src/app/navigation/space-dropdown/space-dropdown.component.ts
@@ -1,8 +1,4 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
-import {SpaceSubscription} from '../../shared/rest-data-model/spacesubscription';
-import {Subscription} from 'rxjs';
-import {MyspacesService} from '../../shared/myspaces/myspaces.service';
-import {Space} from '../../shared/rest-data-model/space';
@Component({
selector: 'dnor-space-dropdown',
@@ -11,23 +7,9 @@ import {Space} from '../../shared/rest-data-model/space';
})
export class SpaceDropdownComponent implements OnInit, OnDestroy {
- public spaces: { space: Space, subscription: SpaceSubscription }[] = [];
- private spaceSubscription: Subscription;
+ constructor() {}
- constructor(private myspacesService: MyspacesService) {
- }
-
- ngOnInit(): void {
- this.spaceSubscription = this.myspacesService.getMySpacesObservable().subscribe((myspaces) => this.spaces = myspaces);
- this.myspacesService.getMySpaces().then((s) => s);
- }
-
- ngOnDestroy(): void {
- this.spaceSubscription.unsubscribe();
- }
-
- getStringifiedParamArray(subscription: SpaceSubscription): string {
- return JSON.stringify(subscription.selectedQuestionIds);
- }
+ ngOnInit(): void {}
+ ngOnDestroy(): void {}
}
diff --git a/src/app/shared/agent/agent.service.ts b/src/app/shared/agent/agent.service.ts
index 06446c5..bc4bd46 100644
--- a/src/app/shared/agent/agent.service.ts
+++ b/src/app/shared/agent/agent.service.ts
@@ -1,26 +1,32 @@
import {Injectable} from '@angular/core';
import {RestHelperService} from '../rest-helper/rest-helper.service';
import {SpaceSubscription} from '../rest-data-model/spacesubscription';
+import { catchError, shareReplay } from 'rxjs/operators';
+import { EMPTY, Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
@Injectable()
export class AgentService {
- private cachedAgent;
+ private cachedAgent: {agentid: string};
+ private cache: Observable
private cachedAgentNames: Map = new Map();
constructor(private restHelperService: RestHelperService) {
}
- public getAgent(): Promise<{ agentid: string }> {
- if (this.cachedAgent !== undefined) {
- return Promise.resolve(this.cachedAgent);
+ public getAgent(): Promise {
+ if (this.cache) {
+ return this.cache.toPromise();
} else {
- return this.restHelperService.getCurrentAgent().then((res) => {
- this.cachedAgent = res;
- return this.cachedAgent;
- }).catch(error => {
- console.error(error);
- })
+ this.cache = this.restHelperService.getCurrentAgentLocal().pipe(
+ shareReplay(1),
+ catchError(err => {
+ delete this.cache;
+ return EMPTY;
+ })
+ )
+ return this.cache.toPromise();
}
}
@@ -58,8 +64,13 @@ export class AgentService {
.then((agent) => {
return this.restHelperService.post(`/agents/${agent.agentid}/spacesubscriptions`, postData)
.then(res => {
- return this.restHelperService.getAbsoulte(res.headers.get('location'))
- .then((res2) => res2.json() as SpaceSubscription);
+ // TODO: Hacky hack, needs to be fixed by the backend!
+ let location: string = res.headers.get('location');
+ if (environment.production) {
+ location = location.replace("http", "https");
+ }
+ return this.restHelperService.getAbsoulte(location)
+ .then((res2: SpaceSubscription) => res2);
});
});
}
diff --git a/src/app/shared/auth-guard/auth-guard.service.ts b/src/app/shared/auth-guard/auth-guard.service.ts
index 768d512..9f39328 100644
--- a/src/app/shared/auth-guard/auth-guard.service.ts
+++ b/src/app/shared/auth-guard/auth-guard.service.ts
@@ -1,53 +1,27 @@
import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
-import { KeycloakService } from 'keycloak-angular';
-import { KeycloakLoginOptions } from 'keycloak-js';
+import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from '@angular/router';
import { Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';
+import { AuthenticationService } from '../authentication/authentication.service';
@Injectable()
export class AuthGuardService implements CanActivate {
- public isAuthorized = false;
- private userName: string;
- private keycloakLoginOptions: KeycloakLoginOptions = {
- redirectUri: environment.redirectUrl
- }
-
- constructor(private router: Router, protected readonly keycloak: KeycloakService) {
- this.keycloak.isLoggedIn().then((loggedIn: boolean) => {
- this.isAuthorized = loggedIn;
- this.userName = this.keycloak.getUsername();
- });
+ constructor(private authService: AuthenticationService) {
}
async login() {
- await this.keycloak.login(this.keycloakLoginOptions);
- this.isAuthorized = await this.keycloak.isLoggedIn();
- }
-
- getUserName(): string {
- return this.userName;
+ return this.authService.login();
}
- getLastRouteRequested() {
- const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)rejectedPath\s*\=\s*([^;]*).*$)|^.*$/, '$1');
- document.cookie = 'rejectedPath=; expires=' + new Date(0).toUTCString();
- return cookieValue !== undefined && cookieValue.length > 0 ? JSON.parse(decodeURIComponent(cookieValue)) : undefined;
+ getUserName() {
+ return this.authService.getUserName();
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable | Promise {
- if (!this.isAuthorized) {
- document.cookie = 'rejectedPath=' + encodeURIComponent(JSON.stringify({
- url: route.url.map((v) => v.path).reduce((prev, cur) => prev + '/' + cur, ''),
- queryParams: route.queryParams
- })) + '; path=/; expires=' + new Date(Date.now() + ((3 * 60 * 1000))).toUTCString();
- this.router.navigate(['/login'], {replaceUrl: true});
- }
- return this.isAuthorized;
+ return this.authService.checkAuthorized(route);
}
logoff(): void {
- this.isAuthorized = false;
+ return this.authService.logoff();
}
}
diff --git a/src/app/shared/authentication/authentication.service.spec.ts b/src/app/shared/authentication/authentication.service.spec.ts
new file mode 100644
index 0000000..5c98867
--- /dev/null
+++ b/src/app/shared/authentication/authentication.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthenticationService } from './authentication.service';
+
+describe('AuthenticationService', () => {
+ let service: AuthenticationService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(AuthenticationService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/authentication/authentication.service.ts b/src/app/shared/authentication/authentication.service.ts
new file mode 100644
index 0000000..497dd8f
--- /dev/null
+++ b/src/app/shared/authentication/authentication.service.ts
@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
+import { KeycloakLoginOptions } from 'keycloak-js';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { AgentService } from '../agent/agent.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthenticationService {
+
+ public isAuthorized = false;
+ private userName: string;
+
+ private keycloakLoginOptions: KeycloakLoginOptions = {
+ redirectUri: environment.redirectUrl
+ }
+
+ constructor(private router: Router, protected readonly keycloak: KeycloakService, private agentService: AgentService) {
+ this.keycloak.isLoggedIn().then((loggedIn: boolean) => {
+ this.isAuthorized = loggedIn;
+ if (loggedIn) {
+ this.userName = this.keycloak.getUsername();
+ this.agentService.getAgent();
+ }
+ });
+ }
+
+ async login() {
+ await this.keycloak.login(this.keycloakLoginOptions);
+ this.isAuthorized = await this.keycloak.isLoggedIn();
+ if (this.isAuthorized) {
+
+ }
+ }
+
+ getUserName(): string {
+ return this.userName;
+ }
+
+ getLastRouteRequested() {
+ const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)rejectedPath\s*\=\s*([^;]*).*$)|^.*$/, '$1');
+ document.cookie = 'rejectedPath=; expires=' + new Date(0).toUTCString();
+ return cookieValue !== undefined && cookieValue.length > 0 ? JSON.parse(decodeURIComponent(cookieValue)) : undefined;
+ }
+
+ checkAuthorized(route: ActivatedRouteSnapshot): boolean | Observable | Promise {
+ return this.keycloak.isLoggedIn().then((loggedIn: boolean) => {
+ if (loggedIn) {
+ this.isAuthorized = true;
+ return this.isAuthorized;
+ } else {
+ document.cookie = 'rejectedPath=' + encodeURIComponent(JSON.stringify({
+ url: route.url.map((v) => v.path).reduce((prev, cur) => prev + '/' + cur, ''),
+ queryParams: route.queryParams
+ })) + '; path=/; expires=' + new Date(Date.now() + ((3 * 60 * 1000))).toUTCString();
+
+ this.router.navigate(['/login'], {replaceUrl: true});
+ this.isAuthorized = false;
+ return this.isAuthorized;
+ }
+ });
+ }
+
+ logoff(): void {
+ this.isAuthorized = false;
+ }
+}
diff --git a/src/app/shared/myspaces/myspaces.service.ts b/src/app/shared/myspaces/myspaces.service.ts
index 24b3694..ff732d3 100644
--- a/src/app/shared/myspaces/myspaces.service.ts
+++ b/src/app/shared/myspaces/myspaces.service.ts
@@ -62,8 +62,8 @@ export class MyspacesService {
});
}
- public updateSelectionOfSubscription(spaceId: string, selection: string[]) {
- this.agentService.putSelectionOfSubscription(spaceId, selection).then(() => this.getMySpaces().then((s) => s));
+ public updateSelectionOfSubscription(spaceId: string, selection: string[]): Promise {
+ return this.agentService.putSelectionOfSubscription(spaceId, selection).then(() => this.getMySpaces().then((s) => s));
}
diff --git a/src/app/shared/question-vote/question-vote.service.ts b/src/app/shared/question-vote/question-vote.service.ts
index 0f073ae..3b25f16 100644
--- a/src/app/shared/question-vote/question-vote.service.ts
+++ b/src/app/shared/question-vote/question-vote.service.ts
@@ -1,7 +1,6 @@
import {Injectable} from '@angular/core';
import {RestHelperService} from '../rest-helper/rest-helper.service';
import {QuestionVote} from '../rest-data-model/question-vote';
-import {Vote} from '../rest-data-model/vote';
@Injectable()
export class QuestionVoteService {
@@ -10,7 +9,8 @@ export class QuestionVoteService {
}
public getQuestionVotes(spaceId: string, questionId: string) {
- return this.restHelperService.get(`/spaces/${spaceId}/questions/${questionId}/votes`).then((res: QuestionVote[]) => {
+ return this.restHelperService.get(`/spaces/${spaceId}/questions/${questionId}/votes`)
+ .then((res: QuestionVote[]) => {
return res;
});
}
@@ -18,6 +18,6 @@ export class QuestionVoteService {
public putQuestionVote(spaceId: string, questionId: string, agentId: string,
questionVote: QuestionVote): Promise {
return this.restHelperService.put(`/spaces/${spaceId}/questions/${questionId}/votes/${agentId}`, questionVote)
- .then((r) => r.json() as QuestionVote);
+ .then((r: QuestionVote) => r);
}
}
diff --git a/src/app/shared/question/question.service.ts b/src/app/shared/question/question.service.ts
index 85da91b..31b7532 100644
--- a/src/app/shared/question/question.service.ts
+++ b/src/app/shared/question/question.service.ts
@@ -1,4 +1,5 @@
import {Injectable} from '@angular/core';
+import { environment } from 'src/environments/environment';
import {Question} from '../rest-data-model/question';
import {RestHelperService} from '../rest-helper/rest-helper.service';
@@ -10,7 +11,8 @@ export class QuestionService {
public getQuestionsOfSpace(spaceId: string): Promise {
// TODO: proper pagination
- return this.restHelperService.get(`/spaces/${spaceId}/questions?limit=1000`).then((res: Question[]) => {
+ return this.restHelperService.get(`/spaces/${spaceId}/questions?limit=1000`)
+ .then((res: Question[]) => {
return res;
});
}
@@ -19,7 +21,9 @@ export class QuestionService {
return this.restHelperService.post(`/spaces/${spaceId}/questions`, question).then((res) => {
// TODO: Hacky hack, needs to be fixed by the backend!
let location: string = res.headers.get('location');
- location = location.replace("http", "https");
+ if (environment.production) {
+ location = location.replace("http", "https");
+ }
return this.restHelperService.getAbsoulte(location)
.then((r: Question) => {
return r;
@@ -29,7 +33,7 @@ export class QuestionService {
public putQuestion(spaceId: string, questionId: string, question: Question): Promise {
return this.restHelperService.put(`/spaces/${spaceId}/questions/${questionId}`, question)
- .then((r) => r.json() as Question);
+ .then((r: Question) => r);
}
}
diff --git a/src/app/shared/recommendation/recommendation.service.spec.ts b/src/app/shared/recommendation/recommendation.service.spec.ts
new file mode 100644
index 0000000..8be4896
--- /dev/null
+++ b/src/app/shared/recommendation/recommendation.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RecommendationService } from './recommendation.service';
+
+describe('RecommendationService', () => {
+ let service: RecommendationService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(RecommendationService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/recommendation/recommendation.service.ts b/src/app/shared/recommendation/recommendation.service.ts
new file mode 100644
index 0000000..741f459
--- /dev/null
+++ b/src/app/shared/recommendation/recommendation.service.ts
@@ -0,0 +1,18 @@
+import { ComponentFactoryResolver, Injectable } from '@angular/core';
+import { RecommenderQuestion } from '../rest-data-model/recommender-question';
+import { RestHelperService } from '../rest-helper/rest-helper.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RecommendationService {
+ constructor(private restHelperService: RestHelperService) {}
+
+ public getRecommendedQuestionsForSpace(agentId: string, spaceId: string): Promise {
+ return this.restHelperService.get(`/recommend/${agentId}/${spaceId}`);
+ }
+
+ public getRecommendedQuestions(agentId: string): Promise {
+ return this.restHelperService.get(`/recommend/${agentId}`);
+ }
+}
diff --git a/src/app/shared/relation-vote/relation-vote.service.ts b/src/app/shared/relation-vote/relation-vote.service.ts
index b5190e6..235bc12 100644
--- a/src/app/shared/relation-vote/relation-vote.service.ts
+++ b/src/app/shared/relation-vote/relation-vote.service.ts
@@ -9,7 +9,8 @@ export class RelationVoteService {
}
public getRelationVotes(spaceId: string, relationId: string) {
- return this.restHelperService.get(`/spaces/${spaceId}/relations/${relationId}/votes`).then((res: RelationVote[]) => {
+ return this.restHelperService.get(`/spaces/${spaceId}/relations/${relationId}/votes`)
+ .then((res: RelationVote[]) => {
return res;
});
}
@@ -17,6 +18,6 @@ export class RelationVoteService {
public putRelationVote(spaceId: string, relationId: string, agentId: string,
questionVote: RelationVote): Promise {
return this.restHelperService.put(`/spaces/${spaceId}/relations/${relationId}/votes/${agentId}`, questionVote)
- .then((r) => r.json() as RelationVote);
+ .then((r: RelationVote) => r);
}
}
diff --git a/src/app/shared/relation/relation.service.ts b/src/app/shared/relation/relation.service.ts
index 9796728..5e7fac4 100644
--- a/src/app/shared/relation/relation.service.ts
+++ b/src/app/shared/relation/relation.service.ts
@@ -1,4 +1,5 @@
import {Injectable} from '@angular/core';
+import { environment } from 'src/environments/environment';
import {Relation} from '../rest-data-model/relation';
import {RestHelperService} from '../rest-helper/rest-helper.service';
@@ -10,20 +11,26 @@ export class RelationService {
public getRelationsOfSpace(id): Promise {
// TODO: proper pagination
- return this.restHelperService.get(`/spaces/${id}/relations?limit=1000`).then((res: Relation[]) => {
+ return this.restHelperService.get(`/spaces/${id}/relations?limit=1000`)
+ .then((res: Relation[]) => {
return res;
});
}
public putRelation(spaceId: string, relationId: string, relation: Relation): Promise {
return this.restHelperService.put(`/spaces/${spaceId}/relations/${relationId}`, relation)
- .then((r) => r.json() as Relation);
+ .then((r: Relation) => r);
}
public postRelation(spaceId: string, relation: Relation): Promise {
return this.restHelperService.post(`/spaces/${spaceId}/relations`, relation).then((res) => {
- return this.restHelperService.getAbsoulte(res.headers.get('location'))
- .then((r) => r.json() as Relation);
+ // TODO: Hacky hack, needs to be fixed by the backend!
+ let location: string = res.headers.get('location');
+ if (environment.production) {
+ location = location.replace("http", "https");
+ }
+ return this.restHelperService.getAbsoulte(location)
+ .then((r: Relation) => r);
});
}
diff --git a/src/app/shared/rest-data-model/recommender-question.ts b/src/app/shared/rest-data-model/recommender-question.ts
new file mode 100644
index 0000000..ede2694
--- /dev/null
+++ b/src/app/shared/rest-data-model/recommender-question.ts
@@ -0,0 +1,7 @@
+import { Question } from "./question";
+
+export class RecommenderQuestion {
+ questionNeighbourIds: string[];
+ question: Question;
+ authorName: string;
+}
\ No newline at end of file
diff --git a/src/app/shared/rest-data-model/space.ts b/src/app/shared/rest-data-model/space.ts
index b9eaf65..429c6bf 100644
--- a/src/app/shared/rest-data-model/space.ts
+++ b/src/app/shared/rest-data-model/space.ts
@@ -7,4 +7,5 @@ export class Space {
spaceOwnerId: string;
spaceReaderGroupId: string;
spaceSecret: string;
+ private: boolean;
}
diff --git a/src/app/shared/rest-helper/rest-helper.service.ts b/src/app/shared/rest-helper/rest-helper.service.ts
index f12801b..c461a09 100644
--- a/src/app/shared/rest-helper/rest-helper.service.ts
+++ b/src/app/shared/rest-helper/rest-helper.service.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
import {environment} from '../../../environments/environment';
import {retry} from 'rxjs/operators';
import {KeycloakService } from 'keycloak-angular';
+import { Observable } from 'rxjs';
const HOST_URLS = environment.hostUrls;
@@ -23,7 +24,9 @@ export class RestHelperService {
try {
const res = await this.http.get(this.getBaseURL() + path,
{ headers: this.getHeaders() }
- ).pipe(retry(3)).toPromise();
+ )
+ //.pipe(retry(3))
+ .toPromise();
return res;
} catch (error) {
if (error.status === 401) {
@@ -34,22 +37,31 @@ export class RestHelperService {
}
public getAbsoulte(absolutePath: string): Promise {
- return this.http.get(absolutePath, {headers: this.getHeaders()}).pipe(retry(3)).toPromise();
+ return this.http.get(absolutePath, {headers: this.getHeaders()})
+ //.pipe(retry(3))
+ .toPromise();
}
public put(path: string, body: any): Promise {
return this.http.put(this.getBaseURL() + path,
body,
{headers: this.getHeaders()}
- ).pipe(retry(3)).toPromise();
+ )
+ .toPromise();
}
public post(path: string, body: any): Promise {
- return this.http.post(this.getBaseURL() + path, body, { headers: this.getHeaders(), observe: 'response' }).pipe(retry(3)).toPromise();
+ return this.http.post(this.getBaseURL() + path, body, { headers: this.getHeaders(), observe: 'response' })
+ .toPromise();
}
- public getCurrentAgent(): Promise {
- return this.http.get(this.getCoreBaseURL() + '/currentagent', {headers: this.getHeaders()}).pipe(retry(3)).toPromise();
+ public getCurrentAgent(): Observable {
+ return this.http.get(this.getCoreBaseURL() + '/currentagent', {headers: this.getHeaders()});
+ //return this.http.get(this.getCoreBaseURL() + '/auth/login', {headers: this.getHeaders()});
+ }
+
+ public getCurrentAgentLocal(): Observable {
+ return this.http.get(this.getBaseURL() + '/mainAgent', {headers: this.getHeaders()})
}
private getHeaders(): HttpHeaders {
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index e13f4d2..6d1f3b1 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -9,14 +9,25 @@ import {AuthGuardService} from './auth-guard/auth-guard.service';
import {MyspacesService} from './myspaces/myspaces.service';
import { RelationVoteService } from './relation-vote/relation-vote.service';
import {QuestionVoteService} from './question-vote/question-vote.service';
+import {RecommendationService} from './recommendation/recommendation.service';
@NgModule({
imports: [
CommonModule
],
declarations: [],
- providers: [SpaceService, QuestionService, RelationService, AgentService,
- RestHelperService, /*OidcSecurityService,*/ AuthGuardService, MyspacesService, QuestionVoteService, RelationVoteService]
+ providers: [
+ SpaceService,
+ QuestionService,
+ RelationService,
+ AgentService,
+ RestHelperService,
+ AuthGuardService,
+ MyspacesService,
+ QuestionVoteService,
+ RelationVoteService,
+ RecommendationService,
+ ]
})
export class SharedModule {
}
diff --git a/src/app/shared/space/space.service.ts b/src/app/shared/space/space.service.ts
index dae6876..d3e257e 100644
--- a/src/app/shared/space/space.service.ts
+++ b/src/app/shared/space/space.service.ts
@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
import {RestHelperService} from '../rest-helper/rest-helper.service';
import {Space} from '../rest-data-model/space';
import {SpaceSubscriber} from '../rest-data-model/spacesubscriber';
-import { HttpResponse } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
@Injectable()
export class SpaceService {
@@ -11,8 +11,7 @@ export class SpaceService {
}
public getSpace(id): Promise {
- return this.restHelperService.get(`/spaces/${id}`)
- .then((res: Space) => { return res; });
+ return this.restHelperService.get(`/spaces/${id}`).then((res: Space) => { return res; });
}
public postSpace(space: Space): Promise {
@@ -20,7 +19,9 @@ export class SpaceService {
.then((res) => {
// TODO: Hacky hack, needs to be fixed by the backend!
let location: string = res.headers.get('location');
- location = location.replace("http", "https");
+ if (environment.production) {
+ location = location.replace("http", "https");
+ }
return this.restHelperService.getAbsoulte(location)
.then((r: Space) => {
return r;
@@ -30,10 +31,16 @@ export class SpaceService {
})
}
- public getSpaceSubscribers(id): Promise {
- return this.restHelperService.get(`/spaces/${id}/subscribers`).then((res: SpaceSubscriber[]) => {
- return res;
- });
+ public getSpaceSubscribers(spaceId: string): Promise {
+ return this.restHelperService.get(`/spaces/${spaceId}/subscribers`);
+ }
+
+ public getPublicSpaces(): Promise {
+ return this.restHelperService.get(`/spaces/public`);
+ }
+
+ public getSpaceVoteCount(spaceId: string): Promise {
+ return this.restHelperService.get(`/spaces/${spaceId}/votecount`);
}
}
diff --git a/src/app/space/create-space/create-space.component.css b/src/app/space/create-space/create-space.component.css
index e69de29..d73baf3 100644
--- a/src/app/space/create-space/create-space.component.css
+++ b/src/app/space/create-space/create-space.component.css
@@ -0,0 +1,9 @@
+.container {
+ width: 100%;
+ padding: 10px;
+}
+
+mat-icon {
+ height: 100%;
+ vertical-align: bottom;
+}
\ No newline at end of file
diff --git a/src/app/space/create-space/create-space.component.html b/src/app/space/create-space/create-space.component.html
index 20ad152..3f361ca 100644
--- a/src/app/space/create-space/create-space.component.html
+++ b/src/app/space/create-space/create-space.component.html
@@ -1,21 +1,30 @@
-
-
- Create a new Space:
-
-
-
+
-
- {{space.space.name}}
-
-
-
-
-
-
+
+
+
+ Noracle
+
+ Noracle
+
+
diff --git a/src/app/navigation/nav/nav.component.ts b/src/app/navigation/nav/nav.component.ts
index 916eed2..0ae285d 100644
--- a/src/app/navigation/nav/nav.component.ts
+++ b/src/app/navigation/nav/nav.component.ts
@@ -1,7 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {AuthGuardService} from '../../shared/auth-guard/auth-guard.service';
import { KeycloakService } from 'keycloak-angular';
import { environment } from 'src/environments/environment';
+import { AuthenticationService } from 'src/app/shared/authentication/authentication.service';
@Component({
@@ -11,17 +12,25 @@ import { environment } from 'src/environments/environment';
})
export class NavComponent implements OnInit {
+ @Output()
+ public sidenavToggle = new EventEmitterShow Space Overview Create new Space -
+
+
+ Create a new Space:
+
+
+
+
\ No newline at end of file
diff --git a/src/app/space/create-space/create-space.component.ts b/src/app/space/create-space/create-space.component.ts
index 18635fc..703b796 100644
--- a/src/app/space/create-space/create-space.component.ts
+++ b/src/app/space/create-space/create-space.component.ts
@@ -11,21 +11,23 @@ import {MyspacesService} from '../../shared/myspaces/myspaces.service';
templateUrl: './create-space.component.html',
styleUrls: ['./create-space.component.css']
})
-export class CreateSpaceComponent implements OnInit {
+export class CreateSpaceComponent {
public space = new Space();
public question = new Question();
+ public loadingCreateSpace = false;
+
+ public tooltipText = "If you set this space to private, only users with an invitation link are permitted to join the space."
constructor(private spaceService: SpaceService, private questionService: QuestionService,
private myspacesService: MyspacesService, private router: Router) {
this.space.name = '';
this.question.text = '';
+ this.space.private = false;
}
- ngOnInit() {
- }
-
- createSpace() {
+ createSpace(): void {
+ this.loadingCreateSpace = true;
this.spaceService.postSpace(this.space).then((space) => {
this.questionService.postQuestion(space.spaceId, this.question).then((q) => {
this.router.navigate(['/spaces', space.spaceId], {queryParams: {sq: JSON.stringify([q.questionId])}});
diff --git a/src/app/space/space.module.ts b/src/app/space/space.module.ts
index 0393609..85b2797 100644
--- a/src/app/space/space.module.ts
+++ b/src/app/space/space.module.ts
@@ -13,7 +13,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
-
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
@@ -30,7 +34,12 @@ import { MatMenuModule } from '@angular/material/menu';
MatCardModule,
MatInputModule,
MatListModule,
- MatMenuModule
+ MatMenuModule,
+ MatProgressSpinnerModule,
+ FlexLayoutModule,
+ ClipboardModule,
+ MatCheckboxModule,
+ MatTooltipModule
],
declarations: [CreateSpaceComponent, SubscribedSpacesOverviewComponent],
exports: [CreateSpaceComponent, SubscribedSpacesOverviewComponent]
diff --git a/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.css b/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.css
index 8f8126d..e68d003 100755
--- a/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.css
+++ b/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.css
@@ -1,3 +1,50 @@
-.menuItem{
- margin-top: -15px;
+.container {
+ padding: 10px;
+ height: 100%;
+ margin: 0 auto;
+ max-width: 1264px;
+ width: 100%;
+ position: relative;
+}
+
+.main-container {
+ width: calc(100% - 250px - 20px);
+}
+
+.public-space {
+ display: flex;
+}
+
+.public-space:hover {
+ cursor: pointer;
+}
+
+.side-container {
+ width: 250px;
+ margin-left: 20px;
+}
+
+.space-link {
+ color: #0053BB;
+ margin-left: 10px;
+ padding-top: 2px;
+}
+
+.space-link:hover {
+ cursor: pointer;
+ color: #4F62C6;
+}
+
+@media (max-width: 780px) {
+ .main-container {
+ width: 100%;
+ }
+
+ .side-container {
+ display: none;
+ }
+}
+
+.title {
+ font-size: 32px;
}
\ No newline at end of file
diff --git a/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.html b/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.html
index ad656a7..417f9d4 100644
--- a/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.html
+++ b/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.html
@@ -1,35 +1,63 @@
-My Spaces
-
+ “' + rq.question.text + '”';
+ addHTML += 'asked by ' + rq.authorName + '';
+ addHTML += '' + this.getDateFormat(rq.question.timestampCreated) +' '
+ this.splide.add(addHTML);
+ }
+ })
+ });
+
+ // TODO: Activate when it is fixed
+ /*this.spaceService.getPublicSpaces().then((spaces: Space[]) => {
+ this.publicSpaces = spaces;
+ }).catch(() => {
+ console.error("error while getting public spaces...");
+ }).finally(() => {
+ this.publicSpacesLoaded = true;
+ });*/
+
+ // For testing
+ // this.publicSpacesLoaded = true;
+ // let space = {
+ // spaceId: '12345',
+ // name: 'TestSpace Blabla',
+ // spaceOwnerId: '12345',
+ // spaceReaderGroupId: '12345',
+ // spaceSecret: '12345',
+ // private: true
+ // };
+ // for (let i = 0; i < 100; i++) {
+ // this.publicSpaces.push(space);
+ // }
}
- copyInviteUrl(myspace: { space: Space, subscription: SpaceSubscription }) {
- let url = window.location.href;
- url = url.substring(0, url.indexOf('/myspaces')) + `/spaces/${myspace.space.spaceId}?pw=${myspace.space.spaceSecret}`;
- const textArea = document.createElement('textarea');
- // Place in top-left corner of screen regardless of scroll position.
- textArea.style.position = 'fixed';
- textArea.style.top = '0';
- textArea.style.left = '0';
- // Ensure it has a small width and height. Setting to 1px / 1em
- // doesn't work as this gives a negative w/h on some browsers.
- textArea.style.width = '2em';
- textArea.style.height = '2em';
- // We don't need padding, reducing the size if it does flash render.
- textArea.style.padding = '0';
- // Clean up any borders.
- textArea.style.border = 'none';
- textArea.style.outline = 'none';
- textArea.style.boxShadow = 'none';
- // Avoid flash of white box if rendered for any reason.
- textArea.style.background = 'transparent';
- textArea.value = url;
- document.body.appendChild(textArea);
- textArea.select();
- try {
- const successful = document.execCommand('copy');
- if (successful) {
- this.snackBar.open('Copied invitation link to clipboard. Paste to share with friends!', 'hide', {
- duration: 2000,
- });
- } else {
- this.copyFallback(url);
+ recommendationClicked(param: Node) {
+ let ids: string = param.childNodes[0]['id'];
+ let questionId = ids.substring(0, ids.indexOf('-'));
+ let spaceId = ids.substring(ids.indexOf('-') + 1, ids.length);
+
+ let questionIds = [];
+ questionIds.push(questionId);
+ let navigationExtras: NavigationExtras = {
+ queryParams: {
+ sq: JSON.stringify(questionIds)
}
- } catch (err) {
- this.copyFallback(url);
}
- document.body.removeChild(textArea);
+ this.router.navigate(['/spaces', spaceId], navigationExtras);
}
- getIcon(bot:{}, spaceId: String){
- if(bot['active'][spaceId]==null){
- return 'img:play';
- }
- return bot['active'][spaceId]['icon'];
+ addEventListener() {
+ if (!this.recommendationsLoaded)
+ {
+ setTimeout(() => {
+ this.addEventListener();
+ }, 500);
+ } else {
+ let nodeList: NodeList = this.elRef.nativeElement.querySelectorAll('.splide__slide');
+ nodeList.forEach(n => n.addEventListener('click', () => {
+ this.recommendationClicked(n);
+ }));
+ }
}
- /*addBot(myspace: { space: Space, subscription: SpaceSubscription }, botObject: {name: String, active: {}}) {
- const bot = botObject.name;
- var active = false;
- if(botObject.active[myspace.space.spaceId]==null){
- botObject['active'][myspace.space.spaceId] = {};
- }else{
- active = botObject['active'][myspace.space.spaceId]['active'];
- }
+ ngAfterViewInit(): void {
+ this.addEventListener();
+ }
- if (active === false) {
- let url = window.location.href;
- url = url.substring(0, url.indexOf('/myspaces')) + `/spaces/${myspace.space.spaceId}?pw=${myspace.space.spaceSecret}`;
- const textArea = document.createElement('textarea');
- // Place in top-left corner of screen regardless of scroll position.
- textArea.style.position = 'fixed';
- textArea.style.top = '0';
- textArea.style.left = '0';
- // Ensure it has a small width and height. Setting to 1px / 1em
- // doesn't work as this gives a negative w/h on some browsers.
- textArea.style.width = '2em';
- textArea.style.height = '2em';
- // We don't need padding, reducing the size if it does flash render.
- textArea.style.padding = '0';
- // Clean up any borders.
- textArea.style.border = 'none';
- textArea.style.outline = 'none';
- textArea.style.boxShadow = 'none';
- // Avoid flash of white box if rendered for any reason.
- textArea.style.background = 'transparent';
- textArea.value = url;
- document.body.appendChild(textArea);
- textArea.select();
-
- const xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
- xmlhttp.open('POST', this.rh.getHostURL() + '/SBFManager/join/' + bot);
- xmlhttp.setRequestHeader('Content-Type', 'application/json');
- xmlhttp.send(JSON.stringify({basePath: environment.hostUrls[0] + '/distributed-noracle',
- joinPath: 'agents/$botId/spacesubscriptions',
- spaceId: myspace.space.spaceId, spaceSecret: myspace.space.spaceSecret}));
- const snackBar = this.snackBar;
- const bots = this.bots;
- xmlhttp.onreadystatechange = function(){
- if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
- snackBar.open('Bot added!', 'hide', {
- duration: 2000,
- });
- bots.forEach(function(element) {
- if (element.name === bot) {
- element.active[myspace.space.spaceId]['icon'] = 'img:pause';
- element.active[myspace.space.spaceId]['active'] = true;
- }
- });
- }else if (xmlhttp.readyState === 4) {
- snackBar.open('Bot could not be added!', 'hide', {
- duration: 2000,
- });
- }
- };
-
- document.body.removeChild(textArea);
- }else {
- const botUri = this.botUri;
-
- const snackBar = this.snackBar;
- this.bots.forEach(element => {
- if (element.name === bot) {
- const xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
- xmlhttp.open('DELETE', botUri + '/' + bot + '/' + myspace.space.spaceId);
- xmlhttp.send();
- xmlhttp.onreadystatechange = function(){
- if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
- snackBar.open('Bot paused!', 'hide', {
- duration: 2000,
- });
- element.active[myspace.space.spaceId]['icon'] = 'img:play';
- element.active[myspace.space.spaceId]['active'] = false;
- }else if (xmlhttp.readyState === 4) {
- snackBar.open('Bot could not be paused!', 'hide', {
- duration: 2000,
- });
- }
- };
- }
- });
- }
- }*/
+ ngOnDestroy() {
+ this.spaceSubscription.unsubscribe();
+ }
+
+ getDateFormat(dateString: string): string {
+ let date = new Date(dateString);
+ let month = date.toLocaleString('en-GB', { month: 'short' });
+ let hours = ("0" + date.getHours()).slice(-2);
+ let minutes = ("0" + date.getMinutes()).slice(-2);
+ return `${month}, ${date.getDate()}, ${date.getFullYear()}, ${hours}:${minutes}`;
+ }
- private copyFallback(url: string) {
- window.prompt('Could not copy to clipboard automatically. Please copy the following invitation link manually:', url);
+ // recClicked(r: RecommenderQuestion): void {
+ // //let questionIds = r.questionNeighbourIds;
+ // let questionIds = [];
+ // questionIds.push(r.question.questionId);
+ // let navigationExtras: NavigationExtras = {
+ // queryParams: {
+ // sq: JSON.stringify(questionIds)
+ // }
+ // }
+ // this.router.navigate(['/spaces', r.question.spaceId], navigationExtras);
+ // }
+
+ publicSpaceClicked(s: Space): void {
+ // this.router.navigate(['/spaces', space.spaceId], {queryParams: {sq: JSON.stringify([q.questionId])}});
+ this.router.navigate(['/spaces', s.spaceId], {queryParams: {pw: s.spaceSecret}});
+ }
+
+ copyInviteUrl(myspace: { space: Space, subscription: SpaceSubscription }) {
+ let url = window.location.href;
+ url = url.substring(0, url.indexOf('/myspaces')) + `/spaces/${myspace.space.spaceId}?pw=${myspace.space.spaceSecret}`;
+ this.clipboard.copy(url);
+ this.snackBar.open('Copied invitation link to clipboard. Paste to share with friends!', 'Ok', {
+ duration: 5000
+ });
}
getStringifiedParamArray(subscription: SpaceSubscription): string {
diff --git a/src/assets/default-avatar.png b/src/assets/default-avatar.png
new file mode 100644
index 0000000..e7596cc
Binary files /dev/null and b/src/assets/default-avatar.png differ
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 8b06a9d..01a1b10 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -7,5 +7,6 @@ export const environment = {
production: false,
redirectUrl: 'http://localhost:4200/afterlogin',
mobsosUrl: 'https://las2peer.tech4comp.dbis.rwth-aachen.de',
- hostUrls: ['https://git.tech4comp.dbis.rwth-aachen.de']
-};
+ //hostUrls: ['https://git.tech4comp.dbis.rwth-aachen.de'] // prod
+ hostUrls: ['http://localhost:8080']
+};
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 13b984f..0afaa94 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,9 @@
-
+
+
+
Loading...
diff --git a/src/styles.css b/src/styles.css
index a2b63b6..f249740 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,5 @@
/* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
+@import "@angular/material/prebuilt-themes/indigo-pink.css";
/*
deeppurple-amber.css
indigo-pink.css
@@ -7,12 +7,11 @@ pink-bluegrey.css
purple-green.css
*/
-div.mat-form-field-underline {
- background-color: gray;
-}
-
-label.mat-form-field-placeholder {
- color: gray;
+ * , *:before, *:after{
+ box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ -ms-box-sizing:border-box;
}
@-ms-viewport {
@@ -20,10 +19,47 @@ label.mat-form-field-placeholder {
}
body {
- margin: 0px;
+ margin: 0 auto;
font-family: Roboto,"Helvetica Neue",sans-serif;
}
div.content {
margin: 8px;
}
+
+.mat-drawer-container {
+ background-color: white;
+}
+
+/* Style for splide JS - needs to be in styles.css */
+
+.splide__pagination__page.is-active {
+ background-color: #3F51B5 !important;
+}
+
+.slide {
+ min-height: 100px;
+ display: flex;
+ flex-direction: column;
+ /* justify-content: center; */
+ align-items: center;
+ text-align: center;
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 24px;
+}
+
+.slide:hover {
+ cursor: pointer;
+}
+
+.arrow {
+ background: white !important;
+}
+
+.meta-info {
+ font-size: 14px;
+}
+
+.splide {
+ padding-bottom: 30px;
+}
+
-
- +
+ My Spaces
+You have not yet subscribed to a space.
+
+
+
+
+
+ {{space.space.name}}
+
+
+ -
- +
Recommended For You
+
+ There are no recommendations for you at the moment :(
+
+
+
+
+
+
+ -
+
+
+
+
\ No newline at end of file
diff --git a/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.ts b/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.ts
index 8f15dac..e7b26d2 100644
--- a/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.ts
+++ b/src/app/space/subscribed-spaces-overview/subscribed-spaces-overview.component.ts
@@ -1,212 +1,186 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit} from '@angular/core';
import {SpaceSubscription} from '../../shared/rest-data-model/spacesubscription';
import {Subscription} from 'rxjs';
import {Space} from '../../shared/rest-data-model/space';
import {MyspacesService} from '../../shared/myspaces/myspaces.service';
import {MatSnackBar} from '@angular/material/snack-bar';
-import {MatIconRegistry } from '@angular/material/icon';
-import {DomSanitizer} from '@angular/platform-browser';
-import {environment} from '../../../environments/environment';
-import {RestHelperService} from '../../shared/rest-helper/rest-helper.service';
+import { RecommenderQuestion } from 'src/app/shared/rest-data-model/recommender-question';
+import { NavigationExtras, Router } from '@angular/router';
+import { RecommendationService } from 'src/app/shared/recommendation/recommendation.service';
+import { AgentService } from 'src/app/shared/agent/agent.service';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { SpaceService } from 'src/app/shared/space/space.service';
+import { Splide } from '@splidejs/splide';
@Component({
selector: 'dnor-subscribed-spaces-overview',
templateUrl: './subscribed-spaces-overview.component.html',
styleUrls: ['./subscribed-spaces-overview.component.css']
})
-export class SubscribedSpacesOverviewComponent implements OnInit, OnDestroy {
- public spaces: { space: Space, subscription: SpaceSubscription }[];
- //public bots: {name: string, active: {}}[] = [];
- //public botWidgetUrl: string;
+export class SubscribedSpacesOverviewComponent implements OnInit, OnDestroy, AfterViewInit {
+ public mySpaces: { space: Space, subscription: SpaceSubscription }[];
+ public spacesLoaded = false;
+ public recommendationsLoaded = false;
+ //public publicSpacesLoaded = false;
+
+ public recommenderQuestions: RecommenderQuestion[] = [];
+ public publicSpaces: Space[] = [];
+
private spaceSubscription: Subscription;
- // private botUri: string;
- constructor(private myspacesService: MyspacesService, private snackBar: MatSnackBar,
- private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private rh: RestHelperService) {
- }
+ private splide: Splide;
+
+ constructor(
+ private myspacesService: MyspacesService,
+ private snackBar: MatSnackBar,
+ private router: Router,
+ private recommendationService: RecommendationService,
+ private agentService: AgentService,
+ private clipboard: Clipboard,
+ private spaceService: SpaceService,
+ private elRef: ElementRef) {}
ngOnInit() {
- this.spaceSubscription =
- this.myspacesService.getMySpacesObservable().subscribe((myspaces) => this.spaces = myspaces);
+ this.spaceSubscription = this.myspacesService.getMySpacesObservable().subscribe((myspaces) => {
+ this.spacesLoaded = true;
+ this.mySpaces = myspaces
+ });
+
this.myspacesService.getMySpaces().then((s) => s);
- this.matIconRegistry.addSvgIconInNamespace('img', 'bot',
- this.sanitizer.bypassSecurityTrustResourceUrl('assets/bot.svg'));
- this.matIconRegistry.addSvgIconInNamespace('img', 'add',
- this.sanitizer.bypassSecurityTrustResourceUrl('assets/add.svg'));
- this.matIconRegistry.addSvgIconInNamespace('img', 'train',
- this.sanitizer.bypassSecurityTrustResourceUrl('assets/train.svg'));
- this.matIconRegistry.addSvgIconInNamespace('img', 'play',
- this.sanitizer.bypassSecurityTrustResourceUrl('assets/play.svg'));
- this.matIconRegistry.addSvgIconInNamespace('img', 'pause',
- this.sanitizer.bypassSecurityTrustResourceUrl('assets/pause.svg'));
- //this.botWidgetUrl = this.rh.getHostURL() + '/fileservice/v2.2.5/files/sbf';
- //this.botUri = this.rh.getHostURL() + '/SBFManager/bots/distributed-noracle';
-
- /*const xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
- xmlhttp.open('GET', this.botUri);
- xmlhttp.setRequestHeader('Accept', 'application/json');
- xmlhttp.send();
- const bots = this.bots;
- xmlhttp.onreadystatechange = function(){
- if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
- const botj = JSON.parse(this.responseText);
- for (const bname of Object.keys(botj)) {
- var b = {'name': bname, 'active': {}};
- for (const uname of Object.keys(botj[bname]["active"])) {
- const bs = botj[bname]["active"][uname] === true;
- var bstatus = {};
- bstatus['active'] = bs;
- if(bs){
- bstatus['icon'] = 'img:pause';
- }else{
- bstatus['icon'] = 'img:play';
- }
- b["active"][uname] = bstatus;
- }
- bots.push(b);
- }
- }
- }; */
- }
- ngOnDestroy() {
- this.spaceSubscription.unsubscribe();
+ this.agentService.getAgent().then((agent) => {
+ this.recommendationService.getRecommendedQuestions(agent.agentid)
+ .then((res: RecommenderQuestion[]) => {
+ this.recommenderQuestions = res;
+ }).catch(() => {
+ console.error("error while getting recommendations...");
+ }).finally(() => {
+ this.recommendationsLoaded = true;
+
+ // a bit responsive design
+ let perPage = 3;
+ if (window.innerWidth <= 600) {
+ perPage = 1;
+ } else if (window.innerWidth <= 1200) {
+ perPage = 2;
+ }
+
+ this.splide = new Splide( '.splide', {
+ type : 'loop',
+ perPage: perPage,
+ perMove: 1,
+ classes: {
+ slide: 'splide__slide slide',
+ prev : 'splide__arrow--prev arrow',
+ next : 'splide__arrow--next arrow',
+ },
+ width: '100%'
+ } );
+
+ this.splide.mount();
+
+ for (let rq of this.recommenderQuestions) {
+ let addHTML = 'Public Spaces
+Public spaces are currently deactivated.
+
+