areaweb-social-networtk/public/assets/main/js/app.js

document.querySelector('select[name="month"]').addEventListener('change', () => {
    const select_value = event.target.value,
        options = event.target.options;

    for (let key in options) {
        if (options[key].value === select_value) {
            const days_count = options[key].getAttribute('days-count');
            days_list = document.querySelector('select[name="day"]');
            days_list.innerHTML = ``;
            for (let i = 0; i < days_count; i++) {
                days_list.innerHTML += `<option value="${i + 1}">${i + 1}</option>`
            }
        }
    }
});
document.querySelector('#country').addEventListener('change', () => {
    const select_value = event.target.value,
        options = event.target.options;

    for (let key in options) {
        if (options[key].value === select_value) {
            let city = document.querySelector('#city');
            fetch(`/api/cities?country_id=${select_value}`)
                .then(res => {
                    return res.json();
                })
                .then(data => {
                    city.innerHTML = ``;
                    for (let key in data) {
                        city.innerHTML += `<option value="${data[key].id}">${data[key].name}</option>`;
                    }
                });
        }
    }
});

function selectAvatar(event) {
    const tmp_avatar = URL.createObjectURL(event.target.files[0]);
    document.querySelector('.avatar-edit').setAttribute('src', tmp_avatar);
}

function publicArticle(event) {
    event.preventDefault();
    event.target.classList.add('disable');
    event.target.innerHTML = `<i class="fad fa-spinner-third"></i>`;

    const body = document.querySelector('textarea[name="body"]').value,
        formData = new FormData();

    formData.append('body', body);

    fetch('/article/public', {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf"]').getAttribute('content')
        },
        body: formData
    }).then(res => {
        return res.json();
    }).then(data => {

        if (data.body) {
            const error_el = document.querySelector('.body-error-field');
            error_el.classList.remove('d-none')
            error_el.innerHTML = `<strong>Проверьте правильность введенных данных</strong>`
            event.target.innerHTML = `<i class="fad fa-paper-plane"></i>`;
            event.target.classList.remove('disable');
            return;
        }

        const posts = document.querySelector('.posts');
        posts.innerHTML = `
        <li>
            <div class="author-controllers">
                <div style="display:flex; align-items:center;">
                    <img src="${data.user.avatar_url}" alt="Это вы">
                    <div style="margin-left: 10px;">
                        <p style="color: #ffffff;font-weight: 700;">${data.user.name} ${data.user.surname}</p>
                    </div>

                </div>
                <div class="controllers">
                    <i class="far fa-ellipsis-h"></i>
                    <ul>
                        <li><a href="#">Удалить</a></li>
                    </ul>
                </div>
            </div>
            <div class="body">
                <p>${body}</p>
            </div>
            <div style="display:flex;justify-content: space-between; align-items: center;">
                <ul class="actions">
                    <li class="like">
                        <i class="far fa-heart"></i>
                        <span>9</span>
                    </li>
                </ul>
                <span style="font-style: italic; color: #e3e3e3; font-size: 12px;">${data.created_at}</span>
            </div>
        </li>
        ` + posts.innerHTML;
        event.target.innerHTML = `<i class="fad fa-paper-plane"></i>`;
        event.target.classList.remove('disable');
        document.querySelector('textarea[name="body"]').value = '';
    }).catch(err => {

    })
}

function likeArticle(article_id) {

    const counter = document.querySelector('span.count_likes[article-id="' + article_id + '"]');

    if (event.target.classList.contains('fas')) {
        event.target.classList.remove('fas');
        event.target.classList.add('far');

        counter.innerText = parseInt(counter.innerText) - 1;

    } else {
        event.target.classList.remove('far');
        event.target.classList.add('fas');

        counter.innerText = parseInt(counter.innerText) + 1;
    }

    const formData = new FormData();
    formData.append('id', article_id);

    fetch(`/article/like`, {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf"]').getAttribute('content')
        },
        body: formData
    }).then(res => {
        return res.json();
    }).then(data => {

    })

}

function searchFriends(event) {
    const body = event.target.value;
    if (body.length === 0) return;
    fetch(`/friends/search?q=${body}`)
        .then(res => {
            return res.json();
        })
        .then(data => {
            document.querySelector('.search-friends').innerHTML = '';
            data.forEach(user => {
                document.querySelector('.search-friends').innerHTML += `
                <li>
                    <div class="user-info">
                        <img src="${user.avatar_url}" alt="">
                        <a href="/u/${user.username}"><h3>${user.name} ${user.surname}</h3></a>
                    </div>
                    <ul class="actions">
                        <li>
                            <a href="#">Удалить из друзей</a>
                        </li>
                        <li>
                            <form action="/friends/add" method="post" id="add-friend_${user.id}">
                            <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf"]').getAttribute('content')}">
                            <input type="hidden" name="id" value="${user.id}">
                            </form>
                            <a
                            href="#"
                            onclick="event.preventDefault(); document.getElementById('add-friend_${user.id}').submit()"
                            >Добавить в друзья</a>
                        </li>
                    </ul>
                </li>
                `
            });
            console.log(data)
        });
}