Skip to content

Commit

Permalink
wire up new pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmaelicke
mmaelicke committed Jan 17, 2025
1 parent 4318178 commit 4304a4f
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 43 deletions.
1 change: 0 additions & 1 deletion metacatalog_api/apps/explorer/templates/add_entry.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{% set standalone = request.query_params.get('standalone') == 'true' %}

<div id="form" x-data="formContext()">
<div x-data="{open: true}">
<div class="flex justify-between items-center p-4 bg-gray-100 border-b border-gray-300 cursor-pointer" @click="open = !open">
Expand Down
64 changes: 50 additions & 14 deletions metacatalog_api/apps/explorer/templates/entry.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,54 @@
{% set menu_style = request.query_params.get('default') %}
{% set menu_style = request.query_params.get('menu', 'default') %}
{% if menu_style == 'default' %}
<nav class="bg-gray-200">
<div class="mx-auto px-1">
<div class="flex h-16 item-center justify-between">
<div class="flex items-center">
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<nav class="border-b border-gray-200">
<div class="mx-auto px-2">
<div class="flex h-12 items-center justify-between">

<div class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800 hover:cursor-pointer">
<a class="inline-flex items-center" hx-get="{{ path }}entries.html" hx-target="#main-content" hx-swap="innerHTML" hx-include="#search">
<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
back
</a>
</div>

<div class="relative" x-data="{ open: false }">
<button
@click="open = !open"
@click.outside="open = false"
class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800"
>
Export Metadata
<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>

<div
x-show="open"
x-transition
class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
>
<div class="py-1">
<a
href="{{ root_path }}entries/{{ entry.id }}.json"
target="_blank"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
View JSON
</a>
<a
class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 cursor-pointer bg-white"
hx-get="{{ path }}entries.html" hx-target="#main-content" hx-swap="innerHTML" hx-include="#search"
>back to metadata List</a>
<a
class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 cursor-pointer bg-white"
href="{{ path }}entries/{{ entry.id }}.xml" target="_blank"
>XML</a>
href="{{ path }}entries/{{ entry.id }}.xml"
target="_blank"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
Metacatalog XML
</a>
</div>
</div>
</div>

</div>
</div>
</nav>
Expand Down Expand Up @@ -113,6 +145,7 @@ <h4 class="mt-6 text-base font-semibold leading-7 text-gray-900">Groups</h4>
{{ group.title }}
</dd>
</div>
{% endfor %}
</dl>
</div>
{% endif %}
Expand Down Expand Up @@ -220,4 +253,7 @@ <h4 class="mt-6 text-base font-semibold leading-7 text-gray-900">Details</h4>
{% set embedded = request.query_params.get('embedded') == 'true' %}
{% if not embedded %}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
{% endif %}
63 changes: 35 additions & 28 deletions metacatalog_api/apps/explorer/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metacatalog API</title>
<script src="{{ path }}static/metacatalog.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple-icons/siimple-icons.css" />
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/stemmer/lib/Snowball.min.js"></script>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.draw.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.draw.min.css" rel="stylesheet">

<style>
[x-cloak] { display: none !important; }
</style>
</head>
<body class="h-full">
<div class="min-h-full">
Expand All @@ -20,42 +30,39 @@
<div class="flex items-center">

<div class="flex-shrink-0 items-center justify-center">
<a href="{{ path }}" class="text-gray-100 hover:text-white font-semibold text-lg">Metacatalog API</a>
<a href="{{ root_path }}" class="text-gray-100 hover:text-white font-semibold text-lg">Metacatalog API</a>
</div>

<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a
class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-white cursor-pointer"
hx-get="{{ path }}page/entries.html"
hx-target="#main-page"
hx-swap="innerHTML"
>Metadata List</a>
</div>
</div>

<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-white cursor-pointer" hx-get="{{ path }}entries.html" hx-target="#main-content" hx-swap="innerHTML">Metadata List</a>
<a
class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-white cursor-pointer"
hx-get="{{ path }}page/create_metadata.html"
hx-target="#main-page"
hx-swap="innerHTML"
>New</a>
</div>
</div>
</div>
</div>
</div>
</nav>

<main>
<div id="map-content" class="mx-auto" hx-trigger="load" hx-get="{{ path }}locations.html" hx-swap="innerHTML">
</div>
<div id="action-area" class="mt-1 w-full content-center">
<form
class="w-fit mx-auto"
hx-get="{{ path }}entries.html"
hx-trigger="submit, input from:#search delay:800ms"
hx-target="#main-content"
hx-swap="innerHTML"
hx-on::after-request="updateEntryLayer(document.getElementById('search').value)"
>
<input
type="text" name="search" id="search" placeholder="Search for data"
class="shadow appearance-none border rounded w-96 py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
/>

</form>
</div>
<div id="main-content" class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold tracking-tight text-gray-900">Welcome to Metacatalog API.</h1>

</div>
<main id="main-page">

<h1 class="text-3xl font-bold tracking-tight text-gray-900">Welcome to Metacatalog API.</h1>

</main>

</div>
Expand Down

0 comments on commit 4304a4f

Please sign in to comment.