diff options
| -rw-r--r-- | app/components/error_block/error_block.svelte | 31 | ||||
| -rw-r--r-- | app/components/forum_list/forum_list.svelte | 5 | ||||
| -rw-r--r-- | app/components/topic_index/topic_index.svelte | 2 | ||||
| -rw-r--r-- | app/config/i18n.js | 10 | ||||
| -rw-r--r-- | app/config/translations/en.json | 13 | ||||
| -rw-r--r-- | app/forum.svelte | 6 | ||||
| -rw-r--r-- | app/stores/forums.js | 5 |
7 files changed, 67 insertions, 5 deletions
diff --git a/app/components/error_block/error_block.svelte b/app/components/error_block/error_block.svelte new file mode 100644 index 0000000..d649fb4 --- /dev/null +++ b/app/components/error_block/error_block.svelte @@ -0,0 +1,31 @@ +<script> + import { _ } from 'svelte-i18n'; + export let message = $_('error.generic.message'); +</script> + +<div> + <h2>{$_('error.generic.title')}</h2> + <p>{message}</p> +</div> + +<style> + div { + background: repeating-linear-gradient( -45deg, red, red 5px, black 5px, black 10px ); + border: 5px solid red; + color: yellow; + font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif; + margin: 0 10px 0 0; + padding: 100px 5px; + text-align: center; + } + + h2, p { + background-color: black; + font-size: 1em; + } + + h2 { + text-transform: uppercase; + } +</style> + diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte index f77c79a..c218bac 100644 --- a/app/components/forum_list/forum_list.svelte +++ b/app/components/forum_list/forum_list.svelte @@ -1,8 +1,13 @@ <script> + import { _ } from 'svelte-i18n'; import { forums } from '../../stores/forums.js'; + import ErrorBlock from '../error_block/error_block.svelte'; </script> <nav title="List of Forums"> + {#if !$forums.length} + <ErrorBlock message={$_('forum_list.error.unavailable')} /> + {/if} <ul> {#each $forums as forum} <li> diff --git a/app/components/topic_index/topic_index.svelte b/app/components/topic_index/topic_index.svelte index ea748a6..3de83bb 100644 --- a/app/components/topic_index/topic_index.svelte +++ b/app/components/topic_index/topic_index.svelte @@ -1,6 +1,8 @@ <script> export let params; + import ErrorBlock from '../error_block/error_block.svelte'; </script> +<ErrorBlock /> <h1>Topic Index.</h1> <p>This component lists topics for category or tag with id: {params.id}</p> diff --git a/app/config/i18n.js b/app/config/i18n.js new file mode 100644 index 0000000..e00adb5 --- /dev/null +++ b/app/config/i18n.js @@ -0,0 +1,10 @@ +import { addMessages, getLocaleFromNavigator, init } from 'svelte-i18n'; + +import en from './translations/en.json'; + +addMessages('en', en); + +init({ + fallbackLocale: 'en', + initialLocale: getLocaleFromNavigator() +}); diff --git a/app/config/translations/en.json b/app/config/translations/en.json new file mode 100644 index 0000000..935f4fe --- /dev/null +++ b/app/config/translations/en.json @@ -0,0 +1,13 @@ +{ + "error": { + "generic": { + "title": "Error!", + "message": "Unknown error has occurred. Panic!" + } + }, + "forum_list": { + "error": { + "unavailable": "Forum list unavailable." + } + } +} diff --git a/app/forum.svelte b/app/forum.svelte index 85c6d12..d83438d 100644 --- a/app/forum.svelte +++ b/app/forum.svelte @@ -1,6 +1,12 @@ <script> import LightRouter from 'lightrouter'; + // Initialize localization + + import './config/i18n'; + + // Global components + import ForumList from './components/forum_list/forum_list.svelte'; import Header from './components/header/header.svelte'; diff --git a/app/stores/forums.js b/app/stores/forums.js index 5c7c6e6..e826163 100644 --- a/app/stores/forums.js +++ b/app/stores/forums.js @@ -15,11 +15,8 @@ const internals = { handleChangeFeed(data) { - console.log(data); - // No old value == add if (!data.old_val) { - console.log('Adding new data'); return internals.forums.push(data.new_val); } @@ -27,8 +24,6 @@ const internals = { const index = internals.forums.findIndex((element) => element.id === data.old_val.id); if (index > -1) { - console.log(`Found old data at index ${index}`); - if (data.new_val) { return internals.forums.splice(index, 1, data.new_val || undefined); } |