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"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>GuessNN - Semantic word guesser</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

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

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