taggart

Simple golang tagging filesystem webapp
Log | Files | Refs

file.html (4346B)

      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}}" class="file-content-image"></a><br>
     63 	{{else if hasAnySuffix .Data.File.Filename ".mp4" ".webm" ".mov" ".m4v"}}
     64 	  <video id="videoPlayer" controls loop muted width="600">
     65 		<source src="/uploads/{{.Data.EscapedFilename}}">
     66 	  </video><br>
     67 	  <script src="/static/timestamps.js" defer></script>
     68 	{{else if hasAnySuffix .Data.File.Filename ".txt" ".md"}}
     69 	  <div id="text-viewer-container">
     70 		<div>
     71 		  <button onclick="toggleLineNumbers()" class="text-button">Line Numbers</button>
     72 		  <button onclick="toggleFullscreen()" class="text-button">Fullscreen</button>
     73 		</div>
     74 		<pre id="text-viewer" data-filename="{{.Data.EscapedFilename}}">Loading...</pre>
     75 	  </div>
     76 	  <script src="/static/text-viewer.js"></script>
     77 	{{else}}
     78 	  <a href="/uploads/{{.Data.EscapedFilename}}">Download file</a><br>
     79 	{{end}}
     80 
     81 	<div class="description-section">
     82 		<h3>Description</h3>
     83 
     84 		<!-- Display Mode -->
     85 		<div id="description-display" data-original-description="{{.Data.File.Description}}">
     86 			{{if .Data.File.Description}}
     87 				<div id="current-description" >{{.Data.File.Description}}</div>
     88 			{{else}}
     89 				<div id="no-description">No description set</div>
     90 			{{end}}
     91 			<button class="text-button" id="edit-description-btn" onclick="toggleDescriptionEdit()">
     92 				{{if .Data.File.Description}}Edit Description{{else}}Add Description{{end}}
     93 			</button>
     94 		</div>
     95 
     96 		<!-- Edit Mode (initially hidden) -->
     97 		<div id="description-edit" style="display: none;">
     98 			<form method="post">
     99 				<input type="hidden" name="action" value="update_description">
    100 				<div>
    101 					<textarea
    102 						id="description-textarea"
    103 						name="description"
    104 						rows="6"
    105 						maxlength="2048"
    106 						placeholder="Enter description..."
    107 					>{{.Data.File.Description}}</textarea>
    108 				</div>
    109 				<div style="margin-top: 8px; display: flex; align-items: center; gap: 10px;">
    110 					<button class="text-button" type="submit">Save Description</button>
    111 					<button class="text-button" type="button" onclick="cancelDescriptionEdit()">Cancel</button>
    112 				</div>
    113 			</form>
    114 		</div>
    115 	</div>
    116 
    117 	<script src="/static/description.js" defer></script>
    118 
    119 </div>
    120 
    121 {{template "_footer"}}