Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement prettier skills page #43

Merged
merged 9 commits into from
May 10, 2024
Merged

Implement prettier skills page #43

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
989d9c8
feat: Layout changes + POC
0xlynix May 5, 2024
8ede182
fix: Fix formatting for script tag
0xlynix May 5, 2024
634ebdd
feat: finish skills overhaul UI update
0xlynix May 5, 2024
0bdbc56
feat: finish this layout stuff
0xlynix May 5, 2024
6f8d6b1
fix: oops button color
0xlynix May 6, 2024
1ccc6f1
Merge branch 'dev.waterwolf.club' into feat-pretti-talents
BusterNeece May 10, 2024
2ca486c
Skills page:
BusterNeece May 10, 2024
a253a9b
Add shortcut to optimize performance when clearing searches.
BusterNeece May 10, 2024
65e1637
Merge pull request #41 from WaterWolfDev/feat-pretti-talents
BusterNeece May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 165 additions & 102 deletions backend/templates/dashboard/skills.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,123 +6,186 @@
{{ parent() }}

<script>
const skillLookup = {{ skillLookup|json_encode|raw }};

ready(() => {
const rigNameInput = document.getElementById("skill");
const suggestionBox = document.getElementById("suggestion-box");

rigNameInput.addEventListener("input", async function () {
const query = rigNameInput.value;
if (query.length === 0) {
suggestionBox.innerHTML = '';
suggestionBox.style.display = 'none';
return;
}
function filterCommunitySkills(event) {
doFilter(
event.target.value.toUpperCase(),
'.community-talent'
);
}

const suggestions = skillLookup.slice().filter(
(value) => value.includes(query)
function filterMySkills(event) {
doFilter(
event.target.value.toUpperCase(),
'.mytalents-talent'
);
}

function doFilter(filter, selector) {
if (filter === '') {
$(selector).removeClass('d-none');
} else {
$(selector).each(function() {
const talentName = $(this).find('h2').first().text();
if (!talentName.toUpperCase().includes(filter)) {
$(this).addClass('d-none');
} else {
$(this).removeClass('d-none');
}
});
}
}

suggestionBox.innerHTML = suggestions.map(s => `<div class="badge badge-pill badge-primary" onclick="selectSuggestion('${s}')">${s}</div>`).join('');
suggestionBox.style.display = 'block';
});
});
document.querySelector('#searchMySkills').addEventListener('load', filterMySkills, false);
document.querySelector('#searchMySkills').addEventListener('keyup', filterMySkills, false);

function selectSuggestion(value) {
document.getElementById("skill").value = value;
document.getElementById("suggestion-box").innerHTML = '';
document.getElementById("suggestion-box").style.display = 'none';
}
document.querySelector('#searchCommunitySkills').addEventListener('load', filterCommunitySkills, false);
document.querySelector('#searchCommunitySkills').addEventListener('keyup', filterCommunitySkills, false);
});
</script>
{% endblock %}

{% block content %}
{{ breadcrumbs.body(
{{ breadcrumbs.body(
{
'dashboard': 'My Dashboard'
},
'My Skills'
) }}

<h1>My Skills</h1>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddFixture">
Add New Skill
</button>

<!-- Modal -->
<div class="modal fade" id="AddFixture">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Add Skill</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h1>My Skills</h1>

<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#your-skills" type="button" role="tab" aria-controls="home" aria-selected="true">Your Talent Pool
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#community-skills" type="button" role="tab" aria-controls="community-skills">Community Talent Pool
</button>
</li>
<li class="nav-item d-none"> <!-- Coming Soon -->
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#find-skills-tab" type="button" role="tab" aria-controls="find-skills-tab">Find Talent
</button>
</li>

<div class="ms-auto">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#AddFixture">
Add New Skill
</button>
</div>

<!-- Modal body -->
<div class="modal-body">
<form method="POST" class="form-group">
<label for="rig_name">Skill:</label>
<input type="text" name="skill" class="form-control" id="skill" autocomplete="off" required>
<div id="suggestion-box"></div>

<div class="d-grid g-2">
<input type="submit" name="add_fixture" value="Add New Skill" class="btn btn-primary mt-3">
</div>

<small>Type out your skills. If Suggestions appear, use them! If none appear, you must have a
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane fade active show" id="your-skills" role="tabpanel" aria-labelledby="your-skills-tab">
<input class="form-control" id="searchMySkills" name="searchMySkills" type="text"
placeholder="Search" value="">

<!-- Grid -->
<div class="row row-cols-1 row-cols-md-2 g-2 mt-3" id="myTalentsContainer">
{% for row in myTalents %}
<div class="col mytalents-talent">
<div class="card bg-dark p-3">
<div class="d-flex align-items-center">
<h2 class="flex-fill m-0">{{ row.skill }}</h2>
<form class="flex-shrink-0" method="POST">
<input type="hidden" name="delete_id" value="{{ row.id|e('html_attr') }}">
<button type="submit" class="btn btn-danger btn-sm" data-confirm-danger="Remove skill?">Delete Skill</button>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="tab-pane fade" id="community-skills" role="tabpanel" aria-labelledby="community-skills-tab">
<input class="form-control" id="searchCommunitySkills" name="searchCommunitySkills" type="text"
placeholder="Search" value="">

<!-- Grid -->
<div class="row row-cols-1 row-cols-md-2 g-2 mt-3" id="communityTalentsContainer">
{% for row in communityTalents %}
<div class="col community-talent">
<div class="card bg-dark p-3">
<div class="d-flex align-items-center">
<h2 class="flex-fill m-0">{{ row.skill }}</h2>
<form method="POST" class="flex-shrink-0">
<input type="hidden" name="skill" value="{{ row.skill|e('html_attr') }}">
<input type="submit" name="add_fixture" value="Add Skill" class="btn btn-success btn-sm">
</form>
</div>

{{ row.occurrences }}
Share This Skill.
</div>
</div>
{% endfor %}
</div>
</div>
<div class="tab-pane fade" id="find-skills-tab" role="tabpanel" aria-labelledby="find-skills-tab"> <!-- Coming Soon -->
<input class="form-control" id="email" name="email" type="text" placeholder="Search" value="">

<!-- Grid -->
<div class="row row-cols-2 g-2 mt-3">
<div class="col">
<div class="card bg-dark p-3">
<div
class="d-flex flex-row">
<!-- Added Bootstrap classes here -->
<img src="http://localhost:8080/static/img/avatar.webp" alt="avatar" style="width: 100px;height: 100px;margin-right:20px;">
<div>
<h2>username</h2>
user.name shares this skill.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="AddFixture">
<div class="modal-dialog">
<div
class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Add Skill</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<!-- Modal body -->
<div class="modal-body">
<form method="POST" class="form-group">
<label for="rig_name">Skill:</label>
<input type="text" name="skill" class="form-control" id="skill" autocomplete="off"
list="available-skills" required>

<datalist id="available-skills">
{% for skill in skillLookup %}
<option value="{{ skill|e('html_attr') }}"></option>
{% endfor %}
</datalist>

<div class="d-grid g-2">
<input type="submit" name="add_fixture" value="Add New Skill" class="btn btn-primary mt-3">
</div>

<small>Type out your skills. If Suggestions appear, use them! If none appear, you must have a
unique skill.</small>
</form>
</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<hr>

<div class="row">
<div class="col-4">
<h2>Your Talent Pool</h2>

{% for row in myTalents %}
<div class="alert alert-success fade show" role="alert">
<strong>{{ row.skill }}</strong>

<div class="float-right">
<form method="POST">
<input type="hidden" name="delete_id" value="{{ row.id|e('html_attr') }}">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</div>
</div>
{% endfor %}
</div>
<div class="col-8">
<h2>Community Talent Pool</h2>

{% for row in communityTalents %}
<div class="alert alert-primary fade show" role="alert">
<strong>{{ row.skill }}</strong>
{{ row.occurrences }} Share This Skill.

<div class="float-right">
<form method="POST" class="form-group">
<input type="hidden" name="skill" value="{{ row.skill|e('html_attr') }}">
<input type="submit" name="add_fixture" value="Add Skill" class="btn btn-primary btn-sm">
</form>
</div>
</div>
{% else %}
No Results
{% endfor %}
</div>
</div>
</form>
</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endblock %}
Loading