Compare commits
2 Commits
b779429346
...
bebf2eba99
Author | SHA1 | Date |
---|---|---|
Fred Boniface | bebf2eba99 | |
Fred Boniface | a3bf2af68d |
|
@ -19,7 +19,7 @@
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{/if}
|
{/if}
|
||||||
{#if config.showRefresh}
|
{#if config.showRefresh}
|
||||||
<button on:click={config.onRefresh} aria-label="Refresh">
|
<button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
|
||||||
<IconRefresh />
|
<IconRefresh />
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -67,6 +67,11 @@
|
||||||
gap: 0px;
|
gap: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.refreshing {
|
||||||
|
animation: spin 1.5s linear infinite;
|
||||||
|
transform-origin: 50% 45%;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
@ -82,4 +87,18 @@
|
||||||
button:hover {
|
button:hover {
|
||||||
color: var(--island-header-color);
|
color: var(--island-header-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
color: rgb(185, 185, 255);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(-360deg);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -4,6 +4,7 @@ export interface CardConfig {
|
||||||
showRefresh: boolean;
|
showRefresh: boolean;
|
||||||
helpText: string;
|
helpText: string;
|
||||||
onRefresh: () => void;
|
onRefresh: () => void;
|
||||||
|
refreshing: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LookupCardConfig {
|
export interface LookupCardConfig {
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
showRefresh: false,
|
showRefresh: false,
|
||||||
helpText: config.helpText,
|
helpText: config.helpText,
|
||||||
onRefresh: () => {},
|
onRefresh: () => {},
|
||||||
|
refreshing: false,
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
showRefresh: true,
|
showRefresh: true,
|
||||||
helpText: "Your location may not be accurate on desktop and laptop devices.",
|
helpText: "Your location may not be accurate on desktop and laptop devices.",
|
||||||
onRefresh: refresh,
|
onRefresh: refresh,
|
||||||
|
refreshing: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
function turnOnLocation() {
|
function turnOnLocation() {
|
||||||
|
@ -28,6 +29,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function refresh() {
|
function refresh() {
|
||||||
|
config.refreshing = true;
|
||||||
stations = [];
|
stations = [];
|
||||||
getNearestStations();
|
getNearestStations();
|
||||||
}
|
}
|
||||||
|
@ -41,6 +43,8 @@
|
||||||
stations = apiResponse;
|
stations = apiResponse;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
errorMessage = err as string;
|
errorMessage = err as string;
|
||||||
|
} finally {
|
||||||
|
config.refreshing = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue