Merge branch 'feature/timeline'
This commit is contained in:
@@ -1,18 +1,19 @@
|
||||
import { initializeApp } from "firebase/app";
|
||||
import { getAuth, GoogleAuthProvider } from "firebase/auth";
|
||||
import { getFirestore } from "firebase/firestore";
|
||||
import { initializeApp } from 'firebase/app';
|
||||
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
|
||||
import { getFirestore } from 'firebase/firestore';
|
||||
import { getStorage } from 'firebase/storage';
|
||||
|
||||
const firebaseConfig = {
|
||||
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
|
||||
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
|
||||
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
|
||||
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
|
||||
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
|
||||
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
|
||||
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
|
||||
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
|
||||
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
|
||||
appId: import.meta.env.VITE_FIREBASE_APP_ID,
|
||||
appId: import.meta.env.VITE_FIREBASE_APP_ID,
|
||||
};
|
||||
|
||||
const app = initializeApp(firebaseConfig);
|
||||
|
||||
export const app = initializeApp(firebaseConfig);
|
||||
export const auth = getAuth(app);
|
||||
export const db = getFirestore(app);
|
||||
export const storage = getStorage(app);
|
||||
export const googleProvider = new GoogleAuthProvider();
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import TopBar from './TopBar.svelte';
|
||||
import Footer from './Footer.svelte';
|
||||
|
||||
let { screen, onNavigate, hideTopBar = false, children } = $props();
|
||||
</script>
|
||||
@@ -12,7 +11,6 @@
|
||||
<main class="main">
|
||||
{@render children()}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -20,11 +18,11 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout.no-topbar {
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { db } from '../firebase.js';
|
||||
import { doc, onSnapshot, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
|
||||
import { doc, onSnapshot, setDoc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
|
||||
|
||||
let selected = $state(new Set());
|
||||
let totalCountries = $state(0);
|
||||
@@ -20,29 +20,39 @@ export function initSelectionListener(uid) {
|
||||
});
|
||||
}
|
||||
|
||||
const visitedRef = doc(db, 'visited', 'countries');
|
||||
|
||||
onSnapshot(visitedRef, (snap) => {
|
||||
if (snap.exists()) {
|
||||
selected = new Set(snap.data().ids ?? []);
|
||||
}
|
||||
});
|
||||
|
||||
function persist() {
|
||||
setDoc(visitedRef, { ids: [...selected] });
|
||||
}
|
||||
|
||||
export function toggle(id) {
|
||||
if (!_uid) return;
|
||||
const was = selected.has(id);
|
||||
const next = new Set(selected);
|
||||
if (was) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
if (was) next.delete(id);
|
||||
else next.add(id);
|
||||
selected = next;
|
||||
const userRef = doc(db, 'users', _uid);
|
||||
if (was) {
|
||||
updateDoc(userRef, { visitedCountries: arrayRemove(id) });
|
||||
} else {
|
||||
updateDoc(userRef, { visitedCountries: arrayUnion(id) });
|
||||
persist();
|
||||
if (_uid) {
|
||||
const userRef = doc(db, 'users', _uid);
|
||||
if (was) updateDoc(userRef, { visitedCountries: arrayRemove(id) });
|
||||
else updateDoc(userRef, { visitedCountries: arrayUnion(id) });
|
||||
}
|
||||
}
|
||||
|
||||
export function clearAll() {
|
||||
if (!_uid) return;
|
||||
selected = new Set();
|
||||
const userRef = doc(db, 'users', _uid);
|
||||
updateDoc(userRef, { visitedCountries: [] });
|
||||
persist();
|
||||
if (_uid) {
|
||||
const userRef = doc(db, 'users', _uid);
|
||||
updateDoc(userRef, { visitedCountries: [] });
|
||||
}
|
||||
}
|
||||
|
||||
export function getSelected() {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* Searchable combobox input.
|
||||
* @type {{ id?: string, value: string, options: string[], placeholder?: string, required?: boolean, onchange?: (v: string) => void }}
|
||||
*/
|
||||
let { id, value = $bindable(), options, placeholder = '', required = false } = $props();
|
||||
let { id, value = $bindable(), options, placeholder = '', required = false, onselect } = $props();
|
||||
|
||||
let query = $state(value);
|
||||
let open = $state(false);
|
||||
@@ -20,6 +20,7 @@
|
||||
value = opt;
|
||||
open = false;
|
||||
focused = -1;
|
||||
onselect?.(opt);
|
||||
}
|
||||
|
||||
function onInput(e) {
|
||||
@@ -33,7 +34,7 @@
|
||||
if (!open) { if (e.key === 'ArrowDown') { open = true; } return; }
|
||||
if (e.key === 'ArrowDown') { e.preventDefault(); focused = Math.min(focused + 1, filtered.length - 1); }
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); focused = Math.max(focused - 1, 0); }
|
||||
else if (e.key === 'Enter' && focused >= 0) { e.preventDefault(); select(filtered[focused]); }
|
||||
else if (e.key === 'Enter') { e.preventDefault(); if (focused >= 0) { select(filtered[focused]); } else if (query.trim()) { select(query.trim()); } }
|
||||
else if (e.key === 'Escape') { open = false; focused = -1; }
|
||||
}
|
||||
|
||||
|
||||
209
src/lib/shared/cities.js
Normal file
209
src/lib/shared/cities.js
Normal file
@@ -0,0 +1,209 @@
|
||||
export const ALL_CITIES = {
|
||||
'Afghanistan': ['Kabul', 'Herat', 'Kandahar', 'Mazar-i-Sharif', 'Jalalabad'],
|
||||
'Albania': ['Tirana', 'Durrës', 'Vlorë', 'Shkodër', 'Sarandë'],
|
||||
'Algeria': ['Algiers', 'Oran', 'Constantine', 'Annaba', 'Tlemcen'],
|
||||
'Angola': ['Luanda', 'Huambo', 'Benguela', 'Lubango', 'Malanje'],
|
||||
'Argentina': ['Buenos Aires', 'Córdoba', 'Rosario', 'Mendoza', 'Bariloche', 'Salta', 'Ushuaia', 'Mar del Plata', 'Iguazú'],
|
||||
'Armenia': ['Yerevan', 'Gyumri', 'Vanadzor', 'Vagharshapat'],
|
||||
'Australia': ['Sydney', 'Melbourne', 'Brisbane', 'Perth', 'Adelaide', 'Gold Coast', 'Cairns', 'Hobart', 'Darwin', 'Canberra', 'Newcastle'],
|
||||
'Austria': ['Vienna', 'Salzburg', 'Innsbruck', 'Graz', 'Linz', 'Hallstatt', 'Zell am See'],
|
||||
'Azerbaijan': ['Baku', 'Ganja', 'Sumqayit', 'Mingachevir', 'Nakhchivan'],
|
||||
'Bahamas': ['Nassau', 'Freeport', 'Marsh Harbour', 'George Town'],
|
||||
'Bahrain': ['Manama', 'Muharraq', 'Riffa', 'Hamad Town'],
|
||||
'Bangladesh': ['Dhaka', 'Chittagong', 'Sylhet', 'Cox\'s Bazar', 'Rajshahi', 'Khulna'],
|
||||
'Barbados': ['Bridgetown', 'Speightstown', 'Oistins', 'Holetown'],
|
||||
'Belarus': ['Minsk', 'Brest', 'Grodno', 'Vitebsk', 'Gomel'],
|
||||
'Belgium': ['Brussels', 'Antwerp', 'Ghent', 'Bruges', 'Leuven', 'Liège', 'Namur'],
|
||||
'Belize': ['Belize City', 'San Ignacio', 'Belmopan', 'Placencia', 'Caye Caulker'],
|
||||
'Benin': ['Porto-Novo', 'Cotonou', 'Parakou', 'Abomey'],
|
||||
'Bhutan': ['Thimphu', 'Paro', 'Punakha', 'Jakar'],
|
||||
'Bolivia': ['La Paz', 'Sucre', 'Santa Cruz', 'Cochabamba', 'Uyuni', 'Potosí'],
|
||||
'Bosnia and Herz.': ['Sarajevo', 'Mostar', 'Banja Luka', 'Tuzla', 'Zenica'],
|
||||
'Botswana': ['Gaborone', 'Maun', 'Kasane', 'Francistown'],
|
||||
'Brazil': ['Rio de Janeiro', 'São Paulo', 'Brasília', 'Salvador', 'Fortaleza', 'Recife', 'Porto Alegre', 'Curitiba', 'Manaus', 'Florianópolis', 'Belo Horizonte', 'Iguaçu Falls', 'Paraty', 'Bonito'],
|
||||
'Brunei': ['Bandar Seri Begawan', 'Kuala Belait', 'Seria', 'Tutong'],
|
||||
'Bulgaria': ['Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Bansko'],
|
||||
'Burkina Faso': ['Ouagadougou', 'Bobo-Dioulasso', 'Koudougou', 'Banfora'],
|
||||
'Burundi': ['Bujumbura', 'Gitega', 'Ngozi', 'Ruyigi'],
|
||||
'Cabo Verde': ['Praia', 'Mindelo', 'Santa Maria', 'Sal Rei'],
|
||||
'Cambodia': ['Phnom Penh', 'Siem Reap', 'Sihanoukville', 'Battambang', 'Kampot'],
|
||||
'Cameroon': ['Yaoundé', 'Douala', 'Bamenda', 'Garoua', 'Kribi'],
|
||||
'Canada': ['Toronto', 'Vancouver', 'Montreal', 'Calgary', 'Ottawa', 'Quebec City', 'Halifax', 'Whistler', 'Banff', 'Victoria', 'Edmonton'],
|
||||
'Chad': ['N\'Djamena', 'Moundou', 'Sarh', 'Abéché'],
|
||||
'Chile': ['Santiago', 'Valparaíso', 'Viña del Mar', 'Puerto Varas', 'San Pedro de Atacama', 'Punta Arenas', 'Easter Island (Rapa Nui)', 'Concepción', 'La Serena'],
|
||||
'China': ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Hangzhou', 'Xi\'an', 'Kunming', 'Zhangjiajie', 'Guilin', 'Hong Kong', 'Macao', 'Lhasa', 'Suzhou', 'Nanjing', 'Chongqing', 'Wuhan', 'Harbin'],
|
||||
'Colombia': ['Bogotá', 'Medellín', 'Cartagena', 'Cali', 'Santa Marta', 'Bucaramanga', 'San Andrés', 'Leticia', 'Tayrona'],
|
||||
'Congo': ['Brazzaville', 'Pointe-Noire', 'Dolisie', 'Ouésso'],
|
||||
'Costa Rica': ['San José', 'Liberia', 'Puerto Viejo', 'La Fortuna', 'Monteverde', 'Manuel Antonio', 'Tamarindo'],
|
||||
'Croatia': ['Zagreb', 'Dubrovnik', 'Split', 'Zadar', 'Rovinj', 'Pula', 'Hvar', 'Šibenik', 'Trogir'],
|
||||
'Cuba': ['Havana', 'Varadero', 'Trinidad', 'Viñales', 'Santiago de Cuba', 'Cienfuegos'],
|
||||
'Curaçao': ['Willemstad', 'Westpunt', 'Sint Willibrordus'],
|
||||
'Cyprus': ['Nicosia', 'Limassol', 'Paphos', 'Larnaca', 'Ayia Napa'],
|
||||
'Czechia': ['Prague', 'Brno', 'Český Krumlov', 'Karlovy Vary', 'Plzeň', 'Olomouc', 'Ostrava', 'Liberec'],
|
||||
'Dem. Rep. Congo': ['Kinshasa', 'Lubumbashi', 'Goma', 'Bukavu', 'Kisangani'],
|
||||
'Denmark': ['Copenhagen', 'Aarhus', 'Odense', 'Aalborg', 'Ribe', 'Skagen', 'Bornholm', 'Møns Klint'],
|
||||
'Djibouti': ['Djibouti City', 'Tadjoura', 'Obock', 'Ali Sabieh'],
|
||||
'Dominican Rep.': ['Santo Domingo', 'Punta Cana', 'Puerto Plata', 'La Romana', 'Samaná', 'Sosúa'],
|
||||
'Ecuador': ['Quito', 'Guayaquil', 'Cuenca', 'Baños', 'Galápagos Islands', 'Otavalo', 'Montañita'],
|
||||
'Egypt': ['Cairo', 'Alexandria', 'Luxor', 'Aswan', 'Hurghada', 'Sharm el-Sheikh', 'Giza', 'Dahab'],
|
||||
'El Salvador': ['San Salvador', 'Santa Ana', 'San Miguel', 'La Libertad', 'Suchitoto'],
|
||||
'Eq. Guinea': ['Malabo', 'Bata', 'Ebebiyín'],
|
||||
'Eritrea': ['Asmara', 'Massawa', 'Keren', 'Assab'],
|
||||
'Estonia': ['Tallinn', 'Tartu', 'Pärnu', 'Kuressaare', 'Narva'],
|
||||
'Eswatini': ['Mbabane', 'Manzini', 'Big Bend', 'Mhlume'],
|
||||
'Ethiopia': ['Addis Ababa', 'Lalibela', 'Gondar', 'Axum', 'Bahir Dar', 'Harar'],
|
||||
'Faeroe Is.': ['Tórshavn', 'Klaksvík', 'Runavík', 'Vestmanna'],
|
||||
'Fiji': ['Suva', 'Nadi', 'Lautoka', 'Denarau', 'Coral Coast'],
|
||||
'Finland': ['Helsinki', 'Rovaniemi', 'Tampere', 'Turku', 'Levi', 'Savonlinna', 'Porvoo'],
|
||||
'France': ['Paris', 'Nice', 'Marseille', 'Lyon', 'Bordeaux', 'Toulouse', 'Strasbourg', 'Lille', 'Montpellier', 'Avignon', 'Arles', 'Cannes', 'Saint-Tropez', 'Annecy', 'Chamonix', 'Biarritz', 'Colmar'],
|
||||
'Gabon': ['Libreville', 'Port-Gentil', 'Franceville', 'Oyem'],
|
||||
'Gambia': ['Banjul', 'Serrekunda', 'Brikama', 'Bakau'],
|
||||
'Georgia': ['Tbilisi', 'Batumi', 'Kutaisi', 'Stepantsminda', 'Sighnaghi', 'Telavi', 'Mestia'],
|
||||
'Germany': ['Berlin', 'Munich', 'Hamburg', 'Frankfurt', 'Cologne', 'Stuttgart', 'Düsseldorf', 'Dresden', 'Leipzig', 'Nuremberg', 'Heidelberg', 'Freiburg', 'Hannover', 'Bremen', 'Bonn', 'Rothenburg ob der Tauber', 'Neuschwanstein'],
|
||||
'Ghana': ['Accra', 'Kumasi', 'Cape Coast', 'Tamale', 'Elmina', 'Takoradi'],
|
||||
'Greece': ['Athens', 'Santorini', 'Mykonos', 'Crete', 'Thessaloniki', 'Corfu', 'Rhodes', 'Naxos', 'Paros', 'Milos', 'Delphi', 'Meteora', 'Olympia', 'Zakynthos'],
|
||||
'Greenland': ['Nuuk', 'Ilulissat', 'Kangerlussuaq', 'Sisimiut'],
|
||||
'Grenada': ['St. George\'s', 'Gouyave', 'Grenville', 'Sauteurs'],
|
||||
'Guatemala': ['Guatemala City', 'Antigua', 'Lake Atitlán', 'Flores', 'Chichicastenango', 'Quetzaltenango', 'Semuc Champey'],
|
||||
'Guinea': ['Conakry', 'Kindia', 'Kankan', 'N\'Zérékoré', 'Labé'],
|
||||
'Guinea-Bissau': ['Bissau', 'Bafatá', 'Gabú', 'Cacheu'],
|
||||
'Guyana': ['Georgetown', 'Linden', 'New Amsterdam', 'Bartica'],
|
||||
'Haiti': ['Port-au-Prince', 'Cap-Haïtien', 'Jacmel', 'Les Cayes', 'Gonaïves'],
|
||||
'Honduras': ['Tegucigalpa', 'San Pedro Sula', 'La Ceiba', 'Roatán', 'Copán Ruinas'],
|
||||
'Hungary': ['Budapest', 'Debrecen', 'Szeged', 'Pécs', 'Eger', 'Siófok (Lake Balaton)', 'Visegrád', 'Hévíz'],
|
||||
'Iceland': ['Reykjavík', 'Akureyri', 'Vík', 'Höfn', 'Ísafjörður', 'Blue Lagoon', 'Thingvellir'],
|
||||
'India': ['Mumbai', 'Delhi', 'Jaipur', 'Agra', 'Varanasi', 'Goa', 'Kerala', 'Bangalore', 'Chennai', 'Kolkata', 'Hyderabad', 'Udaipur', 'Jaisalmer', 'Rishikesh', 'Darjeeling', 'Amritsar', 'Leh', 'Hampi', 'Mysore', 'Pondicherry'],
|
||||
'Indonesia': ['Bali (Denpasar)', 'Jakarta', 'Yogyakarta', 'Lombok', 'Komodo', 'Surabaya', 'Bandung', 'Medan', 'Makassar', 'Labuan Bajo', 'Raja Ampat', 'Gili Islands'],
|
||||
'Iran': ['Tehran', 'Isfahan', 'Shiraz', 'Mashhad', 'Tabriz', 'Yazd', 'Kashan'],
|
||||
'Iraq': ['Baghdad', 'Erbil', 'Basra', 'Najaf', 'Karbala', 'Sulaymaniyah'],
|
||||
'Ireland': ['Dublin', 'Galway', 'Cork', 'Killarney', 'Dingle', 'Cliffs of Moher', 'Kilkenny', 'Belfast (NI)', 'Ring of Kerry'],
|
||||
'Israel': ['Tel Aviv', 'Jerusalem', 'Haifa', 'Eilat', 'Dead Sea', 'Nazareth', 'Tiberias', 'Caesarea', 'Akko'],
|
||||
'Italy': ['Rome', 'Florence', 'Venice', 'Milan', 'Naples', 'Cinque Terre', 'Amalfi Coast', 'Positano', 'Capri', 'Verona', 'Bologna', 'Turin', 'Siena', 'Lake Como', 'Pisa', 'Palermo', 'Catania', 'Matera', 'Tuscany', 'Dolomites'],
|
||||
'Jamaica': ['Kingston', 'Montego Bay', 'Negril', 'Ocho Rios', 'Port Antonio'],
|
||||
'Japan': ['Tokyo', 'Osaka', 'Kyoto', 'Sapporo', 'Fukuoka', 'Hiroshima', 'Nara', 'Kanazawa', 'Nagoya', 'Yokohama', 'Kobe', 'Hakone', 'Nikko', 'Miyajima', 'Takayama', 'Okinawa', 'Kamakura', 'Fuji Five Lakes'],
|
||||
'Jordan': ['Amman', 'Petra', 'Wadi Rum', 'Dead Sea', 'Aqaba', 'Madaba', 'Jerash'],
|
||||
'Kazakhstan': ['Almaty', 'Nur-Sultan', 'Shymkent', 'Aktau', 'Karaganda'],
|
||||
'Kenya': ['Nairobi', 'Mombasa', 'Masai Mara', 'Diani Beach', 'Amboseli', 'Lake Nakuru', 'Tsavo', 'Nanyuki'],
|
||||
'Kiribati': ['Tarawa', 'Kiritimati (Christmas Island)'],
|
||||
'Kosovo': ['Pristina', 'Prizren', 'Peja', 'Gjakova', 'Mitrovica'],
|
||||
'Kuwait': ['Kuwait City', 'Salmiya', 'Hawally', 'Ahmadi', 'Jahra'],
|
||||
'Kyrgyzstan': ['Bishkek', 'Osh', 'Karakol', 'Jalal-Abad', 'Talas'],
|
||||
'Laos': ['Vientiane', 'Luang Prabang', 'Vang Vieng', 'Pakse', 'Savannakhet', 'Si Phan Don (4000 Islands)'],
|
||||
'Latvia': ['Riga', 'Jūrmala', 'Liepāja', 'Cēsis', 'Sigulda', 'Daugavpils'],
|
||||
'Lebanon': ['Beirut', 'Byblos', 'Baalbek', 'Tripoli', 'Sidon', 'Tyre', 'Jounieh'],
|
||||
'Lesotho': ['Maseru', 'Teyateyaneng', 'Mafeteng', 'Hlotse'],
|
||||
'Liberia': ['Monrovia', 'Buchanan', 'Ganta', 'Harper', 'Robertsport'],
|
||||
'Libya': ['Tripoli', 'Benghazi', 'Misrata', 'Sabratha', 'Leptis Magna'],
|
||||
'Liechtenstein': ['Vaduz', 'Schaan', 'Balzers', 'Triesenberg'],
|
||||
'Lithuania': ['Vilnius', 'Kaunas', 'Klaipėda', 'Šiauliai', 'Trakai', 'Palanga', 'Nida'],
|
||||
'Luxembourg': ['Luxembourg City', 'Echternach', 'Vianden', 'Ettelbruck'],
|
||||
'Madagascar': ['Antananarivo', 'Nosy Be', 'Morondava', 'Fianarantsoa', 'Isalo', 'Tôlanaro'],
|
||||
'Malawi': ['Lilongwe', 'Blantyre', 'Mzuzu', 'Lake Malawi', 'Zomba'],
|
||||
'Malaysia': ['Kuala Lumpur', 'Penang (George Town)', 'Langkawi', 'Borneo (Kota Kinabalu)', 'Malacca', 'Cameron Highlands', 'Johor Bahru', 'Kuching', 'Sipadan Island'],
|
||||
'Maldives': ['Malé', 'Ari Atoll', 'Baa Atoll', 'South Male Atoll', 'Addu City'],
|
||||
'Mali': ['Bamako', 'Timbuktu', 'Ségou', 'Mopti', 'Djenné'],
|
||||
'Malta': ['Valletta', 'Sliema', 'Gozo', 'Mellieħa', 'Mdina', 'St. Julian\'s', 'Comino'],
|
||||
'Marshall Is.': ['Majuro', 'Kwajalein', 'Ebeye'],
|
||||
'Mauritania': ['Nouakchott', 'Nouadhibou', 'Atar', 'Chinguetti', 'Ouadane'],
|
||||
'Mauritius': ['Port Louis', 'Grand Baie', 'Flic en Flac', 'Belle Mare', 'Le Morne', 'Chamarel'],
|
||||
'Mexico': ['Mexico City', 'Cancún', 'Playa del Carmen', 'Tulum', 'Guadalajara', 'Monterrey', 'Puerto Vallarta', 'Oaxaca', 'San Miguel de Allende', 'Mérida', 'Cabo San Lucas', 'Guanajuato', 'Chichen Itza', 'Palenque', 'Cuernavaca', 'Puebla'],
|
||||
'Micronesia': ['Palikir', 'Chuuk', 'Pohnpei', 'Yap', 'Kosrae'],
|
||||
'Moldova': ['Chișinău', 'Bălți', 'Tiraspol', 'Cahul', 'Orhei'],
|
||||
'Monaco': ['Monaco City', 'Monte Carlo', 'La Condamine', 'Fontvieille'],
|
||||
'Mongolia': ['Ulaanbaatar', 'Karakorum', 'Gobi Desert', 'Lake Khövsgöl', 'Altai', 'Erdenet'],
|
||||
'Montenegro': ['Podgorica', 'Kotor', 'Budva', 'Bar', 'Ulcinj', 'Žabljak', 'Perast'],
|
||||
'Morocco': ['Marrakech', 'Fes', 'Casablanca', 'Rabat', 'Tangier', 'Chefchaouen', 'Essaouira', 'Ouarzazate', 'Agadir', 'Meknes', 'Merzouga (Sahara)'],
|
||||
'Mozambique': ['Maputo', 'Beira', 'Tofo (Inhambane)', 'Vilankulo', 'Bazaruto Archipelago', 'Nampula'],
|
||||
'Myanmar': ['Yangon', 'Mandalay', 'Bagan', 'Inle Lake', 'Hpa-An', 'Ngapali Beach'],
|
||||
'Namibia': ['Windhoek', 'Swakopmund', 'Sossusvlei', 'Etosha National Park', 'Fish River Canyon', 'Walvis Bay'],
|
||||
'Nauru': ['Yaren', 'Boe', 'Aiwo'],
|
||||
'Nepal': ['Kathmandu', 'Pokhara', 'Chitwan', 'Lumbini', 'Everest Base Camp', 'Nagarkot', 'Bandipur'],
|
||||
'Netherlands': ['Amsterdam', 'Rotterdam', 'The Hague', 'Utrecht', 'Maastricht', 'Groningen', 'Leiden', 'Delft', 'Giethoorn', 'Haarlem', 'Zaanse Schans', 'Keukenhof'],
|
||||
'New Zealand': ['Auckland', 'Queenstown', 'Wellington', 'Christchurch', 'Rotorua', 'Milford Sound', 'Wanaka', 'Taupō', 'Dunedin', 'Tongariro', 'Abel Tasman', 'Bay of Islands'],
|
||||
'Nicaragua': ['Managua', 'Granada', 'León', 'San Juan del Sur', 'Ometepe Island', 'Corn Islands'],
|
||||
'Niger': ['Niamey', 'Agadez', 'Zinder', 'Maradi', 'Tahoua'],
|
||||
'Nigeria': ['Lagos', 'Abuja', 'Port Harcourt', 'Calabar', 'Ibadan', 'Kano', 'Enugu', 'Jos'],
|
||||
'North Korea': ['Pyongyang', 'Kaesong', 'Chongjin', 'Nampo', 'Wonsan'],
|
||||
'North Macedonia': ['Skopje', 'Ohrid', 'Bitola', 'Tetovo', 'Struga'],
|
||||
'Norway': ['Oslo', 'Bergen', 'Tromsø', 'Stavanger', 'Trondheim', 'Lofoten Islands', 'Geirangerfjord', 'Flåm', 'Alesund', 'Preikestolen', 'Nordkapp'],
|
||||
'Oman': ['Muscat', 'Salalah', 'Nizwa', 'Sur', 'Wahiba Sands', 'Khasab', 'Sohar'],
|
||||
'Pakistan': ['Islamabad', 'Karachi', 'Lahore', 'Hunza Valley', 'Skardu', 'Faisalabad', 'Multan', 'Swat Valley'],
|
||||
'Palau': ['Ngerulmud', 'Koror', 'Peleliu'],
|
||||
'Palestine': ['Ramallah', 'Bethlehem', 'Hebron', 'Nablus', 'Jericho', 'Gaza'],
|
||||
'Panama': ['Panama City', 'Bocas del Toro', 'Boquete', 'San Blas Islands', 'El Valle de Antón'],
|
||||
'Papua New Guinea': ['Port Moresby', 'Lae', 'Mount Hagen', 'Kokopo', 'Alotau', 'Tufi'],
|
||||
'Paraguay': ['Asunción', 'Ciudad del Este', 'Encarnación', 'San Bernardino', 'Filadelfia'],
|
||||
'Peru': ['Lima', 'Cusco', 'Arequipa', 'Machu Picchu', 'Sacred Valley', 'Lake Titicaca', 'Iquitos (Amazon)', 'Paracas', 'Huaraz', 'Nazca', 'Máncora', 'Trujillo'],
|
||||
'Philippines': ['Manila', 'Cebu', 'Palawan (El Nido)', 'Siargao', 'Boracay', 'Davao', 'Bohol (Panglao)', 'Banaue Rice Terraces', 'Coron', 'Baguio', 'Puerto Princesa'],
|
||||
'Poland': ['Warsaw', 'Kraków', 'Gdańsk', 'Wrocław', 'Poznań', 'Zakopane', 'Gdynia', 'Łódź', 'Toruń', 'Szczecin', 'Lublin', 'Malbork', 'Morskie Oko'],
|
||||
'Portugal': ['Lisbon', 'Porto', 'Algarve (Faro)', 'Sintra', 'Madeira', 'Coimbra', 'Azores', 'Braga', 'Évora', 'Cascais', 'Douro Valley'],
|
||||
'Puerto Rico': ['San Juan', 'Ponce', 'Mayagüez', 'Culebra', 'Vieques', 'Rincón'],
|
||||
'Qatar': ['Doha', 'Al Wakrah', 'Al Khor', 'Mesaieed', 'Katara'],
|
||||
'Romania': ['Bucharest', 'Cluj-Napoca', 'Brașov', 'Sibiu', 'Sighișoara', 'Timișoara', 'Iași', 'Constanța', 'Transfăgărășan', 'Mamaia'],
|
||||
'Russia': ['Moscow', 'Saint Petersburg', 'Moscow', 'Sochi', 'Vladivostok', 'Kazan', 'Novosibirsk', 'Yekaterinburg', 'Irkutsk', 'Lake Baikal', 'Murmansk', 'Kaliningrad', 'Kamchatka', 'Krasnodar', 'Nizhny Novgorod', 'Rostov-on-Don'],
|
||||
'Rwanda': ['Kigali', 'Butare', 'Gisenyi', 'Volcanoes National Park', 'Akagera', 'Nyungwe Forest'],
|
||||
'S. Sudan': ['Juba', 'Malakal', 'Wau', 'Bor', 'Yei'],
|
||||
'Samoa': ['Apia', 'Salelologa', 'Lalomanu', 'Safua'],
|
||||
'San Marino': ['San Marino City', 'Borgo Maggiore', 'Serravalle'],
|
||||
'São Tomé and Principe': ['São Tomé', 'Santo António', 'Neves'],
|
||||
'Saudi Arabia': ['Riyadh', 'Jeddah', 'Mecca', 'Medina', 'Dammam', 'AlUla', 'Abha', 'Tabuk', 'Neom'],
|
||||
'Senegal': ['Dakar', 'Saint-Louis', 'Gorée Island', 'Sine-Saloum Delta', 'Pink Lake (Lac Rose)', 'Cap Skirring'],
|
||||
'Serbia': ['Belgrade', 'Novi Sad', 'Niš', 'Subotica', 'Kragujevac', 'Zlatibor', 'Kopaonik'],
|
||||
'Seychelles': ['Mahé (Victoria)', 'Praslin', 'La Digue', 'Silhouette Island'],
|
||||
'Sierra Leone': ['Freetown', 'Bo', 'Kenema', 'Makeni', 'Bunce Island'],
|
||||
'Singapore': ['Singapore'],
|
||||
'Slovakia': ['Bratislava', 'Košice', 'Tatras (High Tatras)', 'Banská Štiavnica', 'Levoča', 'Žilina', 'Poprad'],
|
||||
'Slovenia': ['Ljubljana', 'Lake Bled', 'Piran', 'Maribor', 'Postojna Cave', 'Triglav National Park', 'Celje'],
|
||||
'Solomon Is.': ['Honiara', 'Gizo', 'Auki', 'Munda'],
|
||||
'Somalia': ['Mogadishu', 'Hargeisa', 'Kismayo', 'Baidoa', 'Berbera'],
|
||||
'South Africa': ['Cape Town', 'Johannesburg', 'Durban', 'Kruger National Park', 'Garden Route', 'Cape Winelands (Stellenbosch)', 'Port Elizabeth', 'Hermanus', 'Blyde River Canyon', 'Drakensberg', 'Pretoria', 'Soweto', 'Knysna'],
|
||||
'South Korea': ['Seoul', 'Busan', 'Jeju Island', 'Gyeongju', 'Incheon', 'Daegu', 'Daejeon', 'Gwangju', 'Jeonju', 'Seoraksan National Park', 'Andong', 'Suwon', 'Sokcho', 'Pyeongchang'],
|
||||
'Spain': ['Barcelona', 'Madrid', 'Seville', 'Granada', 'Valencia', 'Bilbao', 'San Sebastián', 'Mallorca', 'Ibiza', 'Tenerife', 'Córdoba', 'Málaga', 'Santiago de Compostela', 'Toledo', 'Ronda', 'Salamanca', 'Marbella', 'Costa Brava', 'Alhambra', 'Picos de Europa'],
|
||||
'Sri Lanka': ['Colombo', 'Kandy', 'Galle', 'Sigiriya', 'Ella', 'Mirissa', 'Anuradhapura', 'Polonnaruwa', 'Nuwara Eliya', 'Yala National Park'],
|
||||
'St. Kitts and Nevis': ['Basseterre', 'Charlestown', 'Frigate Bay', 'Nevis'],
|
||||
'St. Lucia': ['Castries', 'Soufrière', 'Gros Islet', 'Vieux Fort', 'Marigot Bay'],
|
||||
'St. Pierre and Miquelon': ['Saint-Pierre', 'Miquelon'],
|
||||
'St. Vin. and Gren.': ['Kingstown', 'Bequia', 'Mustique', 'Canouan', 'Union Island'],
|
||||
'Sudan': ['Khartoum', 'Omdurman', 'Port Sudan', 'Kassala', 'Nyala'],
|
||||
'Suriname': ['Paramaribo', 'Lelydorp', 'Brokopondo', 'Nieuw Nickerie'],
|
||||
'Sweden': ['Stockholm', 'Gothenburg', 'Malmö', 'Kiruna', 'Visby', 'Uppsala', 'Lund', 'Abisko National Park', 'Icehotel (Jukkasjärvi)', 'Smögen'],
|
||||
'Switzerland': ['Zurich', 'Geneva', 'Lucerne', 'Zermatt', 'Interlaken', 'Lugano', 'Lausanne', 'Bern', 'Grindelwald', 'St. Moritz', 'Jungfraujoch', 'Montreux', 'Matterhorn Glacier Paradise'],
|
||||
'Syria': ['Damascus', 'Aleppo', 'Palmyra', 'Homs', 'Latakia', 'Maaloula'],
|
||||
'Taiwan': ['Taipei', 'Taichung', 'Kaohsiung', 'Tainan', 'Taroko Gorge', 'Sun Moon Lake', 'Alishan', 'Jiufen', 'Kenting', 'Yilan', 'Taoyuan', 'Hualien'],
|
||||
'Tajikistan': ['Dushanbe', 'Khujand', 'Pamir Mountains', 'Khorog', 'Bokhtar'],
|
||||
'Tanzania': ['Dar es Salaam', 'Zanzibar City', 'Arusha', 'Serengeti National Park', 'Kilimanjaro', 'Ngorongoro Crater', 'Mwanza', 'Mbeya', 'Mafia Island', 'Lake Manyara', 'Selous'],
|
||||
'Thailand': ['Bangkok', 'Chiang Mai', 'Phuket', 'Krabi', 'Pattaya', 'Koh Samui', 'Koh Phi Phi', 'Koh Tao', 'Ayutthaya', 'Chiang Rai', 'Hua Hin', 'Khao Sok', 'Pai', 'Kanchanaburi', 'Sukhothai', 'Koh Lanta', 'Railay Beach', 'Erawan National Park'],
|
||||
'Timor-Leste': ['Dili', 'Baucau', 'Same', 'Atauro Island', 'Jaco Island'],
|
||||
'Togo': ['Lomé', 'Kpalimé', 'Sokodé', 'Kara', 'Aneho'],
|
||||
'Tonga': ['Nuku\'alofa', 'Neiafu', 'Pangai', 'Ha\'apai', 'Eua'],
|
||||
'Trinidad and Tobago': ['Port of Spain', 'San Fernando', 'Tobago (Scarborough)', 'Chaguanas', 'Maracas Bay'],
|
||||
'Tunisia': ['Tunis', 'Sousse', 'Hammamet', 'Djerba', 'Sfax', 'Carthage', 'Douz (Sahara)', 'Matmata', 'Bizerte', 'El Jem'],
|
||||
'Turkey': ['Istanbul', 'Cappadocia (Göreme)', 'Antalya', 'Izmir', 'Bodrum', 'Fethiye', 'Pamukkale', 'Ephesus', 'Marmaris', 'Alanya', 'Ankara', 'Trabzon', 'Kas', 'Olympos', 'Gallipoli', 'Konya', 'Mardin', 'Butterfly Valley'],
|
||||
'Turkmenistan': ['Ashgabat', 'Mary', 'Turkmenbashi', 'Dashoguz', 'Köneürgenç'],
|
||||
'Tuvalu': ['Funafuti', 'Nanumea', 'Nukulaelae'],
|
||||
'U.S. Virgin Is.': ['Charlotte Amalie', 'Christiansted', 'Frederiksted', 'Cruz Bay'],
|
||||
'Uganda': ['Kampala', 'Jinja', 'Murchison Falls', 'Queen Elizabeth National Park', 'Bwindi Impenetrable Forest', 'Kibale', 'Lake Bunyonyi', 'Entebbe'],
|
||||
'Ukraine': ['Kyiv', 'Lviv', 'Odesa', 'Kharkiv', 'Carpathian Mountains', 'Dnipro', 'Chernivtsi', 'Kamianets-Podilskyi', 'Zaporizhzhia', 'Lutsk'],
|
||||
'United Arab Emirates': ['Dubai', 'Abu Dhabi', 'Sharjah', 'Fujairah', 'Ras Al Khaimah', 'Ajman', 'Hatta'],
|
||||
'United Kingdom': ['London', 'Edinburgh', 'Bath', 'York', 'Liverpool', 'Manchester', 'Birmingham', 'Cambridge', 'Oxford', 'Brighton', 'Cornwall', 'Bristol', 'Cardiff', 'Glasgow', 'Inverness', 'Belfast', 'Lake District', 'Scottish Highlands', 'St. Ives', 'Canterbury', 'Dover', 'Stratford-upon-Avon'],
|
||||
'United States of America': ['New York', 'Los Angeles', 'Chicago', 'San Francisco', 'Las Vegas', 'Miami', 'Orlando', 'Washington DC', 'Boston', 'Seattle', 'Portland', 'Denver', 'New Orleans', 'Nashville', 'Austin', 'San Diego', 'Honolulu', 'Grand Canyon', 'Yellowstone', 'Yosemite', 'Houston', 'Dallas', 'Atlanta', 'Philadelphia', 'Phoenix', 'San Antonio', 'Savannah', 'Charleston', 'Santa Fe', 'Anchorage', 'Maui', 'Kauai', 'Moab', 'Portland (ME)', 'Asheville', 'Sedona', 'Napa Valley'],
|
||||
'Uruguay': ['Montevideo', 'Punta del Este', 'Colonia del Sacramento', 'Piriapolis', 'Cabo Polonio', 'Rocha'],
|
||||
'Uzbekistan': ['Tashkent', 'Samarkand', 'Bukhara', 'Khiva', 'Shakhrisabz', 'Fergana', 'Nukus', 'Termez'],
|
||||
'Vanuatu': ['Port Vila', 'Luganville', 'Tanna Island', 'Pentecost', 'Espiritu Santo'],
|
||||
'Vatican': ['Vatican City'],
|
||||
'Venezuela': ['Caracas', 'Angel Falls (Canaima)', 'Margarita Island', 'Los Roques', 'Mérida', 'Roraima', 'Maracaibo', 'Valencia'],
|
||||
'Vietnam': ['Hanoi', 'Ho Chi Minh City (Saigon)', 'Ha Long Bay', 'Hoi An', 'Da Nang', 'Hue', 'Nha Trang', 'Phong Nha', 'Da Lat', 'Sapa', 'Phu Quoc', 'Mui Ne', 'Con Dao', 'Mekong Delta (Can Tho)', 'Ninh Binh', 'Son Doong Cave'],
|
||||
'W. Sahara': ['Laayoune', 'Dakhla', 'Smara', 'Boujdour'],
|
||||
'Yemen': ['Sana\'a', 'Aden', 'Socotra', 'Taiz', 'Mukalla', 'Shibam'],
|
||||
'Zambia': ['Lusaka', 'Victoria Falls', 'Livingstone', 'South Luangwa National Park', 'Kitwe', 'Ndola', 'Kasama'],
|
||||
'Zimbabwe': ['Harare', 'Victoria Falls', 'Bulawayo', 'Hwange National Park', 'Mutare', 'Gweru', 'Masvingo (Great Zimbabwe)'],
|
||||
};
|
||||
|
||||
/**
|
||||
* Get curated city suggestions for a given country name.
|
||||
* @param {string} countryName
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function getCitiesForCountry(countryName) {
|
||||
return ALL_CITIES[countryName] || [];
|
||||
}
|
||||
@@ -1,25 +1,74 @@
|
||||
export const countryCodeMap = {
|
||||
'Argentina': 'AR', 'Australia': 'AU', 'Austria': 'AT',
|
||||
'Belgium': 'BE', 'Brazil': 'BR',
|
||||
'Canada': 'CA', 'Chile': 'CL', 'China': 'CN', 'Croatia': 'HR',
|
||||
'Czech Republic': 'CZ', 'Denmark': 'DK', 'Egypt': 'EG',
|
||||
'Finland': 'FI', 'France': 'FR', 'Germany': 'DE', 'Greece': 'GR',
|
||||
'Hungary': 'HU', 'India': 'IN', 'Indonesia': 'ID', 'Italy': 'IT',
|
||||
'Japan': 'JP', 'Kenya': 'KE',
|
||||
'Malaysia': 'MY', 'Mexico': 'MX', 'Morocco': 'MA',
|
||||
'Netherlands': 'NL', 'New Zealand': 'NZ', 'Norway': 'NO',
|
||||
'Peru': 'PE', 'Poland': 'PL', 'Portugal': 'PT',
|
||||
'Singapore': 'SG', 'South Africa': 'ZA', 'South Korea': 'KR',
|
||||
'Spain': 'ES', 'Sweden': 'SE', 'Switzerland': 'CH',
|
||||
'Taiwan': 'TW', 'Thailand': 'TH', 'Turkey': 'TR',
|
||||
'UK': 'GB', 'USA': 'US', 'Vietnam': 'VN',
|
||||
import { feature } from 'topojson-client';
|
||||
import worldData from 'world-atlas/countries-50m.json';
|
||||
|
||||
// Full name → alpha-2 map covering all world-atlas country names.
|
||||
const nameToAlpha2 = {
|
||||
'Afghanistan':'AF','Albania':'AL','Algeria':'DZ','American Samoa':'AS',
|
||||
'Andorra':'AD','Angola':'AO','Anguilla':'AI','Antigua and Barb.':'AG',
|
||||
'Argentina':'AR','Armenia':'AM','Aruba':'AW','Ashmore and Cartier Is.':'AU',
|
||||
'Australia':'AU','Austria':'AT','Azerbaijan':'AZ','Bahamas':'BS',
|
||||
'Bahrain':'BH','Bangladesh':'BD','Barbados':'BB','Belarus':'BY',
|
||||
'Belgium':'BE','Belize':'BZ','Benin':'BJ','Bermuda':'BM','Bhutan':'BT',
|
||||
'Bolivia':'BO','Bosnia and Herz.':'BA','Botswana':'BW',
|
||||
'Br. Indian Ocean Ter.':'IO','Brazil':'BR','British Virgin Is.':'VG',
|
||||
'Brunei':'BN','Bulgaria':'BG','Burkina Faso':'BF','Burundi':'BI',
|
||||
'Cabo Verde':'CV','Cambodia':'KH','Cameroon':'CM','Canada':'CA',
|
||||
'Cayman Is.':'KY','Central African Rep.':'CF','Chad':'TD','Chile':'CL',
|
||||
'China':'CN','Colombia':'CO','Comoros':'KM','Congo':'CG','Cook Is.':'CK',
|
||||
'Costa Rica':'CR','Croatia':'HR','Cuba':'CU','Curaçao':'CW','Cyprus':'CY',
|
||||
'Czechia':'CZ',"Côte d'Ivoire":'CI','Dem. Rep. Congo':'CD','Denmark':'DK',
|
||||
'Djibouti':'DJ','Dominica':'DM','Dominican Rep.':'DO','Ecuador':'EC',
|
||||
'Egypt':'EG','El Salvador':'SV','Eq. Guinea':'GQ','Eritrea':'ER',
|
||||
'Estonia':'EE','Ethiopia':'ET','Faeroe Is.':'FO','Falkland Is.':'FK',
|
||||
'Fiji':'FJ','Finland':'FI','Fr. Polynesia':'PF','France':'FR','Gabon':'GA',
|
||||
'Gambia':'GM','Georgia':'GE','Germany':'DE','Ghana':'GH','Greece':'GR',
|
||||
'Greenland':'GL','Grenada':'GD','Guam':'GU','Guatemala':'GT',
|
||||
'Guernsey':'GG','Guinea':'GN','Guinea-Bissau':'GW','Guyana':'GY',
|
||||
'Haiti':'HT','Honduras':'HN','Hong Kong':'HK','Hungary':'HU','Iceland':'IS',
|
||||
'India':'IN','Indonesia':'ID','Iran':'IR','Iraq':'IQ','Ireland':'IE',
|
||||
'Isle of Man':'IM','Israel':'IL','Italy':'IT','Jamaica':'JM','Japan':'JP',
|
||||
'Jersey':'JE','Jordan':'JO','Kazakhstan':'KZ','Kenya':'KE','Kiribati':'KI',
|
||||
'Kosovo':'XK','Kuwait':'KW','Kyrgyzstan':'KG','Laos':'LA','Latvia':'LV',
|
||||
'Lebanon':'LB','Lesotho':'LS','Liberia':'LR','Libya':'LY',
|
||||
'Liechtenstein':'LI','Lithuania':'LT','Luxembourg':'LU','Macao':'MO',
|
||||
'Macedonia':'MK','Madagascar':'MG','Malawi':'MW','Malaysia':'MY',
|
||||
'Maldives':'MV','Mali':'ML','Malta':'MT','Marshall Is.':'MH',
|
||||
'Mauritania':'MR','Mauritius':'MU','Mexico':'MX','Micronesia':'FM',
|
||||
'Moldova':'MD','Monaco':'MC','Mongolia':'MN','Montenegro':'ME',
|
||||
'Montserrat':'MS','Morocco':'MA','Mozambique':'MZ','Myanmar':'MM',
|
||||
'N. Cyprus':'CY','N. Mariana Is.':'MP','Namibia':'NA','Nauru':'NR',
|
||||
'Nepal':'NP','Netherlands':'NL','New Caledonia':'NC','New Zealand':'NZ',
|
||||
'Nicaragua':'NI','Niger':'NE','Nigeria':'NG','Niue':'NU',
|
||||
'Norfolk Island':'NF','North Korea':'KP','Norway':'NO','Oman':'OM',
|
||||
'Pakistan':'PK','Palau':'PW','Palestine':'PS','Panama':'PA',
|
||||
'Papua New Guinea':'PG','Paraguay':'PY','Peru':'PE','Philippines':'PH',
|
||||
'Pitcairn Is.':'PN','Poland':'PL','Portugal':'PT','Puerto Rico':'PR',
|
||||
'Qatar':'QA','Romania':'RO','Russia':'RU','Rwanda':'RW','S. Sudan':'SS',
|
||||
'Saint Helena':'SH','Saint Lucia':'LC','Samoa':'WS','San Marino':'SM',
|
||||
'Saudi Arabia':'SA','Senegal':'SN','Serbia':'RS','Seychelles':'SC',
|
||||
'Sierra Leone':'SL','Singapore':'SG','Sint Maarten':'SX','Slovakia':'SK',
|
||||
'Slovenia':'SI','Solomon Is.':'SB','Somalia':'SO','South Africa':'ZA',
|
||||
'South Korea':'KR','Spain':'ES','Sri Lanka':'LK','St-Barthélemy':'BL',
|
||||
'St-Martin':'MF','St. Kitts and Nevis':'KN','St. Pierre and Miquelon':'PM',
|
||||
'St. Vin. and Gren.':'VC','Sudan':'SD','Suriname':'SR','Sweden':'SE',
|
||||
'Switzerland':'CH','Syria':'SY','São Tomé and Principe':'ST','Taiwan':'TW',
|
||||
'Tajikistan':'TJ','Tanzania':'TZ','Thailand':'TH','Timor-Leste':'TL',
|
||||
'Togo':'TG','Tonga':'TO','Trinidad and Tobago':'TT','Tunisia':'TN',
|
||||
'Turkey':'TR','Turkmenistan':'TM','Turks and Caicos Is.':'TC',
|
||||
'U.S. Virgin Is.':'VI','Uganda':'UG','Ukraine':'UA',
|
||||
'United Arab Emirates':'AE','United Kingdom':'GB',
|
||||
'United States of America':'US','Uruguay':'UY','Uzbekistan':'UZ',
|
||||
'Vanuatu':'VU','Vatican':'VA','Venezuela':'VE','Vietnam':'VN',
|
||||
'W. Sahara':'EH','Yemen':'YE','Zambia':'ZM','Zimbabwe':'ZW',
|
||||
'eSwatini':'SZ','Åland':'AX',
|
||||
};
|
||||
|
||||
export const countryNames = Object.keys(countryCodeMap).sort();
|
||||
export const countryNames = feature(worldData, worldData.objects.countries)
|
||||
.features.map(f => f.properties?.name).filter(Boolean).sort();
|
||||
|
||||
/** @param {string} country */
|
||||
export function flagEmoji(country) {
|
||||
const code = countryCodeMap[country];
|
||||
const code = nameToAlpha2[country];
|
||||
if (!code) return '';
|
||||
return [...code].map(c => String.fromCodePoint(0x1F1E6 - 65 + c.charCodeAt(0))).join('');
|
||||
}
|
||||
|
||||
@@ -1,123 +1,45 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import { db } from '../firebase.js';
|
||||
import {
|
||||
collection, onSnapshot, addDoc, updateDoc, deleteDoc, doc, serverTimestamp
|
||||
} from 'firebase/firestore';
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* id: string,
|
||||
* title: string,
|
||||
* date: string,
|
||||
* location: { country: string, city: string },
|
||||
* location: { country: string, cities: string[] },
|
||||
* photos: string[],
|
||||
* transport: 'flight' | 'train' | 'bus' | 'car' | 'ship' | 'walk',
|
||||
* tripType: 'solo' | 'friends',
|
||||
* tripType: 'solo' | 'friends' | 'family',
|
||||
* days: number,
|
||||
* memo: string
|
||||
* }} JournalEntry
|
||||
*/
|
||||
|
||||
/** @type {JournalEntry[]} */
|
||||
const mockEntries = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'First Day in Tokyo',
|
||||
date: '2024-03-15',
|
||||
location: { country: 'Japan', city: 'Tokyo' },
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1513407030348-c983a97b98d8?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=600&q=80',
|
||||
],
|
||||
transport: 'flight',
|
||||
tripType: 'solo',
|
||||
days: 5,
|
||||
memo: 'Got completely lost in Shinjuku — stumbled into a tiny ramen shop with no English menu. The chashu just melted. Worth every wrong turn.',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Arashiyama Bamboo Grove',
|
||||
date: '2024-03-18',
|
||||
location: { country: 'Japan', city: 'Kyoto' },
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?w=600&q=80',
|
||||
],
|
||||
transport: 'train',
|
||||
tripType: 'friends',
|
||||
days: 3,
|
||||
memo: 'Arrived at 6am before the crowds. Just me and the wind moving through the bamboo. One of those moments you keep coming back to.',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Sunset on Montmartre',
|
||||
date: '2024-06-02',
|
||||
location: { country: 'France', city: 'Paris' },
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?w=600&q=80',
|
||||
],
|
||||
transport: 'flight',
|
||||
tripType: 'solo',
|
||||
days: 7,
|
||||
memo: 'Watched the whole city turn orange from the steps of Sacré-Cœur. A street musician was playing La Vie en Rose. Cliché, perfect.',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Inside La Sagrada Família',
|
||||
date: '2024-06-10',
|
||||
location: { country: 'Spain', city: 'Barcelona' },
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1523531294919-4bcd7c65e216?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1583422409516-2895a77efded?w=600&q=80',
|
||||
],
|
||||
transport: 'flight',
|
||||
tripType: 'friends',
|
||||
days: 4,
|
||||
memo: 'Nothing prepares you for the light inside. The stained glass turns the whole nave into a kaleidoscope. Gaudí was building a forest.',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'Central Park in Fall',
|
||||
date: '2023-10-20',
|
||||
location: { country: 'USA', city: 'New York' },
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1534430480872-3498386e7856?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1485871981521-5b1fd3805345?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1522083165195-3424ed129620?w=600&q=80',
|
||||
],
|
||||
transport: 'car',
|
||||
tripType: 'friends',
|
||||
days: 6,
|
||||
memo: 'Peak foliage. Joggers, picnics, a guy playing saxophone near Bethesda Fountain. Hard to believe a city this big wraps around this much quiet.',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'Wat Pho Reclining Buddha',
|
||||
date: '2024-01-08',
|
||||
location: { country: 'Thailand', city: 'Bangkok' },
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1563492065599-3520f775eeed?w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=600&q=80',
|
||||
],
|
||||
transport: 'ship',
|
||||
tripType: 'solo',
|
||||
days: 2,
|
||||
memo: 'Stood in front of the 45m golden Buddha for a long time. The mother-of-pearl inlay on the soles of the feet is impossibly detailed.',
|
||||
},
|
||||
];
|
||||
export const journals = writable(/** @type {JournalEntry[]} */([]));
|
||||
export const journalsLoading = writable(true);
|
||||
|
||||
export const journals = writable(mockEntries);
|
||||
const entriesRef = collection(db, 'entries');
|
||||
|
||||
onSnapshot(entriesRef, (snap) => {
|
||||
journals.set(snap.docs.map(d => ({ id: d.id, ...d.data() })));
|
||||
journalsLoading.set(false);
|
||||
});
|
||||
|
||||
/** @param {Omit<JournalEntry, 'id'>} entry */
|
||||
export function addJournal(entry) {
|
||||
journals.update((entries) => [...entries, { ...entry, id: crypto.randomUUID() }]);
|
||||
export async function addJournal(entry) {
|
||||
await addDoc(entriesRef, { ...entry, createdAt: serverTimestamp() });
|
||||
}
|
||||
|
||||
/** @param {string} id */
|
||||
export function removeJournal(id) {
|
||||
journals.update((entries) => entries.filter((e) => e.id !== id));
|
||||
export async function removeJournal(id) {
|
||||
await deleteDoc(doc(db, 'entries', id));
|
||||
}
|
||||
|
||||
/** @param {JournalEntry} updated */
|
||||
export function updateJournal(updated) {
|
||||
journals.update((entries) => entries.map((e) => e.id === updated.id ? updated : e));
|
||||
export async function updateJournal(updated) {
|
||||
const { id, ...data } = updated;
|
||||
await updateDoc(doc(db, 'entries', id), data);
|
||||
}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
<div class="overlay" role="dialog" aria-modal="true">
|
||||
<div class="dialog">
|
||||
<h2 class="title">Delete entry?</h2>
|
||||
<h2 class="title">Delete trip?</h2>
|
||||
<p class="body">
|
||||
<strong>{entry.location.city}, {entry.location.country}</strong> — {entry.date.slice(0, 4)} will be permanently removed.
|
||||
<strong>{entry.location.cities.join(', ')}, {entry.location.country}</strong> — {entry.date.slice(0, 4)} will be permanently removed.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button class="btn btn-cancel" onclick={onCancel}>Cancel</button>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { get } from 'svelte/store';
|
||||
import { journals, addJournal, updateJournal } from '../stores/journalStore.js';
|
||||
import { getEntries } from '../stores/entriesStore.svelte.js';
|
||||
import { addEntry, updateEntry } from '../stores/entriesStore.svelte.js';
|
||||
import { countryNames } from '../shared/countries.js';
|
||||
import { getCitiesForCountry, ALL_CITIES } from '../shared/cities.js';
|
||||
import SearchInput from '../shared/SearchInput.svelte';
|
||||
import PhotoEditor from './PhotoEditor.svelte';
|
||||
|
||||
@@ -14,14 +15,23 @@
|
||||
|
||||
let isNew = !entry;
|
||||
|
||||
let city = $state(entry?.location.city ?? '');
|
||||
let cities = $state([...(entry?.location.cities ?? [])]);
|
||||
let cityInput = $state('');
|
||||
let country = $state(entry?.location.country ?? initialCountry);
|
||||
let date = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
|
||||
let days = $state(String(entry?.days ?? 1));
|
||||
let tripType = $state(entry?.tripType ?? 'solo');
|
||||
let days = $state(String(entry?.days ?? ''));
|
||||
let tripType = $state(entry?.tripType ?? '');
|
||||
let photos = $state([...(entry?.photos ?? [])]);
|
||||
let memo = $state(entry?.memo ?? '');
|
||||
let transport = $state(entry?.transport ?? 'flight');
|
||||
let transport = $state(entry?.transport ?? '');
|
||||
|
||||
let errors = $state({
|
||||
country: '', cities: '', date: '', days: '', tripType: '', transport: ''
|
||||
});
|
||||
|
||||
function clearErrors() {
|
||||
errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
|
||||
}
|
||||
|
||||
const transportOptions = [
|
||||
{ value: 'flight', label: '✈ Flight' },
|
||||
@@ -48,35 +58,64 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Suggest cities — when a country is selected show only cities from that country.
|
||||
let allEntries = $derived(getEntries());
|
||||
let cityOptions = $derived(
|
||||
[...new Set(get(journals).map(e => e.location.city))].sort()
|
||||
country.trim()
|
||||
? [...new Set([...getCitiesForCountry(country), ...allEntries.filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities)])].sort()
|
||||
: [...new Set([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
|
||||
);
|
||||
|
||||
function save() {
|
||||
if (isNew) {
|
||||
addJournal({
|
||||
title: `${city}, ${country}`,
|
||||
date,
|
||||
days: Number(days),
|
||||
tripType,
|
||||
memo,
|
||||
photos,
|
||||
transport,
|
||||
location: { city, country },
|
||||
});
|
||||
} else {
|
||||
updateJournal({
|
||||
...entry,
|
||||
date,
|
||||
days: Number(days),
|
||||
tripType,
|
||||
transport,
|
||||
memo,
|
||||
photos,
|
||||
location: { city, country },
|
||||
});
|
||||
function addCity(val) {
|
||||
const trimmed = (val ?? cityInput).trim();
|
||||
if (trimmed && !cities.includes(trimmed)) {
|
||||
cities = [...cities, trimmed];
|
||||
}
|
||||
cityInput = '';
|
||||
}
|
||||
|
||||
function removeCity(c) {
|
||||
cities = cities.filter(x => x !== c);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
clearErrors();
|
||||
let hasError = false;
|
||||
if (!country.trim()) { errors.country = 'Country is required.'; hasError = true; }
|
||||
if (cities.length === 0) { errors.cities = 'Add at least one city.'; hasError = true; }
|
||||
if (!date) { errors.date = 'Date is required.'; hasError = true; }
|
||||
if (!days || Number(days) < 1) { errors.days = 'Enter a valid number of days.'; hasError = true; }
|
||||
if (!tripType) { errors.tripType = 'Select a trip type.'; hasError = true; }
|
||||
if (!transport) { errors.transport = 'Select how you got there.'; hasError = true; }
|
||||
if (hasError) return;
|
||||
|
||||
try {
|
||||
if (isNew) {
|
||||
await addEntry({
|
||||
title: `${cities.join(', ')}, ${country}`,
|
||||
date,
|
||||
days: Number(days),
|
||||
tripType,
|
||||
memo,
|
||||
photos,
|
||||
transport,
|
||||
location: { cities, country },
|
||||
});
|
||||
} else {
|
||||
await updateEntry(entry.id, {
|
||||
date,
|
||||
days: Number(days),
|
||||
tripType,
|
||||
transport,
|
||||
memo,
|
||||
photos,
|
||||
location: { cities, country },
|
||||
});
|
||||
}
|
||||
onBack();
|
||||
} catch (err) {
|
||||
console.error('Save failed:', err);
|
||||
}
|
||||
onBack();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -91,7 +130,7 @@
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<span class="topbar-title">{isNew ? 'New entry' : 'Edit'}</span>
|
||||
<span class="topbar-title">{isNew ? 'New trip' : 'Edit'}</span>
|
||||
<div class="topbar-right">
|
||||
<button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
|
||||
</div>
|
||||
@@ -104,10 +143,24 @@
|
||||
<div class="field">
|
||||
<label class="label" for="edit-country">Country <span class="req">*</span></label>
|
||||
<SearchInput id="edit-country" bind:value={country} options={countryNames} required />
|
||||
{#if errors.country}<span class="field-error">{errors.country}</span>{/if}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="edit-city">City <span class="req">*</span></label>
|
||||
<SearchInput id="edit-city" bind:value={city} options={cityOptions} required />
|
||||
<label class="label" for="edit-city">Cities <span class="req">*</span></label>
|
||||
<div class="city-input-row">
|
||||
<SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
|
||||
</div>
|
||||
{#if errors.cities}<span class="field-error">{errors.cities}</span>{/if}
|
||||
{#if cities.length > 0}
|
||||
<div class="city-tags">
|
||||
{#each cities as c}
|
||||
<span class="city-tag">
|
||||
{c}
|
||||
<button type="button" class="city-tag-remove" onclick={() => removeCity(c)}>×</button>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,10 +168,12 @@
|
||||
<div class="field">
|
||||
<label class="label" for="edit-date">Date <span class="req">*</span></label>
|
||||
<input id="edit-date" class="input" type="date" bind:value={date} required />
|
||||
{#if errors.date}<span class="field-error">{errors.date}</span>{/if}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="edit-days">Days <span class="req">*</span></label>
|
||||
<input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
|
||||
{#if errors.days}<span class="field-error">{errors.days}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -131,7 +186,11 @@
|
||||
<label class="toggle-opt" class:active={tripType === 'friends'}>
|
||||
<input type="radio" name="tripType" value="friends" bind:group={tripType} /> With friends
|
||||
</label>
|
||||
<label class="toggle-opt" class:active={tripType === 'family'}>
|
||||
<input type="radio" name="tripType" value="family" bind:group={tripType} /> With family
|
||||
</label>
|
||||
</div>
|
||||
{#if errors.tripType}<span class="field-error">{errors.tripType}</span>{/if}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
@@ -144,6 +203,7 @@
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{#if errors.transport}<span class="field-error">{errors.transport}</span>{/if}
|
||||
</div>
|
||||
|
||||
<PhotoEditor {photos} onchange={(p) => (photos = p)} />
|
||||
@@ -162,6 +222,12 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.field-error {
|
||||
font-size: 11px;
|
||||
color: #dc2626;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.edit-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -175,7 +241,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 52px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
@@ -190,8 +256,8 @@
|
||||
.topbar-right { justify-content: flex-end; }
|
||||
|
||||
.topbar-title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
@@ -200,13 +266,13 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
@@ -355,4 +421,39 @@
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.city-input-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.city-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.city-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 1px solid var(--accent-border);
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px 3px 12px;
|
||||
}
|
||||
.city-tag-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.city-tag-remove:hover { opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { removeJournal } from '../stores/journalStore.js';
|
||||
import { removeEntry } from '../stores/entriesStore.svelte.js';
|
||||
import { flagEmoji } from '../shared/countries.js';
|
||||
import DeleteConfirm from './DeleteConfirm.svelte';
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
let showDeleteConfirm = $state(false);
|
||||
|
||||
function handleDelete() {
|
||||
removeJournal(entry.id);
|
||||
removeEntry(entry.id);
|
||||
onBack();
|
||||
}
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
<span class="topbar-flag">{flagEmoji(entry.location.country)}</span>
|
||||
<div class="topbar-place">
|
||||
<span class="topbar-city">{entry.location.city}</span>
|
||||
<span class="topbar-city">{entry.location.cities.join(', ')}</span>
|
||||
<span class="topbar-country">{entry.location.country}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,6 +114,8 @@
|
||||
<p class="answer">
|
||||
{#if entry.tripType === 'solo'}
|
||||
Just me — solo trip
|
||||
{:else if entry.tripType === 'family'}
|
||||
With family
|
||||
{:else}
|
||||
With friends
|
||||
{/if}
|
||||
@@ -147,7 +149,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 52px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
@@ -194,13 +196,13 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
const totalDays = entries.reduce((s, e) => s + e.days, 0);
|
||||
const countries = [...new Set(entries.map(e => e.location.country))];
|
||||
const cities = [...new Set(entries.map(e => e.location.city))];
|
||||
const cities = [...new Set(entries.flatMap(e => e.location.cities))];
|
||||
|
||||
const years = entries.map(e => new Date(e.date).getFullYear());
|
||||
const minYear = Math.min(...years);
|
||||
|
||||
482
src/lib/timeline/NewEntryForm.svelte
Normal file
482
src/lib/timeline/NewEntryForm.svelte
Normal file
@@ -0,0 +1,482 @@
|
||||
<script>
|
||||
import { getEntries } from '../stores/entriesStore.svelte.js';
|
||||
import { addEntry } from '../stores/entriesStore.svelte.js';
|
||||
import { countryNames } from '../shared/countries.js';
|
||||
import { getCitiesForCountry, ALL_CITIES } from '../shared/cities.js';
|
||||
import SearchInput from '../shared/SearchInput.svelte';
|
||||
import PhotoEditor from './PhotoEditor.svelte';
|
||||
import airplaneImg from '../../assets/airplane.png';
|
||||
import trainImg from '../../assets/train.png';
|
||||
import busImg from '../../assets/bus.png';
|
||||
import carImg from '../../assets/car.png';
|
||||
import shipImg from '../../assets/ship.png';
|
||||
import walkImg from '../../assets/walk.png';
|
||||
|
||||
let { initialCountry = '', onBack } = $props();
|
||||
|
||||
// ── Fields ─────────────────────────────────────────────────────────
|
||||
let cities = $state([]);
|
||||
let cityInput = $state('');
|
||||
let country = $state(initialCountry);
|
||||
let date = $state(new Date().toISOString().slice(0, 10));
|
||||
let days = $state('');
|
||||
let tripType = $state('');
|
||||
let transport = $state('');
|
||||
let photos = $state([]);
|
||||
let answers = $state(['', '', '']);
|
||||
|
||||
let errors = $state({ country: '', cities: '', date: '', days: '', tripType: '', transport: '' });
|
||||
|
||||
// ── Steps ──────────────────────────────────────────────────────────
|
||||
let step = $state(1); // 1 | 2 | 3
|
||||
|
||||
// ── Random questions ───────────────────────────────────────────────
|
||||
const ALL_QUESTIONS = [
|
||||
'If this trip had a movie title, what would it be?',
|
||||
'What was the most unexpected thing that happened?',
|
||||
'Which moment would you relive for just 10 more minutes?',
|
||||
'What was your best accidental discovery?\n(A café, a street, a person, a view…)',
|
||||
'If your trip had a theme song, what would it sound like?',
|
||||
'What did you pack but never use?',
|
||||
'What was the smallest thing that made you surprisingly happy?',
|
||||
'If you could steal one thing from this place (without consequences), what would it be?\n(A tradition, a smell, a sunset, a food…)',
|
||||
'What story from this trip will you probably tell your friends first?',
|
||||
'What version of yourself showed up on this trip?',
|
||||
];
|
||||
|
||||
function pickRandom() {
|
||||
const shuffled = [...ALL_QUESTIONS].sort(() => Math.random() - 0.5);
|
||||
return shuffled.slice(0, 3);
|
||||
}
|
||||
|
||||
const questions = pickRandom();
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────
|
||||
// Suggest cities — if a country is selected, show cities only from that country;
|
||||
// otherwise show all known cities.
|
||||
let allEntries = $derived(getEntries());
|
||||
let cityOptions = $derived(
|
||||
country.trim()
|
||||
? [...new Set([...getCitiesForCountry(country), ...allEntries.filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities)])].sort()
|
||||
: [...new Set([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
|
||||
);
|
||||
|
||||
function addCity(val) {
|
||||
const t = (val ?? cityInput).trim();
|
||||
if (t && !cities.includes(t)) cities = [...cities, t];
|
||||
cityInput = '';
|
||||
}
|
||||
|
||||
function removeCity(c) { cities = cities.filter(x => x !== c); }
|
||||
|
||||
$effect(() => { if (country.trim()) errors.country = ''; });
|
||||
$effect(() => { if (cities.length > 0) errors.cities = ''; });
|
||||
$effect(() => { if (date) errors.date = ''; });
|
||||
$effect(() => { if (days && Number(days) >= 1) errors.days = ''; });
|
||||
$effect(() => { if (tripType) errors.tripType = ''; });
|
||||
$effect(() => { if (transport) errors.transport = ''; });
|
||||
|
||||
const transportOptions = [
|
||||
{ value: 'flight', label: 'Flight', img: airplaneImg },
|
||||
{ value: 'train', label: 'Train', img: trainImg },
|
||||
{ value: 'bus', label: 'Bus', img: busImg },
|
||||
{ value: 'car', label: 'Car', img: carImg },
|
||||
{ value: 'ship', label: 'Ship', img: shipImg },
|
||||
{ value: 'walk', label: 'Walk', img: walkImg },
|
||||
];
|
||||
|
||||
// ── Navigation ─────────────────────────────────────────────────────
|
||||
function nextStep() {
|
||||
if (step === 1) {
|
||||
errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
|
||||
let hasError = false;
|
||||
if (!country.trim()) { errors.country = 'Country is required.'; hasError = true; }
|
||||
if (cities.length === 0) { errors.cities = 'Add at least one city.'; hasError = true; }
|
||||
if (!date) { errors.date = 'Date is required.'; hasError = true; }
|
||||
if (!days || Number(days) < 1) { errors.days = 'Enter a valid number of days.'; hasError = true; }
|
||||
if (!tripType) { errors.tripType = 'Select a trip type.'; hasError = true; }
|
||||
if (!transport) { errors.transport = 'Select how you got there.'; hasError = true; }
|
||||
if (hasError) return;
|
||||
}
|
||||
step++;
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (step === 1) onBack();
|
||||
else step--;
|
||||
}
|
||||
|
||||
// ── Save ───────────────────────────────────────────────────────────
|
||||
let saving = $state(false);
|
||||
|
||||
async function save() {
|
||||
saving = true;
|
||||
const memo = questions
|
||||
.map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '')
|
||||
.filter(Boolean)
|
||||
.join('\n\n');
|
||||
try {
|
||||
await addEntry({
|
||||
title: `${cities.join(', ')}, ${country}`,
|
||||
date,
|
||||
days: Number(days),
|
||||
tripType,
|
||||
transport,
|
||||
memo,
|
||||
photos,
|
||||
location: { cities, country },
|
||||
});
|
||||
onBack();
|
||||
} catch (e) {
|
||||
console.error('Save failed:', e);
|
||||
saving = false;
|
||||
alert('Failed to save. Check console for details.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="layout">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<button class="ghost-btn" onclick={prevStep}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
|
||||
{step === 1 ? 'Back' : 'Previous'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="steps">
|
||||
{#each [1,2,3] as s}
|
||||
<div class="step-dot" class:active={step === s} class:done={step > s}></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
{#if step < 3}
|
||||
<button class="save-btn" onclick={nextStep}>Next</button>
|
||||
{:else}
|
||||
<button class="save-btn" onclick={save} disabled={saving}>
|
||||
{saving ? 'Saving…' : 'Save trip'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="form">
|
||||
|
||||
{#if step === 1}
|
||||
<!-- headline -->
|
||||
<h1 class="page-headline">
|
||||
{#if country.trim()}
|
||||
Journal your trip to <strong>{country}</strong>!
|
||||
{:else}
|
||||
Journal your trip!
|
||||
{/if}
|
||||
</h1>
|
||||
|
||||
<!-- ── STEP 1: Details ── -->
|
||||
<h2 class="step-title">Trip details</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<label class="label" for="nc-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
|
||||
<SearchInput id="nc-country" bind:value={country} options={countryNames} />
|
||||
{#if errors.country}<span class="ferr">{errors.country}</span>{/if}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="nc-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
|
||||
<SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
|
||||
{#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
|
||||
{#if cities.length > 0}
|
||||
<div class="tags">
|
||||
{#each cities as c}
|
||||
<span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<label class="label" for="nc-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
|
||||
<input id="nc-date" class="input" type="date" bind:value={date} />
|
||||
{#if errors.date}<span class="ferr">{errors.date}</span>{/if}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="nc-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
|
||||
<input id="nc-days" class="input" type="number" min="1" bind:value={days} />
|
||||
{#if errors.days}<span class="ferr">{errors.days}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
|
||||
<div class="toggle-row">
|
||||
{#each ['solo','friends','family'] as t}
|
||||
<label class="toggle-opt" class:active={tripType === t}>
|
||||
<input type="radio" name="nc-tripType" value={t} bind:group={tripType} />
|
||||
{t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨👩👧👦 With family'}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
|
||||
<div class="transport-grid">
|
||||
{#each transportOptions as opt}
|
||||
<label class="toggle-opt" class:active={transport === opt.value}>
|
||||
<input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
|
||||
<img src={opt.img} alt={opt.label} class="transport-img" />
|
||||
{opt.label}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
|
||||
</div>
|
||||
|
||||
{:else if step === 2}
|
||||
<!-- ── STEP 2: Photos ── -->
|
||||
<h2 class="step-title">Photos</h2>
|
||||
<p class="step-sub">Optional — add photos from your trip</p>
|
||||
<PhotoEditor {photos} onchange={(p) => (photos = p)} />
|
||||
|
||||
{:else}
|
||||
<!-- ── STEP 3: Questions ── -->
|
||||
<h2 class="step-title">
|
||||
Your memories{cities.length > 0 ? ` of ${cities.join(', ')}` : country.trim() ? ` of ${country}` : ''}
|
||||
</h2>
|
||||
{#if cities.length > 0 || country.trim()}
|
||||
<p class="step-sub">{cities.join(', ')}{cities.length > 0 && country.trim() ? `, ${country}` : country.trim()}</p>
|
||||
{/if}
|
||||
|
||||
{#each questions as q, i}
|
||||
<div class="q-card">
|
||||
<p class="q-text">{q}{country.trim() ? ` in ${country}` : ''}</p>
|
||||
<textarea class="q-input" rows="3" placeholder="Your answer…" bind:value={answers[i]}></textarea>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
font-family: var(--sans);
|
||||
}
|
||||
|
||||
/* topbar */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 52px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
.topbar-left, .topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 110px;
|
||||
}
|
||||
.topbar-right { justify-content: flex-end; }
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.step-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
.step-dot.active {
|
||||
background: var(--accent);
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.step-dot.done {
|
||||
background: var(--accent);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: var(--sans);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
|
||||
|
||||
.save-btn {
|
||||
font-family: var(--sans);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 10px;
|
||||
padding: 8px 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
|
||||
.save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
/* scroll + form */
|
||||
.scroll { flex: 1; overflow-y: auto; }
|
||||
|
||||
.form {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 36px 48px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
letter-spacing: -0.3px;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
.page-headline {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.page-headline strong { font-weight: 600; }
|
||||
.step-sub {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--text-sub);
|
||||
margin: -10px 0 4px;
|
||||
}
|
||||
|
||||
/* fields (same as EditForm) */
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
.req { color: var(--accent); font-size: 11px; }
|
||||
.kw { color: var(--accent); }
|
||||
|
||||
.ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
|
||||
|
||||
.input {
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--text-h);
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input:focus { border-color: var(--accent-border); }
|
||||
|
||||
.toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.toggle-opt {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
font-size: 16px; font-weight: 400; color: var(--text);
|
||||
padding: 12px 14px; border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
background: var(--bg-subtle);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toggle-opt input { display: none; }
|
||||
.toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
|
||||
.toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
|
||||
|
||||
.transport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
|
||||
.transport-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
|
||||
|
||||
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
font-size: 12px; font-weight: 300; color: var(--accent);
|
||||
background: var(--accent-bg); border: 1px solid var(--accent-border);
|
||||
border-radius: 20px; padding: 3px 10px 3px 12px;
|
||||
}
|
||||
.tag-rm {
|
||||
background: none; border: none; color: var(--accent);
|
||||
font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
|
||||
}
|
||||
.tag-rm:hover { opacity: 1; }
|
||||
|
||||
/* question cards */
|
||||
.q-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
background: var(--bg);
|
||||
border: 1.5px solid var(--accent-border);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
||||
}
|
||||
.q-text {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.q-input {
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 1.6;
|
||||
transition: border-color 0.15s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.q-input:focus { border-color: var(--accent-border); }
|
||||
.q-input::placeholder { color: var(--text-sub); font-style: italic; }
|
||||
</style>
|
||||
@@ -1,55 +1,52 @@
|
||||
<script>
|
||||
import { storage } from '../firebase.js';
|
||||
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
|
||||
|
||||
/** @type {{ photos: string[], onchange: (photos: string[]) => void }} */
|
||||
let { photos, onchange } = $props();
|
||||
|
||||
let fileInput;
|
||||
let uploading = $state(false);
|
||||
|
||||
function remove(index) {
|
||||
const next = photos.filter((_, i) => i !== index);
|
||||
onchange(next);
|
||||
onchange(photos.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
async function addFiles(e) {
|
||||
const files = Array.from(e.currentTarget.files ?? []);
|
||||
if (!files.length) return;
|
||||
|
||||
const dataUrls = await Promise.all(files.map(fileToDataUrl));
|
||||
onchange([...photos, ...dataUrls]);
|
||||
|
||||
// reset so the same file can be picked again
|
||||
e.currentTarget.value = '';
|
||||
uploading = true;
|
||||
try {
|
||||
const urls = await Promise.all(files.map(uploadPhoto));
|
||||
onchange([...photos, ...urls]);
|
||||
} finally {
|
||||
uploading = false;
|
||||
e.currentTarget.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {File} file */
|
||||
function fileToDataUrl(file) {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => resolve(/** @type {string} */ (e.target.result));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
async function uploadPhoto(file) {
|
||||
const storageRef = ref(storage, `photos/${crypto.randomUUID()}`);
|
||||
await uploadBytes(storageRef, file);
|
||||
return getDownloadURL(storageRef);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="photo-editor">
|
||||
<div class="label-row">
|
||||
<span class="label">Photos</span>
|
||||
<button type="button" class="add-btn" onclick={() => fileInput.click()}>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<path d="M12 5v14M5 12h14"/>
|
||||
</svg>
|
||||
Add photos
|
||||
</button>
|
||||
<input bind:this={fileInput} type="file" accept="image/*" multiple onchange={addFiles} hidden />
|
||||
</div>
|
||||
|
||||
{#if photos.length === 0}
|
||||
<button type="button" class="empty-zone" onclick={() => fileInput.click()}>
|
||||
<button type="button" class="empty-zone" onclick={() => fileInput.click()} disabled={uploading}>
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="3"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<path d="M21 15l-5-5L5 21"/>
|
||||
</svg>
|
||||
<span>Click to add photos</span>
|
||||
<span>{uploading ? 'Uploading…' : 'Click to add photos'}</span>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="grid">
|
||||
@@ -64,7 +61,7 @@
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<button type="button" class="add-cell" onclick={() => fileInput.click()}>
|
||||
<button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading}>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||||
<path d="M12 5v14M5 12h14"/>
|
||||
</svg>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
const totalDays = entries.reduce((s, e) => s + e.days, 0);
|
||||
const countries = [...new Set(entries.map(e => e.location.country))];
|
||||
const cities = [...new Set(entries.map(e => e.location.city))];
|
||||
const cities = [...new Set(entries.flatMap(e => e.location.cities))];
|
||||
|
||||
// Continent days
|
||||
const contDays = {};
|
||||
@@ -68,6 +68,7 @@
|
||||
// Solo vs friends
|
||||
const soloCount = entries.filter(e => e.tripType === 'solo').length;
|
||||
const friendCount = entries.filter(e => e.tripType === 'friends').length;
|
||||
const familyCount = entries.filter(e => e.tripType === 'family').length;
|
||||
|
||||
// Most visited country
|
||||
const countryCounts = {};
|
||||
@@ -79,7 +80,7 @@
|
||||
|
||||
return {
|
||||
totalDays, countries, cities, contDays, topContinent,
|
||||
longest, flightHrs, soloCount, friendCount,
|
||||
longest, flightHrs, soloCount, friendCount, familyCount,
|
||||
favCountry, spanMonths, yearStart, yearEnd,
|
||||
};
|
||||
});
|
||||
@@ -175,7 +176,7 @@
|
||||
{#if stats.longest}
|
||||
<div class="fact">
|
||||
<span class="fact-icon">📍</span>
|
||||
<span class="fact-text">Longest stay: <strong>{stats.longest.days} days</strong> in {stats.longest.location.city}</span>
|
||||
<span class="fact-text">Longest stay: <strong>{stats.longest.days} days</strong> in {stats.longest.location.cities.join(', ')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if stats.flightHrs > 0}
|
||||
@@ -192,7 +193,7 @@
|
||||
{/if}
|
||||
<div class="fact">
|
||||
<span class="fact-icon">{stats.soloCount >= stats.friendCount ? '🧳' : '👥'}</span>
|
||||
<span class="fact-text">{stats.soloCount} solo · {stats.friendCount} with friends</span>
|
||||
<span class="fact-text">{stats.soloCount} solo{stats.friendCount > 0 ? ` · ${stats.friendCount} with friends` : ''}{stats.familyCount > 0 ? ` · ${stats.familyCount} with family` : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
235
src/lib/timeline/SharePreview.svelte
Normal file
235
src/lib/timeline/SharePreview.svelte
Normal file
@@ -0,0 +1,235 @@
|
||||
<script>
|
||||
/** @type {{ entries: import('../stores/journalStore.js').JournalEntry[], onClick: () => void }} */
|
||||
let { entries, onClick } = $props();
|
||||
|
||||
const continentMap = {
|
||||
'Japan':'Asia','South Korea':'Asia','China':'Asia','Thailand':'Asia','Vietnam':'Asia',
|
||||
'Indonesia':'Asia','Malaysia':'Asia','Singapore':'Asia','India':'Asia','Taiwan':'Asia',
|
||||
'Philippines':'Asia','Cambodia':'Asia','Nepal':'Asia',
|
||||
'France':'Europe','Spain':'Europe','Italy':'Europe','Germany':'Europe','UK':'Europe',
|
||||
'Netherlands':'Europe','Portugal':'Europe','Greece':'Europe','Sweden':'Europe',
|
||||
'Norway':'Europe','Denmark':'Europe','Finland':'Europe','Switzerland':'Europe',
|
||||
'Austria':'Europe','Belgium':'Europe','Poland':'Europe','Czech Republic':'Europe',
|
||||
'Hungary':'Europe','Croatia':'Europe','Turkey':'Europe',
|
||||
'USA':'N. America','Canada':'N. America','Mexico':'N. America',
|
||||
'Brazil':'S. America','Argentina':'S. America','Chile':'S. America','Peru':'S. America',
|
||||
'Australia':'Oceania','New Zealand':'Oceania',
|
||||
'Morocco':'Africa','Egypt':'Africa','Kenya':'Africa','South Africa':'Africa',
|
||||
};
|
||||
|
||||
const continentColors = {
|
||||
'Asia':'#f87171','Europe':'#818cf8','N. America':'#4ade80',
|
||||
'S. America':'#fbbf24','Africa':'#fb923c','Oceania':'#c084fc',
|
||||
};
|
||||
|
||||
let stats = $derived.by(() => {
|
||||
const totalDays = entries.reduce((s, e) => s + e.days, 0);
|
||||
const countries = [...new Set(entries.map(e => e.location.country))];
|
||||
const contDays = {};
|
||||
for (const e of entries) {
|
||||
const c = continentMap[e.location.country] ?? 'Other';
|
||||
contDays[c] = (contDays[c] ?? 0) + e.days;
|
||||
}
|
||||
const top = Object.entries(contDays).sort((a, b) => b[1] - a[1]);
|
||||
return { totalDays, countries, contDays, top, trips: entries.length };
|
||||
});
|
||||
</script>
|
||||
|
||||
<button class="preview-card" onclick={onClick} aria-label="Share your journey">
|
||||
|
||||
<div class="pc-bg"></div>
|
||||
<div class="pc-grid-pattern"></div>
|
||||
|
||||
<div class="pc-header">
|
||||
<span class="pc-brand">MAP JOURNAL</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pc-share-icon">
|
||||
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
|
||||
<path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="pc-hero">
|
||||
<span class="pc-num">{stats.totalDays}</span>
|
||||
<span class="pc-label">days traveled</span>
|
||||
</div>
|
||||
|
||||
<div class="pc-row">
|
||||
<div class="pc-stat">
|
||||
<span class="pc-stat-num">{stats.countries.length}</span>
|
||||
<span class="pc-stat-label">countries</span>
|
||||
</div>
|
||||
<div class="pc-stat">
|
||||
<span class="pc-stat-num">{stats.trips}</span>
|
||||
<span class="pc-stat-label">trips</span>
|
||||
</div>
|
||||
<div class="pc-stat">
|
||||
<span class="pc-stat-num">{Object.keys(stats.contDays).length}</span>
|
||||
<span class="pc-stat-label">continents</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if stats.top.length > 0}
|
||||
<div class="pc-bar-wrap">
|
||||
<div class="pc-bar">
|
||||
{#each stats.top as [cont, days]}
|
||||
<div class="pc-seg" style="flex:{days}; background:{continentColors[cont] ?? '#818cf8'}"></div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="pc-bar-labels">
|
||||
{#each stats.top.slice(0,3) as [cont, days]}
|
||||
<span class="pc-bar-label" style="color:{continentColors[cont] ?? '#818cf8'}">{cont}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pc-cta">Share your journey →</div>
|
||||
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.preview-card {
|
||||
position: sticky;
|
||||
top: 40px;
|
||||
width: 100%;
|
||||
background: #1a1630;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
text-align: left;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
font-family: var(--sans);
|
||||
}
|
||||
.preview-card:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 20px rgba(124,58,237,0.12);
|
||||
}
|
||||
|
||||
.pc-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 90% 0%, rgba(124,58,237,0.2) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 60% at 0% 100%, rgba(99,102,241,0.1) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pc-grid-pattern {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pc-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.pc-brand {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
color: #a5b4fc;
|
||||
}
|
||||
.pc-share-icon { color: #a5b4fc; flex-shrink: 0; }
|
||||
|
||||
.pc-hero {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.pc-num {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: -1.5px;
|
||||
color: #fff;
|
||||
}
|
||||
.pc-label {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #a5b4fc;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.pc-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.pc-stat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.pc-stat:last-child { border-right: none; padding-right: 0; padding-left: 12px; }
|
||||
.pc-stat:not(:first-child):not(:last-child) { padding-left: 12px; }
|
||||
.pc-stat-num {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1;
|
||||
}
|
||||
.pc-stat-label {
|
||||
font-size: 9px;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.pc-bar-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.pc-bar {
|
||||
display: flex;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
gap: 2px;
|
||||
}
|
||||
.pc-seg { border-radius: 2px; min-width: 3px; }
|
||||
.pc-bar-labels {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.pc-bar-label {
|
||||
font-size: 9px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.pc-cta {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #a5b4fc;
|
||||
letter-spacing: 0.04em;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
</style>
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<!-- Trip badge — top-right of card, outside photo -->
|
||||
<span class="trip-badge trip-badge--{entry.tripType}">
|
||||
{entry.tripType === 'solo' ? 'Solo' : 'Friends'}
|
||||
{entry.tripType === 'solo' ? 'Solo' : entry.tripType === 'family' ? 'Family' : 'Friends'}
|
||||
</span>
|
||||
|
||||
<!-- Photos -->
|
||||
@@ -99,7 +99,7 @@
|
||||
|
||||
<!-- Info bar -->
|
||||
<div class="card-info">
|
||||
<span class="city">{entry.location.city}</span>
|
||||
<span class="city">{entry.location.cities.join(', ')}</span>
|
||||
<div class="meta">
|
||||
{#if entry.transport}
|
||||
<span class="transport-chip transport-chip--{entry.transport}">
|
||||
@@ -206,6 +206,7 @@
|
||||
}
|
||||
.trip-badge--solo { background: rgba(245,158,11,0.85); color: #fff; }
|
||||
.trip-badge--friends { background: rgba(124,58,237,0.85); color: #fff; }
|
||||
.trip-badge--family { background: rgba(16,185,129,0.85); color: #fff; }
|
||||
|
||||
/* ── Photo grid — fixed height, always consistent ── */
|
||||
.photo-grid {
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<script>
|
||||
import { get } from 'svelte/store';
|
||||
import { journals } from '../stores/journalStore.js';
|
||||
import { getEntries } from '../stores/entriesStore.svelte.js';
|
||||
import TimelineToolbar from './TimelineToolbar.svelte';
|
||||
import TimelineCard from './TimelineCard.svelte';
|
||||
import JournalDetail from './JournalDetail.svelte';
|
||||
import EditForm from './EditForm.svelte';
|
||||
import NewEntryForm from './NewEntryForm.svelte';
|
||||
import ShareCard from './ShareCard.svelte';
|
||||
import SharePreview from './SharePreview.svelte';
|
||||
|
||||
let { onDetailChange = () => {}, pendingCountry = '', onNewEntryClear = () => {} } = $props();
|
||||
let selectedId = $state(/** @type {string|null} */(null));
|
||||
@@ -24,11 +25,7 @@
|
||||
});
|
||||
let selected = $derived(selectedId ? (entries.find(e => e.id === selectedId) ?? null) : null);
|
||||
|
||||
let entries = $state(get(journals));
|
||||
$effect(() => {
|
||||
const unsub = journals.subscribe((v) => { entries = v; });
|
||||
return unsub;
|
||||
});
|
||||
let entries = $derived(getEntries());
|
||||
|
||||
let sortKey = $state('date-desc');
|
||||
|
||||
@@ -53,7 +50,7 @@
|
||||
|
||||
{#if view === 'new'}
|
||||
<div class="detail-scroll">
|
||||
<EditForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} />
|
||||
<NewEntryForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} />
|
||||
</div>
|
||||
{:else if view === 'edit' && selected}
|
||||
<div class="detail-scroll">
|
||||
@@ -69,34 +66,25 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="right-panel">
|
||||
<div class="right-inner">
|
||||
<div class="center-col">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">My Journey</h1>
|
||||
<button class="new-btn" onclick={() => { view = 'new'; }}>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
|
||||
<path d="M12 5v14M5 12h14"/>
|
||||
</svg>
|
||||
New entry
|
||||
Add trip
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
|
||||
|
||||
{#if sortedEntries.length > 0}
|
||||
<button class="share-nudge" onclick={() => (showShare = true)}>
|
||||
<span class="nudge-left">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
|
||||
<path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
|
||||
</svg>
|
||||
Share your journey
|
||||
</span>
|
||||
<span class="nudge-right">
|
||||
{sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'} · save as PNG →
|
||||
</span>
|
||||
</button>
|
||||
<div class="share-row">
|
||||
<SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
|
||||
|
||||
{#if sortedEntries.length === 0}
|
||||
<p class="empty">No journal entries yet.</p>
|
||||
{:else}
|
||||
@@ -122,7 +110,7 @@
|
||||
{/if}
|
||||
|
||||
<footer class="page-footer">
|
||||
{sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
|
||||
{sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,16 +132,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Left panel ── */
|
||||
.left-panel {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--bg-raised);
|
||||
padding: 40px 28px;
|
||||
}
|
||||
|
||||
/* ── Right panel ── */
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
@@ -162,24 +140,23 @@
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* Inner container with max-width + generous side padding */
|
||||
.right-inner {
|
||||
max-width: 640px;
|
||||
/* ── Centered single column ── */
|
||||
.center-col {
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 40px 48px 80px;
|
||||
padding: 48px 48px 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── Responsive: narrow viewport ── */
|
||||
@media (max-width: 700px) {
|
||||
.journal-page { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
|
||||
.left-panel {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 24px 20px;
|
||||
.share-row {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.center-col {
|
||||
padding: 32px 24px 60px;
|
||||
}
|
||||
.right-panel { overflow-y: unset; }
|
||||
.right-inner { padding: 24px 20px 60px; }
|
||||
}
|
||||
|
||||
/* ── Detail view ── */
|
||||
|
||||
@@ -1,46 +1,18 @@
|
||||
<script>
|
||||
import { CONTINENTS, getContinent, continentTotals } from './continents.js';
|
||||
import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
|
||||
import worldData from 'world-atlas/countries-50m.json';
|
||||
import { getSelected } from '../layout/selection.svelte.js';
|
||||
|
||||
let collapsed = $state(false);
|
||||
let hoveredSeg = $state(null);
|
||||
|
||||
const continentColors = {
|
||||
'Europe': '#3b82f6',
|
||||
'Asia': '#ef4444',
|
||||
'Africa': '#f97316',
|
||||
'N. America': '#22c55e',
|
||||
'S. America': '#eab308',
|
||||
'Oceania': '#a855f7'
|
||||
'Europe': '#6366f1',
|
||||
'Asia': '#f43f5e',
|
||||
'Africa': '#fb923c',
|
||||
'N. America': '#06b6d4',
|
||||
'S. America': '#f59e0b',
|
||||
'Oceania': '#8b5cf6'
|
||||
};
|
||||
|
||||
const countryNameById = $derived.by(() => {
|
||||
const map = { XK: 'Kosovo' };
|
||||
for (const g of worldData.objects.countries.geometries) {
|
||||
map[g.id] = g.properties?.name || g.id;
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
let visitedCountries = $derived(
|
||||
[...getSelected()].map(id => countryNameById[id]).filter(Boolean).sort()
|
||||
);
|
||||
|
||||
let visitedByContinent = $derived.by(() => {
|
||||
const map = {};
|
||||
for (const id of getSelected()) {
|
||||
const cont = getContinent(id);
|
||||
if (cont) {
|
||||
if (!map[cont]) map[cont] = [];
|
||||
map[cont].push(countryNameById[id] || id);
|
||||
}
|
||||
}
|
||||
for (const cont of Object.keys(map)) {
|
||||
map[cont].sort();
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
let counts = $derived.by(() => {
|
||||
const c = {};
|
||||
for (const cont of CONTINENTS) c[cont] = 0;
|
||||
@@ -64,11 +36,9 @@
|
||||
if (angle > 0) {
|
||||
const startDeg = deg;
|
||||
const endDeg = deg + angle;
|
||||
const midDeg = (startDeg + endDeg) / 2;
|
||||
const rad = (midDeg - 90) * Math.PI / 180;
|
||||
const sr = (startDeg - 90) * Math.PI / 180;
|
||||
const er = (endDeg - 90) * Math.PI / 180;
|
||||
const cx = 90, cy = 90, outerR = 65, innerR = 30;
|
||||
const cx = 50, cy = 50, outerR = 44, innerR = 22;
|
||||
const x1 = cx + outerR * Math.cos(sr);
|
||||
const y1 = cy + outerR * Math.sin(sr);
|
||||
const x2 = cx + outerR * Math.cos(er);
|
||||
@@ -79,9 +49,7 @@
|
||||
const y4 = cy + innerR * Math.sin(sr);
|
||||
const largeArc = angle > 180 ? 1 : 0;
|
||||
const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
|
||||
const lx = cx + 82 * Math.cos(rad);
|
||||
const ly = cy + 82 * Math.sin(rad);
|
||||
segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
|
||||
segs.push({ cont, color: continentColors[cont], path, angle });
|
||||
deg += angle;
|
||||
}
|
||||
}
|
||||
@@ -89,292 +57,199 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="panel" class:collapsed>
|
||||
<button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
|
||||
{collapsed ? '◀' : '▶'}
|
||||
</button>
|
||||
<div class="card">
|
||||
<!-- count -->
|
||||
<div class="stat-block">
|
||||
<span class="big-num">{total}</span>
|
||||
<span class="stat-sub">countries visited</span>
|
||||
</div>
|
||||
|
||||
{#if !collapsed}
|
||||
<div class="panel-content">
|
||||
<h2 class="headline">your statistics</h2>
|
||||
<div class="vdivider"></div>
|
||||
|
||||
<span class="bar-label">visited countries</span>
|
||||
<div class="total-bar-wrap">
|
||||
<div class="total-bar-bg">
|
||||
<div class="total-bar-fill" style="width: {pct}%"></div>
|
||||
<!-- world % -->
|
||||
<div class="stat-block">
|
||||
<span class="big-num accent">{pct}%</span>
|
||||
<span class="stat-sub">of the world</span>
|
||||
</div>
|
||||
|
||||
<div class="vdivider"></div>
|
||||
|
||||
<!-- donut -->
|
||||
<div class="donut-block">
|
||||
<svg viewBox="0 0 100 100" class="donut-svg">
|
||||
{#if segments.length > 0}
|
||||
{#each segments as seg}
|
||||
<g class="seg-group"
|
||||
onmouseenter={() => hoveredSeg = seg}
|
||||
onmouseleave={() => hoveredSeg = null}>
|
||||
<path d={seg.path} fill={seg.color} />
|
||||
</g>
|
||||
{/each}
|
||||
<circle cx="50" cy="50" r="22" fill="#fff" />
|
||||
{:else}
|
||||
<circle cx="50" cy="50" r="44" fill="#f1f5f9" />
|
||||
<circle cx="50" cy="50" r="22" fill="#fff" />
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
<div class="donut-info">
|
||||
<span class="section-label">by continent</span>
|
||||
{#if hoveredSeg}
|
||||
<div class="tooltip" style="--dot:{hoveredSeg.color}">
|
||||
<span class="tt-name">{hoveredSeg.cont}</span>
|
||||
<span class="tt-val">{counts[hoveredSeg.cont]} / {continentTotals[hoveredSeg.cont]}</span>
|
||||
</div>
|
||||
<span class="total-bar-text">{total} / {grandTotal}</span>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<span class="bar-label">by continent</span>
|
||||
{#each CONTINENTS as continent}
|
||||
{@const contTotal = continentTotals[continent]}
|
||||
<div class="row tooltip-wrap">
|
||||
<span class="dot" style="background: {continentColors[continent]}"></span>
|
||||
<span class="label">{continent}</span>
|
||||
<span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
|
||||
{#if visitedByContinent[continent]?.length > 0}
|
||||
<div class="tooltip-list">
|
||||
{#each visitedByContinent[continent].slice(0, 10) as country}
|
||||
<span class="tooltip-item">{country}</span>
|
||||
{/each}
|
||||
{#if visitedByContinent[continent].length > 10}
|
||||
<span class="tooltip-item tooltip-more">...</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="donut-wrap">
|
||||
{#if segments.length > 0}
|
||||
<svg viewBox="0 0 180 180" class="donut-svg">
|
||||
{#each segments as seg}
|
||||
<g class="seg-group">
|
||||
<path d={seg.path} fill={seg.color} />
|
||||
<text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
|
||||
</g>
|
||||
{/each}
|
||||
<circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg viewBox="0 0 180 180" class="donut-svg">
|
||||
<circle cx="90" cy="90" r="65" fill="var(--border)" />
|
||||
<circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
|
||||
{:else}
|
||||
<span class="hint">hover a slice</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="vdivider"></div>
|
||||
|
||||
<!-- progress bar -->
|
||||
<div class="bar-block">
|
||||
<span class="section-label" style="margin-bottom:6px">world coverage</span>
|
||||
<div class="bar-bg">
|
||||
<div class="bar-fill" style="width:{pct}%"></div>
|
||||
</div>
|
||||
<span class="disclaimer">All UN countries · Kosovo · HK · Taiwan</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
flex: 0 0 min(360px, 25vw);
|
||||
background: var(--bg-raised);
|
||||
border-left: 1px solid var(--border);
|
||||
.card {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 0 4px;
|
||||
height: 110px;
|
||||
z-index: 10;
|
||||
font-family: var(--sans);
|
||||
transition: flex-basis 0.25s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.panel.collapsed {
|
||||
flex: 0 0 28px;
|
||||
border-left: none;
|
||||
.stat-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 24px 28px;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
background: var(--accent-bg);
|
||||
border: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
padding: 14px 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
.big-num {
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -2px;
|
||||
color: var(--text-h);
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
transition: background 0.15s ease, padding 0.15s ease;
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.big-num.accent { color: var(--accent); }
|
||||
|
||||
.collapse-btn:hover {
|
||||
background: var(--lavender-bg);
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.collapse-btn::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute;
|
||||
right: calc(100% + 8px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--text-h);
|
||||
color: var(--bg-raised);
|
||||
font-family: var(--sans);
|
||||
.stat-sub {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.collapse-btn:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-family: var(--heading);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--accent);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-family: var(--sans);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-sub);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.total-bar-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.total-bar-bg {
|
||||
flex: 1;
|
||||
height: 18px;
|
||||
background: var(--accent-bg);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.total-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
|
||||
border-radius: 10px;
|
||||
transition: width 0.3s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.total-bar-text {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
.vdivider {
|
||||
width: 1px;
|
||||
height: 56px;
|
||||
background: var(--border);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 300;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: 400;
|
||||
color: var(--text-sub);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.donut-wrap {
|
||||
/* donut */
|
||||
.donut-block {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.donut-svg {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.seg-group { cursor: pointer; }
|
||||
.seg-group:hover path { opacity: 0.8; }
|
||||
|
||||
.donut-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.donut-label {
|
||||
fill: var(--text-h);
|
||||
font-family: var(--sans);
|
||||
font-weight: 300;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
.tooltip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.seg-group:hover .donut-label {
|
||||
opacity: 1;
|
||||
.tooltip::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--dot);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tt-name { font-weight: 400; color: var(--text-h); }
|
||||
.tt-val { font-weight: 300; color: var(--text-sub); }
|
||||
|
||||
.tooltip-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
background: var(--text-h);
|
||||
color: var(--bg-raised);
|
||||
font-family: var(--sans);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 20;
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.tooltip-wrap:hover .tooltip-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tooltip-item {
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.tooltip-item + .tooltip-item {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-size: var(--text-xs);
|
||||
.section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-sub);
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-sub);
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* bar */
|
||||
.bar-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 28px;
|
||||
gap: 0;
|
||||
min-width: 160px;
|
||||
}
|
||||
.bar-bg {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: var(--bg-subtle);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent), #a78bfa);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
.disclaimer {
|
||||
font-size: 11px;
|
||||
color: var(--text-sub);
|
||||
opacity: 0.5;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user