etiquette/frontends/etiquette_flask/templates/user.html

143 lines
4.4 KiB
HTML

<!DOCTYPE html5>
<html>
<head>
{% import "album_card.html" as album_card %}
{% import "bookmark_card.html" as bookmark_card %}
{% import "photo_card.html" as photo_card %}
{% import "tag_card.html" as tag_card %}
{% import "header.html" as header %}
<title class="dynamic_user_display_name">{{user.display_name}}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.css">
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/editor.js"></script>
<script src="/static/js/spinner.js"></script>
<style>
h2, h3
{
margin-top: 0;
}
#content_body
{
grid-row-gap: 8px;
grid-auto-rows: max-content;
}
</style>
</head>
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="hierarchy_self" class="panel">
<h2 id="display_name">{{user.display_name}}</h2>
<p>ID: <a href="/userid/{{user.id}}">{{user.id}}</a></p>
<p>User since <span title="{{user.created|int|timestamp_to_8601}}">{{user.created|timestamp_to_naturaldate}}.</span></p>
</div>
{% set photos = user.get_photos(direction='desc')|islice(0, 15)|list %}
{% if photos %}
<div id="hierarchy_photos" class="panel">
<h3><a href="/search?author={{user.username}}">Photos by <span class="dynamic_user_display_name">{{user.display_name}}</span></a></h3>
{% for photo in photos %}
{{photo_card.create_photo_card(photo)}}
{% endfor %}
</div>
{% endif %}
{% set tags = user.get_tags(direction='desc')|islice(0, 100)|list %}
{% if tags %}
<div id="hierarchy_tags" class="panel">
<h3>Tags by <span class="dynamic_user_display_name">{{user.display_name}}</span></h3>
{% for tag in tags %}
{{tag_card.create_tag_card(tag, with_alt_description=True)}}
{% endfor %}
</div>
{% endif %}
{% set albums = user.get_albums()|islice(0, 20)|list %}
{% if albums %}
<div id="hierarchy_albums" class="panel">
<h3>Albums by <span class="dynamic_user_display_name">{{user.display_name}}</span></h3>
{% for album in albums %}
{{album_card.create_album_card(album)}}
{% endfor %}
</div>
{% endif %}
{% set bookmarks = user.get_bookmarks()|islice(0, 50)|list %}
{% if bookmarks %}
<div id="hierarchy_bookmarks" class="panel">
<h3>Bookmarks by <span class="dynamic_user_display_name">{{user.display_name}}</span></h3>
{% for bookmark in bookmarks %}
{{bookmark_card.create_bookmark_card(bookmark)}}
{% endfor %}
</div>
{% endif %}
</div>
</body>
<script type="text/javascript">
{% if user.id == session.user.id %}
const USERNAME = "{{user.username}}";
profile_ed_on_open = undefined;
function profile_ed_on_save(ed)
{
function callback(response)
{
ed.hide_spinner();
if (! response.meta.json_ok)
{
alert(JSON.stringify(response));
return;
}
if ("error_type" in response.data)
{
ed.show_error(response.data.error_message);
return;
}
// The data that comes back from the server will have been normalized.
const new_display_name = response.data.display_name;
common.update_dynamic_elements("dynamic_user_display_name", new_display_name);
ed.elements["display_name"].edit.value = new_display_name;
ed.save();
}
ed.show_spinner();
api.users.edit(USERNAME, ed.elements["display_name"].edit.value, callback);
}
profile_ed_on_cancel = undefined;
const profile_ed_elements = [
{
"id": "display_name",
"element": document.getElementById("display_name"),
"placeholder": "Display name",
"empty_text": USERNAME,
"autofocus": true,
},
];
const profile_ed = new editor.Editor(
profile_ed_elements,
profile_ed_on_open,
profile_ed_on_save,
profile_ed_on_cancel,
);
{% endif %}
</script>
</html>