Compare commits

..

4 Commits

Author SHA1 Message Date
1636f5d259 feat: new color system 2024-10-02 13:01:56 +02:00
Jovan Krunić
bb1f596bfc fix: enable starting the app without backend
Closes #223
2024-09-30 11:03:53 +00:00
0c49fd8c34 refactor: update nix dependencies 2024-09-30 13:00:59 +02:00
Thea Schöbl
ce5016a992 fix: text of the feedback form not fully visible
Closes #227
2024-09-18 09:53:50 +00:00
34 changed files with 923 additions and 333 deletions

View File

@@ -8,7 +8,8 @@ const config = {
database: {
name: 'elasticsearch',
query: {
fields: ["name"]
minMatch: '60%',
queryType: 'query_string',
},
},
},

View File

@@ -39,7 +39,7 @@ const boostings = {
type: SCThingType.AcademicEvent,
},
{
factor: 2,
factor: 1.6,
type: SCThingType.Building,
},
{
@@ -85,7 +85,7 @@ const boostings = {
],
place: [
{
factor: 3,
factor: 2,
type: SCThingType.Building,
},
{

View File

@@ -17,21 +17,12 @@ const config = {
name: 'elasticsearch',
version: '8.4.2',
query: {
type: 'best_fields',
fields: [
'identifiers^20',
'name^10',
'translations.*.name^10',
'alternateNames^10',
'translations.*.alternateNames^10',
'description^2',
'translations.*.description^2',
'categories^5',
],
},
searchAsYouTypeQuery: {
type: 'phrase_prefix',
fields: ['name.completion', 'name.completion._2gram', 'name.completion._3gram'],
minMatch: '75%',
queryType: 'dis_max',
matchBoosting: 1.3,
fuzziness: 'AUTO',
cutoffFrequency: 0,
tieBreaker: 0,
},
},
},

View File

@@ -20,8 +20,6 @@ import {
IndicesGetAliasResponse,
SearchHit,
SearchResponse,
SearchTermSuggest,
SearchTermSuggestOption,
} from '@elastic/elasticsearch/lib/api/types.js';
import {SCConfigFile, SCSearchQuery, SCSearchResponse, SCThings, SCUuid} from '@openstapps/core';
import {Logger} from '@openstapps/logger';
@@ -49,9 +47,6 @@ import {
import {noUndefined} from './util/no-undefined.js';
import {retryCatch, RetryOptions} from './util/retry.js';
import {Feature, Point, Polygon} from 'geojson';
import {parseSuggestions} from './util/parse-suggestions.js';
import {buildScoringFunctions} from './query/boost/scoring-functions.js';
import {buildFilter} from './query/filter.js';
/**
* A database interface for elasticsearch
@@ -360,39 +355,6 @@ export class Elasticsearch implements Database {
throw new Error('You tried to PUT an non-existing object. PUT is only supported on existing objects.');
}
public async searchAsYouType(parameters: SCSearchQuery): Promise<SCSearchResponse> {
const result = await this.client.search({
_source: 'name',
query: {
function_score: {
functions: buildScoringFunctions(this.config.internal.boostings, parameters.context),
query: {
bool: {
must: {
multi_match: {
query: parameters.query,
type: 'bool_prefix',
fields: ['name.completion', 'name.completion._2gram', 'name.completion._3gram'],
},
},
should: [],
filter: parameters.filter === undefined ? undefined : buildFilter(parameters.filter),
},
},
score_mode: 'max',
boost_mode: 'multiply',
},
},
index: ACTIVE_INDICES_ALIAS,
allow_no_indices: true,
size: 5,
});
const suggestions = result.hits.hits.map(it => (it._source as any).name);
console.log(suggestions);
console.log(result.took);
}
/**
* Search all indexed data
* @param parameters search query
@@ -402,23 +364,18 @@ export class Elasticsearch implements Database {
throw new TypeError('Database is undefined. You have to configure the query build');
}
const esConfig = this.config.internal.database as object as ElasticsearchConfig;
const esConfig: ElasticsearchConfig = {
name: this.config.internal.database.name as 'elasticsearch',
version: this.config.internal.database.version as string,
query: this.config.internal.database.query as
| ElasticsearchQueryDisMaxConfig
| ElasticsearchQueryQueryStringConfig
| undefined,
};
const response: SearchResponse<SCThings> = await this.client.search({
aggs: aggregations,
query: buildQuery(parameters, this.config, esConfig),
suggest:
parameters.query === undefined
? undefined
: {
text: parameters.query,
terms: {
term: {
field: 'name',
suggest_mode: 'missing',
},
},
},
from: parameters.from,
index: ACTIVE_INDICES_ALIAS,
allow_no_indices: true,
@@ -438,7 +395,6 @@ export class Elasticsearch implements Database {
response.aggregations === undefined
? []
: parseAggregations(response.aggregations as Record<AggregateName, AggregationsMultiTermsBucket>),
suggestions: response.suggest === undefined ? undefined : parseSuggestions(response.suggest),
pagination: {
count: response.hits.hits.length,
offset: typeof parameters.from === 'number' ? parameters.from : 0,

View File

@@ -30,21 +30,84 @@ export const buildQuery = function buildQuery(
defaultConfig: SCConfigFile,
elasticsearchConfig: ElasticsearchConfig,
): QueryDslQueryContainer {
return {
// if config provides a minMatch parameter, we use query_string instead of a match query
let query;
if (elasticsearchConfig.query === undefined) {
query = {
query_string: {
analyzer: 'search_german',
default_field: 'name',
minimum_should_match: '90%',
query: typeof parameters.query === 'string' ? parameters.query : '*',
},
};
} else if (elasticsearchConfig.query.queryType === 'query_string') {
query = {
query_string: {
analyzer: 'search_german',
default_field: 'name',
minimum_should_match: elasticsearchConfig.query.minMatch,
query: typeof parameters.query === 'string' ? parameters.query : '*',
},
};
} else if (elasticsearchConfig.query.queryType === 'dis_max') {
if (typeof parameters.query === 'string' && parameters.query !== '*') {
query = {
dis_max: {
boost: 1.2,
queries: [
{
match: {
name: {
boost: elasticsearchConfig.query.matchBoosting,
fuzziness: elasticsearchConfig.query.fuzziness,
query: parameters.query,
},
},
},
{
query_string: {
default_field: 'name',
minimum_should_match: elasticsearchConfig.query.minMatch,
query: parameters.query,
},
},
],
tie_breaker: elasticsearchConfig.query.tieBreaker,
},
};
}
} else {
throw new Error(
'Unsupported query type. Check your config file and reconfigure your elasticsearch query',
);
}
const functionScoreQuery: QueryDslQueryContainer = {
function_score: {
functions: buildScoringFunctions(defaultConfig.internal.boostings, parameters.context),
query: {
bool: {
must:
parameters.query === undefined || parameters.query === '' || parameters.query === '*'
? {match_all: {}}
: {multi_match: {...elasticsearchConfig.query, query: parameters.query}},
minimum_should_match: 0, // if we have no should, nothing can match
must: [],
should: [],
filter: parameters.filter === undefined ? undefined : buildFilter(parameters.filter),
},
},
score_mode: 'max',
boost_mode: 'multiply',
score_mode: 'multiply',
},
};
const mustMatch = functionScoreQuery.function_score?.query?.bool?.must;
if (Array.isArray(mustMatch)) {
if (query !== undefined) {
mustMatch.push(query);
}
if (parameters.filter !== undefined) {
mustMatch.push(buildFilter(parameters.filter));
}
}
return functionScoreQuery;
};

View File

@@ -13,7 +13,68 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QueryDslMultiMatchQuery} from '@elastic/elasticsearch/lib/api/types.js';
/**
* A configuration for using the Dis Max Query
*
* See https://www.elastic.co/guide/en/elasticsearch/reference/5.5/query-dsl-dis-max-query.html for further
* explanation of what the parameters mean
*/
export interface ElasticsearchQueryDisMaxConfig {
/**
* Relative (to a total number of documents) or absolute number to exclude meaningless matches that frequently appear
*/
cutoffFrequency: number;
/**
* The maximum allowed Levenshtein Edit Distance (or number of edits)
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/common-options.html#fuzziness
*/
fuzziness: number | string;
/**
* Increase the importance (relevance score) of a field
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/mapping-boost.html
*/
matchBoosting: number;
/**
* Minimal number (or percentage) of words that should match in a query
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-minimum-should-match.html
*/
minMatch: string;
/**
* Type of the query - in this case 'dis_max' which is a union of its subqueries
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-dis-max-query.html
*/
queryType: 'dis_max';
/**
* Changes behavior of default calculation of the score when multiple results match
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-multi-match-query.html#tie-breaker
*/
tieBreaker: number;
}
/**
* A configuration for using Query String Query
*
* See https://www.elastic.co/guide/en/elasticsearch/reference/5.5/query-dsl-query-string-query.html for further
* explanation of what the parameters mean
*/
export interface ElasticsearchQueryQueryStringConfig {
/**
* Minimal number (or percentage) of words that should match in a query
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-minimum-should-match.html
*/
minMatch: string;
/**
* Type of the query - in this case 'query_string' which uses a query parser in order to parse content
* @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-query-string-query.html
*/
queryType: 'query_string';
}
/**
* An config file for the elasticsearch database interface
@@ -44,12 +105,7 @@ export interface ElasticsearchConfig {
/**
* Configuration for using queries
*/
query: Omit<QueryDslMultiMatchQuery, 'query'>;
/**
*
*/
searchAsYouTypeQuery: Omit<QueryDslMultiMatchQuery, 'query'>;
query?: ElasticsearchQueryDisMaxConfig | ElasticsearchQueryQueryStringConfig;
/**
* Version of the used elasticsearch

View File

@@ -1,28 +0,0 @@
import {
SearchSuggest,
SearchTermSuggest,
SearchTermSuggestOption,
SuggestionName,
} from '@elastic/elasticsearch/lib/api/types.js';
import {SCSearchSuggestions} from '@openstapps/core';
/**
* Parse ES Suggestions to SC Search Suggestions
*/
export function parseSuggestions(suggest: Record<SuggestionName, SearchSuggest[]>): SCSearchSuggestions {
const termsSuggestions =
suggest.terms === undefined
? []
: (suggest.terms as SearchTermSuggest[])
?.map(
({text, options}) =>
[
text,
(options as SearchTermSuggestOption[] | undefined)?.map(({text}) => text) ?? [],
] as const,
)
.filter(([, suggestions]) => suggestions.length > 0) ?? [];
return {
terms: termsSuggestions.length === 0 ? undefined : Object.fromEntries(termsSuggestions),
};
}

View File

@@ -4,22 +4,37 @@
nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
flake-utils.url = "github:numtide/flake-utils";
};
outputs = {
outputs =
{
self,
nixpkgs,
flake-utils,
}: let
}:
let
aapt2buildToolsVersion = "33.0.2";
in
flake-utils.lib.eachDefaultSystem (system: let
flake-utils.lib.eachDefaultSystem (
system:
let
pkgs = import nixpkgs {
inherit system;
overlays = [
(final: prev: rec {
fontMin = prev.python311.withPackages (ps: with ps; [brotli fonttools] ++ (with fonttools.optional-dependencies; [woff]));
fontMin = prev.python311.withPackages (
ps:
with ps;
[
brotli
fonttools
]
++ (with fonttools.optional-dependencies; [ woff ])
);
android = prev.androidenv.composeAndroidPackages {
buildToolsVersions = ["30.0.3" aapt2buildToolsVersion];
platformVersions = ["33"];
buildToolsVersions = [
"34.0.0"
aapt2buildToolsVersion
];
platformVersions = [ "34" ];
};
cypress = prev.cypress.overrideAttrs (cyPrev: rec {
version = "13.2.0";
@@ -29,6 +44,7 @@
};
});
nodejs = prev.nodejs_18;
corepack = prev.corepack_18;
})
];
config = {
@@ -38,7 +54,7 @@
};
androidFhs = pkgs.buildFHSUserEnv {
name = "android-env";
targetPkgs = pkgs: with pkgs; [];
targetPkgs = pkgs: with pkgs; [ ];
runScript = "bash";
profile = ''
export ALLOW_NINJA_ENV=true
@@ -46,9 +62,10 @@
export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
'';
};
in {
in
{
devShell = pkgs.mkShell rec {
nativeBuildInputs = [androidFhs];
nativeBuildInputs = [ androidFhs ];
buildInputs = with pkgs; [
nodejs
corepack
@@ -67,5 +84,6 @@
CYPRESS_INSTALL_BINARY = "0";
CYPRESS_RUN_BINARY = "${pkgs.cypress}/bin/Cypress";
};
});
}
);
}

View File

@@ -82,6 +82,7 @@
"@ionic/angular": "7.8.0",
"@ionic/storage-angular": "4.0.0",
"@maplibre/ngx-maplibre-gl": "17.4.1",
"@material/material-color-utilities": "0.3.0",
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "8.0.0",
"@openid/appauth": "1.3.1",

View File

@@ -71,6 +71,7 @@ import {Capacitor} from '@capacitor/core';
import {SplashScreen} from '@capacitor/splash-screen';
import maplibregl from 'maplibre-gl';
import {Protocol} from 'pmtiles';
import {ThemeProvider} from './util/theme.provider';
registerLocaleData(localeDe);
@@ -89,6 +90,7 @@ export function initializerFactory(
defaultAuthService: DefaultAuthService,
paiaAuthService: PAIAAuthService,
dateFnsConfigurationService: DateFnsConfigurationService,
_themeProvider: ThemeProvider,
) {
return async () => {
try {
@@ -213,6 +215,7 @@ export function createTranslateLoader(http: HttpClient) {
DefaultAuthService,
PAIAAuthService,
DateFnsConfigurationService,
ThemeProvider,
],
useFactory: initializerFactory,
},

View File

@@ -67,7 +67,8 @@ describe('ConfigProvider', () => {
it('should fetch app configuration', async () => {
spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(sampleIndexResponse));
const result = await configProvider.fetch();
await configProvider.fetch();
const result = configProvider.config;
expect(result).toEqual(sampleIndexResponse);
});
@@ -110,7 +111,7 @@ describe('ConfigProvider', () => {
expect(storageProviderSpy.has).toHaveBeenCalled();
expect(storageProviderSpy.get).toHaveBeenCalledTimes(0);
expect(configProvider.client.handshake).toHaveBeenCalled();
expect(await configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
});
it('should throw error on failed initialisation', async () => {
@@ -192,4 +193,31 @@ describe('ConfigProvider', () => {
expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
});
it('should fetch new config from remote on init', async () => {
storageProviderSpy.has.and.returnValue(Promise.resolve(true));
storageProviderSpy.get.and.returnValue(Promise.resolve(sampleIndexResponse));
spyOn(configProvider, 'fetch');
await configProvider.init();
expect(configProvider.fetch).toHaveBeenCalled();
});
it('should update the local config with the one from remote', async () => {
storageProviderSpy.has.and.returnValue(Promise.resolve(true));
storageProviderSpy.get.and.returnValue(Promise.resolve(sampleIndexResponse));
const newConfig = structuredClone(sampleIndexResponse);
newConfig.app.name = 'New app name';
spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(newConfig));
await configProvider.init();
// Validate that the initial configuration is loaded
expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
// Fetch the new configuration from the remote
await configProvider.fetch();
// Validate that the new configuration is now set
expect(configProvider.getValue('name')).toEqual(newConfig.app.name);
});
});

View File

@@ -83,17 +83,20 @@ export class ConfigProvider {
/**
* Fetches configuration from backend
*/
async fetch(): Promise<SCIndexResponse> {
async fetch(): Promise<void> {
try {
const isOffline = await firstValueFrom(this.internetConnectionService.offline$);
if (isOffline) {
throw new Error('Device is offline.');
} else {
return await this.client.handshake(this.scVersion);
const fetchedConfig: SCIndexResponse = await this.client.handshake(this.scVersion);
await this.set(fetchedConfig);
this.logger.log(`Configuration updated from remote`);
}
} catch (error) {
const error_ = error instanceof Error ? new ConfigFetchError(error.message) : new ConfigFetchError();
throw error_;
this.logger.warn(`Failed to fetch remote configuration:`, error_);
throw error_; // Rethrow the error to handle it in init()
}
}
@@ -121,40 +124,33 @@ export class ConfigProvider {
/**
* Initialises the ConfigProvider
* @throws ConfigInitError if no configuration could be loaded.
* @throws WrongConfigVersionInStorage if fetch failed and saved config has wrong SCVersion
* @throws ConfigInitError if no configuration could be loaded both locally and remote.
*/
async init(): Promise<void> {
let loadError;
let fetchError;
// load saved configuration
try {
// Attempt to load the configuration from local storage
this.config = await this.loadLocal();
this.firstSession = false;
this.logger.log(`initialised configuration from storage`);
// Check if the stored configuration has the correct version
if (this.config.backend.SCVersion.split('.')[0] !== this.scVersion.split('.')[0]) {
loadError = new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
throw new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
}
} catch (error) {
loadError = error;
}
// fetch remote configuration from backend
// Fetch the remote configuration in a non-blocking manner
void this.fetch();
} catch (loadError) {
this.logger.warn(loadError);
try {
const fetchedConfig: SCIndexResponse = await this.fetch();
await this.set(fetchedConfig);
this.logger.log(`initialised configuration from remote`);
} catch (error) {
fetchError = error;
}
// check for occurred errors and throw them
if (loadError !== undefined && fetchError !== undefined) {
// If local loading fails, immediately try to fetch the configuration from remote
await this.fetch();
} catch (fetchError) {
this.logger.warn(`Failed to fetch remote configuration:`, fetchError);
// If both local loading and remote fetching fail, throw ConfigInitError
throw new ConfigInitError();
}
if (loadError !== undefined) {
this.logger.warn(loadError);
}
if (fetchError !== undefined) {
this.logger.warn(fetchError);
}
}

View File

@@ -24,7 +24,6 @@ import {
SCSearchQuery,
SCSearchSort,
SCThings,
SCSearchSuggestions,
} from '@openstapps/core';
import {NGXLogger} from 'ngx-logger';
import {combineLatest, Subject} from 'rxjs';
@@ -111,8 +110,6 @@ export class SearchPageComponent implements OnInit {
*/
items: Promise<SCThings[]>;
suggestions: SCSearchSuggestions | undefined;
/**
* Page size of queries
*/
@@ -222,7 +219,6 @@ export class SearchPageComponent implements OnInit {
try {
const result = await this.dataProvider.search(searchOptions);
this.suggestions = result.suggestions;
this.singleTypeResponse = result.facets.find(facet => facet.field === 'type')?.buckets.length === 1;
if (append) {
// append results
@@ -287,12 +283,6 @@ export class SearchPageComponent implements OnInit {
this.contextMenuService.updateContextFilter(facets);
}
applySuggestion(target: string, suggestion: string) {
this.queryText = this.queryText.replaceAll(target, suggestion);
this.suggestions = undefined;
this.searchStringChanged(this.queryText);
}
ngOnInit(defaultListeners = true) {
this.initialize();
this.contextMenuService.setContextSort({

View File

@@ -69,23 +69,7 @@
</ion-header>
<ion-content class="content">
<div class="suggestions">
@if (suggestions?.terms; as terms) {
<span>{{ 'search.SUGGESTIONS' | translate }}: </span>
@for (suggestion of terms | keyvalue; track suggestion) {
@for (term of suggestion.value; track term) {
@if ($index == 0) {
<b (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</b>
} @else {
<span (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</span>
}
}
}
}
</div>
<div
class="hint"
[class.no-results]="!showDefaultData && !items && !loading"
[style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
>

View File

@@ -46,7 +46,7 @@ ion-content {
--background: var(--ion-background-color);
}
.content > .hint {
.content > div {
height: 100%;
ion-label.centered-message-container {
@@ -60,19 +60,3 @@ ion-content {
ion-header {
background: var(--ion-color-primary);
}
.suggestions {
padding: var(--spacing-md);
padding-block-end: 0;
}
.suggestion {
cursor: pointer;
}
.suggestion + .suggestion::before {
cursor: text;
content: ',';
padding-inline-end: 0.25ch;
font-weight: normal;
}

View File

@@ -80,13 +80,12 @@
</ion-item>
<ion-item>
<ion-checkbox
class="ion-text-wrap"
color="primary"
label-placement="end"
justify="start"
[(ngModel)]="termsAgree"
name="termsAgree"
>{{ 'feedback.form.termsAgree.0' | translate }}</ion-checkbox
><span class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }}</span></ion-checkbox
>
</ion-item>
<ion-item lines="none">
@@ -104,7 +103,9 @@
justify="start"
[(ngModel)]="protocolDataAgree"
name="protocolDataAgree"
>{{ 'feedback.form.protocolDataAgree' | translate }}</ion-checkbox
><span class="ion-text-wrap">{{
'feedback.form.protocolDataAgree' | translate
}}</span></ion-checkbox
>
</ion-item>
<ion-card>

View File

@@ -1,6 +1,7 @@
import {PipeTransform} from '@angular/core';
import {Pipe} from '@angular/core';
import {Observable, fromEvent, map, startWith} from 'rxjs';
import {Observable} from 'rxjs';
import {fromMediaQuery} from './rxjs/from-media-query';
@Pipe({
name: 'mediaQuery',
@@ -9,10 +10,6 @@ import {Observable, fromEvent, map, startWith} from 'rxjs';
})
export class MediaQueryPipe implements PipeTransform {
transform(query: string): Observable<boolean> {
const match = window.matchMedia(query);
return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
map(event => event.matches),
startWith(match.matches),
);
return fromMediaQuery(query);
}
}

View File

@@ -0,0 +1,38 @@
import {Observable, combineLatest, defer, distinctUntilChanged, fromEvent, map, startWith} from 'rxjs';
/**
* Lazily creates an Observable that emits whether the given media query matches.
* @example
* fromMediaQuery('(prefers-color-scheme: dark)').subscribe(matches => console.log(matches))
*/
export function fromMediaQuery(query: string): Observable<boolean> {
return defer(() => {
const match = window.matchMedia(query);
return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
map(event => event.matches),
startWith(match.matches),
);
});
}
/**
* Like `fromMediaQuery`, but combines multiple matches.
* Since the list of values may not be exhaustive, the result can be `undefined`
* @example
* fromMediaQueryValues('prefers-color-scheme', ['dark', 'light']).subscribe(value => console.log(value))
*/
export function fromMediaQueryValues<T extends string>(
property: string,
values: T[],
): Observable<T | undefined> {
return defer(() =>
combineLatest(
values.map(value =>
fromMediaQuery(`(${property}: ${value})`).pipe(map(matches => [value, matches] as const)),
),
).pipe(
map(matches => matches.find(([, matches]) => matches)?.[0]),
distinctUntilChanged(),
),
);
}

View File

@@ -0,0 +1,288 @@
import {Hct, argbFromHex, hexFromArgb} from '@material/material-color-utilities';
import {
IonTheme,
IonThemeColorDarkLight,
IonThemeOptions,
ThemeCustomColor,
ThemeCustomColorOptions,
} from './theme-types';
import {dynamicScheme, makeCustomColor} from './theme-utils';
/**
* Turn a custom material color to a color that can be used in Ionic
*/
export function ionColorFromCustomColor(color: ThemeCustomColor): IonThemeColorDarkLight {
return {
palette: color.palette,
light: {
color: color.light.color,
colorContrast: color.light.onColor,
colorShade: color.fixed.dim,
colorTint: color.fixed.color,
},
dark: {
color: color.dark.color,
colorContrast: color.dark.onColor,
colorShade: color.fixed.dim,
colorTint: color.fixed.color,
},
};
}
/**
* Create an Ionic theme
*/
export function makeIonicTheme(options: IonThemeOptions): IonTheme {
const light = dynamicScheme(
options.variant,
Hct.fromInt(options.sourceColor),
false,
options.contrastLevel,
);
const dark = dynamicScheme(options.variant, Hct.fromInt(options.sourceColor), true, options.contrastLevel);
const customColorOptions: Omit<ThemeCustomColorOptions, 'color'> = {
blend: true,
sourceColor: options.sourceColor,
variant: options.variant,
contrastLevel: options.contrastLevel,
};
return {
success: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#00ff00'), ...customColorOptions})),
warning: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ffdd00'), ...customColorOptions})),
danger: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ff4444'), ...customColorOptions})),
primary: {
palette: light.primaryPalette,
light: {
color: light.primary,
colorContrast: light.onPrimary,
colorShade: light.primaryFixedDim,
colorTint: light.primaryFixed,
},
dark: {
color: dark.primary,
colorContrast: dark.onPrimary,
colorShade: dark.primaryFixedDim,
colorTint: dark.primaryFixed,
},
},
secondary: {
palette: light.secondaryPalette,
light: {
color: light.secondary,
colorContrast: light.onSecondary,
colorShade: light.secondaryFixedDim,
colorTint: light.secondaryFixed,
},
dark: {
color: dark.secondary,
colorContrast: dark.onSecondary,
colorShade: dark.secondaryFixedDim,
colorTint: dark.secondaryFixed,
},
},
tertiary: {
palette: light.tertiaryPalette,
light: {
color: light.tertiary,
colorContrast: light.onTertiary,
colorShade: light.tertiaryFixedDim,
colorTint: light.tertiaryFixed,
},
dark: {
color: dark.tertiary,
colorContrast: dark.onTertiary,
colorShade: dark.tertiaryFixedDim,
colorTint: dark.tertiaryFixed,
},
},
light: {
palette: light.neutralPalette,
light: {
color: light.neutralPalette.tone(90),
colorContrast: light.onSurface,
colorShade: light.neutralPalette.tone(85),
colorTint: light.neutralPalette.tone(95),
},
dark: {
color: dark.surfaceContainerLowest,
colorContrast: dark.onSurface,
// TODO: find a better color for these
colorShade: dark.surfaceBright,
colorTint: dark.surfaceBright,
},
},
medium: {
palette: light.neutralVariantPalette,
light: {
color: light.neutralPalette.tone(50),
colorContrast: light.onSurfaceVariant,
colorShade: light.neutralPalette.tone(45),
colorTint: light.neutralPalette.tone(55),
},
dark: {
color: dark.surfaceVariant,
colorContrast: dark.onSurfaceVariant,
// TODO: find a better color for these
colorShade: dark.surfaceContainerLow,
colorTint: dark.surfaceContainerHigh,
},
},
dark: {
palette: light.neutralPalette,
light: {
color: light.surfaceContainerHigh,
colorContrast: light.onSurface,
colorShade: light.surfaceContainerHighest,
colorTint: light.surfaceContainer,
},
dark: {
color: dark.surfaceContainerHighest,
colorContrast: dark.onSurface,
// TODO: find a better color for these
colorShade: dark.surfaceDim,
colorTint: dark.surfaceDim,
},
},
background: {
palette: light.neutralPalette,
light: {
backgroundColor: light.background,
textColor: light.onBackground,
boxShadowColor: light.shadow,
placeholderColor: light.onSurfaceVariant,
},
dark: {
backgroundColor: dark.background,
textColor: dark.onBackground,
boxShadowColor: dark.shadow,
placeholderColor: dark.onSurfaceVariant,
},
},
item: {
palette: light.neutralPalette,
light: {
itemBackground: light.surface,
itemColor: light.onSurface,
cardBackground: light.surfaceContainer,
itemBorderColor: light.outline,
borderColor: light.outline,
},
dark: {
itemBackground: dark.surface,
itemColor: dark.onSurface,
cardBackground: dark.surfaceContainer,
itemBorderColor: dark.outline,
borderColor: dark.outline,
},
},
};
}
/**
* Simple color
*/
function color(element: HTMLElement, name: string, argb: number) {
element.style.setProperty(name, hexFromArgb(argb));
}
/**
* Color, in RGB
*/
function colorRgb(element: HTMLElement, name: string, argb: number) {
element.style.setProperty(name, `${(argb >> 16) & 0xff}, ${(argb >> 8) & 0xff}, ${argb & 0xff}`);
}
/**
* Apply the Ionic color to an element
*/
export function applyIonicAccentColor(
element: HTMLElement,
name: string,
colors: IonThemeColorDarkLight,
dark: boolean,
) {
const operations = [
['', dark ? colors.dark : colors.light],
['-dark', colors.dark],
['-light', colors.light],
] as const;
for (const [suffix, colors] of operations) {
color(element, `--ion-color-${name}${suffix}`, colors.color);
color(element, `--ion-color-${name}-contrast${suffix}`, colors.colorContrast);
color(element, `--ion-color-${name}-shade${suffix}`, colors.colorShade);
color(element, `--ion-color-${name}-tint${suffix}`, colors.colorTint);
colorRgb(element, `--ion-color-${name}-rgb${suffix}`, colors.color);
colorRgb(element, `--ion-color-${name}-contrast-rgb${suffix}`, colors.colorContrast);
colorRgb(element, `--ion-color-${name}-shade-rgb${suffix}`, colors.colorShade);
colorRgb(element, `--ion-color-${name}-tint-rgb${suffix}`, colors.colorTint);
}
}
/**
* Apply the theme
*/
export function applyIonicTheme(element: HTMLElement, theme: IonTheme, dark: boolean) {
applyIonicAccentColor(element, 'primary', theme.primary, dark);
applyIonicAccentColor(element, 'secondary', theme.secondary, dark);
applyIonicAccentColor(element, 'tertiary', theme.tertiary, dark);
applyIonicAccentColor(element, 'success', theme.success, dark);
applyIonicAccentColor(element, 'warning', theme.warning, dark);
applyIonicAccentColor(element, 'danger', theme.danger, dark);
applyIonicAccentColor(element, 'dark', theme.dark, dark);
applyIonicAccentColor(element, 'medium', theme.medium, dark);
applyIonicAccentColor(element, 'light', theme.light, dark);
const backgroundOps = [
['', dark ? theme.background.dark : theme.background.light],
['-dark', theme.background.dark],
['-light', theme.background.light],
] as const;
for (const [suffix, background] of backgroundOps) {
color(element, `--ion-background-color${suffix}`, background.backgroundColor);
color(element, `--ion-text-color${suffix}`, background.textColor);
color(element, `--ion-box-shadow-color${suffix}`, background.boxShadowColor);
color(element, `--ion-placeholder-color${suffix}`, background.placeholderColor);
colorRgb(element, `--ion-background-color-rgb${suffix}`, background.backgroundColor);
colorRgb(element, `--ion-text-color-rgb${suffix}`, background.textColor);
colorRgb(element, `--ion-box-shadow-color-rgb${suffix}`, background.boxShadowColor);
colorRgb(element, `--ion-placeholder-color-rgb${suffix}`, background.placeholderColor);
}
const stepOps = [
['', dark ? true : false],
['-dark', true],
['-light', false],
] as const;
for (const [suffix, reverse] of stepOps) {
for (let i = 5; i < 100; i += 5) {
const ionicTone = 10 * (reverse ? 100 - i : i);
color(element, `--ion-color-step-${ionicTone}${suffix}`, theme.background.palette.tone(i));
}
}
const itemOps = [
['', dark ? theme.item.dark : theme.item.light],
['-dark', theme.item.dark],
['-light', theme.item.light],
] as const;
for (const [suffix, item] of itemOps) {
color(element, `--ion-item-background${suffix}`, item.itemBackground);
color(element, `--ion-card-background${suffix}`, item.cardBackground);
color(element, `--ion-item-border-color${suffix}`, item.itemBorderColor);
color(element, `--ion-border-color${suffix}`, item.borderColor);
color(element, `--ion-item-color${suffix}`, item.itemColor);
colorRgb(element, `--ion-item-background-rgb${suffix}`, item.itemBackground);
colorRgb(element, `--ion-card-background-rgb${suffix}`, item.cardBackground);
colorRgb(element, `--ion-item-border-color-rgb${suffix}`, item.itemBorderColor);
colorRgb(element, `--ion-border-color-rgb${suffix}`, item.borderColor);
colorRgb(element, `--ion-item-color-rgb${suffix}`, item.itemColor);
}
}

View File

@@ -0,0 +1,109 @@
import {TonalPalette} from '@material/material-color-utilities';
export const THEME_VARIANTS = [
'content',
'neutral',
'rainbow',
'vibrant',
'fidelity',
'expressive',
'monochrome',
'tonal-spot',
'fruit-salad',
] as const;
export type ThemeVariant = (typeof THEME_VARIANTS)[number];
export interface ThemeCustomColorOptions {
color: number;
blend: boolean;
sourceColor: number;
variant: ThemeVariant;
contrastLevel: number;
}
export interface ThemeColorNormal {
color: number;
onColor: number;
container: number;
onContainer: number;
}
/**
* Palette that can be used in both light and dark mode.
* Caution: check contrast level before using
* @see https://m3.material.io/styles/color/roles#26b6a882-064d-4668-b096-c51142477850
*/
export interface ThemeColorFixed {
color: number;
onColor: number;
/**
* Lower emphasis against fixed color
*/
onVariant: number;
dim: number;
}
export interface ThemeCustomColor {
color: number;
source: number;
palette: TonalPalette;
light: ThemeColorNormal;
dark: ThemeColorNormal;
fixed: ThemeColorFixed;
}
export interface IonThemeOptions {
sourceColor: number;
contrastLevel: number;
variant: ThemeVariant;
}
export interface IonThemeColor {
color: number;
colorContrast: number;
colorShade: number;
colorTint: number;
}
export interface IonThemeColorDarkLight {
palette: TonalPalette;
dark: IonThemeColor;
light: IonThemeColor;
}
export interface IonThemeBackground {
backgroundColor: number;
textColor: number;
boxShadowColor: number;
placeholderColor: number;
}
export interface IonThemeItem {
itemBackground: number;
cardBackground: number;
itemBorderColor: number;
borderColor: number;
itemColor: number;
}
export interface IonTheme {
primary: IonThemeColorDarkLight;
secondary: IonThemeColorDarkLight;
tertiary: IonThemeColorDarkLight;
success: IonThemeColorDarkLight;
warning: IonThemeColorDarkLight;
danger: IonThemeColorDarkLight;
dark: IonThemeColorDarkLight;
medium: IonThemeColorDarkLight;
light: IonThemeColorDarkLight;
background: {
palette: TonalPalette;
light: IonThemeBackground;
dark: IonThemeBackground;
};
item: {
palette: TonalPalette;
light: IonThemeItem;
dark: IonThemeItem;
};
}

View File

@@ -0,0 +1,93 @@
import {
Blend,
Hct,
SchemeContent,
SchemeExpressive,
SchemeFidelity,
SchemeFruitSalad,
SchemeMonochrome,
SchemeNeutral,
SchemeRainbow,
SchemeTonalSpot,
SchemeVibrant,
} from '@material/material-color-utilities';
import {ThemeCustomColor, ThemeCustomColorOptions, ThemeVariant} from './theme-types';
export const DEFAULT_CONTRAST = 0;
export const GLOBAL_CONTRAST = {
'more': 4,
'less': 0,
'no-preference': 0,
};
/**
* Creates a DynamicScheme based on the variant.
*/
export function dynamicScheme(
variant: ThemeVariant,
sourceColorHct: Hct,
isDark: boolean,
contrastLevel: number,
) {
switch (variant) {
case 'content': {
return new SchemeContent(sourceColorHct, isDark, contrastLevel);
}
case 'neutral': {
return new SchemeNeutral(sourceColorHct, isDark, contrastLevel);
}
case 'rainbow': {
return new SchemeRainbow(sourceColorHct, isDark, contrastLevel);
}
case 'vibrant': {
return new SchemeVibrant(sourceColorHct, isDark, contrastLevel);
}
case 'fidelity': {
return new SchemeFidelity(sourceColorHct, isDark, contrastLevel);
}
case 'expressive': {
return new SchemeExpressive(sourceColorHct, isDark, contrastLevel);
}
case 'monochrome': {
return new SchemeMonochrome(sourceColorHct, isDark, contrastLevel);
}
case 'tonal-spot': {
return new SchemeTonalSpot(sourceColorHct, isDark, contrastLevel);
}
case 'fruit-salad': {
return new SchemeFruitSalad(sourceColorHct, isDark, contrastLevel);
}
}
}
/**
* Create a custom color that works with the theme
*/
export function makeCustomColor(options: ThemeCustomColorOptions): ThemeCustomColor {
const color = options.blend ? Blend.harmonize(options.color, options.sourceColor) : options.color;
const light = dynamicScheme(options.variant, Hct.fromInt(color), false, options.contrastLevel);
const dark = dynamicScheme(options.variant, Hct.fromInt(color), true, options.contrastLevel);
return {
color,
source: options.color,
palette: light.primaryPalette,
light: {
color: light.primary,
onColor: light.onPrimary,
container: light.primaryContainer,
onContainer: light.onPrimaryContainer,
},
dark: {
color: dark.primary,
onColor: dark.onPrimary,
container: dark.primaryContainer,
onContainer: dark.onPrimaryContainer,
},
fixed: {
color: light.primaryFixed,
onColor: light.onPrimaryFixed,
dim: light.primaryFixedDim,
onVariant: light.onPrimaryFixedVariant,
},
};
}

View File

@@ -0,0 +1,61 @@
import {Injectable} from '@angular/core';
import {fromMediaQuery, fromMediaQueryValues} from './rxjs/from-media-query';
import {BehaviorSubject, Observable, combineLatest, distinctUntilChanged, map} from 'rxjs';
import {argbFromHex} from '@material/material-color-utilities';
import {applyIonicTheme, makeIonicTheme} from './theme-ionic-utils';
import {DEFAULT_CONTRAST, GLOBAL_CONTRAST} from './theme-utils';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ThemeVariant} from './theme-types';
@Injectable({
providedIn: 'root',
})
export class ThemeProvider {
prefersDark = fromMediaQuery('(prefers-color-scheme: dark)');
constrastPreference = fromMediaQueryValues('prefers-contrast', ['more', 'less', 'no-preference']);
// TODO: fetch the color from somewhere
settingThemeColor = new BehaviorSubject<string>('#3880FF');
settingThemeVariant = new BehaviorSubject<ThemeVariant>('content');
settingThemeContrast = new BehaviorSubject<number | undefined>(undefined);
settingThemeMode = new BehaviorSubject<'light' | 'dark' | undefined>(undefined);
themeSourceColor = this.settingThemeColor.pipe(map(argbFromHex));
themeVariant = this.settingThemeVariant.asObservable();
themeContrastLevel: Observable<number> = combineLatest([
this.constrastPreference,
this.settingThemeContrast,
]).pipe(
map(([prefersContrast, customContrast]) =>
customContrast === undefined
? prefersContrast === undefined
? DEFAULT_CONTRAST
: GLOBAL_CONTRAST[prefersContrast]
: customContrast,
),
distinctUntilChanged(),
);
themeIsDark = combineLatest([this.prefersDark, this.settingThemeMode]).pipe(
map(([prefersDark, customMode]) => (customMode === undefined ? prefersDark : customMode === 'dark')),
distinctUntilChanged(),
);
ionicTheme = combineLatest([this.themeContrastLevel, this.themeVariant, this.themeSourceColor]).pipe(
map(([contrastLevel, variant, sourceColor]) => makeIonicTheme({variant, sourceColor, contrastLevel})),
);
constructor() {
combineLatest([this.ionicTheme, this.themeIsDark])
.pipe(takeUntilDestroyed())
.subscribe(([theme, isDark]) => {
applyIonicTheme(document.documentElement, theme, isDark);
});
}
}

View File

@@ -422,8 +422,7 @@
"placeholder": "Veranstaltungen, Personen, Orte und mehr"
},
"instruction": "Finde alle Informationen rund ums Studium und den Campus",
"nothing_found": "Keine Ergebnisse",
"SUGGESTIONS": "Meintest du"
"nothing_found": "Keine Ergebnisse"
},
"hebisSearch": {
"title": "Bibliothekssuche",

View File

@@ -422,8 +422,7 @@
"placeholder": "Events, places, persons and more"
},
"instruction": "Find all information related to your studies and campus",
"nothing_found": "No results",
"SUGGESTIONS": "Did you mean"
"nothing_found": "No results"
},
"hebisSearch": {
"title": "Library Search",

View File

@@ -18,7 +18,7 @@
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
backend_url: 'http://localhost:3000',
backend_url: 'https://mobile.server.uni-frankfurt.de',
app_host: 'mobile.app.uni-frankfurt.de',
custom_url_scheme: 'de.anyschool.app',
backend_version: '999.0.0',

View File

@@ -13,7 +13,7 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import './util/color-system';
/*
@include ion-color(primary, #3880ff);
@include ion-color(secondary, #32db64);
@include ion-color(tertiary, #f4a942);
@@ -26,6 +26,7 @@
@include ion-background-color(#f5f5f5, #000);
@include ion-item-color(#fff, #0e0e0e);
*/
:root {
--calender-lecture-card: var(--ion-color-primary-tint);

View File

@@ -23,7 +23,7 @@ node ./lib/cli.js e2e http://localhost:3000
Example to clone the full database
```shell
node app.js copy "*" -a "999.0.0" https://mobile.server.uni-frankfurt.de http://localhost:3000 100
node app.js copy "*" https://mobile.app.uni-frankfurt.de http://localhost:3000 100
```
### Program arguments

View File

@@ -97,8 +97,6 @@
"date",
"validatable",
"filterable",
"suggestable",
"completable",
"inheritTags",
"minLength",
"pattern",

View File

@@ -24,11 +24,6 @@ export interface SCSearchResult {
*/
data: SCThings[];
/**
* Suggestions for query corrections
*/
suggestions?: SCSearchSuggestions;
/**
* Facets (aggregations over all matching data)
*/
@@ -45,18 +40,6 @@ export interface SCSearchResult {
stats: SCSearchResultSearchEngineStats;
}
/**
* Seach suggestions
*
* Not to be confused with search-as-you-type suggestions
*/
export interface SCSearchSuggestions {
/**
* Suggestions for query terms that might have been misspelled
*/
terms?: Record<string, string[]>;
}
/**
* Stores information about Pagination
*/

View File

@@ -63,7 +63,7 @@ export interface SCThingWithoutReferences {
/**
* Alternate names of the thing
* @filterable
* @text
* @keyword
*/
alternateNames?: string[];
@@ -92,8 +92,6 @@ export interface SCThingWithoutReferences {
* @filterable
* @minLength 1
* @sortable ducet
* @completable
* @suggestable
* @text
*/
name: string;
@@ -242,8 +240,6 @@ export interface SCThingTranslatableProperties {
* Translation of the name of the thing
* @sortable ducet
* @text
* @suggestable
* @completable
*/
name?: string;
/**

View File

@@ -43,27 +43,6 @@ export const fieldmap: ElasticsearchFieldmap = {
},
ignore: ['price'],
},
suggestable: {
default: {
trigram: {
type: 'text',
analyzer: 'trigram',
},
reverse: {
type: 'text',
analyzer: 'reverse',
},
},
ignore: [],
},
completable: {
default: {
completion: {
type: 'search_as_you_type',
},
},
ignore: [],
},
};
export const filterableTagName = 'filterable';

View File

@@ -19,27 +19,4 @@ export const settings: IndicesPutTemplateRequest['settings'] = {
'max_result_window': 30_000,
'number_of_replicas': 0,
'number_of_shards': 1,
'index': {
analysis: {
analyzer: {
trigram: {
type: 'custom',
tokenizer: 'standard',
filter: ['lowercase', 'shingle'],
},
reverse: {
type: 'custom',
tokenizer: 'standard',
filter: ['lowercase', 'reverse'],
},
},
filter: {
shingle: {
type: 'shingle',
min_shingle_size: 2,
max_shingle_size: 3,
},
},
},
},
};

30
pnpm-lock.yaml generated
View File

@@ -791,6 +791,9 @@ importers:
'@maplibre/ngx-maplibre-gl':
specifier: 17.4.1
version: 17.4.1(@angular/common@17.3.0)(@angular/core@17.3.0)(maplibre-gl@4.0.2)(rxjs@7.8.1)
'@material/material-color-utilities':
specifier: 0.3.0
version: 0.3.0
'@ngx-translate/core':
specifier: 15.0.0
version: 15.0.0(@angular/common@17.3.0)(@angular/core@17.3.0)(rxjs@7.8.1)
@@ -5522,7 +5525,7 @@ packages:
object-assign: 4.1.1
open: 8.4.0
proxy-middleware: 0.15.0
send: 0.18.0
send: 0.19.0
serve-index: 1.9.1
transitivePeerDependencies:
- supports-color
@@ -7067,6 +7070,10 @@ packages:
tslib: 2.6.2
dev: false
/@material/material-color-utilities@0.3.0:
resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
dev: false
/@ngtools/webpack@17.3.0(@angular/compiler-cli@17.3.0)(typescript@5.4.2)(webpack@5.90.3):
resolution: {integrity: sha512-wNTCDPPEtjP4mxYerLVLCMwOCTEOD2HqZMVXD8pJbarrGPMuoyglUZuqNSIS5KVqR+fFez6JEUnMvC3QSqf58w==}
engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -18928,6 +18935,27 @@ packages:
transitivePeerDependencies:
- supports-color
/send@0.19.0:
resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
engines: {node: '>= 0.8.0'}
dependencies:
debug: 2.6.9
depd: 2.0.0
destroy: 1.2.0
encodeurl: 1.0.2
escape-html: 1.0.3
etag: 1.8.1
fresh: 0.5.2
http-errors: 2.0.0
mime: 1.6.0
ms: 2.1.3
on-finished: 2.4.1
range-parser: 1.2.1
statuses: 2.0.1
transitivePeerDependencies:
- supports-color
dev: true
/serialize-javascript@6.0.0:
resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
dependencies: