utilities / templates /index.html
Reggie's picture
add item
c476445
raw
history blame
8.46 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Utilities</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
h2 {
text-align: center;
}
#search-container {
display: flex;
justify-content: center;
align-items: center;
}
#query {
width: 70%;
padding: 10px;
}
#title, #link {
width: 70%;
padding: 10px;
margin-top: 10px;
}
#search {
background-color: #4c72af;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-left: 10px;
}
#add {
background-color: #4c72af;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
}
#results {
margin: 20px;
}
.result {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.delete {
background-color: #ff0000;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
margin: 0 10px;
}
#drag-drop-container {
border: 2px dashed #4c72af;
padding: 20px;
text-align: center;
cursor: pointer;
}
.deleted-text {
color: red;
}
</style>
</head>
<body>
<h2>Utilities</h2>
<div id="search-container">
<input type="text" id="query" placeholder="Search...">
<button id="search">Search</button>
</div>
<div id="results"></div>
<!-- Drag and drop area -->
<div id="drag-drop-container">
Drag & Drop Audio File (mp3, wav, ogg, m4v) Here
</div>
<div>
<label for="title">Title:</label>
<input type="text" id="title" placeholder="TIL something or the other">
</div>
<div>
<label for="link">Link:</label>
<input type="text" id="link" placeholder="https://somelink.com">
</div>
<button id="add">ADD ITEM</button>
<div id="add-results"></div>
<script>
$(document).ready(function () {
var collection = "jks";
function performSearch() {
var query = $("#query").val();
// if query starts with til: or tilc:, set collection to tils, else set to jks
if (query.startsWith("til:")) {
collection = "tils";
// query = query.substring(4);
} else if (query.startsWith("tilc:")) {
collection = "tils";
// query = query.substring(5);
} else {
collection = "jks";
}
$.post("/search", { query: query, collection:collection }, function (data) {
// Handle search results
var results = $("#results");
results.empty();
data.forEach(function (result) {
// if collection is tils, set resultElement to the result.text, hyperlinked by result.url after prepending with https://. The date should have an underscore after the first 8 characters
// else, set resultElement to the result.text
if (collection == "tils") {
var resultElement = $("<div class='result'>" + "<p>" + "<a href='https://" + result.url + "' target='_blank'>" + result.text + "</a>" + "</p>" + "<small>" + result.date + "</small>" + "<button class='delete' data-id='" + result.id + "'>Delete</button>" + "</div>");
} else {
var resultElement = $("<div class='result'>" + "<p>" + result.text + "</p>" + "<small>Date: " + result.date + "</small>" + "<button class='delete' data-id='" + result.id + "'>Delete</button>" + "</div>");
}
results.append(resultElement);
resultElement.find(".delete").on("click", function () {
var id = $(this).data("id");
var resultButton = $(this);
$.post("/delete_joke", { id: id, collection:collection }, function (data) {
// Handle the delete response if needed
if (data.deleted) {
// Replace the button with "DELETED!" text
resultButton.replaceWith("<p class='deleted-text'>DELETED!</p>");
}
});
});
});
});
}
$('#add').click(function() {
$('#add-results').append("<h3>Adding item. Hold on!</h3>");
var title = $('#title').val();
var url = $('#link').val();
$.post('/add_item', {
title: title,
url: url
}, function(data) {
if(data.success) {
$('#title').val('');
$('#link').val('');
$('#add-results').empty();
$('#add-results').append("<h3>Successfully added item to " + data.index + "</h3>");
}
});
});
function displayTranscriptionResult(transcription) {
// Display the transcription result
var results = $("#results");
results.empty();
results.append("<div class='result'>" + "<p>" + transcription + "</p>" + "</div>");
// Hide the "Transcribing..." message
$("#drag-drop-container").text("Drag & Drop Audio File (mp3, wav, ogg, m4a) Here");
$("#drag-drop-container").css("border-color", "#4c72af");
}
$("#search").on("click", function () {
performSearch();
$("#drag-drop-container").css("display", "none"); // Hide drag & drop area
});
$("#query").on("keydown", function (event) {
if (event.key === "Enter") {
event.preventDefault();
performSearch();
$("#drag-drop-container").css("display", "none"); // Hide drag & drop area
}
});
// Drag and drop functionality
$("#drag-drop-container").on("dragover", function (e) {
e.preventDefault();
$(this).css("border", "2px dashed #ff0000");
});
$("#drag-drop-container").on("dragleave", function (e) {
e.preventDefault();
$(this).css("border", "2px dashed #4c72af");
});
$("#drag-drop-container").on("drop", function (e) {
e.preventDefault();
$(this).css("border", "2px dashed #4c72af");
var files = e.originalEvent.dataTransfer.files;
if (files.length > 0) {
// Display "Transcribing..." message
$("#drag-drop-container").text("Transcribing the audio file...");
$("#drag-drop-container").css("border-color", "#ccc");
// Assume there's only one file for simplicity
var file = files[0];
var formData = new FormData();
formData.append("audio", file);
$.ajax({
url: "/whisper_transcribe",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (data) {
// Handle transcription result
displayTranscriptionResult(data.transcription);
},
});
}
});
});
</script>
</body>
</html>