Javascript-форум - Показать сообщение отдельно - Перевести запрос в асинхронный и вернуть массив

Malleys · #2 (**permalink**) 10.02.2019, 08:07

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Web Audio Player Demo | Easy-Code.ru</title>
	<link rel="stylesheet" href="css/normalize.css" />
	<link type="text/css" href="css/style.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<style>
		#datepicker,
		#datepicker1 {}

		#bl1 div {
			float: left;
			margin-left: 5%;
		}

		#bl1 {
			border: 0px solid red;
			width: 80%;
			height: 40%;
			position: absolute;
			right: 0px;
		}

		#test {
			margin-top: 19%;
		}
	</style>
</head>

<body>
	<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;">
		<h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1>
	</div>
	<div id="bl1">
		<div>
			<p><input type="text" id="datepicker" /></p>
		</div>
		<div>
			<p><input type="text" id="datepicker1" /></p>
		</div>
		<div><button id="test">Расчитать</button></div>
	</div>
	<div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>

	<script>
		
		Highcharts.setOptions({
			lang: {
				months: [
					'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
					'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
				],
				shortMonths: [
					"янв", "фев", "март", "апр", "май", "июнь",
					"июль", "авг", "сент", "окт", "ноя", "дек"
				]
			}
		});
		
		$(function() {
			$("#datepicker").datepicker({
				altFormat: "dd.mm.yy",
				dateFormat: "dd.mm.yy",
				monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
				dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
				onSelect: function(dateText, inst) {
					$(".txt").text(dateText);
				}

			});

			$("#datepicker1").datepicker({
				altFormat: "dd.mm.yy",
				dateFormat: "dd.mm.yy",
				monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
				dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
				onSelect: function(dateText, inst) {
					$(".txt1").text(dateText);
				}
			});

			$('#test').click(async function() {
				var dp = $("#datepicker").val();				
				var [DaY, MonS, yeaR] = dp.split(".");
				
				var dp1 = $("#datepicker1").val();
				var [daY_fin, MonS_fin, yeaR_fin] = dp1.split(".");

				function plusD() {
					return 1000 * 60 * 60 * 24;
				}

				function finish() {
					var data_plus = new Date(yeaR_fin, MonS_fin - 1, daY_fin);
					return data_plus.getTime();
				}

				function start() {
					var data_plus = new Date(yeaR, MonS - 1, DaY);
					return data_plus.getTime();
				}

				var sTarrT = start();
				var fin = finish();
				var plus = plusD();

				function diff() {
					var rest = fin - sTarrT
					return Math.floor(rest / (1000 * 60 * 60 * 24));
				}

				var difF = diff();

				async function proth() {
					var mas = [];

					for (var i = 0; i <= difF; i++) {
						var dataChikl = new Date(sTarrT),
							ChiklY = dataChikl.getFullYear(),
							ChiklM = dataChikl.getMonth() + 1,
							ChiklD = dataChikl.getDate();

						if (ChiklM < 10 && ChiklD < 10) {
							ChiklD = '0' + ChiklD;
							ChiklM = '0' + ChiklM;
						} else if (ChiklM < 10) {
							ChiklM = '0' + ChiklM;
						} else if (ChiklD < 10) {
							ChiklD = '0' + ChiklD;
						}

						var data = await $.ajax({
							url: `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`
						});
						
						var y = "27" in data ? data[27].rate : NaN;

						mas.push([sTarrT, y]);
						sTarrT += plus;
					}

					return mas;
				}
				
				$("#myChart").html(`<div class="loading">Загрузка…</div>`);

				Highcharts.chart('myChart', {
					subtitle: {
						text: 'Cтатистика курса'
					},

					xAxis: {
						type: 'datetime',
						dateTimeLabelFormats: {
							month: '%e %b',
							year: '%b'
						}
					},

					yAxis: {
						title: {
							text: 'Курс гривна/доллар'
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle'
					},

					series: [{
						name: '1$',
						data: await proth()
					}],

					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'center',
									verticalAlign: 'bottom'
								}
							}
						}]
					}
				});
			})
		})
	</script>
</body>
</html>