-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
125 lines (104 loc) · 4.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário</title>
<!-- Incluir Bootstrap para o layout -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
let items = [];
// Função para adicionar título e link à lista
function addToComboBox() {
const titleInput = document.getElementById("title");
const linkInput = document.getElementById("link");
const comboBox = document.getElementById("comboBox");
const title = titleInput.value.trim();
const link = linkInput.value.trim();
if (title && link) {
const item = { title, link };
items.push(item);
const option = document.createElement("option");
option.value = `${title} - ${link}`;
option.textContent = `${title} - ${link}`;
comboBox.appendChild(option);
titleInput.value = '';
linkInput.value = '';
} else {
alert("Preencha ambos os campos!");
}
}
// Função para enviar o formulário
function submitForm() {
const fileNameInput = document.getElementById("fileName");
const fileName = fileNameInput.value.trim();
if (!fileName) {
alert("Por favor, insira um nome para o arquivo!");
return;
}
const requestData = {
items: items,
fileName: fileName
};
// Exibir "Carregando..." e desabilitar o botão
document.getElementById("loadingMessage").style.display = "block";
document.getElementById("submitButton").disabled = true;
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestData),
})
.then(response => response.blob()) // Receber o arquivo como blob
.then(blob => {
// Criar link para download do arquivo PDF
const downloadLink = document.createElement("a");
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = `${fileName}.pdf`;
downloadLink.click(); // Iniciar download
alert("PDF gerado com sucesso!");
})
.catch(error => {
console.error("Erro ao enviar dados:", error);
alert("Ocorreu um erro ao processar a requisição!");
})
.finally(() => {
// Esconder "Carregando..." e habilitar o botão novamente
document.getElementById("loadingMessage").style.display = "none";
document.getElementById("submitButton").disabled = false;
});
}
</script>
</head>
<body>
<div class="container mt-4">
<h1>Criando SetList</h1>
<form onsubmit="event.preventDefault(); addToComboBox();">
<div class="mb-3">
<label for="title" class="form-label">Momento:</label>
<input type="text" id="title" name="title" class="form-control" required>
</div>
<div class="mb-3">
<label for="link" class="form-label">Link:</label>
<input type="url" id="link" name="link" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Adicionar</button>
</form>
<h2 class="mt-4">Lista de músicas</h2>
<select id="comboBox" size="10" class="form-select mb-3" style="width: 100%;"></select>
<div class="mb-3">
<label for="fileName" class="form-label">Nome do Arquivo:</label>
<input type="text" id="fileName" name="fileName" class="form-control" required>
</div>
<button id="submitButton" class="btn btn-success" onclick="submitForm()">Enviar</button>
<!-- Mensagem de Carregando -->
<div id="loadingMessage" class="mt-3" style="display: none;">
<div class="alert alert-info" role="alert">Carregando... Por favor, aguarde.</div>
</div>
</div>
<!-- Incluir o JS do Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>