Skip to content

Commit

Permalink
new filter section design
Browse files Browse the repository at this point in the history 
The filter section for the examples menu has been slightly modified to simplified the filtering process as well as being more intuitive and comprehensive
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Oct 9, 2023
1 parent cdea20f commit 4d51a56
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 177 deletions.
20 changes: 10 additions & 10 deletions packages/web-new/src/examples-paths/examples-paths.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,11 @@
"description": "A simple Thing Description using CoAP. The target resource is specified in the Thing Description by the href member of a form and the request method (e.g., GET, PUT, POST, or DELETE) is specified using the cov:method member of a form.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/CoAP-simple-td-no-defaults.td.jsonld"
},
"extended-forms-multiple-op.td.jsonld": {
"title": "Extended Forms Multiple op",
"description": "In the case of a forms entry that has multiple op values the usage of the htv:methodName is not permitted. A TD Processor will extend the multiple op values to separate forms entries and associates a single operation with the default assumption.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/extended-forms-multiple-op.td.jsonld"
},
"HTTP-readproperty.td.jsonld": {
"title": "HTTP readproperty",
"description": "This example shows the binding of the readproperty operation for the HTTP.",
Expand All @@ -143,11 +148,6 @@
"description": "This example shows the minimal set of terms to configure a single coil reading using Modbus. Notice that the unitID is contained in the href as the first element of the path.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/Modbus-single-coil.td.jsonld"
},
"extended-forms-multiple-op.td.jsonld": {
"title": "Extended Forms Multiple op",
"description": "In the case of a forms entry that has multiple op values the usage of the htv:methodName is not permitted. A TD Processor will extend the multiple op values to separate forms entries and associates a single operation with the default assumption.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/extended-forms-multiple-op.td.jsonld"
},
"subprotocol-longpoll.td.jsonld": {
"title": "Subprotocol Longpoll",
"description": "protocols may have defined Subprotocols that can be used for some interaction types. For example, to receive asynchronous notifications using HTTP, some servers may support long polling.",
Expand All @@ -158,11 +158,6 @@
"6-security-schemas": {
"description": "This category contains various examples concerning the different types of security schemas that could/should be used for a Thing Description, as well as the different ways to combine multiple security schemes.",
"examples": {
"OAuth2-scopes.td.jsonld": {
"title": "OAuth2 Scopes",
"description": "OAuth 2.0 makes use of scopes. These are identifiers that may appear in tokens and must match with corresponding identifiers in a resource to allow access to that resource.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/OAuth2-scopes.td.jsonld"
},
"apikey-in-body-simplified.td.jsonld": {
"title": "Apikey In Body Simplified",
"description": "It is possbile to simplify how security parameters are included in the payload by using the feature that the location referenced by a JSON pointer in a body location will be automatically inserted if it does not exist.",
Expand Down Expand Up @@ -212,6 +207,11 @@
"title": "noSec Security",
"description": "Security configuration in the TD is mandatory, therefore the nosec security scheme is provided for the case that no security is needed.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/noSec-security.td.jsonld"
},
"OAuth2-scopes.td.jsonld": {
"title": "OAuth2 Scopes",
"description": "OAuth 2.0 makes use of scopes. These are identifiers that may appear in tokens and must match with corresponding identifiers in a resource to allow access to that resource.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/OAuth2-scopes.td.jsonld"
}
}
},
Expand Down
86 changes: 58 additions & 28 deletions packages/web-new/src/scripts/examples-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,22 @@ import { createIde, ideCount } from "./editor"
const closeExamples = document.querySelector(".examples-menu-container__close i")
const examplesMenu = document.querySelector(".examples-menu")
const examplesBtn = document.querySelector("#examples-btn")
const thingTypeSelect = document.querySelector('#thing-type')
const categorySelect = document.querySelector('#thing-category')
const filterForm = document.querySelector('.examples-menu-container__filter')
const tdExamplesContainer = document.querySelector(".examples-container__td")
const tmExamplesContainer = document.querySelector(".examples-container__tm")
const searchInput = document.querySelector(".search-input")
const tdSearchResults = tdExamplesContainer.querySelector("#filtered-results")
const tmSearchResults = tmExamplesContainer.querySelector("#filtered-results")
const thingTypeButton = document.querySelector(".thing-type-btn")

/**
* Close examples menu when clicking on x icon and
* clearing all info inside the examples menu
*/
closeExamples.addEventListener("click", () => {
examplesMenu.classList.add("closed")
const exampleCards = document.querySelectorAll(".example")
exampleCards.forEach(card => {
if (card.classList.contains("open")) {
card.classList.toggle("open")
}
})
closeCards()
})

/**
Expand Down Expand Up @@ -125,27 +120,25 @@ async function getCategories() {
* Checks the TD/TM select and updates the categories select respectively
*/
function filterThingType() {
//Clear all elments inside the categories select
//Clear all elements inside the categories select
const selectOptions = [...categorySelect.options]
selectOptions.forEach(option => {
option.remove()
})

if (thingTypeSelect.value === "thing-description") {
tdExamplesContainer.classList.remove("hidden")
tmExamplesContainer.classList.add("hidden")
tdCategories.forEach(category => {
if (thingTypeButton.checked) {
tmExamplesContainer.classList.remove("hidden")
tdExamplesContainer.classList.add("hidden")
tmCategories.forEach(category => {
const opt = document.createElement('option')
opt.value = category.id
opt.innerText = category.name
categorySelect.appendChild(opt)
})
}

if (thingTypeSelect.value === "thing-model") {
tmExamplesContainer.classList.remove("hidden")
tdExamplesContainer.classList.add("hidden")
tmCategories.forEach(category => {
} else {
tdExamplesContainer.classList.remove("hidden")
tmExamplesContainer.classList.add("hidden")
tdCategories.forEach(category => {
const opt = document.createElement('option')
opt.value = category.id
opt.innerText = category.name
Expand All @@ -157,11 +150,14 @@ function filterThingType() {
/**
* Event listeners to check for changes and scroll to the respective category
*/
thingTypeSelect.addEventListener("change", () => {
thingTypeButton.addEventListener("click", () => {
filterThingType()
tdSearchResults.classList.add("hidden")
tmSearchResults.classList.add("hidden")
const element = document.getElementById(categorySelect.value);
element.scrollIntoView({ behavior: "smooth", block: "start" })
})

categorySelect.addEventListener("change", () => {
const element = document.getElementById(categorySelect.value);
element.scrollIntoView({ behavior: "smooth", block: "start" })
Expand Down Expand Up @@ -291,6 +287,7 @@ async function getAllExamples(categoryId, thingType) {
//Importing example to the monaco editor with the quick buttons
quickButton.addEventListener('click', () => {
getTemplateData(example[1]["path"])
closeCards()
})

//create example content
Expand Down Expand Up @@ -331,7 +328,7 @@ async function getAllExamples(categoryId, thingType) {
//Listener to generate an editor with the examples information
exampleBtnUse.addEventListener('click', () => {
getTemplateData(example[1]["path"])
exampleContainer.classList.toggle("open")
closeCards()
})

//Listener to generate an editor with the examples information
Expand Down Expand Up @@ -362,7 +359,7 @@ filterForm.addEventListener("submit", (e) => {
e.preventDefault()

//Check if the thingType select is TD or TM
if (thingTypeSelect.value === "thing-description") {
if (thingTypeButton.checked === false) {
//Only ge the container for the searched results
const examplesContainer = tdSearchResults.querySelector(".examples-category__container")
//Clean all the children component
Expand All @@ -380,14 +377,24 @@ filterForm.addEventListener("submit", (e) => {
examples.forEach(example => {
//If value of the search input mataches the title or description
//clone it, append it and add the respective event listeners
if ((example.firstChild.childNodes[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
if ((example.firstChild.children[0].children[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
let clonedElement = example.cloneNode(true)
clonedElement.children[0].addEventListener('click', () => {
//Open the card when clicking on the name
clonedElement.children[0].children[0].addEventListener('click', () => {
clonedElement.classList.toggle("open")
})

//Opning the example when clicking on the quick access button
clonedElement.children[0].children[1].addEventListener('click', () => {
example.querySelector(".example__btn--use").click()
closeCards()
})
//Opening the example when clicking on the apply button
clonedElement.querySelector(".example__btn--use").addEventListener('click', () => {
example.querySelector(".example__btn--use").click()
closeCards()
})
//Closing the card when clicking on the cancel btn
clonedElement.querySelector(".example__btn--cancel").addEventListener('click', () => {
clonedElement.classList.toggle("open")
})
examplesContainer.appendChild(clonedElement)
Expand All @@ -413,14 +420,24 @@ filterForm.addEventListener("submit", (e) => {
categories.forEach(category => {
const examples = [...category.children[2].children]
examples.forEach(example => {
if ((example.firstChild.childNodes[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
if ((example.firstChild.children[0].children[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
let clonedElement = example.cloneNode(true)
clonedElement.children[0].addEventListener('click', () => {
//Open the card when clicking on the name
clonedElement.children[0].children[0].addEventListener('click', () => {
clonedElement.classList.toggle("open")
})

//Opning the example when clicking on the quick access button
clonedElement.children[0].children[1].addEventListener('click', () => {
example.querySelector(".example__btn--use").click()
closeCards()
})
//Opening the example when clicking on the apply button
clonedElement.querySelector(".example__btn--use").addEventListener('click', () => {
example.querySelector(".example__btn--use").click()
closeCards()
})
//Closing the card when clicking on the cancel btn
clonedElement.querySelector(".example__btn--cancel").addEventListener('click', () => {
clonedElement.classList.toggle("open")
})
examplesContainer.appendChild(clonedElement)
Expand All @@ -435,4 +452,17 @@ filterForm.addEventListener("submit", (e) => {
})
})
}
})
})


/**
* Reset all cards to the default closed state
*/
function closeCards() {
const exampleCards = document.querySelectorAll(".example")
exampleCards.forEach(card => {
if (card.classList.contains("open")) {
card.classList.remove("open")
}
})
}
Loading

0 comments on commit 4d51a56

Please sign in to comment.