Skip to content

Commit

Permalink
new interface
Browse files Browse the repository at this point in the history
  • Loading branch information
@oybek
oybek committed Feb 8, 2024
1 parent 38d17cf commit 2731da2
Show file tree
Hide file tree
Showing 6 changed files with 499 additions and 216 deletions.
Binary file added spendbook/.DS_Store
View file
Binary file not shown.
4 changes: 4 additions & 0 deletions spendbook/images/check-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
309 changes: 186 additions & 123 deletions spendbook/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,192 @@
<!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="./js/dropDowns.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
</head>
<script>
$(document).ready(function () {
const searchParams = new URLSearchParams(window.location.search);
const chatId = searchParams.get("chatId");
fetch(`https://spendbook.ru/categories?chatId=${chatId}`)
.then((response) => response.json())
.then((userCategories) => {
const categoriesFiltered = categories.filter(
(c) => !userCategories.includes(c)
);
const finalCategories = userCategories.concat(categoriesFiltered);
$.each(finalCategories, function (key, str) {
$("#category").append(`<option value="${str}">${str}</option>`);
});
})
.catch((error) =>
$.each(categories, function (key, str) {
$("#category").append(`<option value="${str}">${str}</option>`);
})
);

function collectData() {
var category = $("#category").val();
if (category === categories[categories.length-1]) {
category = $("#custom_input").val();
}
const rawAmountValue = parseInt($("#amount").val(), 10);
const absAmountValue = Math.abs(rawAmountValue)
$("#amount").val(absAmountValue);
const data = {
category: category,
amount: absAmountValue,
description: $("#text").val(),
date: $("#date_input").val(),
timeOffset: new Date().getTimezoneOffset(),
};
Object.keys(data).forEach(
(key) =>
(data[key] =
data[key] === "any" || data[key] === "" ? null : data[key])
);
if (data.category && data.amount) {
enableSubmit(true);
} else {
enableSubmit(false);
}
return data;
}

function formatDate(date) {
var d = new Date(date),
month = "" + (d.getMonth() + 1),
day = "" + d.getDate(),
year = d.getFullYear();

if (month.length < 2) month = "0" + month;
if (day.length < 2) day = "0" + day;

return [year, month, day].join("-");
}

$("#date_input").val(formatDate(new Date()));

$("#category").on("change", collectData);
$("#custom_input").on("input", collectData);
$("#amount").on("input", collectData);
$("#date_input").on("change", collectData);

$("#custom_label").hide();
$("#custom_input").hide();
$("#category").on("change", function() {
const category = $("#category").val();
if (category === categories[categories.length-1]) {
$("#custom_label").show();
$("#custom_input").show();
} else {
$("#custom_label").hide();
$("#custom_input").hide();
}
});

const mainButton = window.Telegram.WebApp.MainButton;
mainButton.text = "Отправить";
mainButton.enable();
mainButton.onClick(function () {
window.Telegram.WebApp.sendData(JSON.stringify(collectData()));
});

function enableSubmit(activate) {
if (activate) {
mainButton.show();
} else {
mainButton.hide();
}
}
});
</script>
<meta charset="UTF-8">
<title>Spend book page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./styles.css" />

<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 searchParams = new URLSearchParams(window.location.search);
const chatId = searchParams.get("chatId");

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('click', function (e) {
// if ( e.target !== dropdownButton ){
// dropdownButton.classList.remove('dropdown__button_active');
// dropdownMenu.classList.remove('dropdown__list_visible');
// }
// })

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

fetch(`https://spendbook.ru/categories?chatId=${chatId}`)
.then((response) => response.json())
.then((userCategories) => {
const categoriesFiltered = categories.filter(
(c) => !userCategories.includes(c)
);
const finalCategories = userCategories.concat(categoriesFiltered);
$.each(finalCategories, function (key, str) {
// $("#category").append(`<option value="${str}">${str}</option>`);
$('#custom-dropdown').append(`<li class="select-option" data-value="${str}">${str}</li>`)
});
})
.catch((error) => {
$.each(categories, function (key, str) {
// $("#category").append(`<option value="${str}">${str}</option>`);
$('#custom-dropdown').append(`<li class="select-option" data-value="${str}">${str}</li>`)
})

});

$(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('data-value'))
dropdownMenu.removeClass('select-options-visible')

if (dropdownInput.val() === categories[categories.length-1]) {
$(".custom-category").show();
// $("#custom_input").show();
} else {
$(".custom-category").hide();
// $("#custom_input").hide();
}

collectData()
});

function collectData() {
var category = $(".hidden-input").val();
if (category === categories[categories.length-1]) {
category = $("#custom_input").val();
}
const rawAmountValue = parseInt($("#amount").val(), 10);
const absAmountValue = Math.abs(rawAmountValue)
$("#amount").val(absAmountValue);
const data = {
category: category,
amount: absAmountValue,
description: $("#text").val(),
date: $("#date_input").val(),
timeOffset: new Date().getTimezoneOffset(),
};
Object.keys(data).forEach(
(key) =>
(data[key] =
data[key] === "any" || data[key] === "" ? null : data[key])
);
if (data.category && data.amount) {
enableSubmit(true);
} else {
enableSubmit(false);
}
return data;
}

function formatDate(date) {
var d = new Date(date),
month = "" + (d.getMonth() + 1),
day = "" + d.getDate(),
year = d.getFullYear();

if (month.length < 2) month = "0" + month;
if (day.length < 2) day = "0" + day;

return [year, month, day].join("-");
}

$("#date_input").val(formatDate(new Date()));

// $(".dropdown__input_hidden").on("change", collectData);
$("#custom_input").on("input", collectData);
$("#amount").on("input", collectData);
$("#date_input").on("change", collectData);

$(".custom-category").hide();
// $("#custom_input").hide();

const mainButton = window.Telegram.WebApp.MainButton;
mainButton.text = "Отправить";
mainButton.enable();
mainButton.onClick(function () {
window.Telegram.WebApp.sendData(JSON.stringify(collectData()));
});

function enableSubmit(activate) {
if (activate) {
mainButton.show();
} else {
mainButton.hide();
}
}
});
</script>
</head>
<body>
<div>
<form>
<label for="category">Категория траты</label>
<select id="category" name="category"></select>

<label id="custom_label" for="custom">Своя категория</label>
<input id="custom_input" type="text" name="custom" placeholder="Своя категория"/>

<label for="amount">Сумма траты</label>
<input type="number" id="amount" name="amount" placeholder="Сумма" />
<textarea
id="text"
name="text"
placeholder="Комментарий"
rows="3"
></textarea>
<label for="amount">Дата</label>
<input type="date" id="date_input">
</form>
</div>
<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">
<span class="label">Категория</span>
<button class="select-button" type="button">Категория</button>
</div>
<ul id="custom-dropdown" class="select-options"></ul>

<label class="hidden-input-label" for="select-value">
<input id="select-value" class="hidden-input" type="text" name="select-category" value=""/>
</label>

<div class="field-wrapper custom-category">
<label id="custom_label" for="custom_input" class="label">Своя категория</label>
<input id="custom_input" type="text" name="custom" placeholder="Своя категория" class="text-field"/>
</div>

<div class="field-wrapper">
<label for="amount" class="label">Сумма траты</label>
<input type="number" id="amount" name="amount" placeholder="Сумма" class="text-field" />
</div>

<div class="field-wrapper">
<label for="text" class="label">Комментарий</label>
<textarea
id="text"
name="text"
placeholder="Комментарий"
rows="3"
class="text-field"
></textarea>
</div>

<div class="field-wrapper">
<label for="amount" class="label">Дата</label>
<input type="date" id="date_input" class="text-field">
</div>
</form>
</body>
</html>
44 changes: 0 additions & 44 deletions spendbook/js/dropDowns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,47 +20,3 @@ const incomeCategories = [
// Должно быть последним
"Ввести свою категорию",
];

const months = [
{ text: "Январь", value: "1" },
{ text: "Февраль", value: "2" },
{ text: "Март", value: "3" },
{ text: "Апрель", value: "4" },
{ text: "Май", value: "5" },
{ text: "Июнь", value: "6" },
{ text: "Июль", value: "7" },
{ text: "Август", value: "8" },
{ text: "Сентябрь", value: "9" },
{ text: "Октябрь", value: "10" },
{ text: "Ноябрь", value: "11" },
{ text: "Декабрь", value: "12" },
];

$(document).ready(function () {
$.each(months, function (key, obj) {
$("#month").append(`<option value="${obj.value}">${obj.text}</option>`);
});
if (window.Telegram.WebApp.colorScheme === "dark") {
$(":root")
.css('--border-color-2', '#666')
.css('--border-color', '#222')
.css('--bg-color', '#444')
.css('--bg-color-2', '#666')
.css('--fg-color', '#eee');
} else {
$(":root")
.css('--border-color-2', '#aaa')
.css('--border-color', '#ccc')
.css('--bg-color', '#eee')
.css('--bg-color-2', '#fff')
.css('--fg-color', '#222');
}
});

$(".button-group").on("click", ".button", function () {
$(this)
.addClass("button-pressed")
.siblings()
.removeClass("button-pressed")
.addClass("button-default");
});
Loading

0 comments on commit 2731da2

Please sign in to comment.