feat: static city suggestions by country, fix city dropdown, coloring animation on save
This commit is contained in:
@@ -3,8 +3,8 @@ import { nameToId } from '../shared/countries.js';
|
||||
|
||||
let selected = $state(new Set());
|
||||
let totalCountries = $state(0);
|
||||
let flashing = $state(new Set());
|
||||
|
||||
// Derive visited countries from journal entries
|
||||
journals.subscribe((entries) => {
|
||||
const ids = new Set();
|
||||
for (const e of entries) {
|
||||
@@ -25,3 +25,16 @@ export function setTotalCount(n) {
|
||||
export function getTotalCount() {
|
||||
return totalCountries;
|
||||
}
|
||||
|
||||
export function getFlashing() {
|
||||
return flashing;
|
||||
}
|
||||
|
||||
export function flashCountry(countryName) {
|
||||
const id = nameToId[countryName];
|
||||
if (!id) return;
|
||||
flashing = new Set([...flashing, id]);
|
||||
setTimeout(() => {
|
||||
flashing = new Set([...flashing].filter(x => x !== id));
|
||||
}, 1600);
|
||||
}
|
||||
|
||||
184
src/lib/shared/countryCities.js
Normal file
184
src/lib/shared/countryCities.js
Normal file
@@ -0,0 +1,184 @@
|
||||
export const countryCities = {
|
||||
'Afghanistan': ['Kabul','Kandahar','Herat','Mazar-i-Sharif','Jalalabad'],
|
||||
'Albania': ['Tirana','Durrës','Vlorë','Shkodër','Elbasan'],
|
||||
'Algeria': ['Algiers','Oran','Constantine','Annaba','Blida'],
|
||||
'Andorra': ['Andorra la Vella','Escaldes-Engordany','Encamp'],
|
||||
'Angola': ['Luanda','Huambo','Lobito','Benguela','Lubango'],
|
||||
'Argentina': ['Buenos Aires','Córdoba','Rosario','Mendoza','Bariloche','Salta','Mar del Plata'],
|
||||
'Armenia': ['Yerevan','Gyumri','Vanadzor'],
|
||||
'Australia': ['Sydney','Melbourne','Brisbane','Perth','Adelaide','Gold Coast','Cairns','Darwin','Hobart','Canberra'],
|
||||
'Austria': ['Vienna','Salzburg','Graz','Innsbruck','Linz','Hallstatt'],
|
||||
'Azerbaijan': ['Baku','Ganja','Sumqayit'],
|
||||
'Bahamas': ['Nassau','Freeport'],
|
||||
'Bahrain': ['Manama','Riffa','Muharraq'],
|
||||
'Bangladesh': ['Dhaka','Chittagong','Sylhet','Rajshahi','Khulna'],
|
||||
'Barbados': ['Bridgetown'],
|
||||
'Belarus': ['Minsk','Gomel','Brest','Grodno'],
|
||||
'Belgium': ['Brussels','Bruges','Ghent','Antwerp','Liège'],
|
||||
'Belize': ['Belize City','San Ignacio','Placencia'],
|
||||
'Benin': ['Cotonou','Porto-Novo','Abomey'],
|
||||
'Bhutan': ['Thimphu','Paro','Punakha'],
|
||||
'Bolivia': ['La Paz','Santa Cruz','Cochabamba','Sucre','Uyuni'],
|
||||
'Bosnia and Herz.': ['Sarajevo','Mostar','Banja Luka'],
|
||||
'Botswana': ['Gaborone','Francistown','Maun'],
|
||||
'Brazil': ['São Paulo','Rio de Janeiro','Brasília','Salvador','Fortaleza','Manaus','Recife','Florianópolis','Foz do Iguaçu'],
|
||||
'Brunei': ['Bandar Seri Begawan'],
|
||||
'Bulgaria': ['Sofia','Plovdiv','Varna','Burgas','Ruse'],
|
||||
'Burkina Faso': ['Ouagadougou','Bobo-Dioulasso'],
|
||||
'Burundi': ['Bujumbura','Gitega'],
|
||||
'Cabo Verde': ['Praia','Mindelo'],
|
||||
'Cambodia': ['Phnom Penh','Siem Reap','Sihanoukville','Battambang'],
|
||||
'Cameroon': ['Yaoundé','Douala','Bafoussam'],
|
||||
'Canada': ['Toronto','Vancouver','Montreal','Calgary','Ottawa','Edmonton','Quebec City','Whistler','Banff','Niagara Falls','Halifax'],
|
||||
'Central African Rep.': ['Bangui'],
|
||||
'Chad': ["N'Djamena",'Moundou'],
|
||||
'Chile': ['Santiago','Valparaíso','Atacama','Puerto Natales','Punta Arenas','Viña del Mar','San Pedro de Atacama'],
|
||||
'China': ['Beijing','Shanghai','Guangzhou','Shenzhen','Chengdu','Xi\'an','Hangzhou','Chongqing','Guilin','Zhangjiajie','Lijiang','Hong Kong','Macau'],
|
||||
'Colombia': ['Bogotá','Medellín','Cartagena','Cali','Santa Marta','Barranquilla'],
|
||||
'Comoros': ['Moroni'],
|
||||
'Congo': ['Brazzaville','Pointe-Noire'],
|
||||
'Costa Rica': ['San José','Manuel Antonio','Tamarindo','Arenal','Monteverde'],
|
||||
'Croatia': ['Zagreb','Dubrovnik','Split','Hvar','Zadar','Pula','Rijeka'],
|
||||
'Cuba': ['Havana','Trinidad','Varadero','Santiago de Cuba','Cienfuegos'],
|
||||
'Cyprus': ['Nicosia','Limassol','Paphos','Larnaca','Ayia Napa'],
|
||||
'Czechia': ['Prague','Brno','Český Krumlov','Karlovy Vary','Olomouc'],
|
||||
"Côte d'Ivoire": ['Abidjan','Yamoussoukro','Bouaké'],
|
||||
'Dem. Rep. Congo': ['Kinshasa','Lubumbashi','Goma','Kisangani'],
|
||||
'Denmark': ['Copenhagen','Aarhus','Odense','Aalborg'],
|
||||
'Djibouti': ['Djibouti City'],
|
||||
'Dominican Rep.': ['Santo Domingo','Punta Cana','Santiago','La Romana'],
|
||||
'Ecuador': ['Quito','Guayaquil','Cuenca','Baños','Galápagos Islands'],
|
||||
'Egypt': ['Cairo','Alexandria','Luxor','Aswan','Sharm el-Sheikh','Hurghada','Giza'],
|
||||
'El Salvador': ['San Salvador','Santa Ana','San Miguel'],
|
||||
'Eq. Guinea': ['Malabo','Bata'],
|
||||
'Eritrea': ['Asmara','Massawa'],
|
||||
'Estonia': ['Tallinn','Tartu','Pärnu'],
|
||||
'Ethiopia': ['Addis Ababa','Lalibela','Gondar','Axum','Dire Dawa'],
|
||||
'Fiji': ['Suva','Nadi','Mamanuca Islands'],
|
||||
'Finland': ['Helsinki','Rovaniemi','Tampere','Turku','Oulu'],
|
||||
'Fr. Polynesia': ['Papeete','Bora Bora','Moorea'],
|
||||
'France': ['Paris','Nice','Lyon','Marseille','Bordeaux','Strasbourg','Toulouse','Cannes','Monaco','Mont Saint-Michel','Versailles'],
|
||||
'Gabon': ['Libreville','Port-Gentil'],
|
||||
'Gambia': ['Banjul','Serekunda'],
|
||||
'Georgia': ['Tbilisi','Batumi','Kutaisi','Sighnaghi'],
|
||||
'Germany': ['Berlin','Munich','Hamburg','Frankfurt','Cologne','Dresden','Heidelberg','Rothenburg ob der Tauber','Neuschwanstein','Stuttgart'],
|
||||
'Ghana': ['Accra','Kumasi','Cape Coast','Tamale'],
|
||||
'Greece': ['Athens','Santorini','Mykonos','Rhodes','Thessaloniki','Crete','Corfu','Meteora'],
|
||||
'Greenland': ['Nuuk','Ilulissat'],
|
||||
'Grenada': ["St. George's"],
|
||||
'Guatemala': ['Guatemala City','Antigua','Lake Atitlán','Tikal','Quetzaltenango'],
|
||||
'Guinea': ['Conakry'],
|
||||
'Guyana': ['Georgetown'],
|
||||
'Haiti': ['Port-au-Prince','Cap-Haïtien'],
|
||||
'Honduras': ['Tegucigalpa','San Pedro Sula','Roatán'],
|
||||
'Hong Kong': ['Hong Kong'],
|
||||
'Hungary': ['Budapest','Debrecen','Pécs','Eger','Győr'],
|
||||
'Iceland': ['Reykjavik','Akureyri','Blue Lagoon','Golden Circle'],
|
||||
'India': ['Mumbai','Delhi','Jaipur','Agra','Bangalore','Chennai','Kolkata','Goa','Varanasi','Udaipur','Kerala','Leh','Shimla'],
|
||||
'Indonesia': ['Jakarta','Bali','Yogyakarta','Lombok','Medan','Komodo','Raja Ampat','Surabaya'],
|
||||
'Iran': ['Tehran','Isfahan','Shiraz','Persepolis','Yazd'],
|
||||
'Iraq': ['Baghdad','Erbil','Basra','Najaf'],
|
||||
'Ireland': ['Dublin','Cork','Galway','Killarney','Limerick'],
|
||||
'Israel': ['Jerusalem','Tel Aviv','Haifa','Eilat','Dead Sea'],
|
||||
'Italy': ['Rome','Florence','Venice','Milan','Naples','Amalfi','Sicily','Cinque Terre','Bologna','Turin'],
|
||||
'Jamaica': ['Kingston','Montego Bay','Negril','Ocho Rios'],
|
||||
'Japan': ['Tokyo','Kyoto','Osaka','Hiroshima','Nara','Sapporo','Hakone','Nikko','Kanazawa','Okinawa','Fukuoka'],
|
||||
'Jordan': ['Amman','Petra','Wadi Rum','Aqaba','Jerash'],
|
||||
'Kazakhstan': ['Almaty','Nur-Sultan','Shymkent'],
|
||||
'Kenya': ['Nairobi','Mombasa','Masai Mara','Amboseli','Zanzibar'],
|
||||
'Kosovo': ['Pristina','Prizren'],
|
||||
'Kuwait': ['Kuwait City'],
|
||||
'Kyrgyzstan': ['Bishkek','Osh','Karakol'],
|
||||
'Laos': ['Vientiane','Luang Prabang','Vang Vieng'],
|
||||
'Latvia': ['Riga','Jūrmala','Sigulda'],
|
||||
'Lebanon': ['Beirut','Byblos','Baalbek','Sidon'],
|
||||
'Libya': ['Tripoli','Benghazi','Leptis Magna'],
|
||||
'Liechtenstein': ['Vaduz'],
|
||||
'Lithuania': ['Vilnius','Kaunas','Trakai','Klaipėda'],
|
||||
'Luxembourg': ['Luxembourg City','Vianden'],
|
||||
'Madagascar': ['Antananarivo','Nosy Be','Morondava'],
|
||||
'Malawi': ['Lilongwe','Blantyre','Lake Malawi'],
|
||||
'Malaysia': ['Kuala Lumpur','Penang','Langkawi','Kota Kinabalu','Malacca','George Town'],
|
||||
'Maldives': ['Malé','Maafushi'],
|
||||
'Mali': ['Bamako','Timbuktu','Djenné'],
|
||||
'Malta': ['Valletta','Mdina','Gozo'],
|
||||
'Mauritania': ['Nouakchott'],
|
||||
'Mauritius': ['Port Louis','Grand Baie','Flic en Flac'],
|
||||
'Mexico': ['Mexico City','Cancún','Guadalajara','Oaxaca','Tulum','Playa del Carmen','San Miguel de Allende','Monterrey','Chichen Itza'],
|
||||
'Moldova': ['Chișinău'],
|
||||
'Monaco': ['Monaco'],
|
||||
'Mongolia': ['Ulaanbaatar','Gobi Desert'],
|
||||
'Montenegro': ['Podgorica','Kotor','Budva','Bar'],
|
||||
'Morocco': ['Marrakech','Fes','Casablanca','Rabat','Chefchaouen','Essaouira','Sahara Desert'],
|
||||
'Mozambique': ['Maputo','Beira','Pemba'],
|
||||
'Myanmar': ['Yangon','Bagan','Mandalay','Inle Lake'],
|
||||
'Namibia': ['Windhoek','Swakopmund','Etosha','Sossusvlei'],
|
||||
'Nepal': ['Kathmandu','Pokhara','Everest Base Camp','Chitwan','Lumbini'],
|
||||
'Netherlands': ['Amsterdam','Rotterdam','The Hague','Utrecht','Delft','Eindhoven'],
|
||||
'New Zealand': ['Auckland','Queenstown','Wellington','Christchurch','Rotorua','Milford Sound'],
|
||||
'Nicaragua': ['Managua','Granada','León'],
|
||||
'Niger': ['Niamey','Agadez'],
|
||||
'Nigeria': ['Lagos','Abuja','Kano','Ibadan'],
|
||||
'North Korea': ['Pyongyang'],
|
||||
'North Macedonia': ['Skopje','Ohrid'],
|
||||
'Norway': ['Oslo','Bergen','Tromsø','Flåm','Ålesund','Stavanger'],
|
||||
'Oman': ['Muscat','Nizwa','Salalah','Wahiba Sands'],
|
||||
'Pakistan': ['Karachi','Lahore','Islamabad','Peshawar','Gilgit'],
|
||||
'Palestine': ['Ramallah','Bethlehem','Jericho','Hebron'],
|
||||
'Panama': ['Panama City','Bocas del Toro','Boquete'],
|
||||
'Papua New Guinea': ['Port Moresby'],
|
||||
'Paraguay': ['Asunción','Ciudad del Este'],
|
||||
'Peru': ['Lima','Cusco','Machu Picchu','Arequipa','Puno','Iquitos'],
|
||||
'Philippines': ['Manila','Cebu','Palawan','Boracay','Davao','Siargao'],
|
||||
'Poland': ['Warsaw','Kraków','Gdańsk','Wrocław','Poznań','Zakopane'],
|
||||
'Portugal': ['Lisbon','Porto','Algarve','Sintra','Madeira','Azores','Évora'],
|
||||
'Puerto Rico': ['San Juan','Ponce','Rincon'],
|
||||
'Qatar': ['Doha'],
|
||||
'Romania': ['Bucharest','Transylvania','Cluj-Napoca','Sibiu','Brașov','Sinaia'],
|
||||
'Russia': ['Moscow','St. Petersburg','Irkutsk','Vladivostok','Sochi','Kazan','Novosibirsk'],
|
||||
'Rwanda': ['Kigali','Volcanoes National Park'],
|
||||
'S. Sudan': ['Juba'],
|
||||
'Saint Lucia': ['Castries','Soufrière'],
|
||||
'Saudi Arabia': ['Riyadh','Jeddah','Mecca','Medina','AlUla','NEOM'],
|
||||
'Senegal': ['Dakar','Saint-Louis','Ziguinchor'],
|
||||
'Serbia': ['Belgrade','Novi Sad','Niš'],
|
||||
'Seychelles': ['Victoria','La Digue','Praslin','Mahé'],
|
||||
'Sierra Leone': ['Freetown'],
|
||||
'Singapore': ['Singapore'],
|
||||
'Slovakia': ['Bratislava','Košice','Banská Bystrica'],
|
||||
'Slovenia': ['Ljubljana','Bled','Piran','Maribor'],
|
||||
'Solomon Is.': ['Honiara'],
|
||||
'Somalia': ['Mogadishu'],
|
||||
'South Africa': ['Cape Town','Johannesburg','Durban','Stellenbosch','Kruger','Garden Route','Pretoria'],
|
||||
'South Korea': ['Seoul','Busan','Jeju','Gyeongju','Incheon','Suwon'],
|
||||
'Spain': ['Barcelona','Madrid','Seville','Granada','Valencia','Bilbao','Toledo','San Sebastián','Ibiza','Mallorca'],
|
||||
'Sri Lanka': ['Colombo','Kandy','Galle','Ella','Sigiriya','Mirissa'],
|
||||
'Sudan': ['Khartoum','Omdurman'],
|
||||
'Suriname': ['Paramaribo'],
|
||||
'Sweden': ['Stockholm','Gothenburg','Malmö','Uppsala','Kiruna'],
|
||||
'Switzerland': ['Zurich','Geneva','Bern','Interlaken','Lucerne','Zermatt','Lugano','Grindelwald'],
|
||||
'Syria': ['Damascus','Aleppo','Palmyra'],
|
||||
'São Tomé and Príncipe': ['São Tomé'],
|
||||
'Taiwan': ['Taipei','Kaohsiung','Tainan','Taichung'],
|
||||
'Tajikistan': ['Dushanbe','Khujand'],
|
||||
'Tanzania': ['Dar es Salaam','Zanzibar','Serengeti','Arusha','Kilimanjaro'],
|
||||
'Thailand': ['Bangkok','Chiang Mai','Phuket','Koh Samui','Koh Phi Phi','Ayutthaya','Pai','Krabi'],
|
||||
'Timor-Leste': ['Dili'],
|
||||
'Togo': ['Lomé'],
|
||||
'Trinidad and Tobago': ['Port of Spain'],
|
||||
'Tunisia': ['Tunis','Carthage','Sousse','Hammamet','Djerba'],
|
||||
'Turkey': ['Istanbul','Cappadocia','Antalya','Bodrum','Ankara','Ephesus','Pamukkale','Trabzon'],
|
||||
'Turkmenistan': ['Ashgabat','Merv'],
|
||||
'Uganda': ['Kampala','Bwindi','Jinja'],
|
||||
'Ukraine': ['Kyiv','Lviv','Odessa','Kharkiv'],
|
||||
'United Arab Emirates': ['Dubai','Abu Dhabi','Sharjah'],
|
||||
'United Kingdom': ['London','Edinburgh','Manchester','Liverpool','Oxford','Cambridge','Bath','York','Brighton','Glasgow','Dublin'],
|
||||
'United States of America': ['New York','Los Angeles','Chicago','Miami','San Francisco','Las Vegas','New Orleans','Seattle','Boston','Washington D.C.','Nashville','Denver','Honolulu','Anchorage','Portland'],
|
||||
'Uruguay': ['Montevideo','Punta del Este','Colonia del Sacramento'],
|
||||
'Uzbekistan': ['Tashkent','Samarkand','Bukhara','Khiva'],
|
||||
'Venezuela': ['Caracas','Medellín','Canaima','Los Roques'],
|
||||
'Vietnam': ['Hanoi','Ho Chi Minh City','Hoi An','Da Nang','Ha Long Bay','Hue','Sapa','Phu Quoc'],
|
||||
'Yemen': ["Sana'a",'Aden'],
|
||||
'Zambia': ['Lusaka','Livingstone','Victoria Falls'],
|
||||
'Zimbabwe': ['Harare','Bulawayo','Victoria Falls'],
|
||||
};
|
||||
@@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import { journals, addJournal } from '../stores/journalStore.js';
|
||||
import { get } from 'svelte/store';
|
||||
import { flashCountry } from '../layout/selection.svelte.js';
|
||||
import { countryNames } from '../shared/countries.js';
|
||||
import { countryCities } from '../shared/countryCities.js';
|
||||
import SearchInput from '../shared/SearchInput.svelte';
|
||||
import PhotoEditor from './PhotoEditor.svelte';
|
||||
import airplaneImg from '../../assets/airplane.png';
|
||||
@@ -13,7 +16,7 @@
|
||||
let { initialCountry = '', onBack, onSaved = onBack } = $props();
|
||||
|
||||
// ── Journal store (reactive) ────────────────────────────────────────
|
||||
let journalEntries = $state([]);
|
||||
let journalEntries = $state(get(journals));
|
||||
$effect(() => {
|
||||
const unsub = journals.subscribe(v => { journalEntries = v; });
|
||||
return unsub;
|
||||
@@ -61,8 +64,11 @@
|
||||
// otherwise show all known cities.
|
||||
let cityOptions = $derived(
|
||||
country.trim()
|
||||
? [...new Set(journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []))].sort()
|
||||
: [...new Set(journalEntries.flatMap(e => e.location?.cities ?? []))].sort()
|
||||
? [...new Set([
|
||||
...(countryCities[country.trim()] ?? []),
|
||||
...journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []),
|
||||
])]
|
||||
: []
|
||||
);
|
||||
|
||||
function addCity(val) {
|
||||
@@ -132,6 +138,7 @@
|
||||
photos,
|
||||
location: { cities, country },
|
||||
});
|
||||
flashCountry(country);
|
||||
onSaved();
|
||||
} catch (e) {
|
||||
saving = false;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import * as d3 from 'd3';
|
||||
import { feature } from 'topojson-client';
|
||||
import worldData from 'world-atlas/countries-50m.json';
|
||||
import { getSelected, setTotalCount } from '../layout/selection.svelte.js';
|
||||
import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
|
||||
import { getUserProfile } from '../auth/userStore.svelte.js';
|
||||
import homeIconUrl from '../../assets 2/home.png';
|
||||
import crayonCursorUrl from '../../assets/logo-cursor.png';
|
||||
@@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
let frameEl;
|
||||
let _paths = null;
|
||||
let _paths = $state(null);
|
||||
let _g = null;
|
||||
let _pathFn = null;
|
||||
let _countries = null;
|
||||
@@ -120,6 +120,23 @@
|
||||
|
||||
$effect(updateAllFills);
|
||||
|
||||
$effect(() => {
|
||||
const flashSet = getFlashing();
|
||||
const paths = _paths; // reactive read so effect re-runs when _paths is set
|
||||
if (!paths || flashSet.size === 0) return;
|
||||
paths
|
||||
.filter(d => flashSet.has(effId(d)))
|
||||
.each(function() {
|
||||
d3.select(this).interrupt()
|
||||
.transition().duration(200).attr('fill', '#facc15')
|
||||
.transition().duration(200).attr('fill', '#fb923c')
|
||||
.transition().duration(200).attr('fill', '#facc15')
|
||||
.transition().duration(200).attr('fill', '#fb923c')
|
||||
.transition().duration(200).attr('fill', '#facc15')
|
||||
.transition().duration(400).attr('fill', VISITED_COLOR);
|
||||
});
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
const width = frameEl.clientWidth;
|
||||
const height = frameEl.clientHeight;
|
||||
|
||||
Reference in New Issue
Block a user