Browse Source

work nicer while not connected

master
Martin Dørum 4 years ago
parent
commit
6b0212339f
3 changed files with 18 additions and 16 deletions
  1. 7
    13
      client/src/App.svelte
  2. 1
    1
      client/src/LoadingIcon.svelte
  3. 10
    2
      client/src/main.js

+ 7
- 13
client/src/App.svelte View File

} }


export function onInitialData(data) { export function onInitialData(data) {
connected = true;
words = data.words; words = data.words;


items = {}; items = {};
for (let i in data.items) for (let i in data.items)
items[i] = { pending: false, content: data.items[i], index: i }; items[i] = { pending: false, content: data.items[i], index: i };
sortItems(); sortItems();

connected = true;
} }


export function onDisconnect() { export function onDisconnect() {
} }


.loading { .loading {
display: flex;
width: 100%;
height: 100%;
position: absolute; position: absolute;
top: 0px;
bottom: 0px;
left: 0px; left: 0px;
justify-content: center;
padding-top: 25vh;
background: rgba(0, 0, 0, 0.7);
right: 0px;
} }
</style> </style>


<ListItem {item} on:remove={onRemove} /> <ListItem {item} on:remove={onRemove} />
{/each} {/each}
</div> </div>
</div>


{#if !connected}
<div out:fade={{duration: 100}} class="loading"><LoadingIcon /></div>
{/if}
{#if !connected}
<div out:fade={{duration: 100}} class="loading"><LoadingIcon /></div>
{/if}
</div>

+ 1
- 1
client/src/LoadingIcon.svelte View File

position: absolute; position: absolute;
width: 5px; width: 5px;
height: 5px; height: 5px;
background: #fff;
background: #333;
border-radius: 50%; border-radius: 50%;
animation: lds-default 1.2s linear infinite; animation: lds-default 1.2s linear infinite;
} }

+ 10
- 2
client/src/main.js View File

import App from './App.svelte'; import App from './App.svelte';
import WSockMan from './ws.js'; import WSockMan from './ws.js';


window.addEventListener("unhandledrejection", evt => {
alert(evt.reason);
});

let wsock = new WSockMan( let wsock = new WSockMan(
`${location.protocol == "http:" ? "ws:" : "wss:"}//${location.host}/`); `${location.protocol == "http:" ? "ws:" : "wss:"}//${location.host}/`);


}); });
}; };


wsock.onconnect = () => auth(localStorage.getItem("key"));
wsock.ondisconnect = app.onDisconnect.bind(app);
wsock.ondisconnect = () => {
app.onDisconnect();
auth(localStorage.getItem("key"));
};


wsock.onmessage = msg => { wsock.onmessage = msg => {
switch (msg.type) { switch (msg.type) {
} }
}; };


auth(localStorage.getItem("key"));

export default app; export default app;

Loading…
Cancel
Save