Skip to content

Commit 8a6ca7a

Browse files
ajaykirarkitajaykirarkit
committed
feat: getImageByType: image/logo by type of plugin;
chosing selected mapping id; removed //plugin endpoint test ;
1 parent 15826d5 commit 8a6ca7a

File tree

3 files changed

+226
-121
lines changed

3 files changed

+226
-121
lines changed

‎src/main.ts

Lines changed: 103 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import customCSS from './style.css?inline';
88

99
const ATTRIBUTES: string[] = ["base-url"];
1010
interface MappingItem {
11-
id: string;
11+
mappingId: string;
1212
title: string;
1313
description?: string;
14-
mappingType:string;
15-
name:string;
14+
mappingType: string;
15+
name: string;
1616
}
1717
class MappingInputProvider extends HTMLElement {
1818
shadowRoot: ShadowRoot;
@@ -21,7 +21,10 @@ class MappingInputProvider extends HTMLElement {
2121
baseUrl: URL = new URL("http://localhost:8090/");
2222
// ---
2323

24+
selectedMappingId: string | null = null;
25+
selectedMappingType: string | null = null;
2426

27+
messageDisplayed: boolean | null = null;
2528
// --- Helper methods
2629
addCssContent(css: string): void {
2730
let styleElem: HTMLStyleElement = document.createElement("style");
@@ -93,77 +96,106 @@ class MappingInputProvider extends HTMLElement {
9396
options.maxFiles = 1;
9497
this.testingFileChooser = FilePondLib.create(filepondElement, options);
9598
}
96-
//plugin endpoint test
97-
let pluginContainer : HTMLElement = <HTMLInputElement>(
98-
this.shadowRoot.getElementById('plugin-container')
99-
);
100-
const pluginEndpoints = this.baseUrl.toString() + "api/v1/mappingAdministration/types"
101-
fetch(pluginEndpoints).then(response =>response.json()
102-
)
103-
.then((pluginData: MappingItem[]) =>{
104-
console.log(pluginData);
105-
const pluginType = pluginData.map((item:MappingItem)=>({
106-
id:item.id,
107-
name:item.name
108-
}));
109-
pluginContainer.innerHTML='';
110-
console.log(pluginData);
111-
pluginType.forEach(plugin=>
112-
{
113-
const division = document.createElement("div")
114-
division.classList.add("xyz");
115-
116-
division.innerHTML=`
117-
<span >Type : ${plugin.id}</span>
118-
<span class="home-price section-Heading">Title: ${plugin.name}</span>
119-
`
120-
pluginContainer.appendChild(division);
121-
})
12299

123-
}).catch(error => {
124-
console.log(`Error fetching data from server`, error);
125-
})
126100
//Box of detailed contents like title , description
127101
const mappingIdsEndpoint = this.baseUrl.toString() + "api/v1/mappingAdministration/";
128-
let optionsContainer : HTMLElement = <HTMLInputElement>(
102+
let optionsContainer: HTMLElement = <HTMLInputElement>(
129103
this.shadowRoot.getElementById('options-container')
130104
);
105+
optionsContainer.addEventListener("click", (event) => {
106+
const selectedButton = event.target as HTMLElement;
107+
console.log(selectedButton);
108+
// Remove the "selected" class from all buttons
109+
const buttons = optionsContainer.querySelectorAll(".selection-button");
110+
// console.log(buttons);
111+
buttons.forEach((button) => {
112+
button.classList.remove("selected-id");
113+
114+
});
115+
// Add the "selected" class to the clicked button
116+
selectedButton.classList.add("selected-id");
117+
118+
// Get the selected mapping ID from the button's ID
119+
const selectedMappingId = selectedButton.id.replace("mapping-button-", "");
120+
this.selectedMappingId = selectedMappingId;
121+
122+
// const selectedType=selectedButton
123+
console.log(selectedButton);
124+
});
125+
131126
fetch(mappingIdsEndpoint).then(response => response.json())
132127
.then((mappingIdsData: MappingItem[]) => {
133-
const mappingIds = mappingIdsData.map((item:MappingItem)=>({
134-
id:item.id,
135-
title:item.title,
136-
description:item.description,
128+
const mappingIds = mappingIdsData.map((item: MappingItem) => ({
129+
130+
id: item.mappingId,
131+
title: item.title,
132+
description: item.description,
137133
type: item.mappingType
138134
}));
139-
optionsContainer.innerHTML = '';
140-
mappingIds.forEach(mapping =>{
135+
optionsContainer.innerHTML = '';
136+
mappingIds.forEach(mapping => {
141137
const division = document.createElement("div")
142-
const button = document.createElement("button");
143-
button.classList.add("xyz");
138+
// const button = document.createElement("button");
139+
// button.classList.add("xyz");
144140
division.classList.add("xyz");
145-
button.setAttribute("data-test", "start-basics");
141+
// button.setAttribute("data-test", "start-basics");
142+
// button.id = `${mapping.id}`;
143+
// button.innerText = "Select";
144+
145+
//<span class="selected-type section-type">Type : ${mapping.type}</span>
146+
// <span class="home-price section-heading"> ${mapping.title}</span>
146147
division.innerHTML = `
147-
<span >Type : ${mapping.type}</span>
148-
<span class="home-price section-Heading">Title: ${mapping.title}</span>
149-
</div>
150-
<span class="home-text10">
148+
<img class="mapping-image" src="${this.getImageByType(mapping.type)}" alt="Mapping Image" />
149+
150+
151+
<span class="home-text10 section-description">
151152
<br>
152153
<span style="display:inline-block; overflow: auto; height: 124px;">
153-
Description: ${mapping.description}
154+
${mapping.description}
154155
</span>
155-
<br>
156-
<br>
157156
<span></span>
158157
</span>
159-
<button>select</button>
158+
<button class ="selection-button " id="mapping-button-${mapping.id}" >Select</button>
159+
160+
160161
`;
162+
163+
const button = division.querySelector(`#mapping-button-${mapping.id}`);
164+
165+
if (button) {
166+
button.addEventListener("click", () => {
167+
this.selectedMappingId = mapping.id;
168+
169+
console.log(this.selectedMappingId);
170+
if (!this.messageDisplayed) {
171+
const fileInput = this.shadowRoot.querySelector("#fileUpload");
172+
173+
const messageElement = document.createElement("div");
174+
// messageElement.style.display = "none";
175+
messageElement.innerText = "Please upload file and then click on map document to extract metadata";
176+
messageElement.style.marginBottom = "10px"; // Add some bottom margin for spacing
177+
messageElement.classList.add("message");
178+
if (fileInput != null && fileInput.parentNode != null) {
179+
fileInput.parentNode.insertBefore(messageElement, fileInput);
180+
}
181+
this.messageDisplayed = true;
182+
183+
}
184+
185+
// this.displayMessage("Please upload file and then click on map document to extract metadata");
186+
// this.executeMapping(selectedMappingId);
187+
const selectedMappingType = mapping.type;
188+
console.log(selectedMappingType);
189+
190+
191+
});
192+
}
161193
optionsContainer.appendChild(division);
194+
162195
})
163-
}).catch(error =>
164-
{
165-
console.error('Error while fetch Mapping Ids' +error)
166-
})
196+
}).catch(error => {
197+
console.error('Error while fetch Mapping Ids' + error)
198+
})
167199

168200
}
169201

@@ -205,13 +237,11 @@ class MappingInputProvider extends HTMLElement {
205237
executeMapping(): Promise<any>;
206238
async executeMapping(download: boolean = false): Promise<any> {
207239
document.body.style.cursor = 'wait';
208-
let inputElement: HTMLInputElement = <HTMLInputElement>(
209-
this.shadowRoot.getElementById("options-container")
210-
);
211-
const selectedValue = inputElement?.value;
212-
console.log('Selected Value ' +selectedValue)
213-
const selectedMappingId = selectedValue?.split("-")[0].trim();
214-
if (this.testingFileChooser != null) {
240+
const selectedMappingId = this.selectedMappingId;
241+
// const selectedValue = inputElement?.value;
242+
// console.log('Selected Value ' +selectedValue)
243+
// const selectedMappingId = selectedValue?.split("-")[0].trim();
244+
if (selectedMappingId && this.testingFileChooser != null) {
215245
const uploadedFile = this.testingFileChooser.getFile();
216246
if (uploadedFile != null) {
217247
const execUrl = this.baseUrl.toString() + "api/v1/mappingExecution/" + selectedMappingId;
@@ -260,6 +290,18 @@ class MappingInputProvider extends HTMLElement {
260290
this.shadowRoot.removeChild(element);
261291
URL.revokeObjectURL(element.href);
262292
}
293+
294+
getImageByType(mappingType: string): string {
295+
if (mappingType.includes("GEMMA")) {
296+
return "https://th.bing.com/th/id/R.13af2c708c50701c5c418f39f1032c4a?rik=Bhi%2fy8GZ%2fC%2b1%2bg&riu=http%3a%2f%2flogos.textgiraffe.com%2flogos%2flogo-name%2fGemma-designstyle-pastel-m.png&ehk=oiRKyC5Jg2VKEybuGyH%2f8q4l73rWTBZpvXw7hP69AOk%3d&risl=&pid=ImgRaw&r=0";
297+
} else if (mappingType.includes("SEM")) {
298+
return "https://th.bing.com/th/id/R.aaebd43a8dc60519d02c93699d67fa33?rik=c9P%2bsFde%2bGc8gg&riu=http%3a%2f%2fwww.benspaintsupply.com%2fwp-content%2fuploads%2f2011%2f10%2fSEM-Logo.jpg&ehk=n3cCc0XCRDKt0XFslLWIafoPO6zFEMc91UZQJA6hxuA%3d&risl=&pid=ImgRaw&r=0";
299+
} else if (mappingType.includes("TEM")) {
300+
return "https://en.tem.ch/wp-content/uploads/sites/2/2019/08/TEM_Logo_Ohne_Claim.jpg";
301+
} else {
302+
return "https://th.bing.com/th/id/OIP.dDFaFWAAhofP-4yOMUOsCwHaD5?pid=ImgDet&rs=1";
303+
}
304+
}
263305
}
264306

265307
// Custom Elements:

‎src/style.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ input {
1212
margin: 2.5rem auto 4rem;
1313
border: none;
1414
background-color: #d9eaea;
15-
box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3);
15+
/* box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3); */
1616
transition: all 0.3s ease;
1717
font-size: 1.5625rem;
18-
color: #f80abd;
19-
width: calc(90% - 2.125rem);
20-
margin-left: auto;
21-
margin-right: auto;
18+
/* color: #f80abd; */
19+
/* width: calc(90% - 2.125rem); */
20+
margin-left: 25px;
21+
margin-right: 25px;
2222
height: 9.375rem;
2323
text-align-last: center;
2424
}

0 commit comments

Comments
 (0)