Fixes small style bugs, replaces local / session storage indicator with indexeddb

parent 2c6df69a
......@@ -35,8 +35,8 @@
<g>
<path id="firstRow" d="M73.143,79.904c-2.585-1.189-5.692-2.014-9.139-2.01c-3.446-0.004-6.553,0.82-9.137,2.01 c-2.609,1.201-4.702,2.736-6.365,4.236l8.505,8.506c0.894-0.744,1.919-1.426,3.031-1.912c1.199-0.52,2.473-0.836,3.965-0.84 c1.564,0.004,2.891,0.352,4.139,0.918c1.047,0.475,2.007,1.137,2.855,1.842l8.515-8.514c-0.008-0.008-0.016-0.016-0.023-0.021 C77.832,82.629,75.736,81.096,73.143,79.904z"></path>
<path id="secondRow" d="M80.057,62.309c-4.579-2.104-9.994-3.537-16.047-3.533c-6.053-0.004-11.466,1.429-16.045,3.531 c-5.233,2.405-9.402,5.632-12.597,8.701l8.486,8.486c0.45-0.426,0.917-0.854,1.411-1.275c2.287-1.965,5.03-3.842,8.151-5.205 c3.128-1.365,6.615-2.234,10.594-2.238c4.171,0.004,7.806,0.961,11.048,2.441c3.594,1.641,6.674,3.975,9.104,6.273l8.486-8.486 c-0.391-0.375-0.793-0.752-1.213-1.131C88.422,67.166,84.645,64.413,80.057,62.309z"></path>
<path *ngIf="!connectionService.lowSpeed && localStorageAvailable && sessionStorageAvailable" id="thirdRow" d="M104.078,55.731c-4.45-3.999-10.01-8.043-16.711-11.116c-6.693-3.072-14.553-5.151-23.369-5.147 c-8.815-0.003-16.674,2.074-23.366,5.145c-7.741,3.555-13.948,8.383-18.692,12.967l8.487,8.487 c0.602-0.578,1.22-1.156,1.874-1.734c3.733-3.307,8.295-6.542,13.581-8.925c5.294-2.384,11.29-3.937,18.116-3.94 c6.934,0.003,13.014,1.606,18.369,4.056c6.101,2.788,11.225,6.728,15.211,10.55l8.484-8.484 C105.424,56.973,104.77,56.354,104.078,55.731z"></path>
<path *ngIf="!connectionService.lowSpeed && !connectionService.mediumSpeed && localStorageAvailable && sessionStorageAvailable" id="fourthRow" d="M97.259,27.395c-9.55-4.381-20.715-7.333-33.265-7.33c-12.55-0.003-23.712,2.946-33.26,7.325 c-9.341,4.287-17.149,9.901-23.464,15.519l8.502,8.502c5.602-4.907,12.416-9.71,20.346-13.286 c8.119-3.658,17.374-6.056,27.876-6.06c10.668,0.003,20.053,2.479,28.266,6.239c7.766,3.553,14.46,8.291,19.973,13.117 l8.498-8.498C114.414,37.307,106.601,31.678,97.259,27.395z"></path>
<path *ngIf="!connectionService.lowSpeed && indexedDbAvailable" id="thirdRow" d="M104.078,55.731c-4.45-3.999-10.01-8.043-16.711-11.116c-6.693-3.072-14.553-5.151-23.369-5.147 c-8.815-0.003-16.674,2.074-23.366,5.145c-7.741,3.555-13.948,8.383-18.692,12.967l8.487,8.487 c0.602-0.578,1.22-1.156,1.874-1.734c3.733-3.307,8.295-6.542,13.581-8.925c5.294-2.384,11.29-3.937,18.116-3.94 c6.934,0.003,13.014,1.606,18.369,4.056c6.101,2.788,11.225,6.728,15.211,10.55l8.484-8.484 C105.424,56.973,104.77,56.354,104.078,55.731z"></path>
<path *ngIf="!connectionService.lowSpeed && !connectionService.mediumSpeed && indexedDbAvailable" id="fourthRow" d="M97.259,27.395c-9.55-4.381-20.715-7.333-33.265-7.33c-12.55-0.003-23.712,2.946-33.26,7.325 c-9.341,4.287-17.149,9.901-23.464,15.519l8.502,8.502c5.602-4.907,12.416-9.71,20.346-13.286 c8.119-3.658,17.374-6.056,27.876-6.06c10.668,0.003,20.053,2.479,28.266,6.239c7.766,3.553,14.46,8.291,19.973,13.117 l8.498-8.498C114.414,37.307,106.601,31.678,97.259,27.395z"></path>
</g>
<circle id="circleRow" cx="64.008" cy="102.109" r="5.825"></circle>
</g>
......@@ -91,30 +91,16 @@
</li>
<li>
<i class="fas"
[class.fa-check-square]="localStorageAvailable"
[class.text-success]="localStorageAvailable"
[class.fa-times]="!localStorageAvailable"
[class.text-danger]="!localStorageAvailable"
[class.fa-check-square]="indexedDbAvailable"
[class.text-success]="indexedDbAvailable"
[class.fa-times]="!indexedDbAvailable"
[class.text-danger]="!indexedDbAvailable"
data-fa-transform="shrink-5"
data-fa-mask="fas fa-square"></i>
<p class="ml-2 mb-0 d-inline">
<span>LocalStorage: </span>
<span *ngIf="localStorageAvailable">{{'region.header.connection_status.localStorage_status.writable' | translate}}</span>
<span *ngIf="!localStorageAvailable">{{'region.header.connection_status.localStorage_status.non_writable' | translate}}</span>
</p>
</li>
<li>
<i class="fas"
[class.fa-check-square]="sessionStorageAvailable"
[class.text-success]="sessionStorageAvailable"
[class.fa-times]="!sessionStorageAvailable"
[class.text-danger]="!sessionStorageAvailable"
data-fa-transform="shrink-5"
data-fa-mask="fas fa-square"></i>
<p class="ml-2 mb-0 d-inline">
<span>SessionStorage: </span>
<span *ngIf="sessionStorageAvailable">{{'region.header.connection_status.sessionStorage_status.writable' | translate}}</span>
<span *ngIf="!sessionStorageAvailable">{{'region.header.connection_status.sessionStorage_status.non_writable' | translate}}</span>
<span>IndexedDb: </span>
<span *ngIf="indexedDbAvailable">{{'region.header.connection_status.indexedDb_status.writable' | translate}}</span>
<span *ngIf="!indexedDbAvailable">{{'region.header.connection_status.indexedDb_status.non_writable' | translate}}</span>
</p>
</li>
<li>
......
......@@ -7,38 +7,6 @@ import { ConnectionService } from '../../service/connection/connection.service';
import { HeaderLabelService } from '../../service/header-label/header-label.service';
import { TrackingService } from '../../service/tracking/tracking.service';
function isLocalStorageSupported(): boolean {
try {
const itemBackup = localStorage.getItem('');
localStorage.removeItem('');
localStorage.setItem('', itemBackup);
if (itemBackup === null) {
localStorage.removeItem('');
} else {
localStorage.setItem('', itemBackup);
}
return true;
} catch (e) {
return false;
}
}
function isSessionStorageSupported(): boolean {
try {
const itemBackup = sessionStorage.getItem('');
sessionStorage.removeItem('');
sessionStorage.setItem('', itemBackup);
if (itemBackup === null) {
sessionStorage.removeItem('');
} else {
sessionStorage.setItem('', itemBackup);
}
return true;
} catch (e) {
return false;
}
}
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
......@@ -72,17 +40,11 @@ export class HeaderComponent implements OnInit {
this._inHomeRoute = value;
}
private _localStorageAvailable: boolean = isLocalStorageSupported();
get localStorageAvailable(): boolean {
return this._localStorageAvailable;
get indexedDbAvailable(): boolean {
return this._indexedDbAvailable;
}
private _sessionStorageAvailable: boolean = isSessionStorageSupported();
get sessionStorageAvailable(): boolean {
return this._sessionStorageAvailable;
}
private readonly _indexedDbAvailable: boolean = this.indexedDbSupported();
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
......@@ -96,19 +58,20 @@ export class HeaderComponent implements OnInit {
}
public generateConnectionQualityColor(): SafeStyle {
const colorCode = this.connectionService.lowSpeed ||
!this.localStorageAvailable ||
!this.sessionStorageAvailable ? 'var(--danger)' :
this.connectionService.mediumSpeed ? 'var(--danger)' :
!this.connectionService.serverAvailable ? 'var(--grey)' :
'var(--success)';
const colorCode = this.connectionService.lowSpeed || //
!this.indexedDbAvailable ? 'var(--danger)' : //
this.connectionService.mediumSpeed ? 'var(--danger)' : //
!this.connectionService.serverAvailable ? 'var(--grey)' : 'var(--success)';
return this.sanitizeStyle(colorCode);
}
public ngOnInit(): void {
this.router.events.subscribe((url: any) => {
if (isPlatformBrowser(this.platformId)) {
this.inHomeRoute = (location.pathname === '/home' || location.pathname === '/');
this.inHomeRoute = (
location.pathname === '/home' || location.pathname === '/'
);
}
});
}
......@@ -123,8 +86,7 @@ export class HeaderComponent implements OnInit {
dimension3: this.connectionService.rtt,
dimension4: this.connectionService.serverAvailable,
dimension5: this.connectionService.websocketAvailable,
dimension6: this.localStorageAvailable,
dimension7: this.sessionStorageAvailable,
dimension6: this.indexedDbAvailable,
},
});
......@@ -140,4 +102,11 @@ export class HeaderComponent implements OnInit {
value = value.replace(/\s/g, '');
return this.sanitizer.bypassSecurityTrustStyle(`${value}`);
}
private indexedDbSupported(): boolean {
return (
isPlatformBrowser(this.platformId) && //
'indexedDB' in window //
);
}
}
......@@ -60,6 +60,7 @@
<p>
<span [innerHTML]="'component.quiz_summary.text' | translate"></span>:&nbsp;
<span *ngIf="question.questionText"
class="break-word"
[innerHTML]="question.questionText"></span>
<span *ngIf="!question.questionText">{{'component.quiz_summary.validation_errors.reasons.empty_question_text' | translate}}</span>
</p>
......
......@@ -4,3 +4,7 @@
flex: 1;
}
}
.break-word {
word-break: break-word;
}
\ No newline at end of file
......@@ -22,7 +22,7 @@ import { TrackingService } from '../../../service/tracking/tracking.service';
export class QuizManagerComponent implements OnDestroy {
public static TYPE = 'QuizManagerComponent';
public readonly questionGroupItem: IQuestionGroup;
public questionGroupItem: IQuestionGroup;
private _selectableQuestionTypes = availableQuestionTypes;
......@@ -42,8 +42,6 @@ export class QuizManagerComponent implements OnDestroy {
) {
headerLabelService.headerLabel = 'component.quiz_manager.title';
this.questionGroupItem = activeQuestionGroupService.activeQuestionGroup;
this.footerBarService.TYPE_REFERENCE = QuizManagerComponent.TYPE;
footerBarService.replaceFooterElements([
......@@ -55,18 +53,22 @@ export class QuizManagerComponent implements OnDestroy {
this.footerBarService.footerElemSound,
]);
this.footerBarService.footerElemStartQuiz.isActive = activeQuestionGroupService.activeQuestionGroup.isValid();
this.footerBarService.footerElemStartQuiz.onClickCallback = async (self: FooterbarElement) => {
if (!self.isActive) {
return;
}
this.currentQuizService.quiz = this.questionGroupItem;
await this.currentQuizService.cacheQuiz();
await this.lobbyApiService.putLobby({
quiz: this.currentQuizService.quiz.serialize(),
}).toPromise();
this.router.navigate(['/quiz', 'flow', 'lobby']);
};
this.activeQuestionGroupService.loadData().then(() => {
this.questionGroupItem = activeQuestionGroupService.activeQuestionGroup;
this.footerBarService.footerElemStartQuiz.isActive = activeQuestionGroupService.activeQuestionGroup.isValid();
this.footerBarService.footerElemStartQuiz.onClickCallback = async (self: FooterbarElement) => {
if (!self.isActive) {
return;
}
this.currentQuizService.quiz = this.questionGroupItem;
await this.currentQuizService.cacheQuiz();
await this.lobbyApiService.putLobby({
quiz: this.currentQuizService.quiz.serialize(),
}).toPromise();
this.router.navigate(['/quiz', 'flow', 'lobby']);
};
});
}
public ngOnDestroy(): void {
......@@ -87,14 +89,24 @@ export class QuizManagerComponent implements OnDestroy {
switch (id) {
case 'TrueFalseSingleChoiceQuestion':
question.answerOptionList = [
new DefaultAnswerOption({ answerText: this.translateService.instant('global.true'), isCorrect: false }),
new DefaultAnswerOption({ answerText: this.translateService.instant('global.false'), isCorrect: false }),
new DefaultAnswerOption({
answerText: this.translateService.instant('global.true'),
isCorrect: false,
}), new DefaultAnswerOption({
answerText: this.translateService.instant('global.false'),
isCorrect: false,
}),
];
break;
case 'YesNoSingleChoiceQuestion':
question.answerOptionList = [
new DefaultAnswerOption({ answerText: this.translateService.instant('global.yes'), isCorrect: false }),
new DefaultAnswerOption({ answerText: this.translateService.instant('global.no'), isCorrect: false }),
new DefaultAnswerOption({
answerText: this.translateService.instant('global.yes'),
isCorrect: false,
}), new DefaultAnswerOption({
answerText: this.translateService.instant('global.no'),
isCorrect: false,
}),
];
}
this.activeQuestionGroupService.activeQuestionGroup.addQuestion(question);
......
......@@ -68,7 +68,7 @@
[routerLink]="['/quiz', enteredSessionName]"
[disabled]="!canJoinQuiz">
<i class="fas fa-thumbs-up"></i>
<span [innerHTML]="'component.hashtag_management.join_session' | translate"></span>
<span class="ml-1">{{'component.hashtag_management.join_session' | translate}}</span>
</button>
<button *ngIf="canStartQuiz"
id="startSession"
......@@ -77,7 +77,7 @@
[class.disabled]="!canStartQuiz || !serverPassword.length"
[disabled]="!canStartQuiz || !serverPassword.length">
<i class="fas fa-thumbs-up"></i>
<span [innerHTML]="'component.hashtag_management.start_session' | translate"></span>
<span class="ml-1">{{'component.hashtag_management.start_session' | translate}}</span>
</button>
</div>
<div class="col-6 col-create-session px-1">
......@@ -87,14 +87,14 @@
[class.disabled]="!serverPassword.length"
(click)="handleClick('addSession') && setAsCurrentQuiz(['/quiz', 'manager', 'overview'])"
[disabled]="!serverPassword.length">
<span [innerHTML]="'component.hashtag_management.create_session' | translate"></span>
<span class="mr-1">{{'component.hashtag_management.create_session' | translate}}</span>
<i class="fas fa-edit"></i>
</button>
<button *ngIf="canEditQuiz"
id="editSession"
class="btn btn-success btn-block pointer"
(click)="handleClick('editSession') && setActiveQuestionGroup(['/quiz', 'manager', 'overview'])">
<span [innerHTML]="'component.hashtag_management.edit_session' | translate"></span>
<span class="mr-1">{{'component.hashtag_management.edit_session' | translate}}</span>
<i class="fas fa-edit"></i>
</button>
<button *ngIf="isAddingDemoQuiz"
......@@ -103,7 +103,7 @@
[class.disabled]="!serverPassword.length"
(click)="handleClick('add-demo-quiz') && setActiveQuestionGroup() && setAsCurrentQuiz(['/quiz', 'flow'])"
[disabled]="!serverPassword.length">
<span [innerHTML]="'component.hashtag_management.create_demo_session' | translate"></span>
<span class="mr-1">{{'component.hashtag_management.create_demo_session' | translate}}</span>
<i class="fas fa-paper-plane"></i>
</button>
<button *ngIf="isAddingABCDQuiz"
......@@ -112,7 +112,7 @@
[class.disabled]="!serverPassword.length"
(click)="handleClick('add-abcd-quiz') && setActiveQuestionGroup() && setAsCurrentQuiz(['/quiz', 'flow'])"
[disabled]="!serverPassword.length">
<span [innerHTML]="'component.hashtag_management.create_abcd_session' | translate"></span>
<span class="mr-1">{{'component.hashtag_management.create_abcd_session' | translate}}</span>
<i class="fas fa-paper-plane"></i>
</button>
</div>
......
......@@ -3,8 +3,7 @@
<app-header></app-header>
</div>
<div class="container-fluid"
style="height: 90vh;">
<div class="container-fluid">
<div class="row flex-sm-nowrap h-100">
<div class="footer-bar-wrapper flex-grow-0 flex-shrink-0 p-0 relative">
<app-footer-bar [footerElements]="getFooterBarElements()"></app-footer-bar>
......
@import "../../../styles_vendor";
.container {
&#content-container {
@include media-breakpoint-down(xs) {
height: 80vh;
top: calc(10vh + 60px);
position: absolute;
z-index: 1040;
}
@include media-breakpoint-up(sm) {
height: 90vh;
top: 20vh;
}
@include media-breakpoint-only(md) {
max-width: calc(#{map_get($container-max-widths, md)} - 20vw);
}
@include media-breakpoint-only(lg) {
max-width: calc(#{map_get($container-max-widths, lg)} - 30vw);
}
@include media-breakpoint-only(xl) {
max-width: 60vw;
.container-fluid {
@include media-breakpoint-only(xs) {
min-height: 90vh;
}
@include media-breakpoint-up(sm) {
height: 90vh;
}
.container {
&#content-container {
@include media-breakpoint-down(xs) {
top: calc(10vh + 50px);
position: absolute;
z-index: 1040;
}
@include media-breakpoint-up(sm) {
height: 90vh;
top: 20vh;
}
@include media-breakpoint-only(md) {
max-width: calc(#{map_get($container-max-widths, md)} - 20vw);
}
@include media-breakpoint-only(lg) {
max-width: calc(#{map_get($container-max-widths, lg)} - 30vw);
}
@include media-breakpoint-only(xl) {
max-width: 60vw;
}
}
}
}
......
......@@ -48,7 +48,7 @@ export class ActiveQuestionGroupService {
}
public cleanUp(): void {
this.activeQuestionGroup = null;
this._activeQuestionGroup = null;
if (isPlatformBrowser(this.platformId)) {
this.storageService.delete(DB_TABLE.CONFIG, STORAGE_KEY.ACTIVE_QUESTION_GROUP).subscribe();
}
......@@ -81,11 +81,14 @@ export class ActiveQuestionGroupService {
}
}
private async loadData(): Promise<void> {
const parsedObject = await this.storageService.read(DB_TABLE.CONFIG, STORAGE_KEY.ACTIVE_QUESTION_GROUP).toPromise();
if (parsedObject) {
this.activeQuestionGroup = questionGroupReflection[parsedObject.TYPE](parsedObject);
}
public loadData(): Promise<void> {
return new Promise(async resolve => {
const parsedObject = await this.storageService.read(DB_TABLE.CONFIG, STORAGE_KEY.ACTIVE_QUESTION_GROUP).toPromise();
if (parsedObject) {
this._activeQuestionGroup = questionGroupReflection[parsedObject.TYPE](parsedObject);
}
resolve();
});
}
private dec2hex(dec): string {
......
......@@ -35,9 +35,7 @@ export class StorageService {
public async getAllQuiznames(): Promise<Array<string>> {
return (
await this.indexedDbService.all(DB_TABLE.QUIZ).toPromise()
).map(value => {
return value.id;
});
).map(value => value.id);
}
public getAll(table: DB_TABLE): Observable<any> {
......
......@@ -16,15 +16,14 @@
<meta name="author"
content="The arsnova Team">
<meta name="copyright"
content="MIT">
content="GPLv3">
<!-- all metas from https://github.com/h5bp/mobile-boilerplate -->
<meta name="apple-mobile-web-app-title"
content="arsnova.click">
<meta name="HandheldFriendly"
content="true">
<meta name="MobileOptimized"
content="320">
content="375">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes, minimal-ui">
......
......@@ -63,7 +63,7 @@ p {
}
.center-vertical {
height: 100%;
height: 80vh;
align-content: center;
align-items: center;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment