Browse Source

Refatorado o cadastro de URA, edicao de URA, refeito a pagina de Upload de Sons e corrigido bugs no cadastro de filas

dev
Matheo Bonucia 9 months ago
parent
commit
f35c36226e
  1. 1198
      admin/cadQgrupos.php
  2. 149
      admin/cadRamais.php
  3. 231
      admin/css/cadQgrupos.css
  4. 5
      admin/css/cadRamal.css
  5. 268
      admin/css/uploadSom.css
  6. 114
      admin/upload_som.php

1198
admin/cadQgrupos.php

File diff suppressed because it is too large Load Diff

149
admin/cadRamais.php

@ -678,7 +678,7 @@ if ($renderizar) { ?>
</div>
<div class="saldo_prepago">
<fieldset class="field">
<legend class="labels">Saldo Pr<EFBFBD>-pago</legend>
<legend class="labels">Saldo Pré-pago</legend>
<input name="saldo_prepago" type="text" id="saldo_prepago" class="caixas" value="<?= ($acao == 'edita') ? $saldo_prepago : '0,00'; ?>" disabled="disabled" />
</fieldset>
</div>
@ -723,17 +723,18 @@ if ($renderizar) { ?>
</div>
<div class="monitorar">
<fieldset class="field">
<legend class="labels"><span class="style5"> Monitorar</span></legend>
<span class="style5">
<legend class="labels">Monitorar</legend>
<div>
<input name="qualify" type="radio" value="yes" <?= ($acao == 'edita') && ($qualify == 'yes') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />Sim
<input name="qualify" type="radio" value="no" <?= ($acao == 'edita') && ($qualify == 'no') ? "checked" : null; ?> />N&atilde;o</span>
</div>
<div>
<input name="qualify" type="radio" value="no" <?= ($acao == 'edita') && ($qualify == 'no') ? "checked" : null; ?> />N&atilde;o
</div>
</fieldset>
</div>
<div class="tronco_pbx">
<fieldset class="field">
<legend class="labels">
<span class="style5">Tronco PBX:</span>
</legend>
<legend class="labels">Tronco PBX</legend>
<select name="ispbx_tronco" class="caixas">
<option value=""> ----------------------------- </option>
<?php
@ -757,26 +758,21 @@ if ($renderizar) { ?>
<div class="codecs">
<fieldset class="field">
<legend class="labels">Codecs Habilitados </legend>
<table>
<tr>
<td>
<span>
<?php
$numCodec = 0;
if (is_array($allow)) {
$allow = implode(",", $allow);
}
foreach (GetCodecs(true) as $codec) {
$check = ((strpos($allow, $codec) !== false)) ? ' checked="checked"' : '';
echo sprintf('<input name="allow[]" type="checkbox" id="allow%s" value="%s"%s>', ++$numCodec, $codec, $check);
echo ucfirst($codec);
}
?>
<input name="marcaTodos" type="checkbox" id="marcaTodos" value="all" onclick="seleciona_tudo(this.checked);" />All
</span>
</td>
</tr>
</table>
<div class="codecs-content">
<?php
$numCodec = 0;
if (is_array($allow)) {
$allow = implode(",", $allow);
}
foreach (GetCodecs(true) as $codec) {
$check = ((strpos($allow, $codec) !== false)) ? ' checked="checked"' : '';
echo sprintf('<input name="allow[]" type="checkbox" id="allow%s" value="%s"%s>', ++$numCodec, $codec, $check);
echo ucfirst($codec);
}
?>
<input name="marcaTodos" type="checkbox" id="marcaTodos" value="all" onclick="seleciona_tudo(this.checked);" />All
</span>
</div>
</fieldset>
</div>
</div>
@ -792,34 +788,41 @@ if ($renderizar) { ?>
<div class="nat">
<fieldset class="field">
<legend class="labels">Nat</legend>
<span class="style5">
<div>
<input name="nat" type="radio" value="yes" <?= ($acao == 'edita') && ($nat == 'yes') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="nat" type="radio" value="no" <?= ($acao == 'edita') && ($nat == 'no') ? "checked" : null; ?> />
N&atilde;o
</span>
</div>
</fieldset>
</div>
<div class="fax">
<fieldset class="field">
<legend class="labels">Fax</legend>
<span class="style5">
<div>
<input name="t38pt_udptl" type="radio" value="yes" <?= ($acao == 'edita') && ($t38pt_udptl == 'yes') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="t38pt_udptl" type="radio" value="no" <?= ($acao == 'edita') && ($t38pt_udptl == 'no') ? "checked" : null; ?> />
N&atilde;o
</span>
</div>
</fieldset>
</div>
<div class="suporte_video">
<fieldset class="field">
<legend class="labels">Suporte a V&iacute;deo</legend>
<span class="style5">
<div>
<input name="videosupport" type="radio" value="yes" <?= ($acao == 'edita') && ($videosupport == 'yes') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="videosupport" type="radio" value="no" <?= ($acao == 'edita') && ($videosupport == 'no') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />
N&atilde;o
</span>
</div>
</fieldset>
</div>
<div class="tempo_ring">
@ -847,9 +850,7 @@ if ($renderizar) { ?>
</div>
<div class="conexao_peers">
<fieldset class="field">
<legend class="labels">
<span class="style5">Tratar conex&otilde;es dos Peers</span>
</legend>
<legend class="labels">Tratar conex&otilde;es dos Peers</legend>
<select name="insecure" class="caixas" id="insecure">
<option value="" <?= ($insecure == '') ? "selected" : null; ?>>----------</option>
<option value="port" <?= ($insecure == 'port') ? "selected" : null; ?>>port</option>
@ -862,7 +863,7 @@ if ($renderizar) { ?>
</div>
<div class="servidor">
<fieldset class="field">
<legend class="labels"><span class="style5">Servidor</span></legend>
<legend class="labels">Servidor</legend>
<input name="host" type="text" class="caixas" id="host2" value="<?= ($acao == 'edita') ? $host : "dynamic"; ?>" />
<span class="labels2"></span>
</fieldset>
@ -908,14 +909,14 @@ if ($renderizar) { ?>
</div>
<div class="bina">
<fieldset class="field">
<legend class="labels"><span class="style5">Bina:</span></legend>
<legend class="labels">Bina</legend>
<input name="callerid" type="text" class="caixas" id="callerid2" value="<?= ($acao == 'edita') ? $callerid : null; ?>" size="15" />
<span class="labels2"></span>
</fieldset>
</div>
<div class="bina-externa">
<fieldset class="field">
<legend class="labels"><span class="style5">Bina Externa:</span></legend>
<legend class="labels">Bina Externa</legend>
<input name="callerid2" type="text" class="validate[optional,custom[onlyNumber],length[0,100]] caixas" id="callerid2" value="<?= ($acao == 'edita') ? $callerid2 : null; ?>" size="15" />
<span class="labels2"></span>
</fieldset>
@ -957,60 +958,71 @@ if ($renderizar) { ?>
<div class="chamada_espera">
<fieldset class="field">
<legend class="labels">Chamada em Espera</legend>
<span class="style5">
<div>
<input name="espera" type="radio" value="V" <?= ($acao == 'edita') && ($espera == 'V') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="espera" type="radio" value="F" <?= ($acao == 'edita') && ($espera == 'F') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />
N&atilde;o<span class="labels2"></span>
</span>
</div>
</fieldset>
</div>
<div class="cadeado">
<fieldset class="field">
<legend class="labels">Cadeado</legend>
<span class="style5">
<div>
<input name="cadeado" type="radio" value="V" <?= ($acao == 'edita') && (trim($cadeado) == 'V') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="cadeado" type="radio" value="F" <?= ($acao == 'edita') && (trim($cadeado) == 'F') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />
N&atilde;o<span class="labels2"></span>
</span>
</div>
</fieldset>
</div>
<div class="nao_pertube">
<fieldset class="field">
<legend class="labels">N&atilde;o Pertube</legend>
<span class="style5">
<div>
<input name="pertube" type="radio" value="V" <?= ($acao == 'edita') && ($nao_pertube == 'V') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="pertube" type="radio" value="F" <?= ($acao == 'edita') && ($nao_pertube == 'F') ? "checked" : null; ?> <?= ($acao != 'edita') ? "checked" : null; ?> />
N&atilde;o<span class="labels2"></span>
</span>
N&atilde;o
</div>
</fieldset>
</div>
<div class="gravacao_entrada">
<fieldset class="field">
<legend class="labels"><span class="style5">Gravação de Entrada:</span></legend>
<span class="style5">
<legend class="labels">Gravação de Entrada</legend>
<div>
<input name="gravacao" type="radio" value="V" <?= ($gravacao_chamada == 'V') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="gravacao" type="radio" value="F" <?= ($gravacao_chamada == 'F') ? "checked" : null; ?> />
N&atilde;o<span class="labels2"></span>
</span>
N&atilde;o
</div>
</fieldset>
</div>
<div class="gravacao_saida">
<fieldset class="field">
<legend class="labels"><span class="style5">Gravação de Saída</span></legend>
<span class="style5">
<legend class="labels">Gravação de Saída</legend>
<div>
<input name="gravacao_saida" type="radio" value="V" <?= ($gravacao_saida == 'V') ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="gravacao_saida" type="radio" value="F" <?= ($gravacao_saida == 'F') ? "checked" : null; ?> />
N&atilde;o<span class="labels2"></span></span>
N&atilde;o
</div>
</fieldset>
</div>
<div class="tempo_lig">
<fieldset class="field">
<legend class="labels"><span class="style5">Tempo de Ligação</span></legend>
<legend class="labels">Tempo de Ligação</legend>
<span class="style5">
<input name="timeout" type="text" class="validate[optional,custom[onlyNumber],length[0,10] caixas" id="timeout" value="<?= ($acao == 'edita') ? $timeout : null; ?>" size="10" maxlength="10" />
<span class="labels2"></span>
@ -1021,8 +1033,7 @@ if ($renderizar) { ?>
<div class="row">
<div class="redes_permitidas">
<fieldset class="field">
<legend class="labels"> Redes Permitidas para Autentica<EFBFBD>
<EFBFBD>o de Ramais</legend>
<legend class="labels"> Redes Permitidas para Autenticação de Ramais</legend>
<textarea name="extranet" cols="80" style="width:100%" rows="2" class="caixas" id="extranet"><?= $extranet; ?></textarea>
</fieldset>
</div>
@ -1165,45 +1176,53 @@ if ($renderizar) { ?>
<div class="reproduzir_data_hora">
<fieldset class="field">
<legend class="labels"> Reproduzir Data e Hora</legend>
<span class="style5"> </span><span class="style5">
<div>
<input name="envelope" type="radio" value="yes" <?= ($inseri_voice == 0) && ($envelope == 'yes') ? "checked" : null; ?> <?= ($inseri_voice != 0) ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="envelope" type="radio" value="no" <?= ($inseri_voice == 0) && ($envelope == 'no') ? "checked" : null; ?> />
N&atilde;o
</span>
</div>
</fieldset>
</div>
<div class="enviar_anexo">
<fieldset class="field">
<legend class="labels"> Enviar Anexo</legend>
<span class="style5"> </span><span class="style5">
<div>
<input name="attach" type="radio" value="yes" <?= ($inseri_voice == 0) && ($attach == 'yes') ? "checked" : null; ?> <?= ($inseri_voice != 0) ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="attach" type="radio" value="no" <?= ($inseri_voice == 0) && ($attach == 'no') ? "checked" : null; ?> />
N&atilde;o </span>
N&atilde;o
</div>
</fieldset>
</div>
<div class="reproduzir_identificacao">
<fieldset class="field">
<legend class="labels">Reproduzir Identifica&ccedil;&atilde;o</legend>
<span class="style5">
<div>
<input name="saycid" type="radio" value="yes" <?= ($inseri_voice == 0) && ($saycid == 'yes') ? "checked" : null; ?> <?= ($inseri_voice != 0) ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="saycid" type="radio" value="no" <?= ($inseri_voice == 0) && ($saycid == 'no') ? "checked" : null; ?> />
N&atilde;o
</span>
</div>
</fieldset>
</div>
<div class="deletar_pos_envio">
<fieldset class="field">
<legend class="labels"> Deletar ap&oacute;s o envio</legend>
<span class="style5"> </span>
<span class="style5">
<div>
<input name="delete" type="radio" value="yes" <?= ($inseri_voice == 0) && ($delete == 'yes') ? "checked" : null; ?> <?= ($inseri_voice != 0) ? "checked" : null; ?> />
Sim
</div>
<div>
<input name="delete" type="radio" value="no" <?= ($inseri_voice == 0) && ($delete == 'no') ? "checked" : null; ?> />
N&atilde;o
</span>
</div>
</fieldset>
</div>
</div>

231
admin/css/cadQgrupos.css

@ -6,16 +6,43 @@ html {
width: 100%;
}
body {
p {
margin: 0;
color: #333333;
padding: 0;
}
p {
body {
background-color: #EAEAEA;
margin: 0;
padding: 0;
}
input[type="radio"] {
width: 16px;
height: 16px;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
}
input[type="text"],
input[type="password"],
input[type="number"] {
width: 80%;
height: 16px;
padding: 4px;
border: 0;
border-radius: 5px;
text-align: center;
vertical-align: middle;
}
fieldset {
border: 1px solid #3333333b;
}
select {
border: 0 solid #3333333b;
background-color: rgba(255, 255, 255, 0.544);
@ -33,41 +60,101 @@ select[multiple] {
border-radius: 2px;
}
input {
background-color: white;
border: solid 0 transparent;
border-radius: 4px;
padding: 4px;
margin-left: 2px;
td {
vertical-align: middle;
}
.field {
border-radius: 6px;
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 2px;
font-size: small;
}
input[type="radio"] {
width: 16px;
height: 16px;
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
.container-content {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
fieldset {
border: 1 solid #6e26fa;
border-radius: 6px;
font-size: small;
.row {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: start;
margin: 4px 0;
}
.row div {
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.row-bn {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 5px;
}
legend {
font-size: small;
.titulo {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #266cfa, #FF1472);
color: white;
padding: 8px;
border-radius: 0 0 60px 60px;
font-weight: 600;
margin-bottom: 20px;
width: 70%;
height: 30px;
}
.titulo h1 {
font-size: 20px;
}
.collapse-config-advanced {
width: 100%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 3px;
}
.collapse-config-advanced-content {
display: none;
width: 100%;
width: 100%;
text-align: center;
}
.collapse-config-advanced-content>.row>div {
margin: 5px;
color: #333333;
font-weight: 600;
font-size: 14px;
}
.collapse-btn {
@ -86,15 +173,10 @@ legend {
justify-content: start;
}
.collapse-config-advanced-content {
display: none;
padding: 2px;
border: 0px solid #6e26fa;
border-radius: 6px;
margin: 10px;
.collapse-btn:hover {
background-color: #2C4FF2;
}
.button-close {
background-color: #6e26fa1c;
border-radius: 999px;
@ -136,41 +218,85 @@ legend {
border: 0;
}
.button-submit:hover {
#bn-submit:hover {
background-color: #2C4FF2;
}
.button-close:hover {
#bn-close:hover {
background-color: #6496E0;
}
.table-geral {
.boxChefeSec {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 130px;
text-align: center;
}
.table-geral td {
width: auto;
.column-sec {
width: 33%;
text-align: center;
vertical-align: middle;
display: inline-block;
}
.tabela {
width: 65%;
min-width: 840px;
.column-sec>select {
width: 200px;
overflow-y: scroll;
}
#titulo-fila {
.select-bn {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.select-bn>* {
width: 35px;
height: 30px;
border: 0;
border-radius: 10px;
color: #6e26fa;
font-weight: 600;
font-size: large;
vertical-align: middle;
padding: 1px;
}
.select-bn div {
width: 35px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
background: linear-gradient(45deg, #266cfa, #FF1472);
}
.select-bn div:hover {
background-color: #919dd1;
}
.head-rota {
background-color: #6e26fa;
color: white;
padding: 8px;
border-radius: 0 0 60px 60px;
font-weight: 600;
margin-bottom: 20px;
font-size: 12px;
border: 1px solid white;
}
#labelRotas,
#labelCfs {
color: #6e26fa;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
#ramalSecretaria,
#ramalSecretariaExcessao {
vertical-align: middle;
text-align: left;
background-color: rgba(255, 255, 255, 0.463);
border: 0.5px solid #6e26fa;
border-radius: 2px;
}
#estaticos #prioridadeRamal {
@ -196,14 +322,6 @@ legend {
padding: 10px;
}
.table-buttons {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-direction: row;
}
.fa-solid.fa-caret-right {
color: #6e26fa;
font-size: 18px;
@ -220,6 +338,7 @@ legend {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.select-modelo-bn {
@ -259,4 +378,10 @@ legend {
.bn-close {
margin: 10px 100px;
}
@media screen and (max-width: 845px) {
.table-geral {
flex-direction: column;
}
}

5
admin/css/cadRamal.css

@ -300,6 +300,11 @@ td {
border-radius: 2px;
}
.codecs-content {
flex-direction: row;
flex-wrap: wrap;
}
@media screen and (max-width:1180px) {
.titulo {
width: 88%;

268
admin/css/uploadSom.css

@ -0,0 +1,268 @@
* {
font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
}
body {
background-color: #EAEAEA;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
input[type="radio"] {
width: 16px;
height: 16px;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
}
input[type="text"],
input[type="password"] {
width: 80%;
height: 16px;
padding: 4px;
border: 0;
border-radius: 5px;
}
fieldset {
border: 1px solid #3333333b;
}
select {
border: 0 solid #3333333b;
background-color: rgba(255, 255, 255, 0.544);
color: #6e26fa;
font-weight: 600;
border-radius: 5px;
padding: 4px;
}
select[multiple] {
vertical-align: middle;
text-align: center;
background-color: rgba(255, 255, 255, 0.463);
border: 0.5px solid #6e26fa;
border-radius: 2px;
}
td {
vertical-align: middle;
}
.field {
border-radius: 6px;
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 2px;
font-size: small;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container-content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
width: 42%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 4px 0;
}
.row-bn {
width: 40%;
display: flex;
justify-content: end;
align-items: center;
margin: 5px;
}
.titulo {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #266cfa, #FF1472);
color: white;
padding: 8px;
border-radius: 0 0 60px 60px;
font-weight: 600;
margin-bottom: 20px;
width: 70%;
height: 30px;
}
.titulo h1 {
font-size: 20px;
}
.bn-submit>input {
background-color: #6e26fa;
border-radius: 6px;
box-shadow: #6e26fa 0 10px 20px -10px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 12px;
opacity: 1;
outline: 0 solid transparent;
padding: 8px 12px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100px;
word-break: break-word;
border: 0;
}
.bn-close>input {
background-color: #6e26fa1c;
border-radius: 6px;
box-shadow: #6e26fa1c 0 10px 20px -10px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 12px;
opacity: 1;
outline: 0 solid transparent;
padding: 8px 12px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100px;
word-break: break-word;
border: 0;
color: #333333;
}
.bn-submit>input:hover {
background-color: #2C4FF2;
}
.bn-close>input:hover {
background-color: #6496E0;
}
.bn-submit,
.bn-close {
margin: 0px 20px;
}
.custom-file-label {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #6d26faa5;
cursor: pointer;
}
.descricao {
margin: 10px;
width: 96%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.file-container {
width: 100%;
background-color: #2666fa1b;
margin: 3px 0;
padding: 5px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.file-icon {
width: 15%;
display: flex;
justify-content: center;
align-items: center;
height: max-content;
margin: 3px;
}
.file-details {
width: 85%;
display: flex;
justify-content: center;
align-items: start;
height: max-content;
overflow-x: hidden;
margin: 3px;
flex-direction: column;
}
.file-size {
font-size: 12px;
color: #333333;
margin: 0px 5px;
}
.file-name {
font-size: 15px;
}
.upload {
width: 100%;
}
@media screen and (max-width:1180px) {
.titulo {
width: 88%;
}
.container-content {
width: 88%;
}
.row {
width: 60%;
}
.row-bn {
width: 55%;
}
}
@media screen and (max-width: 690px) {
.row {
flex-direction: column;
}
.row-bn {
width: 100%;
justify-content: center;
}
}

114
admin/upload_som.php

@ -7,6 +7,9 @@
<script type="text/javascript" src="admin/js/jquery-1.4.js"></script>
<script type="text/javascript" src="admin/js/jquery.blockUI.js?v2.29"></script>
<script src="admin/js/pbxAjax.js" type="text/javascript"></script>
<link rel="stylesheet" href="/admin/css/uploadSom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script>
function alerta_existe(mensagem) {
$.blockUI({
@ -26,7 +29,6 @@
});
}
</script>
<link href="admin/css/forms.css" rel="stylesheet" type="text/css">
</head>
<body>
@ -146,43 +148,91 @@
?>
<form action="index.php?idProg=11043&pbxRequest=1&acao=inseri<?php echo $param; ?>" method="post" enctype="multipart/form-data" name="form1">
<table border="0" align="center" cellpadding="8" cellspacing="0" class="tabela" width="98%">
<tr bordercolor="#EAEAEA" bgcolor="#EAEAEA" class="cabecalho2">
<td>
<div align="center" class="cabecalho">UPLOAD DE SONS</div>
</td>
</tr>
<tr class="labels" bordercolor="#EAEAEA" bgcolor="#EAEAEA">
<td>
<fieldset>
<legend class="labels">Arquivo(s)</legend>
<input name="arquivo[]" multiple="multiple" style="width:99%" class="validate[required] caixas" type="file" id="arquivo" size="70" style="font-size:14px; " />
<div class="container">
<div class="titulo">
<h1>Upload de Sons</h1>
</div>
<div class="container-content">
<div class="row">
<div class="upload">
<label for="arquivo" class="custom-file-label" title="Clique para enviar um arquivo">
<i class="fa-solid fa-file-arrow-up fa-beat fa-2xl" style="color: #7f0bf2"></i>
</label>
<input name="arquivo[]" multiple="multiple" class="validate[required] caixas" type="file" id="arquivo" style="display: none;" />
<input type="text" class="custom-file-input" name="som[]" id="som" hidden />
<table id="filesend">
</table>
</fieldset>
</td>
</tr>
<tr class="labels" bordercolor="#EAEAEA" bgcolor="#EAEAEA" id="description">
<td>
<fieldset>
<legend class="labels">Descrição</legend>
<input name="arq_descricao" style="width:99%" type="text" class="caixas" id="arq_descricao" value="" size="50" maxlength="255" />
</fieldset>
</td>
</tr>
<tr bordercolor="#EAEAEA" bgcolor="#EAEAEA">
<td align="center">
</div>
<div class="descricao" id="fileListContainer">
<p style="font-size:small; opacity: 0.7;">Adicione algum arquivo de áudio</p>
</div>
</div>
</div>
<div class="row-bn">
<div class="bn-submit">
<input name="Submit" type="submit" class="labels" value="Salvar">
</div>
<div class="bn-close">
<input name="Submit2" type="button" class="labels" value="Cancelar" onclick="fecha_popup();" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
<script>
document.getElementById('arquivo').addEventListener('change', function() {
var fileListContainer = document.getElementById('fileListContainer');
fileListContainer.innerHTML = ''; // Limpa o conteúdo existente
// Adiciona divs para cada arquivo
for (var i = 0; i < this.files.length; i++) {
var fileContainer = document.createElement('div');
fileContainer.className = 'file-container';
var fileIcon = document.createElement('div');
fileIcon.className = 'file-icon';
var icon = document.createElement('i');
icon.className = 'fa-solid fa-file-audio fa-2xl';
icon.style.color = '#7f0bf2';
fileIcon.appendChild(icon);
var fileName = document.createElement('div');
fileName.className = 'file-name';
fileName.textContent = this.files[i].name;
var fileDetails = document.createElement('div');
fileDetails.className = 'file-details';
var fileSize = document.createElement('div');
fileSize.className = 'file-size';
fileSize.textContent = formatBytes(this.files[i].size);
fileDetails.appendChild(fileName);
fileDetails.appendChild(fileSize);
fileContainer.appendChild(fileIcon);
fileContainer.appendChild(fileDetails);
fileListContainer.appendChild(fileContainer);
}
});
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function openFileInput() {
document.getElementById('arquivo').click();
}
$(function() {
$("#arquivo").change(function() {
let file = []

Loading…
Cancel
Save