208 lines
14 KiB
HTML
208 lines
14 KiB
HTML
{% extends '__layout__.html' %}
|
|
{% block title %}{{groupObj.name}}{% endblock %}
|
|
{% block head %}
|
|
<style>
|
|
.group-bg {
|
|
background-color: rgb(30,30,30);
|
|
}
|
|
.text-secondary {
|
|
color: rgb(200,200,200) !important;
|
|
}
|
|
.bg-drop {
|
|
box-shadow: 0px 0px 10px 0px rgb(0,0,0,0.5);
|
|
}
|
|
</style>
|
|
<script src="/static/js/groupMembers.js"></script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="main">
|
|
<div class="ms-auto me-auto ps-2 pe-2 mb-3" style="width: 1200px;min-height: 100vh;margin-top: 120px;">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div>
|
|
{% for category, message in messages %}
|
|
{% if category == 'error': %}
|
|
<div class="alert border p-2 text-center alert-danger border-danger">
|
|
{{ message }}
|
|
</div>
|
|
{% endif %}
|
|
{% if category == 'success': %}
|
|
<div class="alert border p-2 text-center alert-success border-success">
|
|
{{ message }}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<div class="row">
|
|
<div class="col-2" style="max-height: 400px;">
|
|
<a class="btn btn-primary w-100 mb-0 rounded-bottom-0 bg-drop" href="/groups/create"><i class="bi bi-plus-circle"></i> Create Group</a>
|
|
<a class="btn btn-success w-100 mb-0 rounded-0" href="/groups/search"><i class="bi bi-search"></i> Search Groups</a>
|
|
<div class="rounded h-100 group-bg rounded-top-0 bg-drop" style="overflow-y: auto;">
|
|
{% for userMember in UserGroups: %}
|
|
<a href="/groups/{{userMember.group.id}}/" class="text-decoration-none p-2 d-flex align-items-center" {% if groupObj == userMember.group %}style="background-color: rgba(0,0,0,0.5);"{% endif %}>
|
|
<img src="/Thumbs/GroupIcon.ashx?groupid={{userMember.group.id}}&x=48&y=48" class="rounded-2" width="48px" height="48px">
|
|
<p class="text-truncate m-0 ms-2 flex-fill text-white" style="font-size: 12px;">{{userMember.group.name}}</p>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="col-10">
|
|
<div class="rounded p-3 group-bg bg-drop">
|
|
<div class="d-flex">
|
|
<img src="/Thumbs/GroupIcon.ashx?groupid={{groupObj.id}}&x=150&y=150" class="rounded border me-3" width="130px" style="aspect-ratio: 1/1;">
|
|
<div>
|
|
<h1 class="m-0">{{groupObj.name}}</h1>
|
|
<p class="m-0">Owned By {% if groupObj.owner_id != None: %}<a href="/users/{{groupObj.owner.id}}/profile" class="text-decoration-none">{{groupObj.owner.username}}</a>{%else%}<span class="text-white">No One!</span>{%endif%}</p>
|
|
<div class="mt-3 d-flex">
|
|
<p class="text-white fw-bold">{{groupservice.GetGroupMemberCount(groupObj)}} <span class="text-secondary fw-normal">Members</span></p>
|
|
{% if UserCurrentRole.rank != 0: %}
|
|
<p class="text-white fw-bold ms-4">{{UserCurrentRole.name}} <span class="text-secondary fw-normal">Rank</span></p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown d-flex justify-content-end">
|
|
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
{% if isGroupAdmin: %}
|
|
<li><a class="dropdown-item" href="/groups/admin/{{groupObj.id}}">Group Admin</a></li>
|
|
{%endif%}
|
|
{% if UserCurrentRole.rank != 0: %}
|
|
<li><form action="/groups/leave/{{groupObj.id}}" method="post"><input type="hidden" name="csrf_token" value="{{csrf_token()}}"><button class="dropdown-item" type="submit">Leave Group</button></form></li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% if UserCurrentRole.rank == 0 and CurrentJoinRequest == None: %}
|
|
<form action="/groups/join/{{groupObj.id}}" method="post">
|
|
<button class="btn btn-outline-primary text-white w-100 mt-2 bg-drop">Join Group</button>
|
|
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
|
|
</form>
|
|
{% endif %}
|
|
{% if CurrentJoinRequest != None %}
|
|
<form action="/groups/leave/{{groupObj.id}}" method="post">
|
|
<button class="btn btn-outline-danger text-white w-100 mt-2 bg-drop">Cancel Join Request</button>
|
|
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
|
|
</form>
|
|
{%endif%}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded p-2 group-bg mt-2 bg-drop">
|
|
<h3 class="m-0">Description</h3>
|
|
<div class="text-secondary mb-2 mt-2">
|
|
{% for line in groupObj.description.split('\n'): %}
|
|
{% if line.strip() != '' %}
|
|
<p class=" m-0">{{line}}</p>
|
|
{%else%}
|
|
<br>
|
|
{%endif%}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% if UserCurrentRole.permissions.view_status: %}
|
|
{% if GroupStatus != None: %}
|
|
<div class="rounded p-2 group-bg mt-2 bg-drop">
|
|
<div class="d-flex">
|
|
<a href="/users/{{GroupStatus.poster_id}}/profile"><img src="/Thumbs/Head.ashx?x=48&y=48&userId={{GroupStatus.poster_id}}" style="aspect-ratio: 1/1;" class="rounded-3 border"></a>
|
|
<div class="flex-fill border bg-dark p-2 ms-2 rounded position-relative">
|
|
<p class="m-0 mb-3 text-white">{{GroupStatus.content}}</p>
|
|
<p class="m-0 mt-auto text-secondary position-absolute w-100" style="font-size: 13px;bottom: 5px;"><a class="text-decoration-none" href="/users/{{GroupStatus.poster_id}}/profile">{{GroupStatus.poster.username}}</a> Posted at {{GroupStatus.created_at.strftime("%b %d, %Y %I:%M %p")}} UTC</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%endif%}
|
|
{% endif %}
|
|
{% if UserCurrentRole.permissions.post_to_status: %}
|
|
<div class="rounded p-2 group-bg mt-2 bg-drop">
|
|
<form method="post" action="/groups/update_status/{{groupObj.id}}">
|
|
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
|
|
<div class="d-flex">
|
|
<input type="text" class="form-control" name="status" placeholder="Update Group Status ( Leave blank to remove )"></input>
|
|
<button class="btn btn-primary ms-2">Post</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{%endif%}
|
|
<div class="rounded p-2 group-bg mt-2 bg-drop group-member-list" data-groupid="{{groupObj.id}}">
|
|
<div class="d-flex align-items-center">
|
|
<h3 class="m-0">Members</h3>
|
|
<div class="ms-auto">
|
|
<select class="form-control members-select-role">
|
|
{% for role in GroupRoles: %}
|
|
{% if role.rank != 0: %}
|
|
<option value="{{role.id}}">{{role.name}} ({{role.member_count}})</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="user-card-container mt-2" style="min-height: 100px;display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 7px;">
|
|
</div>
|
|
<div class="align-items-center d-flex justify-content-center mt-2">
|
|
<button class="btn btn-sm text-white btn-primary me-2 pagination-back-btn" disabled>Previous</button><p class="m-0 pagination-page-number">Page 1</p><button class="btn btn-sm text-white btn-primary ms-2 pagination-next-btn" disabled>Next</button>
|
|
</div>
|
|
</div>
|
|
{% if UserCurrentRole.permissions.view_wall: %}
|
|
<div class="rounded p-2 group-bg mt-2 bg-drop">
|
|
<h5>Group Wall</h5>
|
|
{% if UserCurrentRole.permissions.post_to_wall: %}
|
|
<form method="post" action="/groups/wall_post/{{groupObj.id}}" class="d-flex">
|
|
<div class="form-floating flex-fill">
|
|
<textarea name="post_content" class="form-control" placeholder="Post a message" id="floatingTextarea2" style="max-height: 100px;min-height: 100px;" name="message"></textarea>
|
|
<label for="floatingTextarea2">Message</label>
|
|
</div>
|
|
<div>
|
|
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
|
|
<button class="btn btn-primary ms-2 mt-auto" type="submit">Post</button>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
<div class="mt-3 border-bottom">
|
|
{% for WallPost in GroupWall.items %}
|
|
<div class="border-top p-2">
|
|
<div class="d-flex" style="overflow: hidden;">
|
|
<img class="rounded" src="/Thumbs/Avatar.ashx?userId={{WallPost.poster.id}}&x=150&y=150" width="150px" height="150px">
|
|
<div class="h-100 position-relative flex-fill" style="min-height: 150px;">
|
|
<a class="fw-bold text-white text-decoration-none" href="/users/{{WallPost.poster.id}}/profile" style="font-size: 20px;">{{WallPost.poster.username}}</a>
|
|
<div class="text-secondary">
|
|
{% for ContentLine in WallPost.content.split('\n'): %}
|
|
<p class="m-0">{{ContentLine}}</p>
|
|
{% endfor %}
|
|
</div>
|
|
<p class="m-0 mt-auto text-secondary position-absolute w-100" style="font-size: 13px;bottom: 0;">Posted at {{WallPost.created_at.strftime("%b %d, %Y %I:%M %p")}} UTC </p>
|
|
{% if WallPost.poster.id == currentuser.id or UserCurrentRole.permissions.delete_from_wall: %}
|
|
<div class="dropdown d-flex justify-content-end position-absolute" style="top: 0; right: 0;">
|
|
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><form action="/groups/{{groupObj.id}}/delete_post/{{WallPost.id}}" method="post"><button class="dropdown-item" type="submit">Delete Post</button></form></li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="align-items-center d-flex justify-content-center mt-2">
|
|
<a class="btn btn-sm text-white btn-primary me-2 pagination-back-btn {% if not isTherePreviousPage: %}disabled {% endif %}" {% if isTherePreviousPage: %}href="/groups/{{groupObj.id}}/{{slug}}?page={{PageNumber-1}}"{%endif%}>Previous</a>
|
|
<p class="m-0 pagination-page-number">Page {{PageNumber}}</p>
|
|
<a class="btn btn-sm text-white btn-primary ms-2 pagination-next-btn {% if not isThereNextPage: %}disabled {% endif %}" {% if isThereNextPage: %}href="/groups/{{groupObj.id}}/{{slug}}?page={{PageNumber+1}}"{%endif%}>Next</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="text-decoration-none user-card-template" style="display: none;" href="/users/1/profile">
|
|
<img width="90px" height="90px" class="border rounded avatar-img">
|
|
<p class="m-0 text-center user-name text-truncate" style="font-size: 13px;width: 90px;"></p>
|
|
</a>
|
|
{% endblock %}
|