optimizations for faster page load: gzip compression, .webp images

mc_backend/mcserver/app/services/databaseService.py

@@ -55,6 +55,6 @@ class DatabaseService:
             ret_val = ret_val.first() if first else ret_val.all()
             DatabaseService.commit()
             return ret_val
-        except InvalidRequestError:
+        except:
             db.session.rollback()
             return None

mc_frontend/nginx.conf

@@ -29,6 +29,9 @@ http {
 
         location / {
             root   /usr/share/nginx/html;
+            # enable caching for all files for up to 20 days
+            expires 20d;
+            add_header Cache-Control "public, no-transform";
             index  index.html index.htm;
             # enable CORS so the cordova files (config.xml) can be accessed from other domains
             add_header Access-Control-Allow-Origin *;
@@ -119,7 +122,7 @@ http {
 
 
 	# Enable gzipping of responses.
-	#gzip on;
+	gzip on;
 
 	# Set the Vary HTTP header as defined in the RFC 2616.
 	gzip_vary on;
@@ -127,6 +130,9 @@ http {
 	# Enable checking the existence of precompressed files.
 	#gzip_static on;
 
+    gzip_comp_level 6;
+    gzip_proxied any;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+xml image/svg+xml;
 
 	# Specifies the main log format.
 	log_format main '$remote_addr - $remote_user [$time_local] "$request" '

mc_frontend/src/app/corpus.service.spec.ts

@@ -133,6 +133,11 @@ describe('CorpusService', () => {
         });
     });
 
+    it('should get a corpus list from a JSON string', () => {
+        const corpora: CorpusMC[] = corpusService.getCorpusListFromJSONstring('{"corpora": []}');
+        expect(corpora.length).toBe(0);
+    });
+
     it('should get CTS text passage', (done) => {
         const spy: Spy = spyOn(helperService, 'makeGetRequest').and.returnValue(Promise.reject(
             new HttpErrorResponse({status: 500})));
@@ -231,6 +236,7 @@ describe('CorpusService', () => {
     });
 
     it('should initialize the corpus service', (done) => {
+        const annisRespSpy: Spy = spyOn(corpusService, 'checkAnnisResponse').and.callFake(() => Promise.reject());
         const restoreSpy: Spy = spyOn(corpusService, 'restoreLastCorpus').and.returnValue(Promise.resolve());
         const updateInfoSpy: Spy = spyOn(corpusService, 'initUpdateInfo').and.callFake(() => Promise.reject());
         helperService.applicationState.next(helperService.deepCopy(MockMC.applicationState) as ApplicationState);
@@ -241,9 +247,13 @@ describe('CorpusService', () => {
             updateInfoSpy.and.returnValue(Promise.resolve());
             const getCorporaSpy: Spy = spyOn(corpusService, 'getCorpora').and.returnValue(Promise.resolve());
             corpusService.initCorpusService().then(() => {
-                expect(getCorporaSpy).toHaveBeenCalledTimes(1);
-                expect(restoreSpy).toHaveBeenCalledTimes(1);
-                done();
+                expect(restoreSpy).toHaveBeenCalledTimes(0);
+                annisRespSpy.and.returnValue(Promise.resolve());
+                corpusService.initCorpusService().then(() => {
+                    expect(getCorporaSpy).toHaveBeenCalledTimes(2);
+                    expect(restoreSpy).toHaveBeenCalledTimes(1);
+                    done();
+                });
             });
         });
     });

mc_frontend/src/app/corpus.service.ts

@@ -175,7 +175,7 @@ export class CorpusService {
                             return resolve();
                         });
                     }
-                }, async () => {
+                }, async (error: HttpErrorResponse) => {
                     this.loadCorporaFromLocalStorage().then(() => {
                         return reject();
                     });
@@ -313,6 +313,8 @@ export class CorpusService {
                         this.restoreLastCorpus().then(() => {
                             return resolve();
                         });
+                    }, () => {
+                        return resolve();
                     });
                 });
             }, () => {

mc_frontend/src/app/doc-software/doc-software.page.html

@@ -40,7 +40,7 @@
         <ion-row>
             <ol>
                 <li>
-                    {{'DOC_SOFTWARE_DEV_1' | translate}}<br> <img src="assets/imgs/callidus_skizze_klein.png"
+                    {{'DOC_SOFTWARE_DEV_1' | translate}}<br> <img src="assets/imgs/callidus_skizze_klein.webp"
                                                                   alt="Skizze, wie die Software-Architektur aussehen soll"
                                                                   width="60%" height="60%" padding="2px;">
                 </li>

mc_frontend/src/app/home/home.page.html

@@ -12,7 +12,8 @@
             <div>
                 <ion-spinner *ngIf="helperService.openRequests.length"></ion-spinner>
                 <ion-select [(ngModel)]="helperService.currentLanguage" (ngModelChange)="changeLanguage($event)"
-                            name="currentLanguage" placeholder="{{helperService.currentLanguage?.name}}">
+                            name="currentLanguage" placeholder="{{helperService.currentLanguage?.name}}"
+                            aria-label="currentLanguage">
                     <ion-select-option *ngFor="let lang of helperService.languages" value="{{lang.shortcut}}">
                         {{lang.name}}</ion-select-option>
                 </ion-select>
@@ -37,7 +38,7 @@
         <ion-row>
             <ion-col>
                 <div class="card">
-                    <img src="assets/imgs/drag_drop_exercise.png" alt="Übungsbeispiel"
+                    <img src="assets/imgs/drag_drop_exercise.webp" alt="Übungsbeispiel"
                          style="padding: 0.5em 0.25em 0 0.25em;">
                     <h1>{{ 'EXERCISE_GENERATE' | translate }}</h1>
                     <p>{{'TEXT_SELECTION' | translate }}<br>
@@ -53,7 +54,7 @@
             </ion-col>
             <ion-col>
                 <div class="card">
-                    <img src="assets/imgs/database.png" alt="Screenshot der Datenbank"
+                    <img src="assets/imgs/database.webp" alt="Screenshot der Datenbank"
                          style="padding: 0.5em 0.25em 0 0.25em;">
                     <h1>{{ 'EXERCISE_LIST' | translate }}</h1>
                     <p> {{'EXERCISES_CREATED' | translate }}<br>
@@ -70,7 +71,7 @@
             </ion-col>
             <ion-col>
                 <div class="card">
-                    <img src="assets/imgs/results_testmode.png" alt="Ergebnisübersicht des Testmoduls"
+                    <img src="assets/imgs/results_testmode.webp" alt="Ergebnisübersicht des Testmoduls"
                          style="padding: 0.5em 0.25em 0 0.25em;">
                     <h1>{{ 'TEST' | translate }}</h1>
                     <p>
@@ -87,7 +88,7 @@
             </ion-col>
             <ion-col>
                 <div class="card">
-                    <img src="assets/imgs/callidus_skizze_klein.png"
+                    <img src="assets/imgs/callidus_skizze_klein.webp"
                          alt="Skizze, wie die Software-Architektur aussehen soll"
                          style="padding: 0.5em 0.25em 0 0.25em;">
                     <h1>{{ 'DOCUMENTATION' | translate }}</h1>

mc_frontend/src/app/home/home.page.spec.ts

@@ -45,6 +45,7 @@ describe('HomePage', () => {
 
     it('should change the language', (done) => {
         const translateSpy: Spy = spyOn(homePage.corpusService, 'adjustTranslations').and.returnValue(Promise.resolve());
+        homePage.corpusService.annisResponse = {};
         spyOn(homePage.corpusService, 'processAnnisResponse');
         homePage.changeLanguage('').then(() => {
             expect(translateSpy).toHaveBeenCalledTimes(1);

mc_frontend/src/app/home/home.page.ts

@@ -7,7 +7,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {ExerciseService} from 'src/app/exercise.service';
 import {CorpusService} from 'src/app/corpus.service';
 import {take} from 'rxjs/operators';
-import { version } from 'src/version';
+import {version} from 'src/version';
 import configMC from '../../configMC';
 
 @Component({
@@ -36,7 +36,9 @@ export class HomePage implements OnInit {
                 this.translate.use(newLanguage).pipe(take(1)).subscribe(() => {
                     this.helperService.loadTranslations(this.translate);
                     this.corpusService.initPhenomenonMap();
-                    this.corpusService.processAnnisResponse(this.corpusService.annisResponse);
+                    if (this.corpusService.annisResponse) {
+                        this.corpusService.processAnnisResponse(this.corpusService.annisResponse);
+                    }
                     this.corpusService.adjustTranslations().then();
                     return resolve();
                 });

mc_frontend/src/index.html

@@ -6,9 +6,11 @@
     <title>Machina Callida</title>
 
     <meta name="viewport"
-          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes"/>
     <meta name="format-detection" content="telephone=no"/>
     <meta name="msapplication-tap-highlight" content="no"/>
+    <meta name="Description" content="Machina Callida offers exercises for learning Latin.
+    Choose from ready-made exercises that others have built, or simply create your own.">
 
     <link rel="icon" type="image/png" href="assets/icon/favicon.jpg"/>
 

mc_frontend/src/version.ts

-export const version = '2.1.7';
+export const version = '2.2.6';