diff options
Diffstat (limited to 'src/web/_views/profile/main.php')
| -rw-r--r-- | src/web/_views/profile/main.php | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/src/web/_views/profile/main.php b/src/web/_views/profile/main.php new file mode 100644 index 0000000..3e7129c --- /dev/null +++ b/src/web/_views/profile/main.php @@ -0,0 +1,269 @@ +<?php /* Copyright (c) 2024 Freya Murphy */ ?> +<?php /* vi: syntax=php */ ?> +<main id="main"> + <div id="profile-header-container"> + <div id="profile-header" class="col"> + <?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?> + <div class="info row"> + <div class="pfp-wrapper"> + <?=pfp($user)?> + </div> + <div class="col content grow"> + <div class="row grow"> + <div class="col mb"> + <strong class="name"><?=$this->format_name($user)?></strong> + <span class="subtext"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span> + </div> + <?php if ( + $session && + ($session['id'] != $user['id']) + ): ?> + <div class="follow"> + <?=ilang( + 'action_follow', + id: 'action-follow-follow', + class: 'btn btn-alt', + sub: [$user['first_name']], + style: (!$following && !$followed) ? '' : 'display: none', + )?> + <?=ilang( + 'action_follow_back', + id: 'action-follow-follow-back', + class: 'btn btn-alt', + sub: [$user['first_name']], + style: (!$following && $followed) ? '' : 'display: none', + )?> + <?=ilang( + 'action_following', + id: 'action-follow-following', + class: 'btn btn-alt btn-primary', + sub: [$user['first_name']], + style: ($following && !$followed) ? '' : 'display: none', + )?> + <?=ilang( + 'action_friends', + id: 'action-follow-friends', + class: 'btn btn-alt btn-primary', + sub: [$user['first_name']], + style: ($following && $followed) ? '' : 'display: none', + )?> + </div> + <script> + let following = <?=json_encode($following)?>; + let followingId = <?=json_encode($following_id)?>; + let followed = <?=json_encode($followed)?>; + let followee_id = <?=json_encode($user['id'])?>; + let btns = {}; + + const disableBtn = (btn) => { + btn.css('display', 'none'); + }; + + const enableBtn = (btn) => { + btn.css('display', ''); + }; + + const updateFollow = () => { + for (let btn of Object.values(btns)) { + disableBtn(btn); + } + if (!following && !followed) { + enableBtn(btns['follow']); + } else if (!following && followed) { + enableBtn(btns['follow-back']); + } else if (following && !followed) { + enableBtn(btns['following']); + } else if (following && followed) { + enableBtn(btns['friends']); + } + } + + const onPatchFollow = (data) => { + following = data[0].value; + updateFollow(); + } + + const onPostFollow = (data) => { + followingId = data[0].id; + following = true; + updateFollow(); + } + + const onClickFollow = () => { + if (followingId) { + $.ajax({ + url: '/api/follow?id=eq.' + followingId, + method: 'PATCH', + data: JSON.stringify({ followee_id, value: !following }), + success: onPatchFollow + }); + } else { + $.ajax({ + url: '/api/follow', + method: 'POST', + data: JSON.stringify({ followee_id, value: !following }), + success: onPostFollow, + }); + } + } + + const loadBtn = (name) => { + let btn = $('#action-follow-' + name); + btn.on('click', onClickFollow); + + btns[name] = btn; + }; + + loadBtn('follow'); + loadBtn('follow-back'); + loadBtn('following'); + loadBtn('friends'); + </script> + <?php endif; ?> + </div> + <?php if(strlen($user['profile_bio']) > 0): ?> + <br> + <strong><?=ucfirst(lang('bio'))?></strong> + <span class="subtext"><?=$user['profile_bio']?></span> + <?php endif; ?> + </div> + </div> + <hr> + <div class="row options"> + <?=ilang('action_posts', + sub: [$user['first_name']], + class: 'btn btn-primary btn-border', + id: 'action-posts' + )?> + <?=ilang('action_about', + sub: [$user['first_name']], + class: 'btn', + id: 'action-about' + )?> + <?=ilang('action_followers', + sub: [$user['first_name']], + class: 'btn', + id: 'action-followers' + )?> + <?=ilang('action_following', + sub: [$user['first_name']], + class: 'btn', + id: 'action-following' + )?> + </div> + </div> + </div> + <div id="tab-container" class="mt"> + <div id="tab-posts" class="tab"> + <?php + $_GET['user_id'] = $user['id']; + $this->post_controller->index(); + ?> + </div> + <div id="tab-about" class="tab card"> + <h1><?=ucfirst(lang('about_general'))?></h1> + <table> + <tr> + <td><strong><?=ucfirst(lang('about_general_username'))?></strong></td> + <td><?=$user['username']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_general_full_name'))?></strong></td> + <td><?=$user['first_name'] . ' ' . $user['last_name']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_general_email'))?></strong></td> + <td><?=$user['email']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_general_gender'))?></strong></td> + <td><?=$user['gender']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_general_birth_date'))?></strong></td> + <td><?=$this->format_date($user['birth_date'])?></td> + </tr> + </table> + <h1><?=ucfirst(lang('about_stats'))?></h1> + <table> + <tr> + <td><strong><?=ucfirst(lang('about_stats_posts'))?></strong></td> + <td><?=$user['post_count']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_stats_like'))?></strong></td> + <td><?=$user['like_count']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_stats_comments'))?></strong></td> + <td><?=$user['comment_count']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_stats_following'))?></strong></td> + <td><?=$user['followed_count']?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_stats_joined'))?></strong></td> + <td><?=$this->format_date($user['created'])?></td> + </tr> + <tr> + <td><strong><?=ucfirst(lang('about_stats_seen'))?></strong></td> + <td><?=$this->format_date($user['seen'])?></td> + </tr> + </table> + </div> + <div id="tab-followers" class="tab"> + <?php + $_GET['filter'] = 'follower'; + $_GET['uid'] = $user['id']; + $this->people_controller->content(); + ?> + </div> + <div id="tab-following" class="tab"> + <?php + $_GET['filter'] = 'followee'; + $_GET['uid'] = $user['id']; + $this->people_controller->content(); + ?> + </div> + </div> + <script> + let tabs = {}; + + const disableTab = (tab) => { + tab.btn.removeClass('btn-primary'); + tab.btn.removeClass('btn-border'); + tab.tab.css('display', 'none'); + }; + + const enableTab = (tab) => { + tab.btn.addClass('btn-primary'); + tab.btn.addClass('btn-border'); + tab.tab.css('display', ''); + }; + + const loadTab = (name, disable = true) => { + let btn = $('#action-' + name); + btn.on('click', function() { + for (let tab of Object.values(tabs)) { + disableTab(tab); + } + enableTab(tabs[name]); + }); + + tabs[name] = { + 'btn': btn, + 'tab': $('#tab-' + name) + }; + + if (disable) { + disableTab(tabs[name]); + } + }; + + loadTab('posts', false); + loadTab('about'); + loadTab('followers'); + loadTab('following'); + </script> +</main> |