use Svelte (HTML) style comments, // shows up on screen

[nominatim-ui.git] / src / App.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 839c1356431b6f717c9fcd5ad445076b124edae7..54cad5ddad2e59a75151ae5da1a59310b9d2af68 100644 (file)
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,37 @@
 <script>
-  import * as jquery from 'jquery';
-  import '../node_modules/bootstrap/dist/css/bootstrap.css';
-  import '../node_modules/bootstrap/dist/js/bootstrap.bundle.js';
+  import 'bootstrap/dist/css/bootstrap.css';
+  import 'bootstrap/dist/js/bootstrap.bundle.js';
+
+  import { page, refresh_page } from './lib/stores.js';
 
   import Header from './components/Header.svelte';
   import Footer from './components/Footer.svelte';
- </script>
+  import ReportIssueModal from './components/ReportIssueModal.svelte';
+  import SearchPage from './pages/SearchPage.svelte';
+  import ReversePage from './pages/ReversePage.svelte';
+  import DetailsPage from './pages/DetailsPage.svelte';
+  import PolygonsPage from './pages/PolygonsPage.svelte';
+  import DeletablePage from './pages/DeletablePage.svelte';
+
+  $: view = $page.tab;
+
+  refresh_page();
+</script>
+
+<!-- deal with back-button and other user action -->
+<svelte:window on:popstate={refresh_page} />
 
 <Header/>
-<div id="main" />
+{#if view === 'search'}
+<SearchPage />
+{:else if view === 'reverse'}
+<ReversePage />
+{:else if view === 'details'}
+<DetailsPage />
+{:else if view === 'deletable'}
+<DeletablePage />
+{:else if view === 'polygons'}
+<PolygonsPage />
+{/if}
 <Footer/>
+<ReportIssueModal/>