taggart

Simple golang tagging filesystem webapp
Log | Files | Refs

file.html (4854B)

      1 {{template "_header" .}}
      2 <h2>File: {{.Data.File.Filename}}</h2>
      3 
      4 <div class="file-container">
      5 
      6 <div class="file-sidebar">
      7 
      8     <details open>
      9     <summary>Tags</summary>
     10 	<ul>
     11 	{{range $k, $vs := .Data.File.Tags}}
     12 	  <li>
     13 		<span class="file-tag-category">{{$k}}:</span><br>
     14 		{{range $i, $v := $vs}}
     15 		  {{if $i}}<br> {{end}}
     16 		  <form method="post" action="/file/{{$.Data.File.ID}}/tag/{{$k}}/{{$v}}/delete"><button class="text-button" type="submit">x</button></form>
     17 		  <a href="/tag/{{$k}}/{{$v}}">{{$v}}</a>
     18 		{{end}}
     19 	  </li>
     20 	{{else}}
     21 	  <li>No tags yet</li>
     22 	{{end}}
     23 	</ul>
     24 	</details>
     25 
     26     <details>
     27     <summary>Add Tags</summary>
     28 		<form method="post">
     29 		  <input type="text" name="category" list="categories" placeholder="Category"><br>
     30 		  <datalist id="categories">{{range .Data.Categories}}<option value="{{.}}">{{end}}</datalist>
     31 		  <input type="text" name="value" placeholder="Value"><br>
     32 		  <button class="text-button" type="submit">Add Tag</button>
     33 		</form>
     34 	</details>
     35 
     36     <details>
     37     <summary>Raw URL</summary>
     38 		<input id="raw-url" value="http://{{.IP}}:{{.Port}}/uploads/{{.Data.EscapedFilename}}"><br>
     39 		<button class="text-button" id="copy-btn">Copy</button><br>
     40 		<span id="copy-status"></span>
     41 		<script src="/static/copy-link.js" defer></script>
     42 	</details>
     43 
     44     <details>
     45     <summary>File Actions</summary>
     46 
     47 		<script src="/static/rename-file.js" defer></script>
     48 		<form id="renameForm-{{.Data.File.ID}}" method="post" action="/file/{{.Data.File.ID}}/rename">
     49 		  <input type="hidden" name="newfilename" value="{{.Data.File.Filename}}">
     50 		  <button type="button" class="text-button rename-button" data-file-id="{{.Data.File.ID}}" data-current-name="{{.Data.File.Filename}}">Rename File</button>
     51 		</form>
     52 		<br />
     53 		<form method="post" action="/file/{{.Data.File.ID}}/delete">
     54 		  <button type="submit" onclick="return confirm('Are you sure you want to delete this file? This cannot be undone!')" class="text-button">Delete File</button>
     55 		</form>
     56 	</details>
     57 </div>
     58 
     59 <div class="file-content">
     60 
     61 	{{if hasAnySuffix .Data.File.Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}
     62 	  <a href="/uploads/{{.Data.EscapedFilename}}" target="_blank"><img src="/uploads/{{.Data.EscapedFilename}}" id="imageViewer" class="file-content-image"></a><br>
     63 	  <script src="/static/timestamps.js" defer></script>
     64 	{{else if hasAnySuffix .Data.File.Filename ".cbz"}}
     65 	  <div class="cbz-preview">
     66 		<a href="/cbz/{{.Data.File.ID}}">
     67 		  <img src="/uploads/thumbnails/{{.Data.File.Filename}}.jpg" class="file-content-image" alt="CBZ Preview">
     68 		</a>
     69 		<div class="cbz-open-button">
     70 		  <a href="/cbz/{{.Data.File.ID}}" class="text-button" style="display: inline-block; padding: 10px 20px; margin-top: 10px;">📖 Open CBZ Viewer</a>
     71 		</div>
     72 	  </div>
     73 	{{else if hasAnySuffix .Data.File.Filename ".mp4" ".webm" ".mov" ".m4v"}}
     74 	  <video id="videoPlayer" controls loop muted width="600">
     75 		<source src="/uploads/{{.Data.EscapedFilename}}">
     76 	  </video><br>
     77 	  <script src="/static/timestamps.js" defer></script>
     78 	{{else if hasAnySuffix .Data.File.Filename ".txt" ".md"}}
     79 	  <div id="text-viewer-container">
     80 		<div>
     81 		  <button onclick="toggleLineNumbers()" class="text-button">Line Numbers</button>
     82 		  <button onclick="toggleFullscreen()" class="text-button">Fullscreen</button>
     83 		</div>
     84 		<pre id="text-viewer" data-filename="{{.Data.EscapedFilename}}">Loading...</pre>
     85 	  </div>
     86 	  <script src="/static/text-viewer.js"></script>
     87 	{{else}}
     88 	  <a href="/uploads/{{.Data.EscapedFilename}}">Download file</a><br>
     89 	{{end}}
     90 
     91 	<div class="description-section">
     92 		<h3>Description</h3>
     93 
     94 		<!-- Display Mode -->
     95 		<div id="description-display" data-original-description="{{.Data.File.Description}}">
     96 			{{if .Data.File.Description}}
     97 				<div id="current-description" >{{.Data.File.Description}}</div>
     98 			{{else}}
     99 				<div id="no-description">No description set</div>
    100 			{{end}}
    101 			<button class="text-button" id="edit-description-btn" onclick="toggleDescriptionEdit()">
    102 				{{if .Data.File.Description}}Edit Description{{else}}Add Description{{end}}
    103 			</button>
    104 		</div>
    105 
    106 		<!-- Edit Mode (initially hidden) -->
    107 		<div id="description-edit" style="display: none;">
    108 			<form method="post">
    109 				<input type="hidden" name="action" value="update_description">
    110 				<div>
    111 					<textarea
    112 						id="description-textarea"
    113 						name="description"
    114 						rows="6"
    115 						maxlength="2048"
    116 						placeholder="Enter description..."
    117 					>{{.Data.File.Description}}</textarea>
    118 				</div>
    119 				<div style="margin-top: 8px; display: flex; align-items: center; gap: 10px;">
    120 					<button class="text-button" type="submit">Save Description</button>
    121 					<button class="text-button" type="button" onclick="cancelDescriptionEdit()">Cancel</button>
    122 				</div>
    123 			</form>
    124 		</div>
    125 	</div>
    126 
    127 	<script src="/static/description.js" defer></script>
    128 
    129 </div>
    130 
    131 {{template "_footer"}}