Skip to content

Commit

Permalink
update test
Browse files Browse the repository at this point in the history
  • Loading branch information
Oibek Khashimov committed Feb 1, 2024
1 parent f77ea0c commit 9bcf60d
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 165 deletions.
Binary file modified test/spendbook/.DS_Store
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion test/spendbook/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@

<body>

<dotlottie-player src="https://lottie.host/31eb8f50-5493-47de-939a-adffa6bd4317/wbaxE0xVId.json" background="transparent" speed="1" style="width: 100%; height: 200px; text-align: center;" loop autoplay></dotlottie-player>
<dotlottie-player src="https://lottie.host/31eb8f50-5493-47de-939a-adffa6bd4317/wbaxE0xVId.json" background="transparent" speed="1" style="width: 100%; height: 100px; text-align: center;" loop autoplay></dotlottie-player>

<form class="form">
<div class="field-wrapper">
Expand Down
189 changes: 93 additions & 96 deletions test/spendbook/report/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,94 @@
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<script src="../js/dropDowns.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../styles.css" />
</head>

<script>
$(document).ready(function () {
const dropdownButton = $('.select-button')
const dropdownMenu = $('.select-options')
const dropdownInput = $('.hidden-input')

dropdownButton.on('click', function () {
dropdownMenu.toggleClass('select-options-visible');
$(this).toggleClass('dropdown__button_active');
});

$(document).on('keydown', function (e) {
if( e.key === 'Tab' || e.key === 'Escape' ) {
dropdownButton.removeClass('dropdown__button_active');
dropdownMenu.removeClass('select-options-visible');
}
})

$.each(months, function (key, obj) {
// $("#month").append(`<option class="select-option" value="${obj.value}">${obj.text}</option>`);
$("#custom-dropdown").append(`<option class="select-option" value="${obj.value}">${obj.text}</option>`);
});

$(document).on('click', '.select-option', function() {
$('.select-options .select-option').each(function (){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected')
}
})

$(this).addClass('selected')
dropdownButton.html($(this).text())
dropdownInput.val($(this).attr('value'))
dropdownMenu.removeClass('select-options-visible')

collectData()
});


function collectData() {
const data = {
month: parseInt(dropdownInput.val(), 10),
year: parseInt($('input[name="year"]:checked').val(), 10),
};
Object.keys(data).forEach(
(key) =>
(data[key] =
data[key] === "any" || data[key] === "" ? null : data[key])
);

console.log($('input[name="year"]:checked').val())
return data;
}

// $("#year").on("click", collectData);
dropdownInput.val(new Date().getMonth()+1);

const m = new Date().getMonth()+1

const currentMonth = months.find((item) => item.value === m.toString())

dropdownButton.html(currentMonth.text)

const mainButton = window.Telegram.WebApp.MainButton;
mainButton.text = "Получить отчет";
mainButton.enable();
mainButton.show();
mainButton.onClick(function () {
window.Telegram.WebApp.sendData(JSON.stringify(collectData()));
});
});
</script>

<body>
<dotlottie-player src="https://lottie.host/31eb8f50-5493-47de-939a-adffa6bd4317/wbaxE0xVId.json" background="transparent" speed="1" style="width: 100%; height: 200px; text-align: center;" loop autoplay></dotlottie-player>
<dotlottie-player src="https://lottie.host/244ea692-5ea7-43fb-9bf3-70674a35ee80/1NzNvDbx72.json" background="transparent" speed="1" style="width: 100%; height: 100px; text-align: center;" loop autoplay></dotlottie-player>

<form class="form">
<div class="field-wrapper">
<span class="label">Категория</span>
<button class="select-button" type="button">Категория</button>
<span class="label">Месяц</span>
<button class="select-button" type="button">Месяц</button>
</div>
<ul id="custom-dropdown" class="select-options"></ul>

Expand All @@ -21,100 +98,20 @@

<div class="field-wrapper">
<span class="label">Год</span>
<div class="radiobtn">
<input type="radio" id="huey"
name="year" value="2024" checked />
<label for="huey">2024</label>
</div>

<div class="radiobtn">
<input type="radio" id="dewey"
name="year" value="2023" />
<label for="dewey">2023</label>
</div>

<div class="radiobtn">
<input type="radio" id="louie"
name="year" value="2022" />
<label for="louie">2022</label>
</div>

<label class="radio-input-label">
<input type="radio" name="year" value="2024" class="radio-input" checked/>
<span class="radio-input-text">2024</span>
</label>
<label class="radio-input-label">
<input type="radio" name="year" value="2023" class="radio-input"/>
<span class="radio-input-text">2023</span>
</label>
<label class="radio-input-label">
<input type="radio" name="year" value="2022" class="radio-input"/>
<span class="radio-input-text">2022</span>
</label>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<script src="../js/dropDowns.js"></script>
<script>
$(document).ready(function () {
const dropdownButton = $('.select-button')
const dropdownMenu = $('.select-options')
const dropdownInput = $('.hidden-input')

dropdownButton.on('click', function () {
dropdownMenu.toggleClass('select-options-visible');
$(this).toggleClass('dropdown__button_active');
});

$(document).on('keydown', function (e) {
if( e.key === 'Tab' || e.key === 'Escape' ) {
dropdownButton.removeClass('dropdown__button_active');
dropdownMenu.removeClass('select-options-visible');
}
})

$.each(months, function (key, obj) {
// $("#month").append(`<option class="select-option" value="${obj.value}">${obj.text}</option>`);
$("#custom-dropdown").append(`<option class="select-option" value="${obj.value}">${obj.text}</option>`);
});

$(document).on('click', '.select-option', function() {
$('.select-options .select-option').each(function (){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected')
}
})

$(this).addClass('selected')
dropdownButton.html($(this).text())
dropdownInput.val($(this).attr('value'))
dropdownMenu.removeClass('select-options-visible')

collectData()
});


function collectData() {
const data = {
month: parseInt(dropdownInput.val(), 10),
year: parseInt($('input[name="year"]:checked').val(), 10),
};
Object.keys(data).forEach(
(key) =>
(data[key] =
data[key] === "any" || data[key] === "" ? null : data[key])
);

console.log($('input[name="year"]:checked').val())
return data;
}

// $("#year").on("click", collectData);
dropdownInput.val(new Date().getMonth()+1);

const m = new Date().getMonth()+1

const currentMonth = months.find((item) => item.value === m.toString())

dropdownButton.html(currentMonth.text)

const mainButton = window.Telegram.WebApp.MainButton;
mainButton.text = "Получить отчет";
mainButton.enable();
mainButton.show();
mainButton.onClick(function () {
window.Telegram.WebApp.sendData(JSON.stringify(collectData()));
});
});
</script>
</html>
Loading

0 comments on commit 9bcf60d

Please sign in to comment.