165 lines
5.5 KiB
HTML
165 lines
5.5 KiB
HTML
{{define "submit"}}
|
|
<!DOCTYPE html>
|
|
<html lang="sr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>KAOS — Prijava</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="/static/htmx.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>🔧 KAOS Dashboard</h1>
|
|
<div class="header-right">
|
|
<nav class="nav">
|
|
<a href="/" class="btn">Kanban</a>
|
|
<a href="/docs" class="btn">Dokumenti</a>
|
|
<a href="/console" class="btn">Konzola</a>
|
|
<a href="/submit" class="btn btn-active">Prijava</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submit-container">
|
|
<div class="submit-mode-toggle">
|
|
<button class="btn btn-mode active" id="btn-client" onclick="switchMode('client')">👤 Klijent</button>
|
|
<button class="btn btn-mode" id="btn-operator" onclick="switchMode('operator')">🔧 Operater</button>
|
|
</div>
|
|
|
|
<!-- Client mode -->
|
|
<div id="mode-client" class="submit-mode">
|
|
<h2>📝 Nova prijava</h2>
|
|
<form id="client-form" onsubmit="submitClientForm(event)">
|
|
<div class="form-group">
|
|
<label>Naslov:</label>
|
|
<input type="text" name="title" id="submit-title" class="form-input" placeholder="Kratak opis problema ili ideje..." required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Opis (opciono):</label>
|
|
<textarea name="description" id="submit-desc" class="form-input" rows="6" placeholder="Detaljniji opis..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Prioritet:</label>
|
|
<div class="priority-group">
|
|
<label class="priority-label"><input type="radio" name="priority" value="Nizak"> Nizak</label>
|
|
<label class="priority-label"><input type="radio" name="priority" value="Srednji" checked> Srednji</label>
|
|
<label class="priority-label"><input type="radio" name="priority" value="Visok"> Visok</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-success">Pošalji 📨</button>
|
|
</form>
|
|
<div id="client-result"></div>
|
|
</div>
|
|
|
|
<!-- Operator mode -->
|
|
<div id="mode-operator" class="submit-mode" style="display:none">
|
|
<h2>🔧 Operater mod</h2>
|
|
<div class="chat-messages" id="chat-messages"></div>
|
|
<div class="chat-input-row">
|
|
<input type="text" id="chat-input" class="console-input" placeholder="Piši..." onkeydown="if(event.key==='Enter')sendChat()" autocomplete="off">
|
|
<button class="btn btn-move" onclick="sendChat()">⏎</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var currentChatID = '';
|
|
|
|
function switchMode(mode) {
|
|
document.getElementById('mode-client').style.display = mode === 'client' ? 'block' : 'none';
|
|
document.getElementById('mode-operator').style.display = mode === 'operator' ? 'flex' : 'none';
|
|
document.getElementById('btn-client').classList.toggle('active', mode === 'client');
|
|
document.getElementById('btn-operator').classList.toggle('active', mode === 'operator');
|
|
}
|
|
|
|
function submitClientForm(e) {
|
|
e.preventDefault();
|
|
var form = document.getElementById('client-form');
|
|
var data = new FormData(form);
|
|
|
|
fetch('/submit/simple', {method: 'POST', body: data})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
var el = document.getElementById('client-result');
|
|
if (data.error) {
|
|
el.innerHTML = '<div class="submit-msg submit-error">' + escapeHtml(data.error) + '</div>';
|
|
} else {
|
|
el.innerHTML = '<div class="submit-msg submit-success">✅ ' + data.task_id + ' kreiran u backlog/</div>';
|
|
form.reset();
|
|
}
|
|
});
|
|
}
|
|
|
|
function sendChat() {
|
|
var input = document.getElementById('chat-input');
|
|
var msg = input.value.trim();
|
|
if (!msg) return;
|
|
|
|
var messages = document.getElementById('chat-messages');
|
|
messages.innerHTML += '<div class="chat-msg chat-user"><span class="chat-role">👤</span> ' + escapeHtml(msg) + '</div>';
|
|
input.value = '';
|
|
input.disabled = true;
|
|
|
|
var botId = 'bot-' + Date.now();
|
|
messages.innerHTML += '<div class="chat-msg chat-bot" id="' + botId + '"><span class="chat-role">🤖</span> <span class="chat-text">...</span></div>';
|
|
messages.scrollTop = messages.scrollHeight;
|
|
|
|
fetch('/submit/chat', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({message: msg})
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.error) {
|
|
document.getElementById(botId).querySelector('.chat-text').textContent = 'Greška: ' + data.error;
|
|
input.disabled = false;
|
|
return;
|
|
}
|
|
currentChatID = data.chat_id;
|
|
streamChatResponse(data.chat_id, botId);
|
|
})
|
|
.catch(function(err) {
|
|
document.getElementById(botId).querySelector('.chat-text').textContent = 'Greška: ' + err.message;
|
|
input.disabled = false;
|
|
});
|
|
}
|
|
|
|
function streamChatResponse(chatID, botId) {
|
|
var source = new EventSource('/submit/chat/stream/' + chatID);
|
|
var el = document.getElementById(botId);
|
|
var input = document.getElementById('chat-input');
|
|
var lines = [];
|
|
|
|
source.onmessage = function(e) {
|
|
if (el) {
|
|
lines.push(e.data);
|
|
el.querySelector('.chat-text').textContent = lines.join('\n');
|
|
var messages = document.getElementById('chat-messages');
|
|
messages.scrollTop = messages.scrollHeight;
|
|
}
|
|
};
|
|
|
|
source.addEventListener('done', function() {
|
|
source.close();
|
|
input.disabled = false;
|
|
input.focus();
|
|
});
|
|
|
|
source.onerror = function() {
|
|
source.close();
|
|
input.disabled = false;
|
|
};
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
var div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|