Public
Edited
Jun 13, 2023
Insert cell
viewof nom_commune = Inputs.text({
label: "Choix de la commune",
placeholder: "Entrer le nom d'une commune",
datalist: codes_communes.map(d => d.LIBELLE),
//submit: true
//value: "Toulouse"
})
Insert cell
html`<div>${update}</div>`
Insert cell
html`<div>${xxx}</div>`
Insert cell
import {codes_communes} from "@linogaliana/interactive-list-with-autocomplete"
Insert cell
function unique(data, accessor) {
return Array.from(new Set(accessor ? data.map(accessor) : data));
}
Insert cell
// The button has an onclick handler that mutates the target. Since
// in this case the target is an array we make a copy, add the current newItemInput
// value and set the items array to the new value
update = {
const button = html`<button class="blueButton">Add item to list</button>`;
button.onclick = () => {
let newItems = [...mutable items, nom_commune];
mutable items = unique(newItems);
};
return button;
}
Insert cell
Insert cell
// Here we show a message that the list is empty or otherwise
// return a ul tag with one nested li tag for each item
// Each item gets an a tag with an onclick handler that
// triggers setting items to a copy of items with the item at its index
// filtered out.
xxx = { if (items.length === 0) {
return html`<p>There are no items in the list</p>`
}
else {
return html`<ul>${items.map(
(gain, index) => html`
<li>
<a class="buttons-cities button" href="#" onclick=${(d) =>
(mutable items = items.filter(
(item, filterindex) => filterindex != index
))}>
${gain} <span class="button-icon">🗑</span>
</a>
</li>
`
)}</ul>
`
}
}
Insert cell
html`
<style type="text/css">
.button {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
color: white;
line-height: 20px;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}


.button-icon {
margin-left: 5px;
}
</style>
`
Insert cell
// The mutable items array. This is what you would use for further calculations
mutable items = []
Insert cell
md`# Imports`
Insert cell
import {Text} from "@observablehq/inputs"

Insert cell
import {html} from "@observablehq/htl"

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more