elnath
/
GuessNN
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Webapp: cosmetic changes: title, favicon, added crude header

This commit is contained in:
Francesco 2022-05-01 17:01:21 +02:00
parent b93941e294
commit 062b6ca99d
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
GuessNN-webapp/index.html
View File

@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="node_modules/bootstrap-icons/icons/diagram-2-fill.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>GuessNN - Semantic word guesser</title>
</head>
<body>
<div id="app"></div>

29
GuessNN-webapp/src/App.vue
View File

@ -1,11 +1,18 @@
<template>
<div class="container">
<loading-indicator :loaded="!isLoading" :error="hasErrors" :class="{'loading': isLoading}">
<main-component :entities="entities" :concepts="concepts" :target="targetEntity??''"></main-component>
<template #error-message>
<span>{{entitiesError}} {{conceptsError}}</span>
</template>
</loading-indicator>
<header class="row">
<div class="col-12">
<h1>GuessNN</h1>
</div>
</header>
<section class="row">
<loading-indicator :loaded="!isLoading" :error="hasErrors" :class="{'loading': isLoading}">
<main-component :entities="entities" :concepts="concepts" :target="targetEntity??''"></main-component>
<template #error-message>
<span>{{ entitiesError }} {{ conceptsError }}</span>
</template>
</loading-indicator>
</section>
</div>
</template>
@ -47,7 +54,7 @@ export default defineComponent({
this.entities = [];
fetchJSON(entitiesURL)
.then(json => this.entities = json as Array<NamedEntity>) //TODO: Create NamedEntity.fromJSON
.catch((err:Error) => this.entitiesError = `Error fetching entities: ${err.message}`)
.catch((err: Error) => this.entitiesError = `Error fetching entities: ${err.message}`)
.finally(() => this.entitiesLoading = false);
this.conceptsLoading = true;
@ -61,7 +68,7 @@ export default defineComponent({
// TODO: verify presence of target in json
this.targetEntity = (json as any).target as string; // eslint-disable-line @typescript-eslint/no-explicit-any
})
.catch((err:Error) => this.conceptsError = `Error fetching concepts: ${err.message}`)
.catch((err: Error) => this.conceptsError = `Error fetching concepts: ${err.message}`)
.finally(() => this.conceptsLoading = false);
},
});
@ -74,6 +81,12 @@ export default defineComponent({
<style scoped lang="scss">
@import "bootstrap/scss/bootstrap";
header{
background-color: #ff6c005e;
margin-bottom: 2em;
}
.loading {
@extend .position-absolute, .top-50, .start-50, .translate-middle;
}