sitebuilder
This commit is contained in:
parent
0801abe596
commit
6b70902d46
@ -0,0 +1,52 @@
|
||||
.horizontal {
|
||||
width: 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.horizontal1 {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.middle {
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.middle1 {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
input[type=text], [type=date], select {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.horizontal, .middle, .horizontal1, .middle1 {
|
||||
width: 100%;
|
||||
}
|
||||
}/*# sourceMappingURL=editstepper.component.css.map */
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["editstepper.component.scss","editstepper.component.css"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,YAAA;ACCF;;ADCA;EACE,UAAA;EACA,aAAA;ACEF;;ADAA;EACE,UAAA;EACA,aAAA;ACGF;;ADDA;EACE,UAAA;EACA,aAAA;ACIF;;ADDA;EACE,WAAA;EACA,aAAA;ACIF;;ADDA;EACE,WAAA;EACA,kBAAA;EACA,aAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACIF;;ADFA;EACE,UAAA;ACKF;;ADHA;EACE,kBAAA;ACMF;;ADHA;EACE,WAAA;ACMF;;ADJA;EACA;IACA,WAAA;ECOE;AACF","file":"editstepper.component.css"}
|
||||
@ -0,0 +1,399 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/']">Home</a></li>
|
||||
<li><a href="javascript://">stepper</a></li>
|
||||
</ol>
|
||||
|
||||
<div class="button-bar">
|
||||
|
||||
<span class="spacer"></span>
|
||||
<button class="btn btn-sm btn-primary" (click)="reset()">Reset</button>
|
||||
|
||||
<button class="btn btn-sm btn-primary" (click)="changeToHorizonTal()"
|
||||
*ngIf="layout.direction === 'vertical'">HorizonTal Layout</button>
|
||||
<button class="btn btn-sm btn-primary" (click)="changeToVertical()" *ngIf="layout.direction === 'horizontal'">Vertical
|
||||
Layout</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="clr-row">
|
||||
<div [class]="layout.block1">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 style="text-align: center;"> Customer Information</h3>
|
||||
</div>
|
||||
|
||||
<div class=" card-block container">
|
||||
|
||||
<clr-timeline [clrLayout]="layout.direction">
|
||||
<clr-timeline-step [clrState]="timelineStyle.step0.state">
|
||||
<clr-timeline-step-header>Step 0</clr-timeline-step-header>
|
||||
<clr-timeline-step-title> <span *ngIf="!appToUpdate">Application</span><span *ngIf="appToUpdate"> Update
|
||||
Datagrid</span> </clr-timeline-step-title>
|
||||
<clr-timeline-step-description> <span>Create/Add Customer Information<br> Information Of
|
||||
Customer</span></clr-timeline-step-description>
|
||||
</clr-timeline-step>
|
||||
|
||||
<clr-timeline-step [clrState]="timelineStyle.step1.state">
|
||||
<clr-timeline-step-header>Step 1</clr-timeline-step-header>
|
||||
<clr-timeline-step-title>Document Upload</clr-timeline-step-title>
|
||||
<clr-timeline-step-description> <span>Upload Your <br>
|
||||
Document.</span></clr-timeline-step-description>
|
||||
|
||||
</clr-timeline-step>
|
||||
|
||||
|
||||
<clr-timeline-step [clrState]="timelineStyle.step2.state">
|
||||
<clr-timeline-step-header>Step 2</clr-timeline-step-header>
|
||||
<clr-timeline-step-title>Review And <br>Confirmation</clr-timeline-step-title>
|
||||
<clr-timeline-step-description>
|
||||
Finish .
|
||||
</clr-timeline-step-description>
|
||||
</clr-timeline-step>
|
||||
</clr-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div [class]="layout.block2">
|
||||
|
||||
<!--STEP 0-->
|
||||
<div class="card" *ngIf="timelineStyle.step0.open">
|
||||
<div class="card-header">
|
||||
<h3 style="text-align: center;" *ngIf="!appToUpdate">Customer Information Form</h3>
|
||||
<h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{entryForm.name}}</h3>
|
||||
<div class="container">
|
||||
|
||||
<br />
|
||||
|
||||
<!-- entry form-->
|
||||
<!-- <form #contactForm="ngForm" (ngSubmit)="onSave()"> -->
|
||||
<form [formGroup]="entryForm">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="clr-row">
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Name</label>
|
||||
<input class="clr-input" type="text" formControlName="name" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Description</label>
|
||||
<textarea cols="10" rows="2" formControlName="description" placeholder="Textarea"> </textarea>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Active</label>
|
||||
<input type="checkbox" formControlName="active" clrToggle />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Visa Entry Type</label>
|
||||
<select formControlName="visa_entry_type">
|
||||
<option [value]="null">Choose Visa Entry Type</option>
|
||||
<option *ngFor="let item of selectvisa_entry_type" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Visa Duration</label>
|
||||
<select formControlName="visa_duration">
|
||||
<option [value]="null">Choose Visa Duration</option>
|
||||
<option *ngFor="let item of selectvisa_duration" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Visa Processing</label>
|
||||
<select formControlName="visa_processing">
|
||||
<option [value]="null">Choose Visa Processing</option>
|
||||
<option *ngFor="let item of selectvisa_processing" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Travel start date</label>
|
||||
<input class="clr-input" type="date" formControlName="travel_start_date" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Travel end date</label>
|
||||
<input class="clr-input" type="date" formControlName="travel_end_date" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> passport Number</label>
|
||||
<input class="clr-input" type="number" formControlName="passport_number" />
|
||||
<div *ngIf="submitted && entryForm.controls.passport_number.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.passport_number.errors.required" class="error_mess">
|
||||
*This field
|
||||
is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Passport issue date</label>
|
||||
<input class="clr-input" type="date" formControlName="passport_issue_date" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Passport expiry date</label>
|
||||
<input class="clr-input" type="date" formControlName="passport_expiry_date" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Email</label>
|
||||
<input class="clr-input" type="email" formControlName="email"
|
||||
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
|
||||
<div *ngIf="entryForm.controls['email'].errors" class="error_mess">
|
||||
<div *ngIf="entryForm.controls['email'].hasError('pattern')" class="error_mess">* Email must be a
|
||||
valid
|
||||
email address
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Phone Number</label>
|
||||
<input class="clr-input" type="text" formControlName="phone_number"
|
||||
pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$" />
|
||||
<div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')" class="error_mess">
|
||||
* Please
|
||||
Follow your pattern,+91 Enter 10 digit Mobile Number.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Birth Place</label>
|
||||
<input class="clr-input" type="text" formControlName="birth_place" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Date of Birth</label>
|
||||
<input class="clr-input" type="date" formControlName="date_of_birth" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Gender</label>
|
||||
<select formControlName="gender">
|
||||
<option [value]="null">Choose Gender</option>
|
||||
<option *ngFor="let item of selectgender" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Profession</label>
|
||||
<input class="clr-input" type="text" formControlName="profession" />
|
||||
</div>
|
||||
|
||||
<!-- currency field start -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Visa cost</label>
|
||||
<input type="number" class="clr-input" formControlName="visa_cost"
|
||||
[value]="entryForm.value.visa_cost | number:'1.2-2' | removeCommas">
|
||||
</div>
|
||||
<!-- currency field end -->
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Referrer</label>
|
||||
<select formControlName="referrer">
|
||||
<option [value]="null">Choose Referrer</option>
|
||||
<option *ngFor="let item of selectreferrer" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Nationality</label>
|
||||
<select formControlName="nationality">
|
||||
<option [value]="null">Choose Nationality</option>
|
||||
<option *ngFor="let item of selectnationality" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Supplier</label>
|
||||
<select formControlName="supplier">
|
||||
<option [value]="null">Choose Supplier</option>
|
||||
<option *ngFor="let item of selectsupplier" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Agent</label>
|
||||
<select formControlName="agent">
|
||||
<option [value]="null">Choose Agent</option>
|
||||
<option *ngFor="let item of selectagent" [value]="item.id">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="clr-row">
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<br>
|
||||
<div class="button">
|
||||
<button type="submit" class="btn btn-primary" (click)="onSave()">Submit</button>
|
||||
|
||||
<button type="button" class="btn btn-primary"
|
||||
(click)="this.timelineStyle.step0 ={ state: 'success', open: false };this.timelineStyle.step1 ={ state: 'current', open: true }; this.current()">Complete</button>
|
||||
<button type="button" class="btn btn-primary"
|
||||
(click)=" this.timelineStyle.step0 ={state:'current',open:false};this.timelineStyle.step1 ={state:'not-started',open:true}">Next</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--STEP 1-->
|
||||
<div class="card" *ngIf="timelineStyle.step1.open">
|
||||
<div class="card-header">
|
||||
<h3 style="text-align: center;" *ngIf="!appToUpdate">File Upload</h3>
|
||||
<div class="container">
|
||||
|
||||
<!-- File upload form -->
|
||||
<form (ngSubmit)="onFileUpload()" #uploadForm="ngForm" enctype="multipart/form-data">
|
||||
<!-- <div class="clr-row">
|
||||
<div class="clr-col-12">
|
||||
<label for="fileInput">Choose File<span class="required-field">*</span></label>
|
||||
<input type="file" id="fileInput" (change)="onFileSelected($event)" required class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-row" *ngIf="selectedFile">
|
||||
<div class="clr-col-12 mt-2">
|
||||
<strong>Selected File:</strong> {{ selectedFile.name }}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<h6> List of Uploaded file</h6>
|
||||
|
||||
<div class="clr-row" style="margin-top: 10px;">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th> File</th>
|
||||
<th>File Name</th>
|
||||
<th>Preview</th>
|
||||
<th>Cancel</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let attach of FileDatafileupload_field; let i=index">
|
||||
<td style="width: 70px;"><input type="text" class="clr-input" value={{i+1}} [readonly]="true"> </td>
|
||||
<td><input type="file" (change)="onFileChangedfileupload_field($event, i)"
|
||||
accept="application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /><!--accept=".pdf,.doc,.docx,.jpg,.msg"-->
|
||||
</td>
|
||||
<td>{{attach.uploadedfile_name}}</td>
|
||||
<td> <img [src]="attach.filePreview" alt="File Preview" [ngModelOptions]="{standalone: true}"
|
||||
name="filePreview" width="100px" height="100px"></td>
|
||||
<td>
|
||||
<a (click)="deleteRowfileupload_field(i)">
|
||||
<clr-icon shape="trash" class="is-error"></clr-icon>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
<button type="button" class="btn btn-primary button1" style="margin-left: 20px;"
|
||||
(click)="onAddLinesfileupload_field()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
</button>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="button">
|
||||
<button type="submit" class="btn btn-success" [disabled]="!selectedfileupload_field">Upload</button>
|
||||
|
||||
<button type="button" class="btn btn-primary"
|
||||
(click)="timelineStyle.step1 = { state: 'success', open: false }; timelineStyle.step2 = { state: 'current', open: true }">Complete</button>
|
||||
|
||||
<button class="btn btn-primary-outline"
|
||||
(click)="timelineStyle.step0 = { state: 'current', open: true }; timelineStyle.step1 = { state: 'not-started', open: false }">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--STEP 2-->
|
||||
<div class="card" *ngIf="timelineStyle.step2.open">
|
||||
<div class="card-header">
|
||||
<h3 style="text-align: center;" *ngIf="!appToUpdate">Customer Information Review And Confirmation</h3>
|
||||
<div class="container">
|
||||
|
||||
<!-- Customer Info -->
|
||||
<div class="clr-row mb-3">
|
||||
<div class="clr-col-12">
|
||||
<h5>Customer Details:</h5>
|
||||
<p><strong>Name:</strong> {{ rowSelected.name }}</p>
|
||||
<p><strong>Phone:</strong> {{ rowSelected.phone }}</p>
|
||||
<p><strong>Email:</strong> {{ rowSelected.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uploaded File -->
|
||||
<div class="clr-row mb-3" *ngIf="uploadedFileName">
|
||||
<div class="clr-col-12">
|
||||
<h5>Uploaded Document:</h5>
|
||||
<p>{{ uploadedFileName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button">
|
||||
<button class="btn btn-primary-outline"
|
||||
(click)="timelineStyle.step1 = { state: 'current', open: true }; timelineStyle.step2 = { state: 'not-started', open: false }">Back</button>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
(click)="timelineStyle.step2 = { state: 'success', open: false }; current(); alert('Process Finished Successfully!')">Finish</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
.horizontal{
|
||||
width: 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
.horizontal1{
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
}
|
||||
.middle{
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
}
|
||||
.middle1{
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.full{
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
input[type=text],[type=date], select {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.required-field{
|
||||
color: red;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.center{
|
||||
color: blue;
|
||||
}
|
||||
@media (max-width: 600px){
|
||||
.horizontal,.middle,.horizontal1,.middle1 {
|
||||
width: 100%;
|
||||
}}
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditstepperComponent } from './editstepper.component';
|
||||
|
||||
describe('EditstepperComponent', () => {
|
||||
let component: EditstepperComponent;
|
||||
let fixture: ComponentFixture<EditstepperComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ EditstepperComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditstepperComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,369 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { College } from 'src/app/models/fnd/play';
|
||||
import { student } from 'src/app/models/fnd/Studentadd';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { ValidationError } from 'src/app/models/fnd/ValidationError';
|
||||
import { Visa_applicationservice } from '../Visa_application.service';
|
||||
@Component({
|
||||
selector: 'app-editstepper',
|
||||
templateUrl: './editstepper.component.html',
|
||||
styleUrls: ['./editstepper.component.scss']
|
||||
})
|
||||
export class EditstepperComponent implements OnInit {
|
||||
updated = false;
|
||||
// college: College;
|
||||
stringJson: any;
|
||||
customerId: string = '';
|
||||
selectedFile!: File;
|
||||
fileName = '';
|
||||
|
||||
id: number;
|
||||
errorFields: ValidationError[] = [];
|
||||
appToUpdate: College = null;
|
||||
trained = false;
|
||||
|
||||
json: string = "";
|
||||
luisApp =
|
||||
{
|
||||
name: '',
|
||||
created: 1,
|
||||
trained: 1,
|
||||
tested: 1,
|
||||
updated: 1,
|
||||
published: 1,
|
||||
|
||||
};
|
||||
// Layout direction changing
|
||||
layout = {
|
||||
direction: "vertical",
|
||||
block1: "clr-col-lg-3 clr-col-12 ",
|
||||
block2: "clr-col-lg-9 clr-col-12 ",
|
||||
};
|
||||
|
||||
timelineStyle = {
|
||||
step0: { state: "current", open: true, failed: false },
|
||||
step1: { state: "not-started", open: false, failed: false },
|
||||
step2: { state: "not-started", open: false, failed: false },
|
||||
};
|
||||
|
||||
|
||||
public entryForm: FormGroup;
|
||||
submitted = false;
|
||||
rowSelected: any = {};
|
||||
modalcomplete = false;
|
||||
|
||||
constructor(private mainService: Visa_applicationservice,
|
||||
|
||||
private _fb: FormBuilder,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private toastr: ToastrService,) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// this.college = new College();
|
||||
this.id = this.route.snapshot.params["id"];
|
||||
console.log("update with id = ", this.id);
|
||||
|
||||
this.entryForm = this._fb.group({
|
||||
name: [null],
|
||||
|
||||
description: [null],
|
||||
|
||||
active: [false],
|
||||
|
||||
visa_entry_type: [null],
|
||||
|
||||
visa_duration: [null],
|
||||
|
||||
visa_processing: [null],
|
||||
|
||||
travel_start_date: [null],
|
||||
|
||||
travel_end_date: [null],
|
||||
|
||||
passport_number: [null, [Validators.required]],
|
||||
|
||||
passport_issue_date: [null],
|
||||
|
||||
passport_expiry_date: [null],
|
||||
|
||||
email: [null],
|
||||
|
||||
phone_number: ['+91'],
|
||||
|
||||
birth_place: [null],
|
||||
|
||||
date_of_birth: [null],
|
||||
|
||||
gender: [null],
|
||||
|
||||
profession: [null],
|
||||
|
||||
visa_cost: [null, { updateOn: 'blur' }],
|
||||
|
||||
referrer: [null],
|
||||
|
||||
nationality: [null],
|
||||
|
||||
supplier: [null],
|
||||
|
||||
agent: [null],
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// Change to Horizontal Layout
|
||||
changeToHorizonTal() {
|
||||
this.layout = {
|
||||
direction: "horizontal",
|
||||
block1: "clr-col-lg-12 clr-col-12 height container",
|
||||
block2: "clr-col-lg-12 clr-col-12 container",
|
||||
}
|
||||
}
|
||||
// Change to Vertical Layout
|
||||
changeToVertical() {
|
||||
this.layout = {
|
||||
direction: "vertical",
|
||||
block1: "clr-col-lg-3 clr-col-12 ",
|
||||
block2: "clr-col-lg-9 clr-col-12 ",
|
||||
}
|
||||
}
|
||||
getById(id: number) {
|
||||
// this.mainService.getBywfId(id).subscribe(
|
||||
// (data) => {
|
||||
// this.college = data;
|
||||
// },
|
||||
// (err) => {
|
||||
// console.log(err);
|
||||
// }
|
||||
// );
|
||||
// this.currentservice.getById(id).subscribe(
|
||||
// (data) => {
|
||||
// this.student = data;
|
||||
|
||||
// var current = JSON.parse(data.current_json);
|
||||
// this.timelineStyle = current;
|
||||
// console.log("data", data);
|
||||
// },
|
||||
// (err) => {
|
||||
// console.log(err);
|
||||
// }
|
||||
// );
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
onSave() {
|
||||
console.log('Form Submitted:', this.entryForm.value);
|
||||
this.submitted = true;
|
||||
if (this.entryForm.invalid) {
|
||||
|
||||
console.log('invalid form ..');
|
||||
// Log all form errors
|
||||
Object.keys(this.entryForm.controls).forEach(field => {
|
||||
const control = this.entryForm.get(field);
|
||||
if (control && control.invalid) {
|
||||
console.log(`Error in field: ${field}`, control.errors);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
return;
|
||||
}
|
||||
this.onCreate();
|
||||
}
|
||||
|
||||
onCreate() {
|
||||
this.mainService.create(this.entryForm.value).subscribe(
|
||||
(data) => {
|
||||
console.log('adding data ', data);
|
||||
this.customerId = data.id;
|
||||
|
||||
console.log('id is ', this.customerId);
|
||||
|
||||
|
||||
if (data || data.status >= 200 && data.status <= 299) {
|
||||
this.toastr.success("Added Successfully");
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
if (error.status >= 200 && error.status <= 299) {
|
||||
// this.toastr.success("Added Succesfully");
|
||||
}
|
||||
if (error.status >= 400 && error.status <= 499) {
|
||||
this.toastr.error("Not Added");
|
||||
}
|
||||
if (error.status >= 500 && error.status <= 599) {
|
||||
this.toastr.error("Not Added");
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
onnext() {
|
||||
this.router.navigate(["../../main/workflow"], { relativeTo: this.route });
|
||||
}
|
||||
reset() {
|
||||
this.json = "";
|
||||
this.luisApp =
|
||||
{
|
||||
name: '',
|
||||
trained: 1,
|
||||
tested: 1,
|
||||
updated: 1,
|
||||
published: 1,
|
||||
|
||||
|
||||
created: 1,
|
||||
|
||||
};
|
||||
|
||||
this.timelineStyle = {
|
||||
step0: { state: "current", open: true, failed: false },
|
||||
step1: { state: "not-started", open: false, failed: false },
|
||||
step2: { state: "not-started", open: false, failed: false },
|
||||
|
||||
};
|
||||
}
|
||||
current() {
|
||||
console.log(this.timelineStyle)
|
||||
this.stringJson = JSON.stringify(this.timelineStyle);
|
||||
console.log("String json object :", this.stringJson);
|
||||
|
||||
// this.mainService.update(this.id, this.college, this.stringJson).subscribe(
|
||||
// (data) => {
|
||||
// console.log(data);
|
||||
// },
|
||||
|
||||
// );
|
||||
}
|
||||
|
||||
onFileUpload(): void {
|
||||
|
||||
for (let i = 0; i < this.selectedfileupload_field.length; i++) {
|
||||
|
||||
this.mainService.uploadDocument(this.customerId, 'visa order', this.selectedfileupload_field[i]).subscribe(uploaddata => {
|
||||
console.log(uploaddata);
|
||||
|
||||
console.log('id is ', this.customerId);
|
||||
|
||||
|
||||
if (uploaddata || uploaddata.status >= 200 && uploaddata.status <= 299) {
|
||||
// alert('File uploaded successfully!');
|
||||
this.toastr.success("File uploaded successfully!");
|
||||
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
if (error.status >= 200 && error.status <= 299) {
|
||||
// this.toastr.success("Added Succesfully");
|
||||
}
|
||||
if (error.status >= 400 && error.status <= 499) {
|
||||
this.toastr.error("Not Added");
|
||||
}
|
||||
if (error.status >= 500 && error.status <= 599) {
|
||||
this.toastr.error("Not Added");
|
||||
}
|
||||
}
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
this.selectedFile = null;
|
||||
}
|
||||
|
||||
|
||||
filePreviewfileupload_field: string | ArrayBuffer | null = null;
|
||||
FileDatafileupload_field: { uploadedfile_name?: any, filePreview: string | ArrayBuffer | null }[] = []; // Initialize the array
|
||||
selectedfileupload_field: File[] = [];
|
||||
public onFileChangedfileupload_field(event, index) {
|
||||
const files = event.target.files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
this.FileDatafileupload_field[index].uploadedfile_name = files[i].name;
|
||||
this.selectedfileupload_field.push(files[i]);
|
||||
if (file.type.startsWith('file/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// Set the file preview source
|
||||
const filePreview = e.target?.result as string;
|
||||
this.FileDatafileupload_field[index] = {
|
||||
...this.FileDatafileupload_field[index], // Preserve existing properties
|
||||
filePreview: filePreview // Update only the filePreview property
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
onAddLinesfileupload_field() {
|
||||
this.FileDatafileupload_field.push({
|
||||
uploadedfile_name: "",
|
||||
filePreview: "",
|
||||
// f3: "",
|
||||
});
|
||||
}
|
||||
deleteRowfileupload_field(index, id) {
|
||||
this.FileDatafileupload_field.splice(index, 1);
|
||||
|
||||
if (id) {
|
||||
this.mainService.uploadfiledeletefileupload_field(id).subscribe(data => {
|
||||
console.log(data);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
isValidemail(email: string): boolean {
|
||||
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
return emailPattern.test(email);
|
||||
}
|
||||
|
||||
isValidPhone_number(phone: string): boolean {
|
||||
const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
|
||||
return phonePattern.test(phone);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
updategender(gender: string): void {
|
||||
this.entryForm.get('gender').setValue(gender);
|
||||
}
|
||||
|
||||
updategenderEdit(gender: string): void { this.rowSelected.gender = gender }
|
||||
|
||||
|
||||
|
||||
|
||||
//currency field start
|
||||
formatCurrencyvisa_cost() {
|
||||
// Format the currency with two decimal places
|
||||
this.rowSelected.visa_cost = Number(this.rowSelected.visa_cost).toFixed(2);
|
||||
// Remove commas from the formatted currency
|
||||
this.rowSelected.visa_cost = this.rowSelected.visa_cost?.replace(/,/g, '');
|
||||
}
|
||||
//currency field end
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
export class College {
|
||||
public studentid: number;
|
||||
public wf_instance_id:number;
|
||||
public studentname: string;
|
||||
public department: string;
|
||||
public joiningDate: string;
|
||||
public phone: number;
|
||||
public emailId:string;
|
||||
}
|
||||
@ -12,7 +12,10 @@
|
||||
shape="bars"></clr-icon>
|
||||
</button>
|
||||
<!-- button -->
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd(product)">
|
||||
<!-- <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
|
||||
<clr-icon shape="plus"></clr-icon>ADD
|
||||
</button> -->
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>ADD
|
||||
</button>
|
||||
|
||||
@ -349,7 +352,8 @@
|
||||
[style.color]="item.conditionValue == app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
|
||||
<img id="filePreview" [src]="item.imageURL" alt="File Preview"
|
||||
[style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
|
||||
[style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"></div>
|
||||
[style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'">
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
@ -371,90 +375,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- // EDIT DATA......... -->
|
||||
<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Visa Application <!--update button -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
@ -698,49 +622,6 @@
|
||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Visa Application
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- aeroplane icon -->
|
||||
|
||||
<a *ngIf="userrole.includes('ROLE_ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
|
||||
@ -944,51 +825,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- form code start -->
|
||||
<div *ngIf="checkFormCode">
|
||||
<h4 style="font-weight: 300;display: inline;">Extension</h4>
|
||||
|
||||
@ -7,7 +7,7 @@ import { ExtensionService } from 'src/app/services/fnd/extension.service';
|
||||
import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
|
||||
import { Visa_applicationcardvariable } from './Visa_application_cardvariable';
|
||||
import { UserInfoService } from 'src/app/services/user-info.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
declare var JsBarcode: any;
|
||||
@Component({
|
||||
selector: 'app-Visa_application',
|
||||
@ -56,6 +56,8 @@ export class Visa_applicationComponent implements OnInit {
|
||||
private toastr: ToastrService,
|
||||
private _fb: FormBuilder,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
|
||||
|
||||
) { }
|
||||
// component button
|
||||
@ -157,49 +159,6 @@ export class Visa_applicationComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
error;
|
||||
getData() {
|
||||
this.mainService.getAll().subscribe((data) => {
|
||||
@ -387,8 +346,12 @@ export class Visa_applicationComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
}
|
||||
goToAdd(row) {
|
||||
this.modalAdd = true; this.submitted = false;
|
||||
// goToAdd(row) {
|
||||
// this.modalAdd = true; this.submitted = false;
|
||||
// }
|
||||
|
||||
goToAdd() {
|
||||
this.router.navigate(["../stepper"], { relativeTo: this.route });
|
||||
}
|
||||
submitted = false;
|
||||
onSubmit() {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from "rxjs";
|
||||
import { delay, Observable, of } from "rxjs";
|
||||
import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
|
||||
import { ApiRequestService } from "src/app/services/api/api-request.service";
|
||||
import { environment } from 'src/environments/environment';
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class Visa_applicationservice{
|
||||
private baseURL = "Visa_application/Visa_application" ; constructor(
|
||||
export class Visa_applicationservice {
|
||||
private baseURL = "Visa_application/Visa_application"; constructor(
|
||||
private http: HttpClient,
|
||||
private apiRequest: ApiRequestService,
|
||||
) { }
|
||||
@ -31,55 +31,60 @@ export class Visa_applicationservice{
|
||||
}
|
||||
|
||||
|
||||
getAllvisa_entry_type(): Observable<any> {
|
||||
return this.apiRequest.get("Visa_entry_ListFilter1/Visa_entry_ListFilter1");
|
||||
}
|
||||
|
||||
getAllvisa_duration(): Observable<any> {
|
||||
return this.apiRequest.get("Visa_duration_ListFilter1/Visa_duration_ListFilter1");
|
||||
}
|
||||
|
||||
getAllvisa_processing(): Observable<any> {
|
||||
return this.apiRequest.get("Visa_processing_ListFilter1/Visa_processing_ListFilter1");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
getAllvisa_entry_type(): Observable<any> {
|
||||
return this.apiRequest.get("Visa_entry_ListFilter1/Visa_entry_ListFilter1"); }
|
||||
getAllgender(): Observable<any> {
|
||||
return this.apiRequest.get("Gender_ListFilter1/Gender_ListFilter1");
|
||||
}
|
||||
|
||||
getAllvisa_duration(): Observable<any> {
|
||||
return this.apiRequest.get("Visa_duration_ListFilter1/Visa_duration_ListFilter1"); }
|
||||
getAllreferrer(): Observable<any> {
|
||||
return this.apiRequest.get("Referrer_ListFilter1/Referrer_ListFilter1");
|
||||
}
|
||||
|
||||
getAllvisa_processing(): Observable<any> {
|
||||
return this.apiRequest.get("Visa_processing_ListFilter1/Visa_processing_ListFilter1"); }
|
||||
getAllnationality(): Observable<any> {
|
||||
return this.apiRequest.get("Nationality_ListFilter1/Nationality_ListFilter1");
|
||||
}
|
||||
|
||||
getAllsupplier(): Observable<any> {
|
||||
return this.apiRequest.get("Supplier_ListFilter1/Supplier_ListFilter1");
|
||||
}
|
||||
|
||||
getAllagent(): Observable<any> {
|
||||
return this.apiRequest.get("Agent_ListFilter1/Agent_ListFilter1");
|
||||
}
|
||||
|
||||
|
||||
uploadDocument(ref: any, Forma: any, file: any): Observable<any> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
return this.apiRequest.postFormData(`FileUpload/Uploadeddocs/${ref}/${Forma}`, formData);
|
||||
}
|
||||
|
||||
uploadfilegetByIdfileupload_field(ref: any, Forma: any,): Observable<any> {
|
||||
return this.apiRequest.get(`FileUpload/Uploadeddocs/${ref}/${Forma}`);
|
||||
}
|
||||
|
||||
|
||||
uploadfiledeletefileupload_field(id: number): Observable<any> {
|
||||
return this.apiRequest.delete(`FileUpload/Uploadeddocs/${id}`);
|
||||
}
|
||||
finalizeOrder(id: string) {
|
||||
// return this.http.post(`/api/customer/${id}/finalize`, {});
|
||||
return of({ success: true }).pipe(delay(1000));
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
getAllgender(): Observable<any> {
|
||||
return this.apiRequest.get("Gender_ListFilter1/Gender_ListFilter1"); }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
getAllreferrer(): Observable<any> {
|
||||
return this.apiRequest.get("Referrer_ListFilter1/Referrer_ListFilter1"); }
|
||||
|
||||
getAllnationality(): Observable<any> {
|
||||
return this.apiRequest.get("Nationality_ListFilter1/Nationality_ListFilter1"); }
|
||||
|
||||
getAllsupplier(): Observable<any> {
|
||||
return this.apiRequest.get("Supplier_ListFilter1/Supplier_ListFilter1"); }
|
||||
|
||||
getAllagent(): Observable<any> {
|
||||
return this.apiRequest.get("Agent_ListFilter1/Agent_ListFilter1"); }
|
||||
|
||||
// updateaction
|
||||
}
|
||||
// updateaction
|
||||
}
|
||||
@ -15,6 +15,9 @@
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd(product)">
|
||||
<clr-icon shape="plus"></clr-icon>ADD
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="!isCardview"> <!-- GET ALL --> <clr-datagrid [clrDgLoading]="loading"
|
||||
|
||||
@ -197,8 +197,9 @@ export class SiteTreeComponent implements OnInit {
|
||||
goToAdd(row) {
|
||||
this.modalAdd = true; this.submitted = false;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
submitted = false;
|
||||
onSubmit() {
|
||||
console.log(this.entryForm.value);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from "rxjs";
|
||||
import { delay, Observable, of } from "rxjs";
|
||||
import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
|
||||
import { ApiRequestService } from "src/app/services/api/api-request.service";
|
||||
import { environment } from 'src/environments/environment';
|
||||
@ -42,7 +42,7 @@ export class SiteTreeservice {
|
||||
return this.http.get(_http);
|
||||
}
|
||||
|
||||
generateJson(data: any): Observable<any> {
|
||||
callLlm(data: any): Observable<any> {
|
||||
return this.http.post(`${this.nodeURL}/chatMemory`, data);
|
||||
}
|
||||
|
||||
@ -57,6 +57,5 @@ export class SiteTreeservice {
|
||||
|
||||
|
||||
|
||||
|
||||
// updateaction
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -1,199 +1,174 @@
|
||||
<!-- <div class="node-card">
|
||||
<h3>{{ node.title }}</h3>
|
||||
<div class="section" *ngFor="let sec of getSections(node.data)">
|
||||
<h4>{{ sec.title }}</h4>
|
||||
<p>{{ sec.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="children-container" *ngIf="getChildren(node.data).length">
|
||||
<svg class="connector-line">
|
||||
<path d="M 100 0 C 150 50, 150 50, 200 100" stroke="gray" fill="transparent"/>
|
||||
</svg>
|
||||
<div class="children">
|
||||
<app-tree-node *ngFor="let child of getChildren(node.data)" [node]="child"></app-tree-node>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="visual-editor-container">
|
||||
<!-- Header Toolbar -->
|
||||
<!-- <div class="editor-header">
|
||||
<h2>Visual Site Structure Editor</h2>
|
||||
<div class="actions">
|
||||
<button class="btn secondary" (click)="resetEditor()">Reset</button>
|
||||
<button class="btn primary" *ngIf="rootPage" (click)="downloadJson()">Export JSON</button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- JSON Input Form -->
|
||||
<!-- <div class="json-input-container" *ngIf="showJsonInput">
|
||||
<div class="card">
|
||||
<h3>Import Site Structure</h3>
|
||||
<textarea class="json-textarea" [(ngModel)]="jsonInput" placeholder="Paste your JSON here..."></textarea>
|
||||
<div class="error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
|
||||
<button class="btn primary" (click)="parseJsonInput()">Load Structure</button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Visual Editor -->
|
||||
<div class="visual-editor" *ngIf="rootPage">
|
||||
<div class="sitemap-container">
|
||||
<!-- Root Page -->
|
||||
<div class="sitemap-row">
|
||||
<div class="sitemap-node root-node">
|
||||
<div class="node-header" [class.selected]="selectedPage === rootPage" (click)="selectPage(rootPage)">
|
||||
<i class="fas fa-sitemap"></i> Primary Sitemap
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- First Level - Home -->
|
||||
<div class="sitemap-row" *ngIf="rootPage.children && rootPage.children.length > 0">
|
||||
<div class="connector-vertical"></div>
|
||||
<div class="sitemap-node" *ngFor="let homePage of rootPage.children"
|
||||
[class.selected]="selectedPage === homePage"
|
||||
(click)="selectPage(homePage)">
|
||||
<div class="node-header">
|
||||
<i class="fas fa-home"></i> {{ homePage.name }}
|
||||
</div>
|
||||
<div class="node-content">
|
||||
<div class="section-item" *ngFor="let section of homePage.sections"
|
||||
[class.selected]="selectedSection === section"
|
||||
(click)="selectSection(section); $event.stopPropagation()">
|
||||
<div class="section-title">{{ section.type }}</div>
|
||||
<div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Level - Children Pages -->
|
||||
<ng-container *ngIf="getHomePageFromRoot() as homePage">
|
||||
<div class="sitemap-row multi-node-row" *ngIf="homePage?.children?.length">
|
||||
<div class="connector-horizontal"></div>
|
||||
<div class="sitemap-node child-node" *ngFor="let childPage of homePage.children"
|
||||
[class.selected]="selectedPage === childPage"
|
||||
(click)="selectPage(childPage)">
|
||||
<div class="connector-vertical"></div>
|
||||
<div class="node-header">
|
||||
<i class="fas fa-file"></i> {{ childPage.name }}
|
||||
</div>
|
||||
<div class="node-content">
|
||||
<div class="section-item" *ngFor="let section of childPage.sections"
|
||||
[class.selected]="selectedSection === section"
|
||||
(click)="selectSection(section); $event.stopPropagation()">
|
||||
<div class="section-title">{{ section.type }}</div>
|
||||
<div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- closing .sitemap-node -->
|
||||
</div> <!-- closing .sitemap-row -->
|
||||
|
||||
<!-- Third Level - Grandchildren Pages -->
|
||||
<ng-container *ngFor="let childPage of homePage.children">
|
||||
<div class="sitemap-row multi-node-row" *ngIf="childPage.children && childPage.children.length > 0">
|
||||
<div class="connector-sub"></div>
|
||||
<div class="sitemap-node grandchild-node" *ngFor="let grandchildPage of childPage.children"
|
||||
[class.selected]="selectedPage === grandchildPage"
|
||||
(click)="selectPage(grandchildPage)">
|
||||
<div class="connector-vertical"></div>
|
||||
<div class="node-header">
|
||||
<i class="fas fa-file-alt"></i> {{ grandchildPage.name }}
|
||||
</div>
|
||||
<div class="node-content">
|
||||
<div class="section-item" *ngFor="let section of grandchildPage.sections"
|
||||
[class.selected]="selectedSection === section"
|
||||
(click)="selectSection(section); $event.stopPropagation()">
|
||||
<div class="section-title">{{ section.type }}</div>
|
||||
<div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
|
||||
<div class="visual-editor-container">
|
||||
<div class="fixed-grid-container">
|
||||
<div class="editor-content">
|
||||
<div #canvasContainer class="canvas-container">
|
||||
<div class="canvas-boundary">
|
||||
<div class="sitemap-grid" [style.transform]="getTotalTransform()">
|
||||
<div class="grid-background"></div>
|
||||
<div class="tree-grid">
|
||||
<div class="tree-row" *ngIf="rootPage">
|
||||
<div class="node-grid">
|
||||
<div class="node-card home-node" *ngIf="rootPage.children && rootPage.children.length > 0">
|
||||
<div class="node-header">
|
||||
<i class="node-icon fas fa-sitemap"></i>
|
||||
<span class="node-title">{{ rootPage.name }}</span>
|
||||
</div>
|
||||
<div class="node-actions">
|
||||
<button class="node-action-btn" title="Add Page" (click)="showAddChildPageModal(rootPage)">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="children-container" *ngIf="rootPage.children && rootPage.children.length > 0">
|
||||
<ng-container *ngFor="let page of rootPage.children">
|
||||
<ng-container *ngTemplateOutlet="pageTemplate; context: { $implicit: page }"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- closing .sitemap-node -->
|
||||
</div> <!-- closing .sitemap-row -->
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Property Editor Panel -->
|
||||
<div class="properties-panel" *ngIf="editMode">
|
||||
<div class="panel-header">
|
||||
<h3>{{ editMode === 'page' ? 'Page Properties' : 'Section Properties' }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- Page Properties -->
|
||||
<div class="property-form" *ngIf="editMode === 'page' && selectedPage">
|
||||
<div class="form-group">
|
||||
<label>Page Name</label>
|
||||
<input type="text" [(ngModel)]="selectedPage.name" (change)="updatePage()">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn primary" (click)="updatePage()">Update</button>
|
||||
<button class="btn secondary" *ngIf="selectedPage !== rootPage && getParentPage(selectedPage)"
|
||||
(click)="deletePage(selectedPage, getParentPage(selectedPage))">Delete</button>
|
||||
<button class="btn secondary" *ngIf="canAddChildPage(selectedPage)"
|
||||
(click)="showAddChildForm = true">Add Child Page</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group" *ngIf="showAddChildForm">
|
||||
<label>New Child Page Name</label>
|
||||
<input type="text" [(ngModel)]="newPageName">
|
||||
<div class="form-actions">
|
||||
<button class="btn primary" [disabled]="!newPageName"
|
||||
(click)="addChildPage(selectedPage); showAddChildForm = false">Add</button>
|
||||
<button class="btn secondary" (click)="showAddChildForm = false">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Add Section</label>
|
||||
<div class="section-type-input">
|
||||
<input type="text" [(ngModel)]="newSectionType" placeholder="Section type...">
|
||||
<button class="btn sm primary" (click)="addSectionType()">Add Type</button>
|
||||
</div>
|
||||
<select [(ngModel)]="newSectionType" *ngIf="availableSectionTypes.length > 0">
|
||||
<option value="">Select Section Type</option>
|
||||
<option *ngFor="let type of availableSectionTypes" [value]="type">{{ type }}</option>
|
||||
</select>
|
||||
<textarea *ngIf="newSectionType" [(ngModel)]="newSectionContent" placeholder="Section content..."></textarea>
|
||||
<button class="btn primary" [disabled]="!newSectionType"
|
||||
(click)="addSectionToPage(selectedPage)">Add Section</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section Properties -->
|
||||
<div class="property-form" *ngIf="editMode === 'section' && selectedSection && selectedPage">
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button class="control-btn" (click)="zoomIn()" title="Zoom In">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<button class="control-btn" (click)="zoomOut()" title="Zoom Out">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button class="control-btn" (click)="resetZoom()" title="Reset Zoom">
|
||||
<i class="fas fa-expand"></i>
|
||||
</button>
|
||||
<button class="control-btn" (click)="saveTreeData()" title="Save">
|
||||
<i class="fas fa-save"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-form" *ngIf="editMode">
|
||||
<div *ngIf="editMode === 'section' && selectedSection && selectedPage">
|
||||
<div class="editor-title">Edit Section: {{ selectedSection.type }}</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Content</label>
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
[(ngModel)]="selectedSection.content"></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-secondary" (click)="cancelEdit()">Cancel</button>
|
||||
<button class="btn btn-primary" (click)="saveEdit()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="offcanvas" [class.show]="showOffcanvas">
|
||||
<div class="offcanvas-header">
|
||||
<div class="offcanvas-title">Add Section</div>
|
||||
<button class="close-btn" (click)="closeOffcanvas()">×</button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="section-template" *ngFor="let template of sectionTemplates" (click)="addSectionFromTemplate(template)">
|
||||
<div class="section-template-title">{{ template.type }}</div>
|
||||
<div class="section-template-desc">{{ template.description }}</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 20px;">
|
||||
<h4>Custom Section</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Section Type</label>
|
||||
<input type="text" class="form-control" [(ngModel)]="customSectionType" placeholder="Enter section type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Content</label>
|
||||
<textarea class="form-control" [(ngModel)]="customSectionContent" rows="4" placeholder="Enter content"></textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary" [disabled]="!customSectionType" (click)="addCustomSection()">
|
||||
Add Custom Section
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" [class.show]="showAddChildModal">
|
||||
<div class="modal-backdrop" *ngIf="showAddChildModal" (click)="closeAddChildModal()"></div>
|
||||
<div class="modal-dialog" *ngIf="showAddChildModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Add Child Page</h5>
|
||||
<button type="button" class="close-btn" (click)="closeAddChildModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Section Type</label>
|
||||
<div class="section-type-input">
|
||||
<input type="text" [(ngModel)]="selectedSection.type" (change)="updateSection()">
|
||||
<select [(ngModel)]="selectedSection.type" (change)="updateSection()" *ngIf="availableSectionTypes.length > 0">
|
||||
<option *ngFor="let type of availableSectionTypes" [value]="type">{{ type }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Content</label>
|
||||
<textarea rows="8" [(ngModel)]="selectedSection.content" (change)="updateSection()"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn primary" (click)="updateSection()">Update</button>
|
||||
<button class="btn secondary" (click)="deleteSection(selectedSection, selectedPage)">Delete</button>
|
||||
<label class="form-label">Page Name</label>
|
||||
<input type="text" class="form-control" [(ngModel)]="newPageName" placeholder="Enter page name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="closeAddChildModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" [disabled]="!newPageName" (click)="addChildPage()">Add Page</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live JSON Output -->
|
||||
<!-- <div class="json-output-container" *ngIf="rootPage && currentOutputJson">
|
||||
<div class="card">
|
||||
<h3>Current JSON Structure</h3>
|
||||
<pre class="json-output">{{ currentOutputJson }}</pre>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="loading-overlay" *ngIf="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="loading-text">Processing...</div>
|
||||
</div>
|
||||
<ng-template #pageTemplate let-page>
|
||||
<div class="node-container"
|
||||
draggable="true"
|
||||
(dragstart)="onPageDragStart(page)"
|
||||
(dragend)="onPageDragEnd()"
|
||||
(dragover)="$event.preventDefault()"
|
||||
(drop)="onPageDrop(page); $event.preventDefault()">
|
||||
<div class="connection-line" *ngIf="page.parent && page.parent !== rootPage"></div>
|
||||
<div class="node-card"
|
||||
[class.selected]="selectedPage === page"
|
||||
(click)="selectPage(page)">
|
||||
<div class="node-header">
|
||||
<i class="node-icon" [class]="getNodeIcon(page)"></i>
|
||||
<span class="node-title">{{ page.name }}</span>
|
||||
</div>
|
||||
<div class="sections-container" cdkDropList [cdkDropListData]="page.sections">
|
||||
<!-- Update the section card template within the #pageTemplate -->
|
||||
<!-- Section card with improved hover button placement -->
|
||||
<div class="section-card" *ngFor="let section of page.sections; let i = index"
|
||||
cdkDrag
|
||||
(click)="selectSection(section); $event.stopPropagation()">
|
||||
<div class="section-title">{{ section.type }}</div>
|
||||
<div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
|
||||
<div class="section-actions">
|
||||
<button class="section-action-btn" title="Edit Section" (click)="editSection(section, $event)">
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button class="section-action-btn" title="Delete Section" (click)="deleteSection(section, page, $event)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Repositioned add button that appears on hover -->
|
||||
<div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
|
||||
<i class="fas fa-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="add-section-btn" (click)="openSectionOffcanvas(page); $event.stopPropagation()">
|
||||
<i class="fas fa-plus"></i> Add Section
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="node-actions">
|
||||
<button class="node-action-btn" title="Add Child Page" (click)="showAddChildPageModal(page); $event.stopPropagation()">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<button class="node-action-btn" title="Delete Page" (click)="deletePage(page, $event)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="add-child-hover-btn" (click)="showAddChildPageModal(page); $event.stopPropagation()">
|
||||
<i class="fas fa-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="children-container" *ngIf="page.children && page.children.length > 0">
|
||||
<ng-container *ngFor="let childPage of page.children">
|
||||
<ng-container *ngTemplateOutlet="pageTemplate; context: { $implicit: childPage }"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -20,6 +20,8 @@ export class WireframeRendererComponent implements OnInit {
|
||||
|
||||
|
||||
jsonInput = '';
|
||||
initialPrompt = '';
|
||||
|
||||
id: number;
|
||||
|
||||
|
||||
@ -45,7 +47,7 @@ export class WireframeRendererComponent implements OnInit {
|
||||
return Object.keys(obj || {});
|
||||
}
|
||||
|
||||
// Step 1
|
||||
// Step 1 get data from that id
|
||||
fetchTreeById(id: number) {
|
||||
this.siteTreeService.getById(id).subscribe({
|
||||
next: (res) => {
|
||||
@ -54,6 +56,9 @@ export class WireframeRendererComponent implements OnInit {
|
||||
// Check if model key exists and has some value
|
||||
if (res && res.model) {
|
||||
try {
|
||||
|
||||
this.initialPrompt = res.prompt;
|
||||
|
||||
// Optional: if model is already a stringified JSON
|
||||
const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
|
||||
this.jsonInput = JSON.stringify(maybeParsed, null, 2);
|
||||
@ -114,11 +119,13 @@ export class WireframeRendererComponent implements OnInit {
|
||||
|
||||
if (sectionName === 'Children') continue; // already handled
|
||||
|
||||
console.log('✅ Generating prompt for:', pageName, sectionName);
|
||||
console.log('sc name sectionDescription : ', sectionName, ' ', sectionDescription)
|
||||
console.log('✅ Generating prompt for : ', pageName, 'sectionc name and sectionDescription : ', sectionName, ' ', sectionDescription);
|
||||
|
||||
const prompt = await this.generatePromptFromSection(sectionName, sectionDescription); // ✅ await
|
||||
sectionPrompts[sectionName] = prompt;
|
||||
|
||||
// console.log( sectionName, ': ', prompt)
|
||||
|
||||
}
|
||||
|
||||
// 🧠 Store all prompts for that page
|
||||
@ -168,7 +175,7 @@ HTML Only. No CSS.
|
||||
|
||||
|
||||
// Step 4
|
||||
generatePromptFromSection(
|
||||
async generatePromptFromSection(
|
||||
sectionName: string,
|
||||
sectionDescription: string,
|
||||
headerId: number = 35,
|
||||
@ -177,24 +184,48 @@ HTML Only. No CSS.
|
||||
return new Promise((resolve) => {
|
||||
// const fieldType = sectionName.toLowerCase().replace(/\s+/g, '').replace(/section$/, '').trim();
|
||||
const fieldType = sectionName
|
||||
.toLowerCase()
|
||||
.replace(/section$/i, '') // remove trailing 'section'
|
||||
.replace(/\s{2,}/g, ' ') // multiple spaces to single space
|
||||
.trim(); // trim leading/trailing spaces
|
||||
|
||||
.toLowerCase()
|
||||
.replace(/section$/i, '') // remove trailing 'section'
|
||||
.replace(/\s{2,}/g, ' ') // multiple spaces to single space
|
||||
.trim(); // trim leading/trailing spaces
|
||||
|
||||
this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
|
||||
next: (res) => {
|
||||
next: async (res) => {
|
||||
try {
|
||||
const jsonBlock = res?.javacode;
|
||||
|
||||
// console.log( fieldType , ' json is : ', jsonBlock)
|
||||
|
||||
if (jsonBlock) {
|
||||
const parsedJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
|
||||
|
||||
// const updatedJson = this.replaceContentRecursively(parsedJson, sectionDescription);
|
||||
const finalJsonString = JSON.stringify(parsedJson, null, 2);
|
||||
// 🧠 Build prompt to LLM with section info + json + full page prompt
|
||||
const enhancedPrompt = `
|
||||
📘 You are an intelligent layout enhancer.
|
||||
|
||||
Your task is to update and fill in the values of a given UI section JSON based on the following information:
|
||||
|
||||
- Page-level prompt: "${this.initialPrompt || ''}"
|
||||
- Section name: "${sectionName}"
|
||||
- Section description: "${sectionDescription}"
|
||||
|
||||
You must only update relevant values like "title", "text", "description", "label", "placeholder", etc.
|
||||
|
||||
⚠️ DO NOT change the structure. Only update content values.
|
||||
|
||||
JSON:
|
||||
${finalJsonString}
|
||||
|
||||
✅ Return only the updated JSON. Do not return any explanation.
|
||||
`;
|
||||
|
||||
// console.log('enhanced query ', enhancedPrompt);
|
||||
|
||||
// const finalJson = await this.calLlm(enhancedPrompt);
|
||||
resolve(finalJsonString);
|
||||
} else {
|
||||
console.warn('⛔ No JSON found, skipping.');
|
||||
resolve('{}');
|
||||
}
|
||||
} catch (err) {
|
||||
@ -235,7 +266,7 @@ HTML Only. No CSS.
|
||||
|
||||
pageSections: Record<string, { FullPage: SafeHtml }> = {}; // final UI map
|
||||
|
||||
// Step 5 - generate html code via llm through prompt
|
||||
// Step 5 - generate html code via java Api through prompt
|
||||
async processAllPagesLiveUpdate() {
|
||||
for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
|
||||
const sectionHtmls: string[] = [];
|
||||
@ -436,6 +467,32 @@ HTML Only. No CSS.
|
||||
}
|
||||
|
||||
|
||||
|
||||
// // Step 6
|
||||
async calLlm(data): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log('call Llm Start ')
|
||||
const payload = {
|
||||
query: data,
|
||||
conversationId: '677'
|
||||
};
|
||||
console.log(' query : ', payload.query)
|
||||
this.siteTreeService.callLlm(payload).subscribe({
|
||||
next: (res) => {
|
||||
console.log('response ', res)
|
||||
if (res && res.responseContent) {
|
||||
resolve(res.responseContent);
|
||||
} else {
|
||||
resolve('⚠️ No response received.');
|
||||
}
|
||||
},
|
||||
error: () => resolve('⚠️ LLaMA API failed.')
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// // Step 4
|
||||
// generatePromptFromSection(
|
||||
// sectionName: string,
|
||||
@ -485,29 +542,7 @@ HTML Only. No CSS.
|
||||
|
||||
|
||||
|
||||
// // Step 6
|
||||
// async generateJson(data): Promise<string> {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// console.log('genearte json start ')
|
||||
// const payload = {
|
||||
// query: data.message,
|
||||
// conversationId: '677'
|
||||
// };
|
||||
// console.log(' query : ', payload.query)
|
||||
// this.siteTreeService.generateJson(payload).subscribe({
|
||||
// next: (res) => {
|
||||
// console.log('response ', res)
|
||||
// if (res && res.responseContent) {
|
||||
// resolve(res.responseContent);
|
||||
// } else {
|
||||
// resolve('⚠️ No response received.');
|
||||
// }
|
||||
// },
|
||||
// error: () => resolve('⚠️ LLaMA API failed.')
|
||||
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// pageSections: Record<string, Record<string, string>> = {}; // { pageName: { sectionName: html } }
|
||||
|
||||
// async processAllPagesLiveUpdate() {
|
||||
|
||||
@ -57,6 +57,8 @@
|
||||
|
||||
<!-- Floating Square Button -->
|
||||
<!-- Tab Section Container -->
|
||||
|
||||
|
||||
<div style="margin-top: 10px; padding: 20px;">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
|
||||
|
||||
@ -76,11 +78,18 @@
|
||||
</div>
|
||||
|
||||
<!-- Right: Generate Wireframe Button -->
|
||||
<button (click)="activeTab = 'wireframe'" style="background: #28a745; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
|
||||
<!-- <button (click)="activeTab = 'wireframe'" style="background: #28a745; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
|
||||
Generate Wireframe
|
||||
</button> -->
|
||||
|
||||
<!-- Right: Generate Wireframe Button -->
|
||||
<button (click)="generateWireframe()"
|
||||
style="background: #28a745; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
|
||||
Generate Wireframe
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Sitemap Content -->
|
||||
<div *ngIf="activeTab === 'sitemap'" style="margin-top: 20px; max-width: 100%; overflow-x: auto;">
|
||||
@ -92,7 +101,9 @@
|
||||
<!-- Wireframe Content -->
|
||||
<div *ngIf="activeTab === 'wireframe'" style="margin-top: 20px; max-width: 100%; overflow-x: auto;">
|
||||
<div style="min-width: 800px;">
|
||||
<app-wireframe-renderer *ngIf="treeData"></app-wireframe-renderer>
|
||||
<!-- <app-wireframe-renderer *ngIf="treeData"></app-wireframe-renderer> -->
|
||||
<app-wireframe-renderer *ngIf="isWireframeLoaded && treeData"></app-wireframe-renderer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,4 +130,4 @@
|
||||
Generate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -125,6 +125,13 @@ after click this icard inside we upload excel of student data, icard template, a
|
||||
// }
|
||||
// }
|
||||
|
||||
isWireframeLoaded = false;
|
||||
|
||||
generateWireframe() {
|
||||
this.activeTab = 'wireframe';
|
||||
this.isWireframeLoaded = true;
|
||||
}
|
||||
|
||||
getSections(data: any): { title: string, description: string }[] {
|
||||
const sections: { title: string, description: string }[] = [];
|
||||
for (const key in data) {
|
||||
@ -180,7 +187,7 @@ after click this icard inside we upload excel of student data, icard template, a
|
||||
}`;
|
||||
|
||||
|
||||
const suffix = `You are a JSON structure generator for website page hierarchies.
|
||||
const suffix = ` You are a JSON structure generator for website page hierarchies.
|
||||
|
||||
You are a JSON structure generator for website UI and sitemap hierarchy.
|
||||
|
||||
@ -250,13 +257,13 @@ Analyze the flow implied in the prompt:
|
||||
|
||||
|
||||
const payload = {
|
||||
query: this.rawInputText + suffix,
|
||||
query: this.rawInputText + ' ' + suffix,
|
||||
conversationId: '677'
|
||||
};
|
||||
|
||||
console.log(' query : ', payload.query)
|
||||
|
||||
this.siteTreeService.generateJson(payload).subscribe({
|
||||
this.siteTreeService.callLlm(payload).subscribe({
|
||||
next: (res) => {
|
||||
|
||||
console.log('response ', res)
|
||||
@ -268,6 +275,7 @@ Analyze the flow implied in the prompt:
|
||||
|
||||
// 🔁 Now call update API
|
||||
const updatePayload = {
|
||||
prompt: this.rawInputText + ' ',
|
||||
model: this.inputJson // model format expected by backend
|
||||
};
|
||||
|
||||
|
||||
@ -97,6 +97,7 @@ import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingru
|
||||
|
||||
import { TreeVisualizerComponent } from './fnd/SiteTreeBuilder/tree-visualizer.component';
|
||||
import { SiteTreeComponent } from './fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component';
|
||||
import { EditstepperComponent } from './BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component';
|
||||
|
||||
|
||||
|
||||
@ -271,6 +272,9 @@ const routes: Routes = [
|
||||
|
||||
{ path: 'sitetree', component: SiteTreeComponent, },
|
||||
|
||||
{ path: 'stepper', component: EditstepperComponent },
|
||||
|
||||
|
||||
{ path: 'sitetree/SiteBuilder/:id', component: TreeVisualizerComponent },
|
||||
|
||||
|
||||
|
||||
@ -124,6 +124,7 @@ import { WireframeRendererComponent } from './fnd/SiteTreeBuilder/WireframesUi/w
|
||||
import { HomepageEditorComponent } from './fnd/SiteTreeBuilder/HomePage/Templete1/homepage-editor.component';
|
||||
import { SiteTreeComponent } from './fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component';
|
||||
import { TreeNodeComponent } from './fnd/SiteTreeBuilder/TreeNode/tree-node.component';
|
||||
import { EditstepperComponent } from './BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -145,6 +146,7 @@ import { TreeNodeComponent } from './fnd/SiteTreeBuilder/TreeNode/tree-node.comp
|
||||
|
||||
// buildercomponents
|
||||
SiteTreeComponent,
|
||||
EditstepperComponent,
|
||||
HomepageEditorComponent,
|
||||
WireframeRendererComponent,
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ export const environment = {
|
||||
|
||||
backendUrl:'http://157.66.191.31:30101/back',
|
||||
nodeUrl:'http://157.66.191.31:31170/llm',
|
||||
builderUrl:'http://157.66.191.31:31170',
|
||||
|
||||
|
||||
|
||||
|
||||
@ -11,10 +11,12 @@ export const environment = {
|
||||
captchaSiteKey: '6LfrdSUpAAAAALkYDmnvdX3GLLCArgPWNHfXasjP',
|
||||
|
||||
// backport:'31701/visaproject36808/back',
|
||||
backendUrl:'http://localhost:9292/back',
|
||||
nodeUrl:'http://localhost:3000/llm',
|
||||
// backendUrl:'http://localhost:9292/back',
|
||||
nodeUrl:'http://157.66.191.31:31170/llm',
|
||||
builderUrl:'http://157.66.191.31:31170',
|
||||
|
||||
// backendUrl:'http://157.66.191.31:30101/back',
|
||||
|
||||
backendUrl:'http://157.66.191.31:30101/back',
|
||||
|
||||
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
|
||||
<script src="https://cdn.ckeditor.com/4.9.2/full-all/ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user