181 lines
9.8 KiB
Plaintext
181 lines
9.8 KiB
Plaintext
@using Blinks
|
|
|
|
@*
|
|
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
|
*@
|
|
@{
|
|
ViewData["Title"] = "Form Example";
|
|
}
|
|
|
|
@section Styles {
|
|
<style type="text/css">
|
|
.bg-grayed {
|
|
background-color: #D8D8D8
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div class="container mt-5">
|
|
<h2>@Resource.InitialFormTitle</h2>
|
|
<br />
|
|
<br />
|
|
<form id="exampleForm">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="form-group">
|
|
<label for="email">@Resource.NameLabel</label>
|
|
<input type="name" class="form-control bg-grayed" id="name" disabled value="@User.FindFirst("FullName").Value" style="background-color: #D8D8D8">
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group">
|
|
<label for="email">@Resource.EmailLabel</label>
|
|
<input type="email" class="form-control bg-grayed" id="email" disabled value="@User.Identity.Name" style="background-color: #D8D8D8">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card mt-3 tab-card">
|
|
<div class="card-header tab-card-header">
|
|
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">Dados</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Links</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Tema</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
|
|
<div class="tab-content-inner" style="height: 320px;">
|
|
<h5 class="card-title">Dados iniciais</h5>
|
|
<div class="form-group">
|
|
<label for="country">@Resource.CountryLabel</label>
|
|
<select class="form-control" id="country" placeholder="@Resource.CountryPlaceholder" required>
|
|
@if (Context.Request.Cookies["Language"] == "en")
|
|
{
|
|
<option value="1">@Resource.Country_EUA_Label</option>
|
|
<option value="2">@Resource.Country_India_Label</option>
|
|
<option value="3">@Resource.Country_Nigeria_Label</option>
|
|
<option value="4">@Resource.Country_Paquistao_Label</option>
|
|
<option value="5">@Resource.Country_UK_Label</option>
|
|
<option value="6">@Resource.Country_Filipinas_Label</option>
|
|
<option value="7">@Resource.Country_Canada_Label</option>
|
|
<option value="8">@Resource.Country_Australia_Label</option>
|
|
<option value="9">@Resource.Country_Gana_Label</option>
|
|
<option value="10">@Resource.Country_Quenia_Label</option>
|
|
}
|
|
else if (Context.Request.Cookies["Language"] == "pt-BR")
|
|
{
|
|
<option value="11">@Resource.Country_Brasil_Label</option>
|
|
<option value="12">@Resource.Country_Mocambique_Label</option>
|
|
<option value="13">@Resource.Country_Angola_Label</option>
|
|
<option value="14">@Resource.Country_Portugal_Label</option>
|
|
<option value="15">@Resource.Country_GuineBissau_Label</option>
|
|
<option value="16">@Resource.Country_TimorLeste_Label</option>
|
|
<option value="17">@Resource.Country_CaboVerde_Label</option>
|
|
}
|
|
</select>
|
|
<small id="countryHelp" class="form-text text-muted">@Resource.ChangeLanguage</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="businessArea">@Resource.BusinessAreaLabel</label>
|
|
<select class="form-control" id="country" placeholder="@Resource.CountryPlaceholder" required>
|
|
<option value="1">@Resource.BU_Alimentacao</option>
|
|
<option value="2">@Resource.BU_Vestuário</option>
|
|
<option value="3">@Resource.BU_Construção</option>
|
|
<option value="4">@Resource.BU_Saúde</option>
|
|
<option value="5">@Resource.BU_TI</option>
|
|
<option value="6">@Resource.BU_Beleza</option>
|
|
<option value="7">@Resource.BU_Empreendedorismo</option>
|
|
<option value="8">@Resource.BU_SetorPET</option>
|
|
<option value="9">@Resource.BU_Educacao</option>
|
|
<option value="10">@Resource.BU_TransporteLogistica</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="groupName">@Resource.GroupNameLabel</label>
|
|
<input type="text" class="form-control" id="groupName" placeholder="@Resource.GroupPlaceHolder" required>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="next1Button">Próximo >></button>
|
|
</div>
|
|
<div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
|
|
<div class="tab-content-inner" style="height: 320px;">
|
|
<h5 class="card-title">Tab Card Two</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="next2Button">Próximo >></button>
|
|
</div>
|
|
<div class="tab-pane fade p-3 " id="three" role="tabpanel" aria-labelledby="three-tab">
|
|
<div class="tab-content-inner" style="height: 320px;">
|
|
<h5 class="card-title">Tab Card Three</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="saveButton" disabled>@Resource.SaveButton</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@section Scripts {
|
|
<script type="text/javascript" >
|
|
const nextTab1 = $('#one-tab');
|
|
const nextTab2 = $('#two-tab');
|
|
const nextTab3 = $('#three-tab');
|
|
|
|
nextTab2.addClass('disabled');
|
|
nextTab3.addClass('disabled');
|
|
|
|
$(document).ready(function () {
|
|
$('#groupName, #businessArea').on('input', function() {
|
|
var groupName = $('#groupName').val();
|
|
var businessArea = $('#businessArea').val();
|
|
|
|
if (groupName && businessArea) {
|
|
$.ajax({
|
|
url: '/validateGroup',
|
|
type: 'POST',
|
|
data: { groupName: groupName, businessArea: businessArea },
|
|
success: function(response) {
|
|
if (response.isValid) {
|
|
$('#saveButton').prop('disabled', false);
|
|
} else {
|
|
$('#saveButton').prop('disabled', true);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
$('#saveButton').prop('disabled', true);
|
|
}
|
|
});
|
|
|
|
$('#next1Button').on('click', function () {
|
|
nextTab2.removeClass('disabled');
|
|
nextTab2.tab('show');;
|
|
});
|
|
|
|
$('#next2Button').on('click', function () {
|
|
nextTab3.removeClass('disabled');
|
|
nextTab3.tab('show');;
|
|
});
|
|
|
|
nextTab3.addEventListener('click', function () {
|
|
// Aqui você pode adicionar a lógica para permitir que o usuário volte para as abas anteriores
|
|
});
|
|
|
|
});
|
|
</script>
|
|
} |