mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
loader: error handling
This commit is contained in:
muerwre
parent
71a0aed9aa
commit
1c014ec9fb
5 changed files with 102 additions and 12 deletions
|
|
@ -13,13 +13,55 @@
|
||||||
<style>
|
<style>
|
||||||
#loader {
|
#loader {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: #576066;
|
background: #ecf0ff;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
transition: opacity 1s;
|
transition: opacity 1s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #666666;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
flex-direction: column;
|
||||||
|
font-weight: 500;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader-current {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader-container {
|
||||||
|
width: 240px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader-progress {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
box-shadow: inset rgba(0,0,0,0.1) 0 0 0 1px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader-bar {
|
||||||
|
background: linear-gradient(90deg, #845b9e, #54faff);
|
||||||
|
width: 10%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 500ms;
|
||||||
|
animation: blink 0.3s infinite alternate;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -33,11 +75,36 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#loader-error {
|
||||||
|
color: white;
|
||||||
|
background: #ff3344;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 5px 10px 10px 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
opacity: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader-error h4 {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="renderer"></canvas>
|
<canvas id="renderer"></canvas>
|
||||||
<section id="map" style="position: absolute; width: 100%; height: 100%;"></section>
|
<section id="map" style="position: absolute; width: 100%; height: 100%;"></section>
|
||||||
<section id="loader"></section>
|
<section id="loader">
|
||||||
|
<div id="loader-container">
|
||||||
|
<div id="loader-current">ЗАГРУЗКА</div>
|
||||||
|
<div id="loader-progress">
|
||||||
|
<div id="loader-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div id="loader-error">
|
||||||
|
<h4>Хранилище недоступно.</h4>
|
||||||
|
Повторите попытку позже.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section id="index"></section>
|
<section id="index"></section>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -35,9 +35,12 @@ import '$styles/main.less';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import { PersistGate } from 'redux-persist/integration/react';
|
import { PersistGate } from 'redux-persist/integration/react';
|
||||||
import { configureStore } from '$redux/store';
|
import { configureStore } from '$redux/store';
|
||||||
|
import { pushLoaderState } from '$utils/history';
|
||||||
|
|
||||||
const { store, persistor } = configureStore();
|
const { store, persistor } = configureStore();
|
||||||
|
|
||||||
|
pushLoaderState(10);
|
||||||
|
|
||||||
export const Index = () => (
|
export const Index = () => (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<PersistGate loading={null} persistor={persistor}>
|
<PersistGate loading={null} persistor={persistor}>
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,10 @@ import {
|
||||||
checkUserToken,
|
checkUserToken,
|
||||||
getGuestToken,
|
getGuestToken,
|
||||||
getStoredMap,
|
getStoredMap,
|
||||||
getVkIframeUser,
|
|
||||||
getVkUserInfo,
|
|
||||||
postMap
|
postMap
|
||||||
} from '$utils/api';
|
} from '$utils/api';
|
||||||
import {
|
import {
|
||||||
hideRenderer, iframeLoginVk,
|
hideRenderer,
|
||||||
setActiveSticker, setAddress,
|
setActiveSticker, setAddress,
|
||||||
setChanged, setDialogActive,
|
setChanged, setDialogActive,
|
||||||
setEditing,
|
setEditing,
|
||||||
|
|
@ -20,7 +18,7 @@ import {
|
||||||
setSaveOverwrite, setSaveSuccess, setTitle,
|
setSaveOverwrite, setSaveSuccess, setTitle,
|
||||||
setUser
|
setUser
|
||||||
} from '$redux/user/actions';
|
} from '$redux/user/actions';
|
||||||
import { getUrlData, parseQuery, pushPath } from '$utils/history';
|
import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath } from '$utils/history';
|
||||||
import { editor } from '$modules/Editor';
|
import { editor } from '$modules/Editor';
|
||||||
import { ACTIONS } from '$redux/user/constants';
|
import { ACTIONS } from '$redux/user/constants';
|
||||||
import { MODES } from '$constants/modes';
|
import { MODES } from '$constants/modes';
|
||||||
|
|
@ -114,6 +112,8 @@ function* iframeLoginVkSaga({ viewer_id, access_token, auth_key }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function* mapInitSaga() {
|
function* mapInitSaga() {
|
||||||
|
pushLoaderState(90);
|
||||||
|
|
||||||
const { hash } = getUrlData();
|
const { hash } = getUrlData();
|
||||||
|
|
||||||
if (hash && /^#map/.test(hash)) {
|
if (hash && /^#map/.test(hash)) {
|
||||||
|
|
@ -146,25 +146,29 @@ function* mapInitSaga() {
|
||||||
|
|
||||||
yield call(startEmptyEditorSaga);
|
yield call(startEmptyEditorSaga);
|
||||||
yield put(setReady(true));
|
yield put(setReady(true));
|
||||||
|
|
||||||
|
pushLoaderState(100);
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function* authCheckSaga() {
|
function* authCheckSaga() {
|
||||||
|
pushLoaderState(70);
|
||||||
|
|
||||||
const { id, token } = yield select(getUser);
|
const { id, token } = yield select(getUser);
|
||||||
|
const { ready } = yield select(getState);
|
||||||
|
|
||||||
if (window.location.search || true) {
|
if (window.location.search || true) {
|
||||||
const { viewer_id, auth_key } = yield parseQuery(window.location.search);
|
const { viewer_id, auth_key } = yield parseQuery(window.location.search);
|
||||||
// https://alpha-map.vault48.org:3000/auth/iframe/vk?viewer_id=360004&access_token=e558a05d5cb1fcb195316703a2d5e5ec9d19b2c608844c986ec56798f8ac642379bb37fbc58270435e077&auth_key=b0ff47f659d21b6b880a1eee60b6e794
|
|
||||||
// const viewer_id = '360004';
|
|
||||||
// const auth_key = 'b0ff47f659d21b6b880a1eee60b6e794';
|
|
||||||
|
|
||||||
// console.log('Already logged in?', viewer_id, auth_key, id !== `vk:${viewer_id}`);
|
|
||||||
|
|
||||||
if (viewer_id && auth_key && id !== `vk:${viewer_id}`) {
|
if (viewer_id && auth_key && id !== `vk:${viewer_id}`) {
|
||||||
const user = yield call(checkIframeToken, { viewer_id, auth_key });
|
const user = yield call(checkIframeToken, { viewer_id, auth_key });
|
||||||
|
|
||||||
if (user) {
|
if (user) {
|
||||||
yield put(setUser(user));
|
yield put(setUser(user));
|
||||||
|
|
||||||
|
pushLoaderState(' ...готово');
|
||||||
|
|
||||||
return yield call(mapInitSaga);
|
return yield call(mapInitSaga);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -175,11 +179,19 @@ function* authCheckSaga() {
|
||||||
|
|
||||||
if (user) {
|
if (user) {
|
||||||
yield put(setUser(user));
|
yield put(setUser(user));
|
||||||
|
|
||||||
|
pushLoaderState(' ...готово');
|
||||||
|
|
||||||
return yield call(mapInitSaga);
|
return yield call(mapInitSaga);
|
||||||
|
} else if (!ready) {
|
||||||
|
pushNetworkInitError();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
yield call(generateGuestSaga);
|
yield call(generateGuestSaga);
|
||||||
|
|
||||||
|
pushLoaderState(80);
|
||||||
|
|
||||||
return yield call(mapInitSaga);
|
return yield call(mapInitSaga);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, {
|
||||||
id,
|
id,
|
||||||
token,
|
token,
|
||||||
routes: (result.data.routes && result.data.routes.length > 0 && arrayToObject(result.data.routes, '_id')) || {},
|
routes: (result.data.routes && result.data.routes.length > 0 && arrayToObject(result.data.routes, '_id')) || {},
|
||||||
}));
|
})).catch(() => null);
|
||||||
|
|
||||||
export const getGuestToken = () => axios.get(API.GET_GUEST).then(result => (result && result.data));
|
export const getGuestToken = () => axios.get(API.GET_GUEST).then(result => (result && result.data));
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,3 +26,11 @@ export const parseQuery = (queryString: string) => {
|
||||||
}
|
}
|
||||||
return params;
|
return params;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const pushLoaderState = state => {
|
||||||
|
document.getElementById('loader-bar').style.width = `${state}%`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const pushNetworkInitError = state => {
|
||||||
|
document.getElementById('loader-error').style.opacity = 1;
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue