responsive style
This commit is contained in:
parent
bbf1bf3cdd
commit
61b7dc601f
25
index.html
25
index.html
@ -24,7 +24,7 @@
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
|
||||
<link rel="shortcut icon" href="img/french.png">
|
||||
</head>
|
||||
<body>
|
||||
<body class="side-panel-open">
|
||||
|
||||
|
||||
<header>
|
||||
@ -102,14 +102,10 @@
|
||||
|
||||
<p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a
|
||||
href="https://openstreetmap.org">OpenStreetMap</a></p>
|
||||
<div class="icones">
|
||||
<img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">
|
||||
|
||||
<img class="icon-img" src="img/type2_combo.svg" alt="prise">
|
||||
<img class="icon-img" src="img/Type2_socket.svg" alt="prise">
|
||||
<img class="icon-img" src="img/socket_typee.svg" alt="prise">
|
||||
<img class="icon-img" src="img/chademo.svg" alt="prise">
|
||||
</div>
|
||||
<form onclick="searchLocation()">
|
||||
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
|
||||
<button id="searchButton" class="rounded-button">🔍 Rechercher</button>
|
||||
</form>
|
||||
<button id="removeMarkers" class="rounded-button">
|
||||
🗑️ Effacer les marqueurs
|
||||
</button>
|
||||
@ -122,6 +118,9 @@
|
||||
<button id="sendToJOSM" class="rounded-button">
|
||||
🗺️ Éditer dans JOSM
|
||||
</button>
|
||||
<button id="shareUrl" class="rounded-button">
|
||||
📤 Partager l'URL
|
||||
</button>
|
||||
|
||||
<!-- <button id="toggle">-->
|
||||
<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo-->
|
||||
@ -183,11 +182,19 @@
|
||||
<br>
|
||||
Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a href="https://www.cipherbliss.com">www.cipherbliss.com</a>.
|
||||
<a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
|
||||
<div class="icones">
|
||||
<img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">
|
||||
|
||||
<img class="icon-img" src="img/type2_combo.svg" alt="prise">
|
||||
<img class="icon-img" src="img/Type2_socket.svg" alt="prise">
|
||||
<img class="icon-img" src="img/socket_typee.svg" alt="prise">
|
||||
<img class="icon-img" src="img/chademo.svg" alt="prise">
|
||||
</div>
|
||||
<br>
|
||||
icones
|
||||
câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie
|
||||
icônes créées par rukanicon - Flaticon</a>
|
||||
|
||||
</div>
|
||||
<script src='js/leaflet.js'></script>
|
||||
<script src='js/jquery-3.2.1.min.js'></script>
|
||||
|
||||
43
js/editor.js
43
js/editor.js
@ -2,28 +2,51 @@
|
||||
* Fonctions liées à l'édition des données OSM et à l'interaction avec JOSM
|
||||
*/
|
||||
|
||||
export function sendToJOSM(map) {
|
||||
|
||||
/**
|
||||
* Envoyer les bornes de recharge de la zone visible à JOSM
|
||||
* @param {*} map
|
||||
*/
|
||||
function sendToJOSM(map) {
|
||||
const bounds = map.getBounds();
|
||||
const bbox = `${bounds.getWest()},${bounds.getSouth()},${bounds.getEast()},${bounds.getNorth()}`;
|
||||
|
||||
const josmUrl = `http://127.0.0.1:8111/load_and_zoom?left=${bounds.getWest()}&right=${bounds.getEast()}&top=${bounds.getNorth()}&bottom=${bounds.getSouth()}&select=node[amenity=charging_station]&changeset_hashtags=IRVE&layer_name=irve-depuis-OSM`;
|
||||
const josmUrl = `http://127.0.0.1:8111/load_and_zoom?left=${bounds.getWest()}&right=${bounds.getEast()}&top=${bounds.getNorth()}&bottom=${bounds.getSouth()}&select=node[amenity=charging_station]`;
|
||||
|
||||
return fetch(josmUrl)
|
||||
fetch(josmUrl)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('Données envoyées à JOSM avec succès');
|
||||
return true;
|
||||
alert('Données envoyées à JOSM avec succès !');
|
||||
} else {
|
||||
console.error('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
|
||||
throw new Error('JOSM non accessible');
|
||||
alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur JOSM:', error);
|
||||
throw error;
|
||||
alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
sendToJOSM
|
||||
|
||||
const margin_josm_bbox = 0.00001
|
||||
|
||||
/**
|
||||
* lien pour éditer une station de recharge dans JOSM
|
||||
* @param {*} feature
|
||||
* @returns
|
||||
*/
|
||||
function createJOSMEditLink(feature) {
|
||||
var coordinates = feature.geometry.coordinates
|
||||
var nodeId = feature.properties.id
|
||||
var left = coordinates[0] - margin_josm_bbox
|
||||
var right = coordinates[0] + margin_josm_bbox
|
||||
var bottom = coordinates[1] - margin_josm_bbox
|
||||
var top = coordinates[1] + margin_josm_bbox
|
||||
var josmUrl = `http://127.0.0.1:8111/load_and_zoom?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}`
|
||||
return josmUrl
|
||||
}
|
||||
|
||||
export {
|
||||
sendToJOSM,
|
||||
createJOSMEditLink
|
||||
};
|
||||
471
js/main.js
471
js/main.js
@ -7,9 +7,8 @@
|
||||
import config from './config.js'
|
||||
import utils from './utils.js'
|
||||
import colorUtils from './color-utils.js'
|
||||
import editor from './editor.js'
|
||||
import { sendToJOSM, createJOSMEditLink } from './editor.js'
|
||||
|
||||
console.log('config', config)
|
||||
let geojsondata;
|
||||
let lastLatLng;
|
||||
|
||||
@ -47,32 +46,21 @@ let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 4
|
||||
|
||||
|
||||
function setRandomView() {
|
||||
console.log('set random view')
|
||||
// Choix au hasard d'une ville parmi la liste
|
||||
let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)]
|
||||
console.log('randomCity', randomCity)
|
||||
map = map.setView(randomCity.coords, config.initialZoom)
|
||||
let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)];
|
||||
map = map.setView(randomCity.coords, config.initialZoom);
|
||||
}
|
||||
|
||||
function setCoordinatesOfLeafletMapFromQueryParameters() {
|
||||
// Récupère les paramètres de l'URL
|
||||
// console.log('window.location', window.location.href, window)
|
||||
const urlParams = new URLSearchParams(window.location.href)
|
||||
const urlParams = new URLSearchParams(window.location.href);
|
||||
const lat = urlParams.get('lat');
|
||||
const lng = urlParams.get('lng');
|
||||
const zoom = urlParams.get('zoom');
|
||||
|
||||
// console.log('urlParams', urlParams)
|
||||
// Récupère les coordonnées et le zoom à partir des paramètres de l'URL
|
||||
const lat = urlParams.get('lat')
|
||||
const lng = urlParams.get('lng')
|
||||
const zoom = urlParams.get('zoom')
|
||||
|
||||
// console.log('lat,lng,zoom', lat, lng, zoom) // Vérifie si les paramètres sont présents et valides
|
||||
if (lat && lng && zoom) {
|
||||
// Initialise la carte avec les coordonnées et le zoom récupérés
|
||||
map = map.setView([lat, lng], zoom)
|
||||
map = map.setView([lat, lng], zoom);
|
||||
} else {
|
||||
// Affiche une erreur si les paramètres sont absents ou invalides
|
||||
console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.')
|
||||
setRandomView()
|
||||
console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.');
|
||||
setRandomView();
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,56 +115,40 @@ tileGrey.addTo(map)
|
||||
|
||||
|
||||
function buildOverpassApiUrl(map, overpassQuery) {
|
||||
|
||||
let baseUrl = 'https://overpass-api.de/api/interpreter'
|
||||
// Ajouter une marge de 2 kilomètres autour des bounds
|
||||
// Conversion approximative: 1 degré = 111km à l'équateur
|
||||
const kilometersMarginForLoading = 2
|
||||
const marginInDegrees = kilometersMarginForLoading / 111 // 2 kilomètres convertis en degrés
|
||||
const south = map.getBounds().getSouth() - marginInDegrees
|
||||
const west = map.getBounds().getWest() - marginInDegrees
|
||||
const north = map.getBounds().getNorth() + marginInDegrees
|
||||
const east = map.getBounds().getEast() + marginInDegrees
|
||||
let bounds = south + ',' + west + ',' + north + ',' + east
|
||||
let resultUrl, query = ''
|
||||
let baseUrl = 'https://overpass-api.de/api/interpreter';
|
||||
const kilometersMarginForLoading = 2;
|
||||
const marginInDegrees = kilometersMarginForLoading / 111;
|
||||
const south = map.getBounds().getSouth() - marginInDegrees;
|
||||
const west = map.getBounds().getWest() - marginInDegrees;
|
||||
const north = map.getBounds().getNorth() + marginInDegrees;
|
||||
const east = map.getBounds().getEast() + marginInDegrees;
|
||||
let bounds = south + ',' + west + ',' + north + ',' + east;
|
||||
let resultUrl, query = '';
|
||||
|
||||
if (config.overrideQuery) {
|
||||
query = `?data=[out:json][timeout:15];(
|
||||
nwr[amenity=charging_station](${bounds});
|
||||
);out body geom;`
|
||||
);out body geom;`;
|
||||
} else {
|
||||
let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
|
||||
let wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
|
||||
let relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');'
|
||||
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;'
|
||||
|
||||
let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
|
||||
let wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
|
||||
let relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
|
||||
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
|
||||
}
|
||||
resultUrl = baseUrl + query
|
||||
return resultUrl
|
||||
resultUrl = baseUrl + query;
|
||||
return resultUrl;
|
||||
}
|
||||
|
||||
const margin_josm_bbox = 0.00001
|
||||
|
||||
function createJOSMEditLink(feature) {
|
||||
var coordinates = feature.geometry.coordinates
|
||||
var nodeId = feature.properties.id
|
||||
var left = coordinates[0] - margin_josm_bbox
|
||||
var right = coordinates[0] + margin_josm_bbox
|
||||
var bottom = coordinates[1] - margin_josm_bbox
|
||||
var top = coordinates[1] + margin_josm_bbox
|
||||
var josmUrl = `http://127.0.0.1:8111/load_and_zoom?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}`
|
||||
return josmUrl
|
||||
}
|
||||
|
||||
function supprimerMarqueurs() {
|
||||
all_stations_markers.clearLayers()
|
||||
// stations_much_speed_wow.clearLayers()
|
||||
all_stations_markers.clearLayers();
|
||||
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
layer.remove()
|
||||
layer.remove();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
let coef_reduction_bars = 0.8
|
||||
@ -193,72 +165,65 @@ function calculerPourcentage(partie, total, reduc) {
|
||||
}
|
||||
|
||||
function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
|
||||
let count = resultAsGeojson.features.length
|
||||
let count_station_output = 0
|
||||
let count_ref_eu = 0
|
||||
let output_more_than_300 = 0
|
||||
let output_more_than_200 = 0
|
||||
let output_more_than_100 = 0
|
||||
let output_more_than_50 = 0
|
||||
let count_station_outputoutput_between_1_and_50 = 0
|
||||
let count_output_unknown = 0
|
||||
let count_estimated_type2combo = 0
|
||||
let count_found_type2combo = 0
|
||||
let count_found_type2 = 0
|
||||
let count = resultAsGeojson.features.length;
|
||||
let count_station_output = 0;
|
||||
let count_ref_eu = 0;
|
||||
let output_more_than_300 = 0;
|
||||
let output_more_than_200 = 0;
|
||||
let output_more_than_100 = 0;
|
||||
let output_more_than_50 = 0;
|
||||
let count_station_outputoutput_between_1_and_50 = 0;
|
||||
let count_output_unknown = 0;
|
||||
let count_estimated_type2combo = 0;
|
||||
let count_found_type2combo = 0;
|
||||
let count_found_type2 = 0;
|
||||
|
||||
resultAsGeojson.features.map(feature => {
|
||||
let found_type2_combo = false
|
||||
// trouver si les tags présentent un type combo
|
||||
let found_type2 = false
|
||||
// trouver si les tags présentent un type 2
|
||||
let keys_of_object = Object.keys(feature.properties.tags)
|
||||
let found_type2_combo = false;
|
||||
let found_type2 = false;
|
||||
let keys_of_object = Object.keys(feature.properties.tags);
|
||||
keys_of_object.map(tagKey => {
|
||||
// console.log('tagKey', tagKey)
|
||||
if (tagKey.indexOf('type2_combo') !== -1) {
|
||||
found_type2_combo = true
|
||||
// console.log('tagkey trouvé combo', tagKey)
|
||||
found_type2_combo = true;
|
||||
}
|
||||
if (tagKey.indexOf('type2') !== -1) {
|
||||
found_type2 = true
|
||||
found_type2 = true;
|
||||
}
|
||||
})
|
||||
let outputPower = utils.guessOutputPowerFromFeature(feature)
|
||||
});
|
||||
let outputPower = utils.guessOutputPowerFromFeature(feature);
|
||||
if (found_type2_combo) {
|
||||
count_found_type2combo++
|
||||
count_found_type2combo++;
|
||||
}
|
||||
if (found_type2) {
|
||||
count_found_type2++
|
||||
count_found_type2++;
|
||||
}
|
||||
if (outputPower == 0) {
|
||||
count_output_unknown++
|
||||
count_output_unknown++;
|
||||
}
|
||||
if (outputPower >= 200 && !found_type2_combo) {
|
||||
/**
|
||||
* si on trouve une puissance supérieure à 200kW on peut partir du principe que la station dispose d'une prise type_2_combo à minima
|
||||
*/
|
||||
count_estimated_type2combo++
|
||||
count_estimated_type2combo++;
|
||||
}
|
||||
if (outputPower > 0 && outputPower < 50) {
|
||||
count_station_outputoutput_between_1_and_50++
|
||||
count_station_outputoutput_between_1_and_50++;
|
||||
}
|
||||
if (outputPower >= 50 && outputPower < 100) {
|
||||
output_more_than_50++
|
||||
output_more_than_50++;
|
||||
} else if (outputPower >= 100 && outputPower < 200) {
|
||||
output_more_than_100++
|
||||
output_more_than_100++;
|
||||
} else if (outputPower >= 200 && outputPower < 300) {
|
||||
output_more_than_200++
|
||||
output_more_than_200++;
|
||||
} else if (outputPower >= 300) {
|
||||
feature.properties.puissance_haute = true
|
||||
output_more_than_300++
|
||||
feature.properties.puissance_haute = true;
|
||||
output_more_than_300++;
|
||||
}
|
||||
if (feature.properties.tags['charging_station:output']) {
|
||||
count_station_output++
|
||||
count_station_output++;
|
||||
}
|
||||
if (feature.properties.tags['ref:EU:EVSE']) {
|
||||
count_ref_eu++
|
||||
count_ref_eu++;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
let bar_powers = `<div class="bars-container">
|
||||
<div class="bar color-unknown" style="width: ${calculerPourcentage(count_output_unknown, count, true)}%">${count_output_unknown}</div>
|
||||
<div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}</div>
|
||||
@ -266,8 +231,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
<div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100 ? output_more_than_100 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200 ? output_more_than_200 : '' | ''}</div>
|
||||
<div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300 ? output_more_than_300 : ''}</div>
|
||||
</div>
|
||||
`
|
||||
</div>`;
|
||||
|
||||
let stats_content = `<div class="stats-table">
|
||||
<table>
|
||||
@ -307,35 +271,16 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
<td>${calculerPourcentage(output_more_than_300, count)}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>`
|
||||
</div>`;
|
||||
|
||||
/**
|
||||
|
||||
let stats_content = `<div class="stats">
|
||||
Statistiques des <strong>${count}</strong> stations trouvées: <br/>
|
||||
${count_station_output} (${calculerPourcentage(count_station_output, count)}%) ont une info de puissance max délivrée <i>charging_station:output</i>. <br/>
|
||||
${count_ref_eu} (${calculerPourcentage(count_ref_eu, count)}%) ont une référence européenne <i>ref:EU:EVSE</i>. <br/>
|
||||
${count_output_unknown} (${calculerPourcentage(count_output_unknown, count)}%) ont une puissance max inconnue <i>*output*</i>. <br/>
|
||||
${output_more_than_300} (${calculerPourcentage(output_more_than_300, count)}%) ont une puissance max supérieure à 300 kW <i>*output*</i>. <br/>
|
||||
${output_more_than_200} (${calculerPourcentage(output_more_than_200, count)}%) ont une puissance max supérieure à 200 kW <i>*output*</i>. <br/>
|
||||
${output_more_than_100} (${calculerPourcentage(output_more_than_100, count)}%) ont une puissance max supérieure à 100 kW <i>*output*</i>. <br/>
|
||||
${output_more_than_50} (${calculerPourcentage(output_more_than_50, count)}%) ont une puissance max supérieure à 50 kW <i>*output*</i>. <br/>
|
||||
${count_found_type2combo} (${calculerPourcentage(count_found_type2combo, count)}%) ont un prise combo définie <i>*type2_combo*</i>. <br/>
|
||||
${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo, count)}%) ont une prise combo présumée à partir de la puissance max trouvée mais non spécifiée <i>*type2_combo*</i>. <br/>${count_found_type2} (${calculerPourcentage(count_found_type2, count)}%) ont un prise type2 définie <i>*type2*</i>. <br/>
|
||||
</div>`
|
||||
*
|
||||
*/
|
||||
$('#found_charging_stations').html(stats_content)
|
||||
$('#bars_power').html(bar_powers)
|
||||
$('#found_charging_stations').html(stats_content);
|
||||
$('#bars_power').html(bar_powers);
|
||||
}
|
||||
|
||||
function bindEventsOnJosmRemote() {
|
||||
let josm_remote_buttons = $(`#sendToJOSM`)
|
||||
// console.log('josm_remote_buttons', josm_remote_buttons[0])
|
||||
$(josm_remote_buttons[0]).on('click', () => {
|
||||
// console.log('link', josm_remote_buttons[0])
|
||||
let josm_link = $(josm_remote_buttons[0]).attr('data-href')
|
||||
// console.log('lancer la télécommande josm', josm_link)
|
||||
$.get(josm_link, (res) => {
|
||||
console.log('res', res)
|
||||
})
|
||||
@ -344,45 +289,34 @@ function bindEventsOnJosmRemote() {
|
||||
|
||||
|
||||
function displayPointsFromApi(points) {
|
||||
|
||||
|
||||
if (points) {
|
||||
geojsondata = osmtogeojson(points)
|
||||
geojsondata = osmtogeojson(points);
|
||||
}
|
||||
// console.log('resultAsGeojson', geojsondata)
|
||||
|
||||
displayStatsFromGeoJson(geojsondata)
|
||||
displayStatsFromGeoJson(geojsondata);
|
||||
|
||||
let resultLayer = L.geoJson(geojsondata, {
|
||||
style: function (feature) {
|
||||
return {color: '#f00'}
|
||||
return {color: '#f00'};
|
||||
},
|
||||
/**
|
||||
* enlever les polygones, ne garder que les points
|
||||
* @param feature
|
||||
* @param layer
|
||||
* @returns {boolean}
|
||||
*/
|
||||
filter: function (feature, layer) {
|
||||
let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
|
||||
let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon');
|
||||
if (isPolygon) {
|
||||
console.log('polygon feature', feature)
|
||||
feature.geometry.type = 'Point'
|
||||
let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
|
||||
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
|
||||
feature.geometry.type = 'Point';
|
||||
let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
|
||||
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng];
|
||||
}
|
||||
return true
|
||||
return true;
|
||||
},
|
||||
onmoveend: function (event) {
|
||||
// console.log('déplacement terminé')
|
||||
// console.log('déplacement terminé');
|
||||
},
|
||||
onzoomend: function (event) {
|
||||
supprimerMarqueurs()
|
||||
displayPointsFromApi()
|
||||
supprimerMarqueurs();
|
||||
displayPointsFromApi();
|
||||
},
|
||||
onEachFeature: eachFeature,
|
||||
})
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function makePopupOfFeature(feature) {
|
||||
@ -423,85 +357,62 @@ function makePopupOfFeature(feature) {
|
||||
}
|
||||
|
||||
function eachFeature(feature, layer) {
|
||||
let link_josm = createJOSMEditLink(feature);
|
||||
|
||||
let link_josm = createJOSMEditLink(feature)
|
||||
let popupContent = makePopupOfFeature(feature);
|
||||
layer.bindPopup(popupContent);
|
||||
|
||||
let popupContent = makePopupOfFeature(feature)
|
||||
layer.bindPopup(popupContent)
|
||||
|
||||
let outPowerGuessed = utils.guessOutputPowerFromFeature(feature)
|
||||
let color = colorUtils.getColor(feature)
|
||||
let displayOutPowerGuessed = '? kW'
|
||||
let outPowerGuessed = utils.guessOutputPowerFromFeature(feature);
|
||||
let color = colorUtils.getColor(feature);
|
||||
let displayOutPowerGuessed = '? kW';
|
||||
if (outPowerGuessed) {
|
||||
displayOutPowerGuessed = outPowerGuessed + ' kW max'
|
||||
displayOutPowerGuessed = outPowerGuessed + ' kW max';
|
||||
}
|
||||
if (!popupContent) {
|
||||
popupContent = `<span class="no-data"> Aucune information renseignée,
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`;
|
||||
}
|
||||
// boutons d'itinéraire
|
||||
|
||||
let html = ` <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_car#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en voiture vers cette station"> 🚗</a><a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_bike#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en vélo vers cette station">🚴♀️</a><a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_foot#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire à pied vers cette station">👠</a>
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`;
|
||||
|
||||
let zoom = map.getZoom()
|
||||
let radius = 20
|
||||
let opacity = 0.5
|
||||
let ratio_circle = 10
|
||||
let zoom = map.getZoom();
|
||||
let radius = 20;
|
||||
let opacity = 0.5;
|
||||
let ratio_circle = 10;
|
||||
|
||||
// quand on est loin, montrer d'avantage de couleur, pas le centre
|
||||
if (zoom < 13) {
|
||||
ratio_circle = 5
|
||||
ratio_circle = 5;
|
||||
} else if (zoom < 15) {
|
||||
ratio_circle = 1
|
||||
opacity = 0.25
|
||||
ratio_circle = 1;
|
||||
opacity = 0.25;
|
||||
} else if (zoom <= 16) {
|
||||
ratio_circle = 0.5
|
||||
ratio_circle = 0.5;
|
||||
} else if (zoom <= 18) {
|
||||
ratio_circle = 0.25
|
||||
ratio_circle = 0.25;
|
||||
}
|
||||
// console.log('ratio_circle', ratio_circle, feature.properties)
|
||||
if (!layer._latlng) {
|
||||
console.error('pas de latlng du layer', layer)
|
||||
if (lastLatLng) {
|
||||
|
||||
layer._latlng = lastLatLng
|
||||
if (!layer._latlng) {
|
||||
if (lastLatLng) {
|
||||
layer._latlng = lastLatLng;
|
||||
}
|
||||
} else {
|
||||
console.log('layer._latlng', layer._latlng)
|
||||
lastLatLng = layer._latlng
|
||||
lastLatLng = layer._latlng;
|
||||
}
|
||||
if (!outPowerGuessed) {
|
||||
radius = radius * ratio_circle
|
||||
radius = radius * ratio_circle;
|
||||
} else {
|
||||
radius = outPowerGuessed * ratio_circle
|
||||
radius = outPowerGuessed * ratio_circle;
|
||||
}
|
||||
|
||||
// if (outPowerGuessed >= 300) {
|
||||
// radius = 70 * ratio_circle
|
||||
// } else if (outPowerGuessed >= 200) {
|
||||
// radius = 60 * ratio_circle
|
||||
// } else if (outPowerGuessed >= 100) {
|
||||
// radius = 50 * ratio_circle
|
||||
// } else if (outPowerGuessed >= 50) {
|
||||
// radius = 40 * ratio_circle
|
||||
// } else if (outPowerGuessed >= 20) {
|
||||
// radius = 30 * ratio_circle
|
||||
// } else if (outPowerGuessed >= 7) {
|
||||
// radius = 20 * ratio_circle
|
||||
// }
|
||||
|
||||
let circle = L.circle(layer._latlng, {
|
||||
color: color,
|
||||
fillColor: color,
|
||||
fillOpacity: opacity,
|
||||
colorOpacity: opacity,
|
||||
radius: radius
|
||||
}).addTo(all_stations_markers)
|
||||
}).addTo(all_stations_markers);
|
||||
|
||||
|
||||
// montrer les détails quand on est proche
|
||||
// afficher moins de couleur, montrer le centre plus précis
|
||||
if (zoom > 15) {
|
||||
let circle_center = L.circle(layer._latlng, {
|
||||
color: 'black',
|
||||
@ -509,34 +420,22 @@ function eachFeature(feature, layer) {
|
||||
fillOpacity: 1,
|
||||
radius: 0.1
|
||||
}).addTo(all_stations_markers);
|
||||
// if (!outPowerGuessed) {
|
||||
//
|
||||
// circle_center.bindTooltip("?", {
|
||||
// permanent: true,
|
||||
// className: "my-label",
|
||||
// offset: [0, 0]
|
||||
// });
|
||||
// }
|
||||
// circle_center.addTo(all_stations_markers);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
circle.bindPopup(html)
|
||||
circle.bindPopup(html);
|
||||
circle.on({
|
||||
mouseover: function () {
|
||||
this.openPopup()
|
||||
bindEventsOnJosmRemote()
|
||||
this.openPopup();
|
||||
bindEventsOnJosmRemote();
|
||||
},
|
||||
mouseout: function () {
|
||||
// setTimeout(() => this.closePopup(), 15000)
|
||||
// setTimeout(() => this.closePopup(), 15000);
|
||||
},
|
||||
click: function () {
|
||||
this.openPopup()
|
||||
bindEventsOnJosmRemote()
|
||||
this.openPopup();
|
||||
bindEventsOnJosmRemote();
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function makeCssClassFromTags(tags) {
|
||||
@ -563,52 +462,46 @@ function getIconFromTags(tags) {
|
||||
}
|
||||
|
||||
function toggleMinPower(showHighPower) {
|
||||
console.log('toggle', showHighPower)
|
||||
showHighPower = !showHighPower
|
||||
addFilteredMarkers(showHighPower)
|
||||
this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'
|
||||
showHighPower = !showHighPower;
|
||||
addFilteredMarkers(showHighPower);
|
||||
this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale';
|
||||
}
|
||||
|
||||
function addFilteredMarkers(showHighPower) {
|
||||
allMarkers.clearLayers() // Supprimer les marqueurs existants
|
||||
allMarkers.clearLayers();
|
||||
|
||||
console.log('addFilteredMarkers: clear des marqueurs fait')
|
||||
let counter = 0
|
||||
let counter = 0;
|
||||
geojsondata.features.forEach(function (feature) {
|
||||
if (feature.properties.puissance_haute === showHighPower) {
|
||||
counter++
|
||||
let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale')
|
||||
allMarkers.addLayer(marker)
|
||||
counter++;
|
||||
let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale');
|
||||
allMarkers.addLayer(marker);
|
||||
}
|
||||
})
|
||||
console.log('addFilteredMarkers: ', counter)
|
||||
});
|
||||
}
|
||||
|
||||
let isLoading = false
|
||||
|
||||
function loadOverpassQuery() {
|
||||
|
||||
// ne pas charger si on recherche déjà
|
||||
if (!isLoading) {
|
||||
isLoading = true
|
||||
$('#spinning_icon').fadeIn()
|
||||
let queryTextfieldValue = $('#query-textfield').val()
|
||||
let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
|
||||
isLoading = true;
|
||||
$('#spinning_icon').fadeIn();
|
||||
let queryTextfieldValue = $('#query-textfield').val();
|
||||
let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
|
||||
|
||||
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
||||
geojsondata = geoDataPointsFromApi
|
||||
refreshDisplay()
|
||||
$('#spinning_icon').fadeOut()
|
||||
$('#message-loading').fadeOut()
|
||||
isLoading = false
|
||||
}) // end of the getting from overpass API
|
||||
geojsondata = geoDataPointsFromApi;
|
||||
refreshDisplay();
|
||||
$('#spinning_icon').fadeOut();
|
||||
$('#message-loading').fadeOut();
|
||||
isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function refreshDisplay() {
|
||||
supprimerMarqueurs()
|
||||
console.log('geojsondata', geojsondata)
|
||||
displayPointsFromApi(geojsondata)
|
||||
supprimerMarqueurs();
|
||||
displayPointsFromApi(geojsondata);
|
||||
}
|
||||
|
||||
|
||||
@ -644,40 +537,34 @@ setCoordinatesOfLeafletMapFromQueryParameters()
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
bindEventsOnJosmRemote()
|
||||
onMapMoveEnd()
|
||||
map.on('moveend', onMapMoveEnd)
|
||||
$('#spinning_icon').hide()
|
||||
// $('#messageLoading').hide()
|
||||
bindEventsOnJosmRemote();
|
||||
onMapMoveEnd();
|
||||
map.on('moveend', onMapMoveEnd);
|
||||
$('#spinning_icon').hide();
|
||||
$('#removeMarkers').on('click', function () {
|
||||
supprimerMarqueurs()
|
||||
})
|
||||
supprimerMarqueurs();
|
||||
});
|
||||
$('#load').on('click', function () {
|
||||
loadOverpassQuery()
|
||||
})
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#toggleSidePanel').on('click', function () {
|
||||
$('body').toggleClass('side-panel-open')
|
||||
})
|
||||
// filtres
|
||||
// boutons de toggle et de cycle de visibilité
|
||||
//
|
||||
$('body').toggleClass('side-panel-open');
|
||||
});
|
||||
$('#chercherButton').on('click', function () {
|
||||
supprimerMarqueurs()
|
||||
loadOverpassQuery()
|
||||
})
|
||||
supprimerMarqueurs();
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#setRandomView').on('click', function () {
|
||||
setRandomView()
|
||||
loadOverpassQuery()
|
||||
})
|
||||
setRandomView();
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#filterUnkown').on('click', function () {
|
||||
console.log('filterUnkown', filterUnkown)
|
||||
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown')
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
|
||||
refreshDisplay()
|
||||
})
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
|
||||
|
||||
})
|
||||
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown');
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
refreshDisplay();
|
||||
});
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
});
|
||||
|
||||
function showActiveFilter(filterVariableName, selectorId) {
|
||||
$(selectorId).attr('class', 'filter-state-' + filterVariableName)
|
||||
@ -796,12 +683,50 @@ function init() {
|
||||
});
|
||||
|
||||
document.getElementById('sendToJOSM').addEventListener('click', () => {
|
||||
editor.sendToJOSM(map)
|
||||
.then(() => {
|
||||
alert('Données envoyées à JOSM avec succès !');
|
||||
})
|
||||
.catch(() => {
|
||||
alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
|
||||
});
|
||||
sendToJOSM(map);
|
||||
});
|
||||
|
||||
$('#searchButton').on('click', searchLocation);
|
||||
$('#shareUrl').on('click', copyCurrentUrl);
|
||||
|
||||
document.getElementById('searchButton').addEventListener('click', searchLocation);
|
||||
}
|
||||
|
||||
function copyCurrentUrl() {
|
||||
const url = window.location.href;
|
||||
var dummy = document.createElement('input'),
|
||||
text = window.location.href;
|
||||
|
||||
document.body.appendChild(dummy);
|
||||
dummy.value = text;
|
||||
dummy.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(dummy);
|
||||
}
|
||||
|
||||
function searchLocation() {
|
||||
const location = document.getElementById('searchLocation').value;
|
||||
if (!location) {
|
||||
alert('Veuillez entrer un lieu à rechercher.');
|
||||
return;
|
||||
}
|
||||
|
||||
const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`;
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.length > 0) {
|
||||
const place = data[0];
|
||||
const lat = parseFloat(place.lat);
|
||||
const lon = parseFloat(place.lon);
|
||||
map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
|
||||
} else {
|
||||
alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur lors de la recherche du lieu :', error);
|
||||
alert('Erreur lors de la recherche du lieu.');
|
||||
});
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ const utils = {
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('outputPower', outputPower)
|
||||
|
||||
feature.properties.outputPower = outputPower
|
||||
return outputPower
|
||||
},
|
||||
|
||||
145
styles/style.css
145
styles/style.css
@ -1,7 +1,26 @@
|
||||
:root {
|
||||
--background-color: #222;
|
||||
--text-color: #ddd;
|
||||
--icon-background: white;
|
||||
--icon-border: cornflowerblue;
|
||||
--button-background: #497cd3;
|
||||
--button-hover-background: #0d377b;
|
||||
--button-border: #497cd3ff;
|
||||
--link-color: #38f;
|
||||
--popup-background: white;
|
||||
--zoom-message-background: rgba(255, 255, 255, 0.9);
|
||||
--zoom-message-border: #ff0000;
|
||||
--color-indication-background: #c0b1b1;
|
||||
--no-data-border: dodgerblue;
|
||||
--no-data-link-color: dodgerblue;
|
||||
--food-marker-color: #fff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #222;
|
||||
background: var(--background-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -31,7 +50,7 @@ p {
|
||||
|
||||
#heading {
|
||||
background: #000;
|
||||
color: #ddd;
|
||||
color: var(--text-color);
|
||||
min-height: 5%;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
@ -43,11 +62,12 @@ p {
|
||||
height: 0.25rem !important;
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
background: white;
|
||||
background: var(--icon-background);
|
||||
border-radius: 100%;
|
||||
padding: 0.25rem;
|
||||
margin-top: -0.5rem;
|
||||
float: left;
|
||||
border-color: var(--icon-border);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -86,16 +106,17 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
|
||||
.rounded-button,
|
||||
.navigation-link,
|
||||
.edit-button {
|
||||
background: #497cd3;
|
||||
background: var(--button-background);
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 2em;
|
||||
color: white !important;
|
||||
border: solid 1px #497cd3ff;
|
||||
border: solid 1px var(--button-border);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.side-panel button {
|
||||
min-width: 10em;
|
||||
min-width: 15em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.navigation-link {
|
||||
@ -114,7 +135,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
|
||||
|
||||
button:hover,
|
||||
.edit-button:hover {
|
||||
background: #0d377b;
|
||||
background: var(--button-hover-background);
|
||||
border: solid 1px #08285c;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -139,12 +160,12 @@ button:hover,
|
||||
}
|
||||
|
||||
a {
|
||||
color: #38f;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.leaflet-control-custom {
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
background: var(--popup-background);
|
||||
}
|
||||
|
||||
#spinning_icon {
|
||||
@ -226,21 +247,21 @@ a {
|
||||
}
|
||||
|
||||
.no-data {
|
||||
border-left: 3px solid dodgerblue;
|
||||
border-left: 3px solid var(--no-data-border);
|
||||
padding: 1em 2rem;
|
||||
min-height: 4rem;
|
||||
|
||||
}
|
||||
|
||||
.no-data a {
|
||||
color: dodgerblue;
|
||||
color: var(--no-data-link-color);
|
||||
}
|
||||
|
||||
/**
|
||||
marqueurs
|
||||
*/
|
||||
.marker-demo {
|
||||
margin-right: 3rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.map-marker-circle-demo {
|
||||
@ -252,7 +273,7 @@ marqueurs
|
||||
}
|
||||
|
||||
.color-unknown {
|
||||
background: #c0b1b1;
|
||||
background: var(--color-indication-background);
|
||||
}
|
||||
|
||||
|
||||
@ -343,7 +364,6 @@ button {
|
||||
|
||||
button + button{
|
||||
margin-left: 1rem;
|
||||
|
||||
}
|
||||
.filter-group button{
|
||||
padding: 1rem 2rem;
|
||||
@ -391,7 +411,7 @@ button + button{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20vw;
|
||||
height: 100vh;
|
||||
height: 74vh;
|
||||
background: white;
|
||||
box-shadow: -2px 0 5px rgba(0,0,0,0.2);
|
||||
overflow-y: auto;
|
||||
@ -431,13 +451,13 @@ header{
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255,255,255,0.9);
|
||||
background: var(--zoom-message-background);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
border-left: 4px solid #ff0000;
|
||||
border-left: 4px solid var(--zoom-message-border);
|
||||
animation: rainbow-border 4s linear infinite;
|
||||
}
|
||||
|
||||
@ -452,6 +472,65 @@ header img{
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
#map {
|
||||
z-index: 1;
|
||||
top: 5.55rem;
|
||||
}
|
||||
.side-panel #map{
|
||||
margin-left: 20vw;
|
||||
}
|
||||
|
||||
|
||||
.rounded-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.rounded-button:hover {
|
||||
background-color: #0d377b;
|
||||
}
|
||||
/* Style pour mobile */
|
||||
@media (max-width: 1200px) {
|
||||
body{
|
||||
/* border: solid 3px blue; */
|
||||
}
|
||||
.side-panel {
|
||||
margin: 0;
|
||||
position: static;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
transform: none;
|
||||
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.side-panel.active {
|
||||
transform: none;
|
||||
}
|
||||
.side-panel-open #map,
|
||||
#map {
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 90vh;
|
||||
height: 55vh;
|
||||
}
|
||||
header{
|
||||
position: static;
|
||||
}
|
||||
#toggleSidePanel{
|
||||
|
||||
right: 4.6rem;
|
||||
top: 1.3rem;
|
||||
}
|
||||
}
|
||||
@keyframes rainbow-border {
|
||||
0% { border-left-color: #ff0000; }
|
||||
17% { border-left-color: #ff8000; }
|
||||
@ -462,30 +541,10 @@ header img{
|
||||
100% { border-left-color: #ff0000; }
|
||||
}
|
||||
|
||||
#map {
|
||||
z-index: 1;
|
||||
top: 5.55rem;
|
||||
}
|
||||
.side-panel #map{
|
||||
margin-left: 20vw;
|
||||
}
|
||||
|
||||
/* Style pour mobile */
|
||||
@media (max-width: 768px) {
|
||||
.side-panel {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: none;
|
||||
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.side-panel.active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
margin-right: 0;
|
||||
}
|
||||
.search-input {
|
||||
width: calc(100% - 40px);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user