const Timer = () => {
const [seconds, setSeconds] = useState(0);
const [isActive, setIsActive] = useState(false);
let toggle = () => {
setIsActive(!isActive)
}
let reset = () => {
setSeconds(0);
setIsActive(false);
}
useEffect(() => {
let interval = null;
if (isActive) {
interval = setInterval(() => {
setSeconds(seconds => seconds + 1); // раз в секунду добавляет 1 секунду
}, 1000);
} else if (!isActive && seconds !== 0) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [isActive, seconds]);
return (
<div>
<h1>{seconds}</h1>
<button onClick={toggle}>{isActive ? 'Pause' : 'Start'}</button>
<button onClick={reset}>Reset</button>
</div>
)
}
export default Timer;<select class="js-example-templating" multiple="multiple">
<optgroup label="Группа 1">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Группа 2">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>function formatState (state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/user/pages/images/flags";
var $state = $(
`<span>
<img src="${baseUrl}/${state.element.value.toLowerCase()}.png" class="img-flag" />
${state.text}
</span>`);
return $state;
}
$(document).ready(function() {
$(".js-example-templating").select2({
templateResult: formatState
});
});function init() {
....
// добавляем в любом удобном месте внутри
suggestView.state.events.add('change', function () {
var activeIndex = suggestView.state.get('activeIndex');
if (typeof activeIndex == 'number') {
activeItem = suggestView.state.get('items')[activeIndex];
}
if (activeItem && activeItem.value != searchAddress.value) {
searchAddress.value = activeItem.value;
}
});
...
});// в каждом distance будет храниться новое значение, которое вы получаете через API
// в каждом buyerAddress будет храниться адрес покупателя
goodDistance = [
{good: "товар1", buyer: buyerAddress, range: distance},
{good: "товар2", buyer: buyerAddress, range: distance}
//... и тд
]Может как то при клике на выпадающий список сначала записать в input а потом отдавать геокодеру?
ymaps.ready(init);
function init() {
var startPlacemark, endPlacemark, multiRoute
let coord_start = ['71.406975', '51.089227'];
var DELIVERY_TARIFF = 100,
MINIMUM_COST = 200,
myMap = new ymaps.Map('map', {
center: coord_start,
zoom: 9,
controls: []
}),
zoomControl = new ymaps.control.ZoomControl({
options: {
size: 'small',
float: 'none',
position: {
bottom: 145,
right: 10
}
}
});
var suggestView = new ymaps.SuggestView('suggest', {
provider: {
suggest: (function(request, options) {
return ymaps.suggest("Нур-Султан," + request);
})
}
});
var searchControl = new ymaps.control.SearchControl({
options: {
provider: 'yandex#map',
noPlacemark: true
}
});
myMap.controls.add(searchControl);
startPlacemark = new ymaps.Placemark(coord_start, {
balloonContent: 'Кабанбай Батыра, 62',
}, {
hideIconOnBalloonOpen: false
});
searchControl.events.add('resultselect', function(e) {
var results = searchControl.getResultsArray();
var selected = searchControl.getSelectedIndex();
coord_end = results[selected].geometry.getCoordinates();
addRoute(coord_start, coord_end)
})
function createPlacemark(coords) {
return new ymaps.Placemark(coords, {
iconCaption: 'поиск...'
}, {
preset: 'islands#violetDotIconWithCaption',
draggable: false
});
}
myMap.events.add('click', function(e) {
let coord_end = e.get('coords');
addRoute(coord_start, coord_end)
});
function addEndPlacemark(coord_end) {
if (endPlacemark) endPlacemark.geometry.setCoordinates(end_coords);
else {
endPlacemark = createPlacemark(end_coords);
myMap.geoObjects.add(endPlacemark);
}
coord_end = endPlacemark.geometry.getCoordinates()
getAddress(coord_end);
myMap.geoObjects.add(endPlacemark);
}
function getAddress(coords) {
endPlacemark.properties.set('iconCaption', 'поиск...');
ymaps.geocode(coords).then(function(res) {
var firstGeoObject = res.geoObjects.get(0);
endPlacemark.properties
.set({
iconCaption: [
firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
].filter(Boolean).join(', '),
balloonContent: firstGeoObject.getAddressLine()
});
});
}
function addRoute(coord_start, coord_end) {
if (multiRoute) multiRoute.model.setReferencePoints([coord_start, coord_end]);
else {
multiRoute = new ymaps.multiRouter.MultiRoute(
{
referencePoints: [
coord_start,
coord_end
],
params: {
results: 1
}
},
{
boundsAutoApply: true
}
);
myMap.geoObjects.add(multiRoute);
}
multiRoute.model.events.add('requestsuccess', function() {
let distance = multiRoute.getActiveRoute().properties.get("distance")
let distance_km = Math.round(distance.value / 1000)
let price = calculate(distance_km)
});
}
myMap.controls.add(zoomControl);
myMap.controls.add(searchControl);
myMap.geoObjects.add(startPlacemark);
function calculate(routeLength) {
return Math.max(routeLength * DELIVERY_TARIFF, MINIMUM_COST);
}
let searchAddress = document.getElementById('suggest');
searchAddress.onchange = (e) => {
e.preventDefault();
let address = e.target.value.trim();
document.getElementById('suggest').value = address;
geocode(address);
console.log(address);
}
function geocode(address) {
var request = address
ymaps.geocode(request).then(
function(res) {
var obj = res.geoObjects.get(0), error, hint;
if (obj) {
switch (obj.properties.get('metaDataProperty.GeocoderMetaData.precision')) {
case 'exact':
break;
case 'number':
case 'near':
case 'range':
error = 'Неточный адрес, требуется уточнение';
hint = 'Уточните номер дома';
break;
case 'street':
error = 'Неполный адрес, требуется уточнение';
hint = 'Уточните номер дома';
break;
case 'other':
default:
error = 'Неточный адрес, требуется уточнение';
hint = 'Уточните адрес';
}
} else {
error = 'Адрес не найден';
hint = 'Уточните адрес';
}
if (error === 'Адрес не найден') showError(error)
else if (error === 'Неполный адрес') searchAddress.focus()
else {
coord_end = obj.geometry.getCoordinates()
addRoute(coord_start, coord_end)
}
},
function(e) {
console.log(e)
}
)
}
function showError(message) {
searchAddress.focus();
console.log(message);
}
}<form method="post" action="...тут путь до PHP к примеру...">
<div>
<input type="radio" id="pavingStones1"
name="pavingStones" value="brick">
<label for="pavingStones1">Кирпич</label>
<input type="radio" id="pavingStones2"
name="pavingStones" value="brickwave">
<label for="pavingStones2">Волна</label>
<input type="radio" id="pavingStones3"
name="pavingStones" value="trapeze">
<label for="pavingStones3">Трапеция</label>
</div>
<div>
<input type="radio" id="stoneColor1"
name="stoneColor" value="black">
<label for="stoneColor1">Черный</label>
<input type="radio" id="stoneColor2"
name="stoneColor" value="red">
<label for="stoneColor2">Красный</label>
</div>
<div>
<button type="submit">Заказать</button>
</div>
</form>"scripts": {
"start": "env-cmd -f .env.dev react-scripts start",
"start--local": "env-cmd -f .env.localhost react-scripts start",
"start--staging": "env-cmd -f .env.staging react-scripts start",
"build--dev": "env-cmd -f .env.dev react-scripts build",
"build--qa": "env-cmd -f .env.staging react-scripts build",
"build--prod": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"compilePublic": "cross-env gulp compilePublicPages",
"compilePrivate": "cross-env gulp compilePrivatePages",
"compileAll": "cross-env gulp compileAll"
}$('.good_code').click(function () {
${"form").submit(); // или тот id, что используется
});$(function () {
$(".inputs").keyup(function () {
if (this.value.length === this.maxLength) {
if ($(this).hasClass("code_4")) {
$(this).blur();
$("form").submit()
} else {
$(this).next(".inputs").focus();
}
}
});
});
@glide:run-after="canSwipe = true"который выполняется именно, что после всех подсчетов, у вас получается this.numActiveSlide += 2, вместо предполагаемого this.numActiveSlide += 1.
А, так как настройки установлены на показ 1 слайда, получаем результат click -> показать следующий -> показать следующий