Skip to content

Commit

Permalink
Added Datahub Search and record view
Browse files Browse the repository at this point in the history
  • Loading branch information
ronitjadhav committed Dec 18, 2024
1 parent 91e4058 commit b6bed57
Showing 2 changed files with 210 additions and 83 deletions.
155 changes: 100 additions & 55 deletions apps/geoadmin-demo/src/index.html
Original file line number Diff line number Diff line change
@@ -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>
138 changes: 110 additions & 28 deletions apps/geoadmin-demo/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,45 +1,127 @@
/* 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 {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
transition: background-color 0.2s ease, transform 0.1s ease;
}

#results li div {
flex: 1;
margin-right: 15px;
}

#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;
}

.open-btn {
background-color: #0f4395;
color: white;
border: none;
padding: 5px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s ease, transform 0.1s ease;
}

gn-record-view {
.open-btn:hover {
background-color: #0e3d84;
transform: translateY(-2px);
}

#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; /* Stick to the container */
top: 0; /* Stick to the top inside the container */
margin-left: auto; /* Push the button to the right */
margin-right: 8px; /* Add some spacing from the right edge */
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; /* Ensures the button remains above the scrollable content */
}

.close-btn:hover {
background: #d32f2f;
}

0 comments on commit b6bed57

Please sign in to comment.