Это то время года, когда мы, как правило, проводим день с близкими, распространяя счастье. В CT Solutions мы отмечаем этот фестиваль с таким же энтузиазмом, поскольку «Секретный Санта» является нашим основным мероприятием дня.
Но из-за пандемии, которая унесла жизни по всему миру в 2019 году, нам пришлось отклониться от обычных способов празднования, которые все отменяют Рождество в этом году. И как я уже сказал вам, мы любим Рождество (Тайный Санта😉)
Пришлось отклониться от привычных способов празднования и прийти с чем-то другим. Так что вместо того, чтобы отменять Рождество, мы проводим его онлайн, Ура !! Но есть одна загвоздка: мы создаем собственное приложение для случайного назначения секретных Дедов Морозов, и вы создаете это приложение вместе с нами.
Сначала мы создадим страницу входа для проверки идентификатора электронной почты. Эта страница предназначена специально для хозяина, менеджера или отдела кадров, которые будут организовывать мероприятие "Секретный Санта".
Мы использовали вход без пароля с помощью firebase, который отправляет ссылку для входа пользователям на их адрес электронной почты.
const getUserEmailAddress = (e) => {
setUserEmailAddress(e.target.value);
};
const submitEmailAddress = () => {
var actionCodeSettings = {
url: "https://secret-santa-celebration.web.app/",
handleCodeInApp: true,
};
auth
.sendSignInLinkToEmail(userEmailAddress, actionCodeSettings)
.then(() => {
window.localStorage.setItem("emailForSignIn", userEmailAddress);
setUserEmailAddress("");
alert("Please check your email to sign in!");
})
.catch((error) => {
console.log(error);
});
};
Мы использовали authListener, чтобы проверить, переходит ли пользователь по ссылке, указанной в письме.
const authListener = () => {
if (auth.isSignInWithEmailLink(window.location.href)) {
var email = window.localStorage.getItem("emailForSignIn");
if (email !== null) {
auth
.signInWithEmailLink(email, window.location.href)
.then(function (result) {
window.localStorage.removeItem("emailForSignIn");
setCurrentUser(result.user);
})
.catch(function (error) {
setCurrentUser(null);
console.log(error);
});
}
}
};
Теперь мы собираемся создать страницу, на которой мы будем добавлять все имена с соответствующими идентификаторами электронной почты.
В этом разделе мы получаем данные от пользователей и сохраняем их в нашей базе данных.
const getMembersArray = () => {
if ($("#members-name").val() !== "") {
let docId = uuidv4();
var pushOnlyArray = $("#members-name").val().split(", ");
let membersData = [];
let memberNames = [];
let memberEmails = [];
let totalMembers = pushOnlyArray.length / 2;
for (let i = 0; i < pushOnlyArray.length; i++) {
if (i % 2 === 0) {
memberNames.push(pushOnlyArray[i]);
} else {
memberEmails.push(pushOnlyArray[i]);
}
}
for (let j = 0; j < totalMembers; j++) {
let memberData = {
name: memberNames[j],
email: memberEmails[j],
assigned: false,
partner: "",
};
membersData.push(memberData);
}
}
setMembers(membersData);
var docRef = db.collection("secret_santa_draws").doc(docId);
// console.log("user email");
// console.log(auth.currentUser.email);
docRef.set({
user_email: auth.currentUser.email,
secret_santa_id: docId,
members: membersData,
});
generateRandomName(docRef);
// updateNames(docRef);
$("#members-name").val("");
alert("Mails have been sent!");
} else {
alert("Please Add Some members names");
}
};
}
В приведенном выше коде функция getMembersArray используется для получения значений со стороны пользователя.
Чтобы отделить имена и адреса электронной почты от текстовой строки, предоставленной пользователем, мы делим длину массива на 2. Сначала мы разделили все значения и сохранили их в массиве, а затем сохранили имена в другом массиве и адрес электронной почты в другой массив.
let totalMembers = pushOnlyArray.length / 2;
for (let i = 0; i < pushOnlyArray.length; i++) {
if (i % 2 === 0) {
memberNames.push(pushOnlyArray[i]);
} else {
memberEmails.push(pushOnlyArray[i]);
}
}
В этом мы создали массив объектов, в каждом объекте мы храним 4 свойства. Мы разделили имя и адрес электронной почты, данные пользователем в приведенной выше функции getMembersArray, и взяли свойство assign, чтобы проверить, назначен ли член или нет. Значение, хранящееся в «партнере», - это Тайный Дитя Санта-Клауса члена.
{
name: memberNames[j],
email: memberEmails[j],
assigned: false,
partner: "",
}
Теперь назначим случайные имена каждому члену в списке.
const generateRandomName = (docRef) => {
docRef.get().then((doc) => {
if (doc.exists) {
const data = doc.data();
data["members"].forEach((selectedMember) => {
let namesToChooseFrom = [];
if (selectedMember["partner"] === "") {
memberRef.current.forEach((member) => {
if (member["name"] !== selectedMember["name"]) {
if (!member["assigned"]) {
namesToChooseFrom.push(member);
}
}
});
}
В generateRandomName мы будем назначать партнеров каждому выбранному участнику.
if (selectedMember["partner"] === "")
Если указанное выше условие выполняется, мы будем использовать сопоставление для выбора возможного партнера.
if (member["name"] !== selectedMember["name"])
В этом разделе мы проверяем, не совпадают ли имя участника и имя назначенного партнера.
В последней части мы назначим партнеров каждому участнику и обновим данные серверной части.
docRef
.update({
members: memberRef.current,
})
.then(() => {
console.log("member set to assigned");
})
.catch((error) => {
console.log("Error updating document: ", error);
});
В функции generateRandomName мы присваиваем значение (партнера) каждому члену, а также проверяем, было ли это значение уже присвоено или нет.
memberRef.current.forEach((member) => {
if (member["name"] !== selectedMember["name"]) {
if (!member["assigned"]) {
namesToChooseFrom.push(member);
}
}
});
В этой функции мы генерируем случайное число между двумя целыми числами, чтобы выбрать партнера из возможных вариантов.
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}
Что касается интерфейсной части, мы должны помнить только об одном - о том, как мы получаем ввод от пользователя. В нашем случае мы создали только одно поле ввода, откуда мы получаем все имена и идентификаторы электронной почты.
Когда пользователь щелкнет «Get Secret Santa» после добавления всех имен и идентификаторов электронной почты, пользователю будет показано модальное всплывающее окно.
И письмо будет отправлено каждому пользователю с именем их Тайного Дитя Санты.
Вы можете проверить это приложение здесь.
Теперь вы можете создать собственное секретное приложение Санты. Если не секретный Санта, вы можете использовать тот же функционал для создания чего-то другого. Сообщите нам, как вы используете эту функцию и изменяете ее для использования в других приложениях. 😊
Свяжитесь с нами через Instagram Twitter LinkedIn
Или отправьте нам электронное письмо ✉️ по адресу [email protected].
Ознакомьтесь с нашими другими блогами здесь.
