chore(prettier): format templates
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2024-06-16 17:11:03 -04:00
parent f37bff365f
commit 9809a09d2e
22 changed files with 1749 additions and 1120 deletions

View File

@@ -2,24 +2,27 @@
{{ define "title" }}Activity{{ end }}
{{ define "header" }}<a href="./activity">Activity</a>{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict
"Columns" (slice "Document" "Time" "Duration" "Percent")
"Keys" (slice "Document" "StartTime" "Duration" "EndPercentage")
"Rows" .Data
)}}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict
"Columns" (slice "Document" "Time" "Duration" "Percent")
"Keys" (slice "Document" "StartTime" "Duration" "EndPercentage")
"Rows" .Data
)
}}
</div>
</div>
</div>
{{ end }}
<!-- Table Cell Definition -->
{{ define "table-cell" }}
{{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a>
{{ else if eq .Name "EndPercentage" }}
{{ index (fields .Data) .Name }}%
{{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}"
>{{ .Data.Author }} - {{ .Data.Title }}</a
>
{{ else if eq .Name "EndPercentage" }}
{{ index (fields .Data) .Name }}%
{{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ end }}

View File

@@ -1,46 +1,64 @@
{{ template "base" . }}
{{ define "title" }}Admin - Import Results{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Import Results</a>{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Status</th>
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Error</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not .Data }}
<tr>
<td class="text-center p-3" colspan="4">No Results</td>
</tr>
{{ end }}
{{ range $result := .Data }}
<tr>
<td class="p-3 border-b border-gray-200 grid"
style="grid-template-columns: 4rem auto">
<span class="text-gray-800 dark:text-gray-400">Name:</span>
{{ if (eq $result.ID "") }}
<span>N/A</span>
{{ else }}
<a href="../documents/{{ $result.ID }}">{{ $result.Name }}</a>
{{ end }}
<span class="text-gray-800 dark:text-gray-400">File:</span>
<span>{{ $result.Path }}</span>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ $result.Status }}</p>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ $result.Error }}</p>
</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
{{ define "header" }}
<a class="whitespace-pre" href="../admin">Admin - Import Results</a>
{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<table
class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
>
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Document
</th>
<th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Status
</th>
<th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Error
</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not .Data }}
<tr>
<td class="text-center p-3" colspan="4">No Results</td>
</tr>
{{ end }}
{{ range $result := .Data }}
<tr>
<td
class="p-3 border-b border-gray-200 grid"
style="grid-template-columns: 4rem auto"
>
<span class="text-gray-800 dark:text-gray-400">Name:</span>
{{ if (eq $result.ID "") }}
<span>N/A</span>
{{ else }}
<a href="../documents/{{ $result.ID }}">{{ $result.Name }}</a>
{{ end }}
<span class="text-gray-800 dark:text-gray-400">File:</span>
<span>{{ $result.Path }}</span>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ $result.Status }}</p>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ $result.Error }}</p>
</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
{{ end }}

View File

@@ -1,79 +1,111 @@
{{ template "base" . }}
{{ define "title" }}Admin - Import{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Import</a>{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
{{ if .SelectedDirectory }}
<div class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<p class="text-lg font-semibold text-gray-500">Selected Import Directory</p>
<form class="flex gap-4 flex-col" action="./import" method="POST">
<input type="text"
name="directory"
value="{{ .SelectedDirectory }}"
class="hidden" />
<div class="flex justify-between gap-4 w-full">
<div class="flex gap-4 items-center">
<span>{{ template "svg/import" }}</span>
<p class="font-medium text-lg break-all">{{ .SelectedDirectory }}</p>
</div>
<div class="flex flex-col justify-around gap-2 mr-4">
<div class="inline-flex gap-2 items-center">
<input checked type="radio" id="direct" name="type" value="DIRECT" />
<label for="direct">Direct</label>
</div>
<div class="inline-flex gap-2 items-center">
<input type="radio" id="copy" name="type" value="COPY" />
<label for="copy">Copy</label>
</div>
</div>
</div>
<button type="submit"
class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2">
<span class="w-full">Import Directory</span>
</button>
</form>
</div>
{{ end }}
{{ if not .SelectedDirectory }}
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"></th>
<th class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all">{{ .CurrentPath }}</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not (eq .CurrentPath "/") }}
<tr>
<td class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"></td>
<td class="p-3 border-b border-gray-200">
<a href="./import?directory={{$.CurrentPath}}/../">
<p>../</p>
</a>
</td>
</tr>
{{ end }}
{{ if not .Data }}
<tr>
<td class="text-center p-3" colspan="2">No Folders</td>
</tr>
{{ end }}
{{ range $item := .Data }}
<tr>
<td class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400">
<a href="./import?select={{ $.CurrentPath }}/{{ $item }}">{{ template "svg/import" }}</a>
</td>
<td class="p-3 border-b border-gray-200">
<a href="./import?directory={{ $.CurrentPath }}/{{ $item }}">
<p>{{ $item }}</p>
</a>
</td>
</tr>
{{ end }}
</tbody>
</table>
{{ end }}
</div>
</div>
{{ define "header" }}
<a class="whitespace-pre" href="../admin">Admin - Import</a>
{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
{{ if .SelectedDirectory }}
<div
class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold text-gray-500">
Selected Import Directory
</p>
<form class="flex gap-4 flex-col" action="./import" method="POST">
<input
type="text"
name="directory"
value="{{ .SelectedDirectory }}"
class="hidden"
/>
<div class="flex justify-between gap-4 w-full">
<div class="flex gap-4 items-center">
<span>{{ template "svg/import" }}</span>
<p class="font-medium text-lg break-all">
{{ .SelectedDirectory }}
</p>
</div>
<div class="flex flex-col justify-around gap-2 mr-4">
<div class="inline-flex gap-2 items-center">
<input
checked
type="radio"
id="direct"
name="type"
value="DIRECT"
/>
<label for="direct">Direct</label>
</div>
<div class="inline-flex gap-2 items-center">
<input type="radio" id="copy" name="type" value="COPY" />
<label for="copy">Copy</label>
</div>
</div>
</div>
<button
type="submit"
class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
>
<span class="w-full">Import Directory</span>
</button>
</form>
</div>
{{ end }}
{{ if not .SelectedDirectory }}
<table
class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
>
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th
class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"
></th>
<th
class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all"
>
{{ .CurrentPath }}
</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not (eq .CurrentPath "/") }}
<tr>
<td
class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
></td>
<td class="p-3 border-b border-gray-200">
<a href="./import?directory={{ $.CurrentPath }}/../">
<p>../</p>
</a>
</td>
</tr>
{{ end }}
{{ if not .Data }}
<tr>
<td class="text-center p-3" colspan="2">No Folders</td>
</tr>
{{ end }}
{{ range $item := .Data }}
<tr>
<td
class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
>
<a href="./import?select={{ $.CurrentPath }}/{{ $item }}"
>{{ template "svg/import" }}</a
>
</td>
<td class="p-3 border-b border-gray-200">
<a href="./import?directory={{ $.CurrentPath }}/{{ $item }}">
<p>{{ $item }}</p>
</a>
</td>
</tr>
{{ end }}
</tbody>
</table>
{{ end }}
</div>
</div>
{{ end }}

View File

@@ -1,36 +1,47 @@
{{ template "base" . }}
{{ define "title" }}Admin - Logs{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Logs</a>{{ end }}
{{ define "content" }}
<div class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<form class="flex gap-4 flex-col lg:flex-row" action="./logs" method="GET">
<div class="flex flex-col w-full grow">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/search2" (dict "Size" 15) }}
</span>
<input type="text"
id="filter"
name="filter"
value="{{ .Filter }}"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="JQ Filter" />
</div>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Filter"
"Variant" "Secondary"
) }}
</div>
</form>
</div>
<!-- Required for iOS "Hover" Events (onclick) -->
<div onclick
class="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
style="font-family: monospace">
{{ range $log := .Data }}
<span class="whitespace-nowrap hover:whitespace-pre">{{ $log }}</span>
{{ end }}
</div>
{{ define "header" }}
<a class="whitespace-pre" href="../admin">Admin - Logs</a>
{{ end }}
{{ define "content" }}
<div
class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<form class="flex gap-4 flex-col lg:flex-row" action="./logs" method="GET">
<div class="flex flex-col w-full grow">
<div class="flex relative">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/search2" (dict "Size" 15) }}
</span>
<input
type="text"
id="filter"
name="filter"
value="{{ .Filter }}"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="JQ Filter"
/>
</div>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Filter"
"Variant" "Secondary"
)
}}
</div>
</form>
</div>
<!-- Required for iOS "Hover" Events (onclick) -->
<div
onclick
class="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
style="font-family: monospace"
>
{{ range $log := .Data }}
<span class="whitespace-nowrap hover:whitespace-pre">{{ $log }}</span>
{{ end }}
</div>
{{ end }}

View File

@@ -1,93 +1,127 @@
{{ template "base" . }}
{{ define "title" }}Admin - General{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="./admin">Admin - General</a>{{ end }}
{{ define "content" }}
<div class="w-full flex flex-col gap-4 grow">
<div class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<p class="text-lg font-semibold mb-2">Backup & Restore</p>
<div class="flex flex-col gap-4">
<form class="flex justify-between" action="./admin" method="POST">
<input type="text" name="action" value="BACKUP" class="hidden" />
<div class="flex gap-8 items-center">
<div>
<input type="checkbox" id="backup_covers" name="backup_types" value="COVERS" />
<label for="backup_covers">Covers</label>
</div>
<div>
<input type="checkbox"
id="backup_documents"
name="backup_types"
value="DOCUMENTS" />
<label for="backup_documents">Documents</label>
</div>
</div>
<div class="w-40 h-10">
{{ template "component/button" (dict
"Title" "Backup"
"Variant" "Secondary"
) }}
</div>
</form>
<form method="POST"
enctype="multipart/form-data"
action="./admin"
class="flex justify-between grow">
<input type="text" name="action" value="RESTORE" class="hidden" />
<div class="flex items-center w-1/2">
<input type="file" accept=".zip" name="restore_file" class="w-full" />
</div>
<div class="w-40 h-10">
{{ template "component/button" (dict
"Title" "Restore"
"Variant" "Secondary"
) }}
</div>
</form>
</div>
{{ if .PasswordErrorMessage }}
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
{{ else if .PasswordMessage }}
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
{{ end }}
</div>
<div class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<p class="text-lg font-semibold">Tasks</p>
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
<tbody class="text-black dark:text-white">
<tr>
<td class="pl-0">
<p>Metadata Matching</p>
</td>
<td class="py-2 float-right">
<form action="./admin" method="POST">
<input type="text" name="action" value="METADATA_MATCH" class="hidden" />
<div class="w-40 h-10 text-base">
{{ template "component/button" (dict
"Title" "Run"
"Variant" "Secondary"
) }}
</div>
</form>
</td>
</tr>
<tr>
<td>
<p>Cache Tables</p>
</td>
<td class="py-2 float-right">
<form action="./admin" method="POST">
<input type="text" name="action" value="CACHE_TABLES" class="hidden" />
<div class="w-40 h-10 text-base">
{{ template "component/button" (dict
"Title" "Run"
"Variant" "Secondary"
) }}
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ define "header" }}
<a class="whitespace-pre" href="./admin">Admin - General</a>
{{ end }}
{{ define "content" }}
<div class="w-full flex flex-col gap-4 grow">
<div
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold mb-2">Backup & Restore</p>
<div class="flex flex-col gap-4">
<form class="flex justify-between" action="./admin" method="POST">
<input type="text" name="action" value="BACKUP" class="hidden" />
<div class="flex gap-8 items-center">
<div>
<input
type="checkbox"
id="backup_covers"
name="backup_types"
value="COVERS"
/>
<label for="backup_covers">Covers</label>
</div>
<div>
<input
type="checkbox"
id="backup_documents"
name="backup_types"
value="DOCUMENTS"
/>
<label for="backup_documents">Documents</label>
</div>
</div>
<div class="w-40 h-10">
{{ template "component/button" (dict
"Title" "Backup"
"Variant" "Secondary"
)
}}
</div>
</form>
<form
method="POST"
enctype="multipart/form-data"
action="./admin"
class="flex justify-between grow"
>
<input type="text" name="action" value="RESTORE" class="hidden" />
<div class="flex items-center w-1/2">
<input
type="file"
accept=".zip"
name="restore_file"
class="w-full"
/>
</div>
<div class="w-40 h-10">
{{ template "component/button" (dict
"Title" "Restore"
"Variant" "Secondary"
)
}}
</div>
</form>
</div>
{{ if .PasswordErrorMessage }}
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
{{ else if .PasswordMessage }}
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
{{ end }}
</div>
<div
class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold">Tasks</p>
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
<tbody class="text-black dark:text-white">
<tr>
<td class="pl-0">
<p>Metadata Matching</p>
</td>
<td class="py-2 float-right">
<form action="./admin" method="POST">
<input
type="text"
name="action"
value="METADATA_MATCH"
class="hidden"
/>
<div class="w-40 h-10 text-base">
{{ template "component/button" (dict
"Title" "Run"
"Variant" "Secondary"
)
}}
</div>
</form>
</td>
</tr>
<tr>
<td>
<p>Cache Tables</p>
</td>
<td class="py-2 float-right">
<form action="./admin" method="POST">
<input
type="text"
name="action"
value="CACHE_TABLES"
class="hidden"
/>
<div class="w-40 h-10 text-base">
{{ template "component/button" (dict
"Title" "Run"
"Variant" "Secondary"
)
}}
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ end }}

View File

@@ -2,169 +2,253 @@
{{ define "title" }}Documents{{ end }}
{{ define "header" }}<a href="/documents">Documents</a>{{ end }}
{{ define "content" }}
<div class="h-full w-full relative">
<!-- Document Info -->
<div class="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4">
<div class="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative">
<label class="z-10 cursor-pointer" for="edit-cover-button">
<img class="rounded object-fill w-full"
src="/documents/{{.Data.ID}}/cover" />
</label>
{{ if .Data.Filepath }}
<a href="/reader#id={{ .Data.ID }}&type=REMOTE"
class="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Read</a>
{{ end }}
<div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative">
<div class="min-w-[50%] md:mr-2">
<div class="flex gap-1 text-sm">
<p class="text-gray-500">ISBN-10:</p>
<p class="font-medium">{{ or .Data.Isbn10 "N/A" }}</p>
</div>
<div class="flex gap-1 text-sm">
<p class="text-gray-500">ISBN-13:</p>
<p class="font-medium">{{ or .Data.Isbn13 "N/A" }}</p>
</div>
</div>
<div class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500">
<input type="checkbox" id="edit-cover-button" class="hidden css-button" />
<div class="absolute z-30 flex flex-col gap-2 top-0 left-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
<form method="POST"
enctype="multipart/form-data"
action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm">
<input type="file" id="cover_file" name="cover_file">
{{ template "component/button" (dict "Title" "Upload Cover") }}
</form>
<form method="POST"
action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm">
<input type="checkbox"
checked
id="remove_cover"
name="remove_cover"
class="hidden" />
{{ template "component/button" (dict "Title" "Remove Cover") }}
</form>
</div>
<div class="relative">
<label for="delete-button" class="cursor-pointer">{{ template "svg/delete" (dict "Size" 28) }}</label>
<input type="checkbox" id="delete-button" class="hidden css-button" />
<div class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
<form method="POST"
action="./{{ .Data.ID }}/delete"
class="text-black dark:text-white text-sm w-24">
{{ template "component/button" (dict "Title" "Delete") }}
</form>
<div class="h-full w-full relative">
<!-- Document Info -->
<div
class="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"
>
<div
class="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"
>
<label class="z-10 cursor-pointer" for="edit-cover-button">
<img
class="rounded object-fill w-full"
src="/documents/{{ .Data.ID }}/cover"
/>
</label>
{{ if .Data.Filepath }}
<a
href="/reader#id={{ .Data.ID }}&type=REMOTE"
class="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>Read</a
>
{{ end }}
<div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative">
<div class="min-w-[50%] md:mr-2">
<div class="flex gap-1 text-sm">
<p class="text-gray-500">ISBN-10:</p>
<p class="font-medium">{{ or .Data.Isbn10 "N/A" }}</p>
</div>
<div class="flex gap-1 text-sm">
<p class="text-gray-500">ISBN-13:</p>
<p class="font-medium">{{ or .Data.Isbn13 "N/A" }}</p>
</div>
</div>
<a href="../activity?document={{ .Data.ID }}">{{ template "svg/activity" (dict "Size" 28) }}</a>
<div class="relative">
<label for="search-button">{{ template "svg/search" (dict "Size" 28) }}</label>
<input type="checkbox" id="search-button" class="hidden css-button" />
<div class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
<form method="POST"
action="./{{ .Data.ID }}/identify"
class="flex flex-col gap-2 text-black dark:text-white text-sm">
<input type="text"
id="title"
name="title"
placeholder="Title"
value="{{ or .Data.Title nil }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
<input type="text"
id="author"
name="author"
placeholder="Author"
value="{{ or .Data.Author nil }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
<input type="text"
id="isbn"
name="isbn"
placeholder="ISBN 10 / ISBN 13"
value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
{{ template "component/button" (dict "Title" "Identify") }}
<div
class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500"
>
<input
type="checkbox"
id="edit-cover-button"
class="hidden css-button"
/>
<div
class="absolute z-30 flex flex-col gap-2 top-0 left-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
enctype="multipart/form-data"
action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
>
<input type="file" id="cover_file" name="cover_file" />
{{ template "component/button" (dict "Title" "Upload Cover") }}
</form>
<form
method="POST"
action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
>
<input
type="checkbox"
checked
id="remove_cover"
name="remove_cover"
class="hidden"
/>
{{ template "component/button" (dict "Title" "Remove Cover") }}
</form>
</div>
<div class="relative">
<label for="delete-button" class="cursor-pointer"
>{{ template "svg/delete" (dict "Size" 28) }}</label
>
<input
type="checkbox"
id="delete-button"
class="hidden css-button"
/>
<div
class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
action="./{{ .Data.ID }}/delete"
class="text-black dark:text-white text-sm w-24"
>
{{ template "component/button" (dict "Title" "Delete") }}
</form>
</div>
</div>
<a href="../activity?document={{ .Data.ID }}"
>{{ template "svg/activity" (dict "Size" 28) }}</a
>
<div class="relative">
<label for="search-button"
>{{ template "svg/search" (dict "Size" 28) }}</label
>
<input
type="checkbox"
id="search-button"
class="hidden css-button"
/>
<div
class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
action="./{{ .Data.ID }}/identify"
class="flex flex-col gap-2 text-black dark:text-white text-sm"
>
<input
type="text"
id="title"
name="title"
placeholder="Title"
value="{{ or .Data.Title nil }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
/>
<input
type="text"
id="author"
name="author"
placeholder="Author"
value="{{ or .Data.Author nil }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
/>
<input
type="text"
id="isbn"
name="isbn"
placeholder="ISBN 10 / ISBN 13"
value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
/>
{{ template "component/button" (dict "Title" "Identify") }}
</form>
</div>
</div>
{{ if .Data.Filepath }}
<a href="./{{ .Data.ID }}/file"
>{{ template "svg/download" (dict "Size" 28) }}</a
>
{{ else }}
{{ template "svg/download" (dict "Size" 28 "Disabled" true) }}
{{ end }}
</div>
{{ if .Data.Filepath }}
<a href="./{{.Data.ID}}/file">{{ template "svg/download" (dict "Size" 28) }}</a>
{{ else }}
{{ template "svg/download" (dict "Size" 28 "Disabled" true) }}
{{ end }}
</div>
</div>
</div>
<div class="grid sm:grid-cols-2 justify-between gap-4 pb-4">
{{ template "component/key-val-edit" (dict
"Title" "Title"
"Value" .Data.Title
"URL" (printf "./%s/edit" .Data.ID)
"FormValue" "title"
)}}
{{ template "component/key-val-edit" (dict
"Title" "Author"
"Value" .Data.Author
"URL" (printf "./%s/edit" .Data.ID)
"FormValue" "author"
)}}
<div class="grid sm:grid-cols-2 justify-between gap-4 pb-4">
{{ template "component/key-val-edit" (dict
"Title" "Title"
"Value" .Data.Title
"URL" (printf "./%s/edit" .Data.ID)
"FormValue" "title"
)
}}
{{ template "component/key-val-edit" (dict
"Title" "Author"
"Value" .Data.Author
"URL" (printf "./%s/edit" .Data.ID)
"FormValue" "author"
)
}}
<div class="relative">
<div class="text-gray-500 inline-flex gap-2 relative">
<p>Time Read</p>
<label class="my-auto" for="progress-info-button"
>{{ template "svg/info" (dict "Size" 18) }}</label
>
<input
type="checkbox"
id="progress-info-button"
class="hidden css-button"
/>
<div
class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<div class="text-xs flex">
<p class="text-gray-400 w-32">Seconds / Percent</p>
<p class="font-medium dark:text-white">
{{ .Data.SecondsPerPercent }}
</p>
</div>
<div class="text-xs flex">
<p class="text-gray-400 w-32">Words / Minute</p>
<p class="font-medium dark:text-white">{{ .Data.Wpm }}</p>
</div>
<div class="text-xs flex">
<p class="text-gray-400 w-32">Est. Time Left</p>
<p class="font-medium dark:text-white whitespace-nowrap">
{{ niceSeconds .TotalTimeLeftSeconds }}
</p>
</div>
</div>
</div>
<p class="font-medium text-lg">
{{ niceSeconds .Data.TotalTimeSeconds }}
</p>
</div>
<div>
<p class="text-gray-500">Progress</p>
<p class="font-medium text-lg">{{ .Data.Percentage }}%</p>
</div>
</div>
<div class="relative">
<div class="text-gray-500 inline-flex gap-2 relative">
<p>Time Read</p>
<label class="my-auto" for="progress-info-button">{{ template "svg/info" (dict "Size" 18) }}</label>
<input type="checkbox" id="progress-info-button" class="hidden css-button" />
<div class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
<div class="text-xs flex">
<p class="text-gray-400 w-32">Seconds / Percent</p>
<p class="font-medium dark:text-white">{{ .Data.SecondsPerPercent }}</p>
</div>
<div class="text-xs flex">
<p class="text-gray-400 w-32">Words / Minute</p>
<p class="font-medium dark:text-white">{{ .Data.Wpm }}</p>
</div>
<div class="text-xs flex">
<p class="text-gray-400 w-32">Est. Time Left</p>
<p class="font-medium dark:text-white whitespace-nowrap">{{ niceSeconds .TotalTimeLeftSeconds }}</p>
</div>
</div>
<p>Description</p>
<label class="my-auto" for="edit-description-button"
>{{ template "svg/edit" (dict "Size" 18) }}</label
>
</div>
<p class="font-medium text-lg">{{ niceSeconds .Data.TotalTimeSeconds }}</p>
</div>
<div>
<p class="text-gray-500">Progress</p>
<p class="font-medium text-lg">{{ .Data.Percentage }}%</p>
<div class="relative font-medium text-justify hyphens-auto">
<input
type="checkbox"
id="edit-description-button"
class="hidden css-button"
/>
<div
class="absolute h-full w-full min-h-[10em] z-30 top-1 right-0 gap-4 flex transition-all duration-200"
>
<img
class="hidden md:block invisible rounded w-44 md:w-60 lg:w-80 object-fill"
src="/documents/{{ .Data.ID }}/cover"
/>
<form
method="POST"
action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-full text-black bg-gray-200 rounded shadow-lg shadow-gray-500 dark:text-white dark:shadow-gray-900 dark:bg-gray-600 text-sm p-3"
>
<textarea
type="text"
id="description"
name="description"
class="h-full w-full p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
>
{{ or .Data.Description "N/A" }}</textarea
>
{{ template "component/button" (dict "Title" "Save") }}
</form>
</div>
<p>{{ or .Data.Description "N/A" }}</p>
</div>
</div>
<div class="relative">
<div class="text-gray-500 inline-flex gap-2 relative">
<p>Description</p>
<label class="my-auto" for="edit-description-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
</div>
</div>
<div class="relative font-medium text-justify hyphens-auto">
<input type="checkbox"
id="edit-description-button"
class="hidden css-button" />
<div class="absolute h-full w-full min-h-[10em] z-30 top-1 right-0 gap-4 flex transition-all duration-200">
<img class="hidden md:block invisible rounded w-44 md:w-60 lg:w-80 object-fill"
src="/documents/{{.Data.ID}}/cover" />
<form method="POST"
action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-full text-black bg-gray-200 rounded shadow-lg shadow-gray-500 dark:text-white dark:shadow-gray-900 dark:bg-gray-600 text-sm p-3">
<textarea type="text"
id="description"
name="description"
class="h-full w-full p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">{{ or .Data.Description "N/A" }}</textarea>
{{ template "component/button" (dict "Title" "Save") }}
</form>
</div>
<p>{{ or .Data.Description "N/A" }}</p>
</div>
{{ template "component/metadata" (dict
"ID" .Data.ID
"Metadata" .Metadata
"Error" .MetadataError
)
}}
</div>
{{ template "component/metadata" (dict
"ID" .Data.ID
"Metadata" .Metadata
"Error" .MetadataError
)}}
</div>
{{ end }}

View File

@@ -2,63 +2,98 @@
{{ define "title" }}Documents{{ end }}
{{ define "header" }}<a href="./documents">Documents</a>{{ end }}
{{ define "content" }}
<div class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<form class="flex gap-4 flex-col lg:flex-row"
action="./documents"
method="GET">
<div class="flex flex-col w-full grow">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/search2" (dict "Size" 15) }}
</span>
<input type="text"
id="search"
name="search"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Search Author / Title" />
<div
class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<form
class="flex gap-4 flex-col lg:flex-row"
action="./documents"
method="GET"
>
<div class="flex flex-col w-full grow">
<div class="flex relative">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/search2" (dict "Size" 15) }}
</span>
<input
type="text"
id="search"
name="search"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Search Author / Title"
/>
</div>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Search"
"Variant" "Secondary"
)
}}
</div>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Search"
"Variant" "Secondary"
) }}
</div>
</form>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{{ range $doc := .Data }}
{{ template "component/document-card" $doc }}
{{ end }}
</div>
<div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
{{ if .PreviousPage }}
<a href="./documents?page={{ .PreviousPage }}&limit={{ .PageLimit }}"
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none">◄</a>
{{ end }}
{{ if .NextPage }}
<a href="./documents?page={{ .NextPage }}&limit={{ .PageLimit }}"
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none">►</a>
{{ end }}
</div>
<div class="fixed bottom-6 right-6 rounded-full flex items-center justify-center">
<input type="checkbox" id="upload-file-button" class="hidden css-button" />
<div class="absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2">
<form method="POST"
enctype="multipart/form-data"
action="./documents"
class="flex flex-col gap-2">
<input type="file" accept=".epub" id="document_file" name="document_file" />
<button class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
type="submit">Upload File</button>
</form>
<label for="upload-file-button">
<div class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">
Cancel Upload
</div>
</label>
</div>
<label class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
for="upload-file-button">{{ template "svg/upload" (dict "Size" 34) }}</label>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{{ range $doc := .Data }}
{{ template "component/document-card" $doc }}
{{ end }}
</div>
<div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
{{ if .PreviousPage }}
<a
href="./documents?page={{ .PreviousPage }}&limit={{ .PageLimit }}"
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
>◄</a
>
{{ end }}
{{ if .NextPage }}
<a
href="./documents?page={{ .NextPage }}&limit={{ .PageLimit }}"
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
>►</a
>
{{ end }}
</div>
<div
class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
>
<input type="checkbox" id="upload-file-button" class="hidden css-button" />
<div
class="absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"
>
<form
method="POST"
enctype="multipart/form-data"
action="./documents"
class="flex flex-col gap-2"
>
<input
type="file"
accept=".epub"
id="document_file"
name="document_file"
/>
<button
class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
type="submit"
>
Upload File
</button>
</form>
<label for="upload-file-button">
<div
class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
>
Cancel Upload
</div>
</label>
</div>
<label
class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
for="upload-file-button"
>{{ template "svg/upload" (dict "Size" 34) }}</label
>
</div>
{{ end }}

View File

@@ -1,30 +1,53 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
<meta
name="viewport"
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent" />
<meta name="theme-color"
content="#F3F4F6"
media="(prefers-color-scheme: light)" />
<meta name="theme-color"
content="#1F2937"
media="(prefers-color-scheme: dark)" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta
name="theme-color"
content="#F3F4F6"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#1F2937"
media="(prefers-color-scheme: dark)"
/>
<title>AnthoLume - Error</title>
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/assets/style.css" />
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex flex-col justify-center h-screen">
<body
class="bg-gray-100 dark:bg-gray-800 flex flex-col justify-center h-screen"
>
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-gray-600 dark:text-gray-500">{{ .Status }}</h1>
<p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">{{ .Error }}</p>
<p class="mb-8 text-lg font-light text-gray-500 dark:text-gray-400">{{ .Message }}</p>
<a href="/"
class="rounded text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100">Back to Homepage</a>
<h1
class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-gray-600 dark:text-gray-500"
>
{{ .Status }}
</h1>
<p
class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"
>
{{ .Error }}
</p>
<p class="mb-8 text-lg font-light text-gray-500 dark:text-gray-400">
{{ .Message }}
</p>
<a
href="/"
class="rounded text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
>Back to Homepage</a
>
</div>
</div>
</body>

View File

@@ -2,83 +2,108 @@
{{ define "title" }}Home{{ end }}
{{ define "header" }}<a href="./">Home</a>{{ end }}
{{ define "content" }}
<div class="flex flex-col gap-4">
<div class="w-full">
<div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
<p class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
Daily Read Totals
</p>
{{ $data := (getSVGGraphData .Data.GraphData 800 70 )}}
<div class="relative">
<svg viewBox="26 0 755 {{ $data.Height }}"
preserveAspectRatio="none"
width="100%"
height="6em">
<!-- Bezier Line Graph -->
<path fill="#316BBE" fill-opacity="0.5" stroke="none" d="{{ $data.BezierPath }} {{ $data.BezierFill }}" />
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
</svg>
<div class="flex absolute w-full h-full top-0"
style="width: calc(100%*31/30);
<div class="flex flex-col gap-4">
<div class="w-full">
<div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
<p
class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
>
Daily Read Totals
</p>
{{ $data := (getSVGGraphData .Data.GraphData 800 70 ) }}
<div class="relative">
<svg
viewBox="26 0 755 {{ $data.Height }}"
preserveAspectRatio="none"
width="100%"
height="6em"
>
<!-- Bezier Line Graph -->
<path
fill="#316BBE"
fill-opacity="0.5"
stroke="none"
d="{{ $data.BezierPath }} {{ $data.BezierFill }}"
/>
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
</svg>
<div
class="flex absolute w-full h-full top-0"
style="width: calc(100%*31/30);
transform: translateX(-50%);
left: 50%">
{{ range $index, $item := $data.LinePoints }}
<!-- Required for iOS "Hover" Events (onclick) -->
<div onclick
class="opacity-0 hover:opacity-100 w-full"
style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%">
<div class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
style="transform: translateX(-50%);
left: 50%"
>
{{ range $index, $item := $data.LinePoints }}
<!-- Required for iOS "Hover" Events (onclick) -->
<div
onclick
class="opacity-0 hover:opacity-100 w-full"
style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%"
>
<div
class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
style="transform: translateX(-50%);
background-color: rgba(128, 128, 128, 0.2);
left: 50%">
<span>{{ (index $.Data.GraphData $index).Date }}</span>
<span>{{ (index $.Data.GraphData $index).MinutesRead }} minutes</span>
</div>
left: 50%"
>
<span>{{ (index $.Data.GraphData $index).Date }}</span>
<span
>{{ (index $.Data.GraphData $index).MinutesRead }}
minutes</span
>
</div>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
{{ template "component/info-card" (dict
"Title" "Documents"
"Size" .Data.DatabaseInfo.DocumentsSize
"Link" "./documents"
)
}}
{{ template "component/info-card" (dict
"Title" "Activity Records"
"Size" .Data.DatabaseInfo.ActivitySize
"Link" "./activity"
)
}}
{{ template "component/info-card" (dict
"Title" "Progress Records"
"Size" .Data.DatabaseInfo.ProgressSize
"Link" "./progress"
)
}}
{{ template "component/info-card" (dict
"Title" "Devices"
"Size" .Data.DatabaseInfo.DevicesSize
)
}}
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{{ range $item := .Data.Streaks }}
{{ template "component/streak-card" $item }}
{{ end }}
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{{ template "component/leaderboard-card" (dict
"Name" "WPM"
"Data" .Data.UserStatistics.WPM
)
}}
{{ template "component/leaderboard-card" (dict
"Name" "Duration"
"Data" .Data.UserStatistics.Duration
)
}}
{{ template "component/leaderboard-card" (dict
"Name" "Words"
"Data" .Data.UserStatistics.Words
)
}}
</div>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
{{ template "component/info-card" (dict
"Title" "Documents"
"Size" .Data.DatabaseInfo.DocumentsSize
"Link" "./documents"
)}}
{{ template "component/info-card" (dict
"Title" "Activity Records"
"Size" .Data.DatabaseInfo.ActivitySize
"Link" "./activity"
)}}
{{ template "component/info-card" (dict
"Title" "Progress Records"
"Size" .Data.DatabaseInfo.ProgressSize
"Link" "./progress"
)}}
{{ template "component/info-card" (dict
"Title" "Devices"
"Size" .Data.DatabaseInfo.DevicesSize
)}}
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{{ range $item := .Data.Streaks }}
{{ template "component/streak-card" $item }}
{{ end }}
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{{ template "component/leaderboard-card" (dict
"Name" "WPM"
"Data" .Data.UserStatistics.WPM
)}}
{{ template "component/leaderboard-card" (dict
"Name" "Duration"
"Data" .Data.UserStatistics.Duration
)}}
{{ template "component/leaderboard-card" (dict
"Name" "Words"
"Data" .Data.UserStatistics.Words
)}}
</div>
</div>
{{ end }}

View File

@@ -1,19 +1,29 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
<meta
name="viewport"
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent" />
<meta name="theme-color"
content="#F3F4F6"
media="(prefers-color-scheme: light)" />
<meta name="theme-color"
content="#1F2937"
media="(prefers-color-scheme: dark)" />
<title>AnthoLume - {{ if .Register }}Register{{ else }}Login{{ end }}</title>
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta
name="theme-color"
content="#F3F4F6"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#1F2937"
media="(prefers-color-scheme: dark)"
/>
<title>
AnthoLume - {{ if .Register }}Register{{ else }}Login{{ end }}
</title>
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./assets/style.css" />
<!-- Service Worker / Offline Cache Flush -->
@@ -32,7 +42,8 @@
html {
height: calc(100% + env(safe-area-inset-bottom));
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
env(safe-area-inset-left);
}
/* No Scrollbar - IE, Edge, Firefox */
@@ -50,77 +61,112 @@
<body class="bg-gray-100 dark:bg-gray-800 dark:text-white">
<div class="flex flex-wrap w-full">
<div class="flex flex-col w-full md:w-1/2">
<div class="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32">
<div
class="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"
>
<p class="text-3xl text-center">Welcome.</p>
<form
class="flex flex-col pt-3 md:pt-8"
{{if
.Register}}action="./register"
{{ else }}action="./login"
{{ if
.Register
}}
action="./register"
{{ else }}
action="./login"
{{ end }}
method="POST"
>
>
<div class="flex flex-col pt-4">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/user" (dict "Size" 15) }}
</span>
<input type="text"
id="username"
name="username"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Username" />
<input
type="text"
id="username"
name="username"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Username"
/>
</div>
</div>
<div class="flex flex-col pt-4 mb-12">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/password" (dict "Size" 15) }}
</span>
<input type="password"
id="password"
name="password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Password" />
<span class="absolute -bottom-5 text-red-400 text-xs">{{ .Error }}</span>
<input
type="password"
id="password"
name="password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Password"
/>
<span class="absolute -bottom-5 text-red-400 text-xs"
>{{ .Error }}</span
>
</div>
</div>
<button type="submit"
class="w-full px-4 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2">
<button
type="submit"
class="w-full px-4 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
>
{{ if .Register }}
<span class="w-full">Register</span>
{{ else }}
<span class="w-full">Submit</span>
<span class="w-full">Register</span>
{{ else }}
<span class="w-full">Submit</span>
{{ end }}
</button>
</form>
<div class="pt-12 pb-12 text-center">
{{ if .Config.RegistrationEnabled }} {{ if .Register }}
<p>
Trying to login?
<a href="./login" class="font-semibold underline">Login here.</a>
</p>
{{ else }}
<p>
Don&#x27;t have an account?
<a href="./register" class="font-semibold underline">Register here.</a>
</p>
{{ end }} {{ end }}
{{ if .Config.RegistrationEnabled }}
{{ if .Register }}
<p>
Trying to login?
<a href="./login" class="font-semibold underline"
>Login here.</a
>
</p>
{{ else }}
<p>
Don&#x27;t have an account?
<a href="./register" class="font-semibold underline"
>Register here.</a
>
</p>
{{ end }}
{{ end }}
<p class="mt-4">
<a href="./local" class="font-semibold underline">Offline / Local Mode</a>
<a href="./local" class="font-semibold underline"
>Offline / Local Mode</a
>
</p>
</div>
</div>
</div>
<div class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block">
<img class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book1.jpg" />
<img class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book2.jpg" />
<img class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book3.jpg" />
<img class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book4.jpg" />
<div
class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block"
>
<img
class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book1.jpg"
/>
<img
class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book2.jpg"
/>
<img
class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book3.jpg"
/>
<img
class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book4.jpg"
/>
</div>
</div>
<style>

View File

@@ -2,24 +2,27 @@
{{ define "title" }}Progress{{ end }}
{{ define "header" }}<a href="./progress">Progress</a>{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict
"Columns" (slice "Document" "Device Name" "Percentage" "Created At")
"Keys" (slice "Document" "DeviceName" "Percentage" "CreatedAt")
"Rows" .Data
)}}
<div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict
"Columns" (slice "Document" "Device Name" "Percentage" "Created At")
"Keys" (slice "Document" "DeviceName" "Percentage" "CreatedAt")
"Rows" .Data
)
}}
</div>
</div>
</div>
{{ end }}
<!-- Table Cell Definition -->
{{ define "table-cell" }}
{{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a>
{{ else if eq .Name "Percentage" }}
{{ index (fields .Data) .Name }}%
{{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}"
>{{ .Data.Author }} - {{ .Data.Title }}</a
>
{{ else if eq .Name "Percentage" }}
{{ index (fields .Data) .Name }}%
{{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ end }}

View File

@@ -2,110 +2,156 @@
{{ define "title" }}Search{{ end }}
{{ define "header" }}<a href="./search">Search</a>{{ end }}
{{ define "content" }}
<div class="w-full flex flex-col md:flex-row gap-4">
<div class="flex flex-col gap-4 grow">
<div class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<form class="flex gap-4 flex-col lg:flex-row" action="./search">
<div class="flex flex-col w-full grow">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/search2" (dict "Size" 15) }}
</span>
<input type="text"
id="query"
name="query"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Query" />
<div class="w-full flex flex-col md:flex-row gap-4">
<div class="flex flex-col gap-4 grow">
<div
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<form class="flex gap-4 flex-col lg:flex-row" action="./search">
<div class="flex flex-col w-full grow">
<div class="flex relative">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/search2" (dict "Size" 15) }}
</span>
<input
type="text"
id="query"
name="query"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Query"
/>
</div>
</div>
</div>
<div class="flex relative min-w-[12em]">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/documents" (dict "Size" 15) }}
</span>
<select class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
id="source"
name="source">
<option value="Annas Archive">Annas Archive</option>
<option value="LibGen Fiction">LibGen Fiction</option>
<option value="LibGen Non-fiction">LibGen Non-fiction</option>
</select>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Search"
"Variant" "Secondary"
) }}
</div>
</form>
{{ if .SearchErrorMessage }}
<span class="text-red-400 text-xs">{{ .SearchErrorMessage }}</span>
{{ end }}
</div>
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm">
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th scope="col"
class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"></th>
<th scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
<th scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Series</th>
<th scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Type</th>
<th scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Size</th>
<th scope="col"
class="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
Date
</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not .Data }}
<tr>
<td class="text-center p-3" colspan="6">No Results</td>
</tr>
{{ end }} {{ range $item := .Data }}
<tr>
<td class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500">
<form action="./search" method="POST">
<input class="hidden"
type="text"
id="source"
name="source"
value="{{ $.Source }}" />
<input class="hidden"
type="text"
id="title"
name="title"
value="{{ $item.Title }}" />
<input class="hidden"
type="text"
id="author"
name="author"
value="{{ $item.Author }}" />
<button name="id" value="{{ $item.ID }}">{{ template "svg/download" }}</button>
</form>
</td>
<td class="p-3 border-b border-gray-200">{{ $item.Author }} - {{ $item.Title }}</td>
<td class="p-3 border-b border-gray-200">
<p>{{ or $item.Series "N/A" }}</p>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ or $item.FileType "N/A" }}</p>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ or $item.FileSize "N/A" }}</p>
</td>
<td class="hidden md:table-cell p-3 border-b border-gray-200">
<p>{{ or $item.UploadDate "N/A" }}</p>
</td>
</tr>
{{ end }}
</tbody>
</table>
<div class="flex relative min-w-[12em]">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/documents" (dict "Size" 15) }}
</span>
<select
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
id="source"
name="source"
>
<option value="Annas Archive">Annas Archive</option>
<option value="LibGen Fiction">LibGen Fiction</option>
<option value="LibGen Non-fiction">LibGen Non-fiction</option>
</select>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Search"
"Variant" "Secondary"
)
}}
</div>
</form>
{{ if .SearchErrorMessage }}
<span class="text-red-400 text-xs">{{ .SearchErrorMessage }}</span>
{{ end }}
</div>
<div class="inline-block min-w-full overflow-hidden rounded shadow">
<table
class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"
>
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th
scope="col"
class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
></th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Document
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Series
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Type
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Size
</th>
<th
scope="col"
class="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Date
</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not .Data }}
<tr>
<td class="text-center p-3" colspan="6">No Results</td>
</tr>
{{ end }}
{{ range $item := .Data }}
<tr>
<td
class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
>
<form action="./search" method="POST">
<input
class="hidden"
type="text"
id="source"
name="source"
value="{{ $.Source }}"
/>
<input
class="hidden"
type="text"
id="title"
name="title"
value="{{ $item.Title }}"
/>
<input
class="hidden"
type="text"
id="author"
name="author"
value="{{ $item.Author }}"
/>
<button name="id" value="{{ $item.ID }}">
{{ template "svg/download" }}
</button>
</form>
</td>
<td class="p-3 border-b border-gray-200">
{{ $item.Author }} - {{ $item.Title }}
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ or $item.Series "N/A" }}</p>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ or $item.FileType "N/A" }}</p>
</td>
<td class="p-3 border-b border-gray-200">
<p>{{ or $item.FileSize "N/A" }}</p>
</td>
<td class="hidden md:table-cell p-3 border-b border-gray-200">
<p>{{ or $item.UploadDate "N/A" }}</p>
</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
</div>
</div>
{{ end }}

View File

@@ -2,127 +2,166 @@
{{ define "title" }}Settings{{ end }}
{{ define "header" }}<a href="./settings">Settings</a>{{ end }}
{{ define "content" }}
<div class="w-full flex flex-col md:flex-row gap-4">
<div>
<div class="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
{{ template "svg/user" (dict "Size" 60) }}
<p class="text-lg">{{ .Authorization.UserName }}</p>
<div class="w-full flex flex-col md:flex-row gap-4">
<div>
<div
class="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
{{ template "svg/user" (dict "Size" 60) }}
<p class="text-lg">{{ .Authorization.UserName }}</p>
</div>
</div>
</div>
<div class="flex flex-col gap-4 grow">
<div class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<p class="text-lg font-semibold mb-2">Change Password</p>
<form class="flex gap-4 flex-col lg:flex-row"
action="./settings"
method="POST">
<div class="flex flex-col grow">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/password" (dict "Size" 15) }}
</span>
<input type="password"
id="password"
name="password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Password" />
<div class="flex flex-col gap-4 grow">
<div
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold mb-2">Change Password</p>
<form
class="flex gap-4 flex-col lg:flex-row"
action="./settings"
method="POST"
>
<div class="flex flex-col grow">
<div class="flex relative">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/password" (dict "Size" 15) }}
</span>
<input
type="password"
id="password"
name="password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Password"
/>
</div>
</div>
</div>
<div class="flex flex-col grow">
<div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/password" (dict "Size" 15) }}
</span>
<input type="password"
id="new_password"
name="new_password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="New Password" />
<div class="flex flex-col grow">
<div class="flex relative">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/password" (dict "Size" 15) }}
</span>
<input
type="password"
id="new_password"
name="new_password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="New Password"
/>
</div>
</div>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Submit"
"Variant" "Secondary"
) }}
</div>
</form>
{{ if .PasswordErrorMessage }}
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
{{ else if .PasswordMessage }}
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
{{ end }}
</div>
<div class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<p class="text-lg font-semibold mb-2">Change Timezone</p>
<form class="flex gap-4 flex-col lg:flex-row"
action="./settings"
method="POST">
<div class="flex relative grow">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
{{ template "svg/clock" (dict "Size" 15) }}
</span>
<select class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
id="timezone"
name="timezone">
{{ range $item := getTimeZones }}
<option {{ if (eq $item $.Data.Timezone) }}selected{{ end }} value="{{ $item }}">
{{ $item }}
</option>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Submit"
"Variant" "Secondary"
)
}}
</div>
</form>
{{ if .PasswordErrorMessage }}
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
{{ else if .PasswordMessage }}
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
{{ end }}
</div>
<div
class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold mb-2">Change Timezone</p>
<form
class="flex gap-4 flex-col lg:flex-row"
action="./settings"
method="POST"
>
<div class="flex relative grow">
<span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/clock" (dict "Size" 15) }}
</span>
<select
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
id="timezone"
name="timezone"
>
{{ range $item := getTimeZones }}
<option
{{ if (eq $item $.Data.Timezone) }}selected{{ end }}
value="{{ $item }}"
>
{{ $item }}
</option>
{{ end }}
</select>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Submit"
"Variant" "Secondary"
)
}}
</div>
</form>
{{ if .TimeOffsetErrorMessage }}
<span class="text-red-400 text-xs"
>{{ .TimeOffsetErrorMessage }}</span
>
{{ else if .TimeOffsetMessage }}
<span class="text-green-400 text-xs">{{ .TimeOffsetMessage }}</span>
{{ end }}
</div>
<div
class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold">Devices</p>
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th
scope="col"
class="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Name
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Last Sync
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Created
</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not .Data.Devices }}
<tr>
<td class="text-center p-3" colspan="3">No Results</td>
</tr>
{{ end }}
</select>
</div>
<div class="lg:w-60">
{{ template "component/button" (dict
"Title" "Submit"
"Variant" "Secondary"
) }}
</div>
</form>
{{ if .TimeOffsetErrorMessage }}
<span class="text-red-400 text-xs">{{ .TimeOffsetErrorMessage }}</span>
{{ else if .TimeOffsetMessage }}
<span class="text-green-400 text-xs">{{ .TimeOffsetMessage }}</span>
{{ end }}
</div>
<div class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
<p class="text-lg font-semibold">Devices</p>
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
<thead class="text-gray-800 dark:text-gray-400">
<tr>
<th scope="col"
class="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
Name
</th>
<th scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
Last Sync
</th>
<th scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Created</th>
</tr>
</thead>
<tbody class="text-black dark:text-white">
{{ if not .Data.Devices }}
<tr>
<td class="text-center p-3" colspan="3">No Results</td>
</tr>
{{ end }}
{{ range $device := .Data.Devices }}
<tr>
<td class="p-3 pl-0">
<p>{{ $device.DeviceName }}</p>
</td>
<td class="p-3">
<p>{{ $device.LastSynced }}</p>
</td>
<td class="p-3">
<p>{{ $device.CreatedAt }}</p>
</td>
</tr>
{{ end }}
</tbody>
</table>
{{ range $device := .Data.Devices }}
<tr>
<td class="p-3 pl-0">
<p>{{ $device.DeviceName }}</p>
</td>
<td class="p-3">
<p>{{ $device.LastSynced }}</p>
</td>
<td class="p-3">
<p>{{ $device.CreatedAt }}</p>
</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
</div>
</div>
{{ end }}