Added Datahub Search and record view

camptocamp · Dec 18, 2024 · d460d96 · d460d96
1 parent 91e4058
commit d460d96
Show file tree

Hide file tree

Showing 2 changed files with 213 additions and 83 deletions.
diff --git a/apps/geoadmin-demo/src/index.html b/apps/geoadmin-demo/src/index.html
@@ -1,58 +1,103 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Geoadmin + Geocat integration demo</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <script src="https://cdn.jsdelivr.net/gh/camptocamp/geocat-geonetwork-ui@wc-dist-geocat-gpf/gn-wc.js"></script>
-  </head>
-  <body>
-    <iframe
-      id="geoadmin-root"
-      src="https://map.geo.admin.ch/#embed?bgLayer=ch.swisstopo.pixelkarte-grau"
-    ></iframe>
-
-    <input class="search-input" type="text" />
-
-    <!-- this stays hidden but is just there for initializing the GNUI global -->
-    <gn-search-input
-      style="display: none"
-      api-url="https://www.geocat.ch/geonetwork/srv/api"
-      primary-color="#0f4395"
-      secondary-color="#8bc832"
-    ></gn-search-input>
-
-    <gn-record-view
-      api-url="https://www.geocat.ch/geonetwork/srv/api"
-      primary-color="#0f4395"
-      secondary-color="#8bc832"
-      record-id="417e9f31-d9d7-4165-9a5c-2f12b7191926"
-    ></gn-record-view>
-
-    <script>
-      // window.addEventListener(
-      //   'message',
-      //   (e) => {
-      //     if (e.origin !== 'https://map.geo.admin.ch') return
-      //     console.log(e.data) // log iframe events
-      //   },
-      //   false
-      // )
-
-      GNUI.recordsRepository
-        .search({
-          filters: {
-            any: 'wasser',
-            linkProtocol: '/OGC:WMT?S.*/',
-          },
-          offset: 0,
-          limit: 10,
-          sort: ['desc', '_score'],
-          fields: ['resourceTitleObject', 'link', 'uuid'],
-        })
-        .subscribe(console.log)
-    </script>
-  </body>
+<head>
+  <meta charset="utf-8">
+  <title>Geoadmin + Geocat Search</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/gh/camptocamp/geocat-geonetwork-ui@wc-dist-geocat-gpf/gn-wc.js"></script>
+</head>
+<body>
+<div class="map-container">
+  <div class="search-container">
+    <input type="text" id="search" placeholder="Search for record..">
+    <ul id="results"></ul>
+  </div>
+  <iframe
+    id="geoadmin-root"
+    src="https://map.geo.admin.ch/#embed?bgLayer=ch.swisstopo.pixelkarte-grau"
+  ></iframe>
+</div>
+<script>
+  const searchInput = document.getElementById('search');
+  const resultsContainer = document.getElementById('results');
+
+  searchInput.addEventListener('input', (e) => {
+    const searchTerm = e.target.value;
+
+    if (!searchTerm) {
+      resultsContainer.innerHTML = '';
+      return;
+    }
+
+    GNUI.recordsRepository
+      .search({
+        filters: {
+          any: searchTerm,
+          linkProtocol: '/OGC:WMT?S.*/',
+        },
+        offset: 0,
+        limit: 10,
+        sort: ['desc', '_score'],
+        fields: ['resourceTitleObject', 'link', 'uuid'],
+      })
+      .subscribe({
+        next: (results) => {
+          displayResults(results.records);
+        },
+        error: (err) => {
+          console.error('Error fetching search results:', err);
+        }
+      });
+  });
+
+  function displayResults(items) {
+    resultsContainer.innerHTML = items
+      .map(
+        (item) => `
+      <li>
+        <div>
+          <div class="result-title">${item.title || 'No title available'}</div>
+        </div>
+        <button class="open-btn" data-uuid="${item.uniqueIdentifier}">Open</button>
+      </li>
+    `
+      )
+      .join('');
+
+    resultsContainer.querySelectorAll('.open-btn').forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        const uuid = e.target.dataset.uuid;
+        console.log('Selected UUID:', uuid);
+
+        const existingContainer = document.querySelector('.gn-record-view-container');
+        if (existingContainer) {
+          existingContainer.remove();
+        }
+
+        const container = document.createElement('div');
+        container.classList.add('gn-record-view-container');
+
+        const closeButton = document.createElement('button');
+        closeButton.classList.add('close-btn');
+        closeButton.innerHTML = '&times;';
+        closeButton.addEventListener('click', () => {
+          container.remove();
+        });
+
+        const recordView = document.createElement('gn-record-view');
+        recordView.setAttribute('api-url', 'https://www.geocat.ch/geonetwork/srv/api');
+        recordView.setAttribute('primary-color', '#0f4395');
+        recordView.setAttribute('secondary-color', '#8bc832');
+        recordView.setAttribute('record-id', uuid);
+
+        container.appendChild(closeButton);
+        container.appendChild(recordView);
+
+        document.body.appendChild(container);
+      });
+    });
+  }
+
+</script>
+</body>
 </html>
diff --git a/apps/geoadmin-demo/src/styles.css b/apps/geoadmin-demo/src/styles.css
@@ -1,45 +1,130 @@
-/* You can add global styles to this file, and also import other style files */
-html,
-body {
+body, html {
+  margin: 0;
+  padding: 0;
   height: 100%;
+  font-family: Arial, sans-serif;
 }
-body {
-  margin: 0;
+.map-container {
   position: relative;
-}
-
-#geoadmin-root {
   width: 100%;
-  height: calc(100% - 4px);
-  border: 0;
+  height: 100vh;
 }
-
-.search-input {
+.search-container {
   position: absolute;
+  top: 60px;
   left: 20px;
-  top: 55px;
-  width: 40%;
+  width: 300px;
+  z-index: 10;
+}
+#search {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 0;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+#results {
   background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 400px;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
 }
 
-gn-results-list {
-  position: absolute;
-  left: 20px;
-  top: 125px;
-  bottom: 20px;
-  width: 40%;
-  padding: 8px;
-  background: white;
-  overflow: auto;
+#results li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  transition: background-color 0.2s;
+  gap: 10px;
+}
+
+#results li div {
+  flex: 1;
+  overflow-wrap: break-word;
 }
 
-gn-record-view {
+
+#results li:hover {
+  background-color: #f0f8ff;
+  transform: scale(1.02);
+}
+
+#results li:last-child {
+  border-bottom: none;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 5px;
+  line-height: 1.2;
+}
+
+
+.open-btn {
+  flex-shrink: 0;
+  background-color: #0f4395;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.open-btn:hover {
+  background-color: #0e3d84;
+}
+
+#geoadmin-root {
+  width: 100%;
+  height: 100vh;
+  border: none;
+}
+.gn-record-view-container {
   position: absolute;
-  right: 20px;
-  top: 125px;
-  bottom: 20px;
+  right: 55px;
+  top: 40px;
+  bottom: 40px;
   width: 40%;
-  padding: 8px;
   background: white;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
   overflow: auto;
+  z-index: 100;
+}
+
+.close-btn {
+  position: sticky;
+  top: 0;
+  margin-left: auto;
+  margin-right: 8px;
+  background: #050505;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.close-btn:hover {
+  background: #d32f2f;
 }