Karl
bcab963b99
The OCR feature can now be enabled or disabled using a new `OCR_ENABLED` configuration flag. This allows for more flexible deployments where the OCR feature is not required, reducing the application's resource footprint and dependency overhead. The backend now conditionally initializes the OCR engine and its associated route. The frontend UI for OCR uploads is also rendered conditionally based on this setting.
122 lines
5.2 KiB
HTML
122 lines
5.2 KiB
HTML
<!-- templates/add_account.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Add Account - KTVManager</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
|
|
<style>
|
|
/* Hide the spinner by default */
|
|
#loadingSpinner,
|
|
#ocrLoadingSpinner {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="/">KTVManager</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/accounts">Accounts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/urls">URLs</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Sub-navigation for Accounts -->
|
|
<div class="bg-light py-2">
|
|
<div class="container">
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/accounts">List Accounts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/accounts/add">Add Account</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mt-5">
|
|
<h1>Add Account</h1>
|
|
<div>
|
|
<form action="/accounts/add" method="POST" onsubmit="showLoading()">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" class="form-control" id="username" name="username" value="{{ username }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="text" class="form-control" id="password" name="password" value="{{ password }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="stream">Stream Name</label>
|
|
<input type="text" class="form-control" id="stream" name="stream" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="submitButton">
|
|
<span class="spinner-border spinner-border-sm" id="loadingSpinner" role="status" aria-hidden="true"></span>
|
|
<span id="buttonText">Add Account</span>
|
|
</button>
|
|
</form>
|
|
{% if ocr_enabled %}
|
|
<hr>
|
|
<h2>Load Details Via OCR</h2>
|
|
<form action="/OCRupload" method="POST" enctype="multipart/form-data" onsubmit="showLoadingOCR()">
|
|
<div class="form-group">
|
|
<label for="image">Select Image</label>
|
|
<input type="file" class="form-control-file" id="image" name="image" accept="image/*" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-success" id="ocrButton">
|
|
<span class="spinner-border spinner-border-sm" id="ocrLoadingSpinner" role="status" aria-hidden="true"></span>
|
|
<span id="ocrButtonText">Load Details</span>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
</main>
|
|
<footer class="bg-dark text-white text-center py-3 mt-5">
|
|
<p></p>
|
|
</footer>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
|
|
<script>
|
|
function showLoading() {
|
|
document.getElementById("submitButton").disabled = true;
|
|
document.getElementById("loadingSpinner").style.display = "inline-block";
|
|
document.getElementById("buttonText").textContent = "Working...";
|
|
}
|
|
function showLoadingOCR() {
|
|
document.getElementById("ocrButton").disabled = true;
|
|
document.getElementById("ocrLoadingSpinner").style.display = "inline-block";
|
|
document.getElementById("ocrButtonText").textContent = "Processing...";
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var streamInput = document.getElementById("stream");
|
|
fetch('/get_stream_names')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
new Awesomplete(streamInput, {
|
|
list: data
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|