Skip to content

Commit 116faed

Browse files
rhansolorhansolo
committed
added search error message
1 parent 476af42 commit 116faed

File tree

3 files changed

+120
-59
lines changed

3 files changed

+120
-59
lines changed

‎src/App.svelte

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,6 @@
3636
let first_loaded = true;
3737
3838
function callAPI(id, signal, level, date, region) {
39-
console.log(
40-
ENDPOINT +
41-
'&data_source=' +
42-
id +
43-
'&signal=' +
44-
signal +
45-
'&geo_type=' +
46-
level +
47-
'&time_values=' +
48-
date +
49-
'&geo_value=' +
50-
region,
51-
);
5239
return fetch(
5340
ENDPOINT +
5441
'&data_source=' +

‎src/Banner.svelte

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
import { fade } from 'svelte/transition';
3+
import { writable } from 'svelte/store';
4+
5+
$: tick = 0;
6+
let timer;
7+
export function count() {
8+
tick = 1;
9+
clearInterval(timer);
10+
timer = setInterval(() => {
11+
tick += 1;
12+
}, 1000);
13+
}
14+
$: if (tick >= 5) {
15+
clearInterval(timer);
16+
}
17+
</script>
18+
19+
<style>
20+
.message {
21+
font-size: 13px;
22+
23+
text-align: center;
24+
color: red;
25+
}
26+
</style>
27+
28+
<div class="message">
29+
{#if tick >= 1 && tick <= 3}
30+
<p transition:fade={{ duration: 100 }}>No data available for selected location</p>
31+
{/if}
32+
</div>

‎src/MapBox.svelte

Lines changed: 88 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import AutoComplete from 'simple-svelte-autocomplete';
88
import Options from './Options.svelte';
99
import Legend from './Legend.svelte';
10+
import Banner from './Banner.svelte';
1011
import Time from './Time.svelte';
1112
import Graph from './Graph/Graph.svelte';
1213
import GraphContainer from './Graph/GraphContainer.svelte';
@@ -33,6 +34,7 @@
3334
3435
export let isIE, graphShowStatus, toggleGraphShowStatus;
3536
37+
let searchErrorComponent;
3638
let parseTime = d3.timeParse('%Y%m%d');
3739
let formatTimeWithoutYear = d3.timeFormat('%B %d');
3840
@@ -59,13 +61,11 @@
5961
let megaHoveredId;
6062
let clickedId;
6163
let megaClickedId;
62-
let state_lst = [];
63-
let county_lst = [];
64-
let msa_lst = [];
65-
6664
let selectedRegion;
65+
6766
$: region_lst = [];
6867
$: loaded = false;
68+
$: invalid_search = false;
6969
$: currentSensorTooltip = $sensorMap.get($currentSensor).mapTitleText;
7070
7171
var dict = {
@@ -911,6 +911,72 @@
911911
'&autocomplete=false&country=us&types=place%2Cregion',
912912
).then(d => d.json());
913913
}
914+
function get_zoom_query(selectedRegion) {
915+
let zoom_level;
916+
if (selectedRegion['level'] === 'county') {
917+
zoom_level = 6.5;
918+
} else if (selectedRegion['level'] === 'msa') {
919+
zoom_level = 6;
920+
} else {
921+
zoom_level = 5;
922+
}
923+
var long_offset = 0;
924+
var lat_offset = 0;
925+
var query = selectedRegion['display_name'];
926+
if (selectedRegion['id'] === '72' || selectedRegion['id'].substring(0, 2) === '72') {
927+
query = 'Florida';
928+
long_offset = 6;
929+
lat_offset = -3;
930+
} else if (selectedRegion['id'].substring(0, 2) == '02') {
931+
query = 'Alaska';
932+
zoom_level = 6;
933+
}
934+
return [query, zoom_level, long_offset, lat_offset];
935+
}
936+
937+
function search_element(selectedRegion) {
938+
let has_value_flag = false;
939+
const levels_avail = $sensorMap.get($currentSensor).levels;
940+
for (var i = 0; i < levels_avail.length; i++) {
941+
if (selectedRegion['level'] === levels_avail[i]) {
942+
has_value_flag = true;
943+
break;
944+
}
945+
}
946+
if (!has_value_flag) {
947+
invalid_search = true;
948+
searchErrorComponent.count();
949+
} else {
950+
if (selectedRegion['level'] !== $currentLevel) {
951+
currentDataReadyOnMap.set(false);
952+
currentLevel.set(selectedRegion['level']);
953+
}
954+
if (clickedId) {
955+
map.setFeatureState({ source: $currentLevel, id: clickedId }, { select: false });
956+
}
957+
if (megaClickedId) {
958+
map.setFeatureState({ source: 'mega-county', id: megaClickedId }, { select: false });
959+
}
960+
megaClickedId = null;
961+
currentRegionName.set(selectedRegion['name']);
962+
currentRegion.set(selectedRegion['property_id']);
963+
clickedId = parseInt(selectedRegion['id']);
964+
map.setFeatureState({ source: $currentLevel, id: clickedId }, { select: true });
965+
const search_info = get_zoom_query(selectedRegion);
966+
const query = search_info[0];
967+
const zoom_level = search_info[1];
968+
const long_offset = search_info[2];
969+
const lat_offset = search_info[3];
970+
geocode(query).then(d => {
971+
var coords = projectionMercartor.invert(projection(d.features[0].center));
972+
if (selectedRegion['property_id'] === 'PR' || selectedRegion['id'].substring(0, 2) === '72') {
973+
coords[0] += long_offset;
974+
coords[1] += lat_offset;
975+
}
976+
map.flyTo({ center: coords, zoom: zoom_level, essential: true });
977+
});
978+
}
979+
}
914980
</script>
915981

916982
<style>
@@ -1015,6 +1081,19 @@
10151081
height: 40%;
10161082
}
10171083
1084+
.invalid_search-container {
1085+
position: absolute;
1086+
transition: opacity 0.3s ease-in-out;
1087+
z-index: 1003;
1088+
top: 12px;
1089+
width: 250px;
1090+
background-color: rgba(255, 255, 255, 0.9);
1091+
left: 0;
1092+
right: 0;
1093+
margin-left: auto;
1094+
margin-right: auto;
1095+
}
1096+
10181097
.time-container {
10191098
position: absolute;
10201099
bottom: 12px;
@@ -1043,48 +1122,7 @@
10431122
minCharactersToSearch="2"
10441123
onChange={_ => {
10451124
if (typeof selectedRegion !== 'undefined') {
1046-
if (selectedRegion['level'] !== $currentLevel) {
1047-
currentDataReadyOnMap.set(false);
1048-
currentLevel.set(selectedRegion['level']);
1049-
}
1050-
if (clickedId) {
1051-
map.setFeatureState({ source: $currentLevel, id: clickedId }, { select: false });
1052-
}
1053-
if (megaClickedId) {
1054-
map.setFeatureState({ source: 'mega-county', id: megaClickedId }, { select: false });
1055-
}
1056-
megaClickedId = null;
1057-
currentRegionName.set(selectedRegion['name']);
1058-
currentRegion.set(selectedRegion['property_id']);
1059-
clickedId = parseInt(selectedRegion['id']);
1060-
map.setFeatureState({ source: $currentLevel, id: clickedId }, { select: true });
1061-
let zoom_level;
1062-
if (selectedRegion['level'] === 'county') {
1063-
zoom_level = 6.5;
1064-
} else if (selectedRegion['level'] === 'msa') {
1065-
zoom_level = 6;
1066-
} else {
1067-
zoom_level = 5;
1068-
}
1069-
var long_offset = 0;
1070-
var lat_offset = 0;
1071-
var query = selectedRegion['display_name'];
1072-
if (selectedRegion['id'] === '72' || selectedRegion['id'].substring(0, 2) === '72') {
1073-
query = 'Florida';
1074-
long_offset = 6;
1075-
lat_offset = -3;
1076-
} else if (selectedRegion['id'].substring(0, 2) == '02') {
1077-
query = 'Alaska';
1078-
zoom_level = 6;
1079-
}
1080-
geocode(query).then(d => {
1081-
var coords = projectionMercartor.invert(projection(d.features[0].center));
1082-
if (selectedRegion['property_id'] === 'PR' || selectedRegion['id'].substring(0, 2) === '72') {
1083-
coords[0] += long_offset;
1084-
coords[1] += lat_offset;
1085-
}
1086-
map.flyTo({ center: coords, zoom: zoom_level, essential: true });
1087-
});
1125+
search_element(selectedRegion);
10881126
}
10891127
}} />
10901128
</div>
@@ -1098,6 +1136,10 @@
10981136
<Legend />
10991137
</div>
11001138

1139+
<div class="invalid_search-container">
1140+
<Banner bind:this={searchErrorComponent} />
1141+
</div>
1142+
11011143
<div class="state-buttons-holder">
11021144
<button
11031145
aria-label="show entire map"

0 commit comments

Comments
 (0)