Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container">
- <h4>CADASTRO TRANSPORTE UNIVERSITÁRIO</h4>
- <div class="rvt-container rvt-container--center rvt-container--sophomore rvt-m-top-xxl">
- <ol class="rvt-steps">
- <li [class]="classPersonalData">
- <span class="rvt-steps__label"></span>
- </li>
- <li [class]="classAddress">
- <span class="rvt-steps__label"></span>
- </li>
- <li [class]="classInstitution">
- <span class="rvt-steps__label"></span>
- </li>
- <li [class]="classDocuments">
- <span class="rvt-steps__label"></span>
- </li>
- <li>
- <span class="rvt-steps__label"></span>
- </li>
- </ol>
- </div>
- <div class="content">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12">
- <div class="card">
- <div class="card-body">
- <form novalidate role="form" [formGroup]="formNewUser" (ngSubmit)="onSubmit()">
- <div class="form-content">
- <!--********************************DADOS PESSOAS******************************* -->
- <div *ngIf="visualizationPessoais" formGroupName="personalData">
- <div class="row" id="typeUser">
- <div class="form-group col-md-8">
- <fieldset class="form-group">
- <label class="radio-inline">
- <input class="ng-tns-c9-2" type="checkbox" formControlName="student">{{ 'Estudante' | translate }}
- </label>
- <label class="radio-inline">
- <input class="ng-tns-c9-2" type="checkbox" formControlName="teacher"> {{ 'Professor' | translate }}
- </label>
- </fieldset>
- </div>
- <div class="col-md-4" id="step-1">
- {{ 'Passo 1: Dados Pessoais' | translate }}
- <hr>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-12">
- <label class="control-label">{{ 'Nome Completo' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" placeholder="{{ 'Nome Completo' | translate }}" class="form-control"
- [class.is-invalid]="formNewUser.get('personalData').get('name').touched && formNewUser.get('personalData').get('name').invalid"
- formControlName="name">
- <small *ngIf="formNewUser.get('personalData').get('name').valid && formNewUser.get('personalData').get('name').touched" class="form-text text-success">{{ 'Nome válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('name').valid && formNewUser.get('personalData').get('name').touched"
- class="form-text text-danger">{{ 'Nome inválido - Favor informar nome, sobrenome e não utilizar números ou caracteres especiais!'
- | translate }}
- </small>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-12">
- <label class="control-label">{{ 'E-mail' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" placeholder="{{ 'nome@exemplo.com' | translate }}" class="form-control"
- [class.is-invalid]="formNewUser.get('personalData').get('email').touched && formNewUser.get('personalData').get('email').invalid"
- formControlName="email">
- <small *ngIf="formNewUser.get('personalData').get('email').valid && formNewUser.get('personalData').get('email').touched"
- class="form-text text-success">{{ 'E-mail válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('email').valid && formNewUser.get('personalData').get('email').touched"
- class="form-text text-danger">{{ 'E-mail inválido!' | translate }}
- </small>
- </div>
- </div>
- <div class="row" formGroupName="rg">
- <div class="form-group col-md-6">
- <label class="control-label">RG</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="number" placeholder="RG">
- <small *ngIf="formNewUser.get('personalData').get('rg').get('number').valid && formNewUser.get('personalData').get('rg').get('number').touched"
- class="form-text text-success">{{ 'RG válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('rg').get('number').valid && formNewUser.get('personalData').get('rg').get('number').touched"
- class="form-text text-danger">{{ 'RG inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-2">
- <label class="control-label">UF</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="state" placeholder="Estado">
- <small *ngIf="formNewUser.get('personalData').get('rg').get('state').valid && formNewUser.get('personalData').get('rg').get('state').touched"
- class="form-text text-success">{{ 'UF válida' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('rg').get('state').valid && formNewUser.get('personalData').get('rg').get('state').touched"
- class="form-text text-danger">{{ 'UF inválida' | translate }}
- </small>
- </div>
- <div class="form-group col-md-4">
- <label class="control-label">{{ 'Data de Expedição' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="date" [mask]="getMask('date')"
- placeholder="00/00/0000">
- <small *ngIf="formNewUser.get('personalData').get('rg').get('date').valid && formNewUser.get('personalData').get('rg').get('date').touched"
- class="form-text text-success">{{ 'Data válida' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('rg').get('date').valid && formNewUser.get('personalData').get('rg').get('date').touched"
- class="form-text text-danger">{{ 'Data inválida' | translate }}
- </small>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-6">
- <label class="control-label">CPF</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="cpf" [mask]="getMask('CPF')"
- placeholder="CPF">
- <small *ngIf="formNewUser.get('personalData').get('cpf').valid && formNewUser.get('personalData').get('cpf').touched" class="form-text text-success">{{ 'CPF válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('cpf').valid && formNewUser.get('personalData').get('cpf').touched" class="form-text text-danger">{{ 'CPF inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-6">
- <label class="control-label">{{ 'Tipo Sanguíneo' | translate }}</label>
- <select class="custom-select col-md-6" #selectBlood (change)="setValueBloodType(selectBlood.value)">
- <option *ngFor="let bloodType of bloodTypes" [value]="bloodType" [selected]="formNewUser.get('personalData').get('bloodType').value == bloodType">
- {{bloodType}}
- </option>
- </select>
- <small *ngIf="formNewUser.get('personalData').get('bloodType').valid && formNewUser.get('personalData').get('bloodType').touched"
- class="form-text text-success">{{ 'Tipo sanguíneo válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('bloodType').valid && formNewUser.get('personalData').get('bloodType').touched"
- class="form-text text-danger">{{ 'Tipo sanguíneo inválido' | translate }}
- </small>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-6">
- <label class="control-label">{{ 'Nome da Mãe' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" placeholder="{{ 'Nome Completo' | translate }}" class="form-control"
- formControlName="motherSname">
- <small *ngIf="formNewUser.get('personalData').get('motherSname').valid && formNewUser.get('personalData').get('motherSname').touched"
- class="form-text text-success">{{ 'Nome da mãe válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('motherSname').valid && formNewUser.get('personalData').get('motherSname').touched"
- class="form-text text-danger">{{ 'Nome da mãe inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-2" id="divPhoneType">
- <label class="control-label">{{ 'Tipo de telefone' | translate }}</label>
- <select class="custom-select" #selectPhone (change)="setValuePhoneType(selectPhone.value)">
- <option *ngFor="let phoneType of phoneTypes" [value]="phoneType" [selected]="formNewUser.get('personalData').get('phone').get('name').value == phoneType">
- {{phoneType}}
- </option>
- </select>
- </div>
- <div class="form-group col-md-4" id="divPhoneNumber" formGroupName="phone">
- <label class="control-label">{{ 'Número:' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" placeholder="{{ 'Telefone para Contato' | translate }}" class="form-control"
- formControlName="numberPhone" [mask]="getMask(selectPhone.value)">
- <small *ngIf="formNewUser.get('personalData').get('phone').get('numberPhone').valid && formNewUser.get('personalData').get('phone').get('numberPhone').touched"
- class="form-text text-success">{{ 'Telefone válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('personalData').get('phone').get('numberPhone').valid && formNewUser.get('personalData').get('phone').get('numberPhone').touched"
- class="form-text text-danger">{{ 'Telefone inválido' | translate }}
- </small>
- </div>
- </div>
- <div class="row text-center buttonsStep">
- <div class="col-md-12">
- <button class="btn btn-info float-right" type="button" (click)="openVisualizationForms('personalData', 'next')">{{ 'Próximo' | translate }}</button>
- </div>
- </div>
- </div>
- <!--********************************ENDEREÇOS******************************* -->
- <div *ngIf="visualizationEnd" formGroupName="address">
- <div class="row justify-content-end divStepIndication">
- <div class="col-4 stepIndication">
- {{ 'Passo 2: Endereço' | translate }}
- <hr>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-6">
- <label class="control-label">{{ 'Logradouro' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="street" placeholder="Logradouro">
- <small *ngIf="formNewUser.get('address').get('street').valid && formNewUser.get('address').get('street').touched" class="form-text text-success">{{ 'Logradouro válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('address').get('street').valid && formNewUser.get('address').get('street').touched" class="form-text text-danger">{{ 'Logradouro inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-2">
- <label class="control-label">Nº</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="number" placeholder="Número">
- <small *ngIf="formNewUser.get('address').get('number').valid && formNewUser.get('address').get('number').touched" class="form-text text-success">{{ 'Número válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('address').get('number').valid && formNewUser.get('address').get('number').touched" class="form-text text-danger">{{ 'Número inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-4">
- <label class="control-label">{{ 'Bairro' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="neighborhood" placeholder="Bairro">
- <small *ngIf="formNewUser.get('address').get('neighborhood').valid && formNewUser.get('address').get('neighborhood').touched"
- class="form-text text-success">{{ 'Bairro válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('address').get('neighborhood').valid && formNewUser.get('address').get('neighborhood').touched"
- class="form-text text-danger">{{ 'Bairro inválido' | translate }}
- </small>
- </div>
- </div>
- <div class="row text-center buttonsStep">
- <div class="col-md-6">
- <button class="btn btn-info float-left" type="button" (click)="openVisualizationForms('address', 'previous')">{{ 'Anterior' | translate }}</button>
- </div>
- <div class="col-md-6">
- <button class="btn btn-info float-right" type="button" (click)="openVisualizationForms('address', 'next')">{{ 'Próximo' | translate }}</button>
- </div>
- </div>
- </div>
- <!--********************************DADOS DA INSTITUIÇÃO******************************* -->
- <div *ngIf="visualizationInsti" formGroupName="institution">
- <div class="row justify-content-end divStepIndication">
- <div class="col-4 stepIndication">
- {{ 'Passo 3: Dados da Instituição' | translate }}
- <hr>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-6">
- <label class="control-label">{{ 'Nome da Instituição' | translate }}</label>
- <select class="custom-select col-md-6" #selectInstitution (change)="setValueInstitution(selectInstitution.value)">
- <!-- faz a verificação do selected toda vez que entra no ng if para cada campo, é necessario para manter o
- valor caso fique alternando entre as paginas, mas como afeta o desempenho? -->
- <option *ngFor="let institution of institutions" [value]="institution" [selected]="formNewUser.get('institution').get('name').value == institution">
- {{institution}}
- </option>
- </select>
- <small *ngIf="formNewUser.get('institution').get('name').valid && formNewUser.get('institution').get('name').touched" class="form-text text-success">{{ 'Nome da Instituição válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('institution').get('name').valid && formNewUser.get('institution').get('name').touched" class="form-text text-danger">{{ 'Nome da Instituição inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-6">
- <label class="control-label">{{ 'Cidade da Instituição' | translate }}</label>
- <select class="custom-select col-md-6" #selectCity (change)="setValueCity(selectCity.value)">
- <option *ngFor="let city of citysInstitution" [value]="city" [selected]="formNewUser.get('institution').get('city').value == city">
- {{city}}
- </option>
- </select>
- <small *ngIf="formNewUser.get('institution').get('city').valid && formNewUser.get('institution').get('city').touched" class="form-text text-success">{{ 'Cidade válida' | translate }}</small>
- <small *ngIf="!formNewUser.get('institution').get('city').valid && formNewUser.get('institution').get('city').touched" class="form-text text-danger">{{ 'Cidade inválida' | translate }}
- </small>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-7">
- <label class="control-label">{{ 'Nome do Curso' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="course" placeholder="Curso">
- <small *ngIf="formNewUser.get('institution').get('course').valid && formNewUser.get('institution').get('course').touched"
- class="form-text text-success">{{ 'Curso válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('institution').get('course').valid && formNewUser.get('institution').get('course').touched"
- class="form-text text-danger">{{ 'Curso inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-2">
- <label class="control-label">{{ 'Ano de Início' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="text" class="form-control" formControlName="startYear" placeholder="0000">
- <small *ngIf="formNewUser.get('institution').get('startYear').valid && formNewUser.get('institution').get('startYear').touched"
- class="form-text text-success">{{ 'Ano de início válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('institution').get('startYear').valid && formNewUser.get('institution').get('startYear').touched"
- class="form-text text-danger">{{ 'Ano de início inválido' | translate }}
- </small>
- </div>
- <div class="form-group col-md-3">
- <label class="control-label">{{ 'Previsão de Término' | translate }}</label>
- <input aria-describedby="addon-right addon-left" type="email" class="form-control" formControlName="yearTermination" placeholder="0000">
- <small *ngIf="formNewUser.get('institution').get('yearTermination').valid && formNewUser.get('institution').get('yearTermination').touched"
- class="form-text text-success">{{ 'Ano de término válido' | translate }}</small>
- <small *ngIf="!formNewUser.get('institution').get('yearTermination').valid && formNewUser.get('institution').get('yearTermination').touched"
- class="form-text text-danger">{{ 'Ano de término inválido' | translate }}
- </small>
- </div>
- </div>
- <br>
- <div class="row">
- <div class="form-group col-md-6">
- <label>{{ 'Perído de Ida' | translate }}</label>
- <div class="table-responsive">
- <table class="table table-md">
- <thead>
- <tr id="periodosOnibus">
- <th scope="col"></th>
- <th scope="col">{{ 'Manhã' | translate}} - 7h </th>
- <th scope="col">{{ 'Tarde' | translate}} - 13h</th>
- <th scope="col">{{ 'Noite' | translate}} - 18h40</th>
- <th scope="col">{{ 'Não Vou' | translate}}</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let day of daysOfTheWeek">
- <th scope="row">{{day.name}}</th>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToGoInstitution[day.index][0]" (change)="setValuetimeToGoInstitution(day.index, 0)">
- </td>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToGoInstitution[day.index][1]" (change)="setValuetimeToGoInstitution(day.index, 1)">
- </td>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToGoInstitution[day.index][2]" (change)="setValuetimeToGoInstitution(day.index, 2)">
- </td>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToGoInstitution[day.index][3]" (change)="setValuetimeToGoInstitution(day.index, 3)">
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="form-group col-md-6">
- <label>{{ 'Perído de Volta' | translate}}</label>
- <div class="table-responsive">
- <table class="table table-md" #table>
- <thead>
- <tr id="periodosOnibus">
- <th scope="col"></th>
- <th scope="col">{{ 'Manhã' | translate}} - 12h </th>
- <th scope="col">{{ 'Tarde' | translate}} - 17h30</th>
- <th scope="col">{{ 'Noite' | translate}} - 23h40</th>
- <th scope="col">{{ 'Não Vou' | translate}}</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let day of daysOfTheWeek">
- <th scope="row">{{day.name}}</th>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToBackInstitution[day.index][0]" (change)="setValuetimeToBackInstitution(day.index, 0)">
- </td>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToBackInstitution[day.index][1]" (change)="setValuetimeToBackInstitution(day.index, 1)">
- </td>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToBackInstitution[day.index][2]" (change)="setValuetimeToBackInstitution(day.index, 2)">
- </td>
- <td>
- <input class="form-check-input" type="checkbox" [checked]="timeToBackInstitution[day.index][3]" (change)="setValuetimeToBackInstitution(day.index, 3)">
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <div class="row text-center buttonsStep">
- <div class="col-md-6">
- <button class="btn btn-info float-left" type="button" (click)="openVisualizationForms('institution', 'previous')">{{ 'Anterior' | translate }}</button>
- </div>
- <div class="col-md-6">
- <button class="btn btn-info float-right" type="button" (click)="openVisualizationForms('institution', 'next')">{{ 'Próximo' | translate }}</button>
- </div>
- </div>
- </div>
- <!--********************************DOCUMENTOS******************************* -->
- <div *ngIf="visualizationDoc" formGroupName="files">
- <div class="row justify-content-end divStepIndication">
- <div class="col-4 stepIndication">
- {{ 'Passo 4: Importação de Documentos' | translate }}
- <hr>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6">
- <fieldset class="form-group">
- <label for="exampleInputFile">RG</label>
- <input type="file" class="form-control-file" id="inputFileRg" accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
- </fieldset>
- </div>
- <div class="col-md-6">
- <fieldset class="form-group">
- <label for="exampleInputFile">CPF</label>
- <input type="file" class="form-control-file" id="inputFileCpf" accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
- <div id="result">
- </div>
- </fieldset>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6">
- <fieldset class="form-group">
- <label for="exampleInputFile">{{ 'Comprovante de Residência' | translate }}</label>
- <input type="file" class="form-control-file" id="inputFileComprovanteR" accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
- </fieldset>
- </div>
- <div class="col-md-6">
- <fieldset class="form-group">
- <label for="exampleInputFile">{{ 'Comprovante de Matrícula' | translate }}</label>
- <input type="file" class="form-control-file" id="inputFileComprovanteM" accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
- </fieldset>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6">
- <fieldset class="form-group">
- <label for="exampleInputFile">{{ 'Cadastro Municipal' | translate }}</label>
- <input type="file" class="form-control-file" id="inputFileCM" accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
- </fieldset>
- </div>
- <div class="col-md-6">
- <fieldset class="form-group">
- <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
- <input type="file" class="form-control-file" id="inputFileFoto" accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
- </fieldset>
- </div>
- </div>
- <div class="row text-center buttonsStep">
- <div class="col-md-6">
- <button type="button" class="btn btn-info float-left" (click)="openVisualizationForms('documents', 'previous')">{{ 'Anterior' | translate }}</button>
- </div>
- <div class="col-md-6">
- <button type="button" class="btn btn-info float-right" (click)="openVisualizationForms('documents', 'next')">{{ 'Próximo' | translate }}</button>
- </div>
- </div>
- </div>
- <!-- ************************ SALVAR ******************************** -->
- <div *ngIf="visualizationSave">
- <div class="row justify-content-end divStepIndication">
- <div class="col-4 stepIndication">
- {{ 'Passo 5: Salvar' | translate }}
- <hr>
- </div>
- </div>
- <div class="row text-center buttonsStep">
- <div class="col-md-6">
- <button type="button" class="btn btn-info float-left" (click)="openVisualizationForms('save', 'previous')">{{ 'Anterior' | translate }}</button>
- </div>
- <div class="col-md-6">
- <button type="submit" class="btn btn-info float-right">{{ 'CADASTRAR' | translate }}</button>
- </div>
- <!-- [disabled]="(!formNewUser.valid)" -->
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement