mirror of
https://github.com/simonw/datasette.git
synced 2026-06-05 00:26:57 +02:00
fd016f7986On mobile widths the column actions were no longer available. This adds a new modal to help with that. https://gisthost.github.io/?ec60eb27e22cf5d96642eec1715586b6
234 lines
11 KiB
HTML
234 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ database }}: {{ table }}: {% if count or count == 0 %}{{ "{:,}".format(count) }} row{% if count == 1 %}{% else %}s{% endif %}{% endif %}{% if human_description_en %} {{ human_description_en }}{% endif %}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
{{- super() -}}
|
|
<script src="{{ urls.static('column-chooser.js') }}" defer></script>
|
|
<script src="{{ urls.static('table.js') }}" defer></script>
|
|
<script src="{{ urls.static('mobile-column-actions.js') }}" defer></script>
|
|
<script>DATASETTE_ALLOW_FACET = {{ datasette_allow_facet }};</script>
|
|
<style>
|
|
@media only screen and (max-width: 576px) {
|
|
{% for column in display_columns -%}
|
|
.rows-and-columns td:nth-of-type({{ loop.index }}):before { content: "{{ column.name|escape_css_string }}"; }
|
|
{% endfor %}}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body_class %}table db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}
|
|
|
|
{% block crumbs %}
|
|
{{ crumbs.nav(request=request, database=database, table=table) }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-header" style="border-color: #{{ database_color }}">
|
|
<h1>{{ metadata.get("title") or table }}{% if is_view %} (view){% endif %}{% if private %} 🔒{% endif %}</h1>
|
|
</div>
|
|
{% set action_links, action_title = actions(), "View actions" if is_view else "Table actions" %}
|
|
{% include "_action_menu.html" %}
|
|
|
|
{{ top_table() }}
|
|
|
|
{% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}
|
|
|
|
{% if metadata.get("columns") %}
|
|
<dl class="column-descriptions">
|
|
{% for column_name, column_description in metadata.columns.items() %}
|
|
<dt>{{ column_name }}</dt><dd>{{ column_description }}</dd>
|
|
{% endfor %}
|
|
</dl>
|
|
{% endif %}
|
|
|
|
{% if count or human_description_en %}
|
|
<h3>
|
|
{% if count == count_limit + 1 %}>{{ "{:,}".format(count_limit) }} rows
|
|
{% if allow_execute_sql and query.sql %} <a class="count-sql" style="font-size: 0.8em;" href="{{ urls.database_query(database, count_sql) }}">count all</a>{% endif %}
|
|
{% elif count or count == 0 %}{{ "{:,}".format(count) }} row{% if count == 1 %}{% else %}s{% endif %}{% endif %}
|
|
{% if human_description_en %}{{ human_description_en }}{% endif %}
|
|
</h3>
|
|
{% endif %}
|
|
|
|
<form class="core" class="filters" action="{{ urls.table(database, table) }}" method="get">
|
|
{% if supports_search %}
|
|
<div class="search-row"><label for="_search">Search:</label><input id="_search" type="search" name="_search" value="{{ search }}"></div>
|
|
{% endif %}
|
|
{% for column, lookup, value in filters.selections() %}
|
|
<div class="filter-row">
|
|
<div class="select-wrapper">
|
|
<select name="_filter_column_{{ loop.index }}">
|
|
<option value="">- remove filter -</option>
|
|
{% for c in filter_columns %}
|
|
<option{% if c == column %} selected{% endif %}>{{ c }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div><div class="select-wrapper filter-op">
|
|
<select name="_filter_op_{{ loop.index }}">
|
|
{% for key, display, no_argument in filters.lookups() %}
|
|
<option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div><input type="text" name="_filter_value_{{ loop.index }}" class="filter-value" value="{{ value }}">
|
|
</div>
|
|
{% endfor %}
|
|
<div class="filter-row">
|
|
<div class="select-wrapper">
|
|
<select name="_filter_column">
|
|
<option value="">- column -</option>
|
|
{% for column in filter_columns %}
|
|
<option>{{ column }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div><div class="select-wrapper filter-op">
|
|
<select name="_filter_op">
|
|
{% for key, display, no_argument in filters.lookups() %}
|
|
<option value="{{ key }}{% if no_argument %}__1{% endif %}">{{ display }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div><input type="text" name="_filter_value" class="filter-value">
|
|
</div>
|
|
<div class="filter-row">
|
|
{% if is_sortable %}
|
|
<div class="select-wrapper small-screen-only">
|
|
<select name="_sort" id="sort_by">
|
|
<option value="">Sort...</option>
|
|
{% for column in display_columns %}
|
|
{% if column.sortable %}
|
|
<option value="{{ column.name }}"{% if column.name == sort or column.name == sort_desc %} selected{% endif %}>Sort by {{ column.name }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<label class="sort_by_desc small-screen-only"><input type="checkbox" name="_sort_by_desc"{% if sort_desc %} checked{% endif %}> descending</label>
|
|
{% endif %}
|
|
{% for key, value in form_hidden_args %}
|
|
<input type="hidden" name="{{ key }}" value="{{ value }}">
|
|
{% endfor %}
|
|
<input type="submit" value="Apply">
|
|
</div>
|
|
</form>
|
|
|
|
{% if extra_wheres_for_ui %}
|
|
<div class="extra-wheres">
|
|
<h3>{{ extra_wheres_for_ui|length }} extra where clause{% if extra_wheres_for_ui|length != 1 %}s{% endif %}</h3>
|
|
<ul>
|
|
{% for extra_where in extra_wheres_for_ui %}
|
|
<li><code>{{ extra_where.text }}</code> [<a href="{{ extra_where.remove_url }}">remove</a>]</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if query.sql and allow_execute_sql %}
|
|
<p><a class="not-underlined" title="{{ query.sql }}" href="{{ urls.database(database) }}?{{ {'sql': query.sql}|urlencode|safe }}{% if query.params %}&{{ query.params|urlencode|safe }}{% endif %}">✎ <span class="underlined">View and edit SQL</span></a></p>
|
|
{% endif %}
|
|
|
|
<p class="export-links">This data as {% for name, url in renderers.items() %}<a href="{{ url }}">{{ name }}</a>{{ ", " if not loop.last }}{% endfor %}{% if display_rows %}, <a href="{{ url_csv }}">CSV</a> (<a href="#export">advanced</a>){% endif %}</p>
|
|
|
|
{% if suggested_facets %}
|
|
{% include "_suggested_facets.html" %}
|
|
{% endif %}
|
|
|
|
{% if facets_timed_out %}
|
|
<p class="facets-timed-out">These facets timed out: {{ ", ".join(facets_timed_out) }}</p>
|
|
{% endif %}
|
|
|
|
{% if facet_results %}
|
|
{% include "_facet_results.html" %}
|
|
{% endif %}
|
|
|
|
{% if all_columns %}
|
|
<column-chooser></column-chooser>
|
|
<button class="choose-columns-mobile small-screen-only" onclick="openColumnChooser()">Choose columns</button>
|
|
{% if display_rows %}
|
|
<button type="button" class="column-actions-mobile small-screen-only">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
<span>Column actions</span>
|
|
</button>
|
|
{% endif %}
|
|
<script>
|
|
window._columnChooserData = {{ {"allColumns": all_columns, "selectedColumns": display_columns|map(attribute='name')|list, "primaryKeys": primary_keys}|tojson }};
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% include custom_table_templates %}
|
|
|
|
{% if next_url %}
|
|
<p><a href="{{ next_url }}">Next page</a></p>
|
|
{% endif %}
|
|
|
|
{% if display_rows %}
|
|
<div id="export" class="advanced-export">
|
|
<h3>Advanced export</h3>
|
|
<p>JSON shape:
|
|
<a href="{{ renderers['json'] }}">default</a>,
|
|
<a href="{{ append_querystring(renderers['json'], '_shape=array') }}">array</a>,
|
|
<a href="{{ append_querystring(renderers['json'], '_shape=array&_nl=on') }}">newline-delimited</a>{% if primary_keys %},
|
|
<a href="{{ append_querystring(renderers['json'], '_shape=object') }}">object</a>
|
|
{% endif %}
|
|
</p>
|
|
<form class="core" action="{{ url_csv_path }}" method="get">
|
|
<p>
|
|
CSV options:
|
|
<label><input type="checkbox" name="_dl"> download file</label>
|
|
{% if expandable_columns %}<label><input type="checkbox" name="_labels" checked> expand labels</label>{% endif %}
|
|
{% if next_url and settings.allow_csv_stream %}<label><input type="checkbox" name="_stream"> stream all rows</label>{% endif %}
|
|
<input type="submit" value="Export CSV">
|
|
{% for key, value in url_csv_hidden_args %}
|
|
<input type="hidden" name="{{ key }}" value="{{ value }}">
|
|
{% endfor %}
|
|
</p>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if table_definition %}
|
|
<pre class="wrapped-sql">{{ table_definition }}</pre>
|
|
{% endif %}
|
|
|
|
{% if view_definition %}
|
|
<pre class="wrapped-sql">{{ view_definition }}</pre>
|
|
{% endif %}
|
|
|
|
{% if allow_execute_sql and query.sql %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const countLink = document.querySelector('a.count-sql');
|
|
if (countLink) {
|
|
countLink.addEventListener('click', async function(ev) {
|
|
ev.preventDefault();
|
|
// Replace countLink with span with same style attribute
|
|
const span = document.createElement('span');
|
|
span.textContent = 'counting...';
|
|
span.setAttribute('style', countLink.getAttribute('style'));
|
|
countLink.replaceWith(span);
|
|
countLink.setAttribute('disabled', 'disabled');
|
|
let url = countLink.href.replace(/(\?|$)/, '.json$1');
|
|
try {
|
|
const response = await fetch(url);
|
|
console.log({response});
|
|
const data = await response.json();
|
|
console.log({data});
|
|
if (!response.ok) {
|
|
console.log('throw error');
|
|
throw new Error(data.title || data.error);
|
|
}
|
|
const count = data['rows'][0]['count(*)'];
|
|
const formattedCount = count.toLocaleString();
|
|
span.closest('h3').textContent = formattedCount + ' rows';
|
|
} catch (error) {
|
|
console.log('Update', span, 'with error message', error);
|
|
span.textContent = error.message;
|
|
span.style.color = 'red';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|