RanchiMall/ribc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactoring

Browse Source
This commit is contained in:
sairaj mote 2022-10-15 18:15:42 +05:30
parent 219ae08ad1
commit ab3609d17f
4 changed files with 95 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/main.css
View File

@ -796,6 +796,7 @@ ul {
padding: 0 1rem; padding: 0 1rem;
overflow-y: auto; overflow-y: auto;
padding-bottom: 3rem; padding-bottom: 3rem;
align-content: flex-start;
} }
#landing sm-carousel { #landing sm-carousel {
width: min(100%, 64rem); width: min(100%, 64rem);
@ -846,6 +847,19 @@ ul {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
#task_display_wrapper {
margin: 0 auto;
width: min(100%, 64rem);
}
#task_display_wrapper > :first-child {
width: min(14rem, 100%);
align-content: start;
}
#task_display_wrapper > :last-child {
width: 32rem;
flex: 1;
}
#sign_in, #sign_in,
#sign_up { #sign_up {
justify-items: center; justify-items: center;
@ -984,8 +998,7 @@ ul {
padding: max(2vw, 1rem); padding: max(2vw, 1rem);
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
margin: 0 auto; width: 100%;
width: min(100%, 48rem);
border: solid 0.2rem rgba(var(--text-color), 0.8); border: solid 0.2rem rgba(var(--text-color), 0.8);
} }
.display-task__category { .display-task__category {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
css/main.scss
View File

@ -789,6 +789,7 @@ ul {
padding: 0 1rem; padding: 0 1rem;
overflow-y: auto; overflow-y: auto;
padding-bottom: 3rem; padding-bottom: 3rem;
align-content: flex-start;
sm-carousel { sm-carousel {
width: min(100%, 64rem); width: min(100%, 64rem);
margin: 0 auto; margin: 0 auto;
@ -838,6 +839,18 @@ ul {
} }
} }
} }
#task_display_wrapper {
margin: 0 auto;
width: min(100%, 64rem);
& > :first-child {
width: min(14rem, 100%);
align-content: start;
}
& > :last-child {
width: 32rem;
flex: 1;
}
}
#sign_in, #sign_in,
#sign_up { #sign_up {
justify-items: center; justify-items: center;
@ -983,8 +996,7 @@ ul {
padding: max(2vw, 1rem); padding: max(2vw, 1rem);
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
margin: 0 auto; width: 100%;
width: min(100%, 48rem);
border: solid 0.2rem rgba(var(--text-color), 0.8); border: solid 0.2rem rgba(var(--text-color), 0.8);
&__category { &__category {
display: inline-flex; display: inline-flex;

129
index.html
View File

@ -15,7 +15,7 @@
rel="stylesheet"> rel="stylesheet">
<script src="components.js" defer></script> <script src="components.js" defer></script>
<script id="floGlobals"> <script id="floGlobals">
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */ /* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
const floGlobals = { const floGlobals = {
blockchain: "FLO", blockchain: "FLO",
adminID: "FMyRTrz9CG4TFNM6rCQgy3VQ5NF23bY2xD", adminID: "FMyRTrz9CG4TFNM6rCQgy3VQ5NF23bY2xD",
@ -29,7 +29,7 @@
<script src="scripts/floCloudAPI.js"></script> <script src="scripts/floCloudAPI.js"></script>
<script src="scripts/floDapps.js"></script> <script src="scripts/floDapps.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script> <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> <!-- <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> -->
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.0/dist/purify.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.0/dist/purify.min.js" defer></script>
<script src="scripts/ribc.js"></script> <script src="scripts/ribc.js"></script>
<script id="onLoadStartUp"> <script id="onLoadStartUp">
@ -107,8 +107,8 @@
</div> </div>
</div> </div>
</sm-carousel> </sm-carousel>
<div class="flex flex-wrap gap-2 justify-center"> <div id="task_display_wrapper" class="flex flex-wrap gap-2 justify-center">
<div class="grid gap-1" style="min-width: 12rem; align-content: start;"> <div id="display_task_filters" class="grid gap-1">
<h4>Filters</h4> <h4>Filters</h4>
<div class="flex flex-direction-column gap-0-5"> <div class="flex flex-direction-column gap-0-5">
<h5>Category</h5> <h5>Category</h5>
@ -119,9 +119,10 @@
<h3> <h3>
Available Tasks Available Tasks
</h3> </h3>
<ul id="display_task_list" class="flex flex-direction-column gap-0-5"> <ul id="display_task_list" class="flex flex-direction-column gap-0-5 observe-empty-state"></ul>
<sm-spinner></sm-spinner> <div class="empty-state">
</ul> <h4>Nothing to see here</h4>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1286,7 +1287,7 @@
const { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(projectCode, branch, task) const { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(projectCode, branch, task)
renderElem(getRef('task_details_wrapper'), html` renderElem(getRef('task_details_wrapper'), html`
<div class="grid gap-1"> <div class="grid gap-1">
<h5 class="capitalize">${floGlobals.taskCategories[category] || category?.replaceAll('-', ' ')}</h5> <h5 class="capitalize">${floGlobals.taskCategories[category]}</h5>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<h2 id="task_title">${title}</h2> <h2 id="task_title">${title}</h2>
<p id="task_description" class="ws-pre-line">${description}</p> <p id="task_description" class="ws-pre-line">${description}</p>
@ -1312,7 +1313,7 @@
`: ''} `: ''}
</div> </div>
</div> </div>
<button class="button button--primary">Apply Now</button> <button class="button button--primary" dataset=${{ projectCode, branch, task }} onclick="requestForTask(this)">Apply Now</button>
`) `)
} break; } break;
case 'sign_in': case 'sign_in':
@ -1737,14 +1738,13 @@
return html` return html`
<li class=${`display-task`}> <li class=${`display-task`}>
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<div class="display-task__category">${category?.replaceAll('-', ' ')}</div> <div class="display-task__category">${floGlobals.taskCategories[category]}</div>
<a href=${`#/task_details?id=${projectCode}_${branch}_${task}`} class="display-task__link button button--small button--colored"> <a href=${`#/task_details?id=${projectCode}_${branch}_${task}`} class="display-task__link button button--small button--colored">
View details View details
<svg class="icon" style="margin-right: -0.5rem" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg> <svg class="icon" style="margin-right: -0.5rem" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
</a> </a>
</div> </div>
<h4 class="display-task__title">${title}</h4> <h4 class="display-task__title">${title}</h4>
<p class="display-task__description ws-pre-line">${description}</p>
<div class="display-task__details flex flex-wrap gap-0-3"> <div class="display-task__details flex flex-wrap gap-0-3">
${duration ? html` ${duration ? html`
<div class="display-task__detail"> <div class="display-task__detail">
@ -1788,12 +1788,12 @@
const page = isAdmin ? 'admin_page' : 'project_explorer' const page = isAdmin ? 'admin_page' : 'project_explorer'
return html.for(ref, projectCode)`<a class="project-card flex align-center interact" title="Project information" href=${`#/${page}/project?id=${projectCode}&branch=mainLine`}>${projectName}</a>` return html.for(ref, projectCode)`<a class="project-card flex align-center interact" title="Project information" href=${`#/${page}/project?id=${projectCode}&branch=mainLine`}>${projectName}</a>`
}, },
taskCard(taskNo) { taskCard(task) {
const taskDetails = { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo) const taskDetails = { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, task)
const branches = getAllBranches(appState.params.id) const branches = getAllBranches(appState.params.id)
const branchesButtons = filteredMap(branches, (branch) => { const branchesButtons = filteredMap(branches, (branch) => {
const { branchName, parentBranch, startPoint, endPoint } = branch const { branchName, parentBranch, startPoint, endPoint } = branch
if (parentBranch === appState.params.branch && startPoint === taskNo) { if (parentBranch === appState.params.branch && startPoint === task) {
return render.branchButton({ return render.branchButton({
projectCode: appState.params.id, projectCode: appState.params.id,
branch: branchName, branch: branchName,
@ -1801,17 +1801,17 @@
}) })
} }
}) })
const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo) || [] const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, task) || []
const assignedInternsCards = filteredMap(assignedInterns, (internFloId) => render.assignedInternCard(internFloId)); const assignedInternsCards = filteredMap(assignedInterns, (internFloId) => render.assignedInternCard(internFloId));
const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo) const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, task)
let applyButton let applyButton
if (typeOfUser === 'intern' && !assignedInterns.includes(myFloID)) { if (typeOfUser === 'intern' && !assignedInterns.includes(myFloID)) {
const taskRequests = RIBC.getTaskRequests(); const taskRequests = RIBC.getTaskRequests();
const hasApplied = [...taskRequests, ...sessionTaskRequests].find(({ projectCode: requestProjectCode, branch, task }) => { const hasApplied = [...taskRequests, ...sessionTaskRequests].find(({ projectCode: requestProjectCode, branch, task }) => {
return `${appState.params.id}_${branch}_${task}` === `${requestProjectCode}_${appState.params.branch}_${taskNo}` return `${appState.params.id}_${branch}_${task}` === `${requestProjectCode}_${appState.params.branch}_${task}`
}) })
applyButton = html` applyButton = html`
<button class="button button--primary apply-button" .dataset=${{ projectCode: appState.params.id, branch: appState.params.branch, taskNo }} ?disabled=${hasApplied}> <button class="button button--primary apply-button" .dataset=${{ projectCode: appState.params.id, branch: appState.params.branch, task }} ?disabled=${hasApplied}>
${hasApplied ? 'Applied' : 'Apply'} ${hasApplied ? 'Applied' : 'Apply'}
</button>`; </button>`;
} }
@ -1846,8 +1846,8 @@
</li>`; </li>`;
}, },
internUpdateCard(update) { internUpdateCard(update) {
const { floID, time, note, update: { projectCode, projectBranch, task, description, link } } = update const { floID, time, note, update: { projectCode, branch, task, description, link } } = update
let topic = `${RIBC.getProjectDetails(projectCode).projectName} / ${RIBC.getTaskDetails(projectCode, projectBranch, task).title}` let topic = `${RIBC.getProjectDetails(projectCode).projectName} / ${RIBC.getTaskDetails(projectCode, branch, task).title}`
const internName = RIBC.getInternList()[floID] const internName = RIBC.getInternList()[floID]
let replyButton let replyButton
if (typeOfUser === 'admin' && !note) { if (typeOfUser === 'admin' && !note) {
@ -1899,10 +1899,10 @@
</span> </span>
` `
}, },
taskListItem(taskNo, ref) { taskListItem(task, ref) {
const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo) const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, task)
const taskDetails = { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo) const taskDetails = { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, task)
const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo) const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, task)
let assignedInternsCards let assignedInternsCards
if (assignedInterns) { if (assignedInterns) {
assignedInternsCards = filteredMap(assignedInterns, (internFloId) => render.assignedInternCard(internFloId, true)) assignedInternsCards = filteredMap(assignedInterns, (internFloId) => render.assignedInternCard(internFloId, true))
@ -1910,7 +1910,7 @@
const branches = getAllBranches(appState.params.id) const branches = getAllBranches(appState.params.id)
const branchesButtons = filteredMap(branches, (branch) => { const branchesButtons = filteredMap(branches, (branch) => {
const { branchName, parentBranch, startPoint, endPoint } = branch const { branchName, parentBranch, startPoint, endPoint } = branch
if (parentBranch === appState.params.branch && startPoint === taskNo) { if (parentBranch === appState.params.branch && startPoint === task) {
return render.branchButton({ return render.branchButton({
projectCode: appState.params.id, projectCode: appState.params.id,
branch: branchName, branch: branchName,
@ -1918,14 +1918,14 @@
}) })
} }
}) })
return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)` return html.for(ref, `${appState.params.id}_${appState.params.branch}_${task}`)`
<li class="task-list-item" .dataset=${{ taskId: taskNo }}> <li class="task-list-item" .dataset=${{ taskId: task }}>
<div class="flex align-center gap-0-3"> <div class="flex align-center gap-0-3">
<div class="flex align-center gap-0-5"> <div class="flex align-center gap-0-5">
<sm-checkbox ?checked=${status === 'completed'}> <sm-checkbox ?checked=${status === 'completed'}>
<p class="margin-left-0-5">Mark as complete</p> <p class="margin-left-0-5">Mark as complete</p>
</sm-checkbox> </sm-checkbox>
<div class="task-list-item__task-number">ID: ${taskNo}</div> <div class="task-list-item__task-number">ID: ${task}</div>
</div> </div>
<button class="button--danger icon-only margin-left-auto"onclick="removeThisTask()"> <button class="button--danger icon-only margin-left-auto"onclick="removeThisTask()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
@ -2022,8 +2022,8 @@
`; `;
}, },
internTaskCard(taskObj) { internTaskCard(taskObj) {
const { uniqueId, projectCode, projectBranch, task } = taskObj const { uniqueId, projectCode, branch, task } = taskObj
const { title, description } = RIBC.getTaskDetails(projectCode, projectBranch, task) const { title, description } = RIBC.getTaskDetails(projectCode, branch, task)
const projectName = RIBC.getProjectDetails(projectCode).projectName const projectName = RIBC.getProjectDetails(projectCode).projectName
return html` return html`
<li class="task-card" data-unique-id="${uniqueId}"> <li class="task-card" data-unique-id="${uniqueId}">
@ -2292,9 +2292,9 @@
</p>`) </p>`)
} }
if (taskListContainer === 'task_list') { if (taskListContainer === 'task_list') {
branchTasks.slice(4).forEach((taskNo) => tasks.push(render.taskListItem(taskNo, getRef(taskListContainer)))) branchTasks.slice(4).forEach((task) => tasks.push(render.taskListItem(task, getRef(taskListContainer))))
} else { } else {
branchTasks.slice(4).forEach((taskNo) => tasks.push(render.taskCard(taskNo))) branchTasks.slice(4).forEach((task) => tasks.push(render.taskCard(task)))
} }
renderElem(getRef(taskListContainer), html`${tasks}`) renderElem(getRef(taskListContainer), html`${tasks}`)
} }
@ -2443,9 +2443,9 @@
reward reward
} }
console.log(taskDetails) console.log(taskDetails)
const taskNo = RIBC.admin.addTaskInMap(appState.params.id, appState.params.branch) const task = RIBC.admin.addTaskInMap(appState.params.id, appState.params.branch)
RIBC.admin.editTaskDetails(taskDetails, appState.params.id, appState.params.branch, taskNo) RIBC.admin.editTaskDetails(taskDetails, appState.params.id, appState.params.branch, task)
RIBC.admin.putTaskStatus('incomplete', appState.params.id, appState.params.branch, taskNo) RIBC.admin.putTaskStatus('incomplete', appState.params.id, appState.params.branch, task)
card.remove() card.remove()
renderBranchTasks() renderBranchTasks()
getRef('add_task').classList.remove('hidden') getRef('add_task').classList.remove('hidden')
@ -2700,19 +2700,25 @@
let sessionTaskRequests = new Set(); let sessionTaskRequests = new Set();
function requestForTask(btn) { function requestForTask(btn) {
getConfirmation('Do you want to apply for this task?', { confirmText: 'Apply' }).then((result) => { try {
if (result) { floDapps.user.id
btn.textContent = 'Applied' getConfirmation('Do you want to apply for this task?', { confirmText: 'Apply' }).then((result) => {
btn.disabled = true if (result) {
const { projectCode, branch, taskNo } = btn.dataset btn.textContent = 'Applied'
RIBC.applyForTask(projectCode, branch, taskNo).then((result) => { btn.disabled = true
notify('Applied successfully.', 'success') const { projectCode, branch, task } = btn.dataset
sessionTaskRequests.add({ projectCode, branch, task: taskNo }) RIBC.applyForTask(projectCode, branch, task).then((result) => {
}) notify('Applied successfully.', 'success')
} sessionTaskRequests.add({ projectCode, branch, task })
}).catch((error) => { })
notify(error, 'error') }
}) }).catch((error) => {
notify(error, 'error')
})
} catch (err) {
floGlobals.tempUserTaskRequest = { projectCode, branch, task }
notify('Please login to apply for task.', 'error')
}
} }
function toggleFilter() { function toggleFilter() {
@ -2781,16 +2787,16 @@
// store all the projects assigned to interns in array // store all the projects assigned to interns in array
const allTasks = RIBC.getAllTasks() const allTasks = RIBC.getAllTasks()
for (const taskKey in allTasks) { for (const taskKey in allTasks) {
const [projectCode, branch, taskNo] = taskKey.split('_') const [projectCode, branch, task] = taskKey.split('_')
const assignedInterns = RIBC.getAssignedInterns(projectCode, branch, taskNo) const assignedInterns = RIBC.getAssignedInterns(projectCode, branch, task)
if (Array.isArray(assignedInterns) && assignedInterns.includes(myFloID)) { if (Array.isArray(assignedInterns) && assignedInterns.includes(myFloID)) {
assignedProjectsList.add(projectCode) assignedProjectsList.add(projectCode)
console.log(RIBC.getTaskStatus(projectCode, branch, taskNo)) console.log(RIBC.getTaskStatus(projectCode, branch, task))
if (RIBC.getTaskStatus(projectCode, branch, taskNo) === 'incomplete') { if (RIBC.getTaskStatus(projectCode, branch, task) === 'incomplete') {
floGlobals.assignedTasks[floCrypto.randString(16, true)] = { floGlobals.assignedTasks[floCrypto.randString(16, true)] = {
projectCode, projectCode,
projectBranch: branch, branch: branch,
task: taskNo task
} }
} }
} }
@ -2816,9 +2822,9 @@
if (e.target.closest('.send-update-button')) { if (e.target.closest('.send-update-button')) {
const taskCard = e.target.closest('.task-card') const taskCard = e.target.closest('.task-card')
currentTaskId = taskCard.dataset.uniqueId currentTaskId = taskCard.dataset.uniqueId
const { projectCode, projectBranch, task } = floGlobals.assignedTasks[currentTaskId] const { projectCode, branch, task } = floGlobals.assignedTasks[currentTaskId]
getRef('update_of_project').textContent = RIBC.getProjectDetails(projectCode).projectName getRef('update_of_project').textContent = RIBC.getProjectDetails(projectCode).projectName
getRef('update_of_task').textContent = RIBC.getTaskDetails(projectCode, projectBranch, task).title getRef('update_of_task').textContent = RIBC.getTaskDetails(projectCode, branch, task).title
openPopup('post_update_popup') openPopup('post_update_popup')
} }
}) })
@ -2969,13 +2975,13 @@
getRef('request_type_selector').addEventListener('change', render.internRequests) getRef('request_type_selector').addEventListener('change', render.internRequests)
function postUpdate() { function postUpdate() {
const { projectCode, projectBranch, task } = floGlobals.assignedTasks[currentTaskId] const { projectCode, branch, task } = floGlobals.assignedTasks[currentTaskId]
const description = getRef('update__brief').value.trim() const description = getRef('update__brief').value.trim()
const linkText = getRef('update__link').value.trim() const linkText = getRef('update__link').value.trim()
const link = linkText !== '' ? linkText : null const link = linkText !== '' ? linkText : null
console.log(link) console.log(link)
if (description !== '') { if (description !== '') {
RIBC.postInternUpdate({ projectCode, projectBranch, task, description, link }) RIBC.postInternUpdate({ projectCode, branch, task, description, link })
.then((result) => { .then((result) => {
notify('Update posted', 'success') notify('Update posted', 'success')
closePopup() closePopup()
@ -3011,12 +3017,7 @@
return render.internCard(internName, floId, RIBC.getInternRating(floId)) return render.internCard(internName, floId, RIBC.getInternRating(floId))
}) })
} else { } else {
const options = { filtered = arrayOfInterns.filter(({ internName }) => internName.toLowerCase().includes(searchKey.toLowerCase())).map(({ internName, floId }) => {
keys: ['internName'],
threshold: 0.2
}
const fuse = new Fuse(arrayOfInterns, options)
filtered = fuse.search(searchKey).map(v => v.item).map(({ internName, floId }) => {
return render.internCard(internName, floId, RIBC.getInternRating(floId)) return render.internCard(internName, floId, RIBC.getInternRating(floId))
}) })
} }