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

Code refactoring and UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-10-05 18:48:32 +05:30
parent 87d7a14e32
commit 055c40a281
5 changed files with 76 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/main.css
View File

@ -829,10 +829,6 @@ ul {
margin-top: auto; margin-top: auto;
margin-left: auto; margin-left: auto;
} }
.landing__card:nth-of-type(2) h1 {
color: #262d4c;
mix-blend-mode: multiply;
}
.landing__card:nth-of-type(2) p { .landing__card:nth-of-type(2) p {
margin-top: auto; margin-top: auto;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
@ -1413,10 +1409,6 @@ ul {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.temp-task .cancel-task-button {
margin-right: 0.5rem;
}
#branch_container { #branch_container {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -1440,13 +1432,11 @@ ul {
margin: 0; margin: 0;
} }
#best_interns_container, #best_interns_container {
#project_list_container {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#best_interns_container .container-header .icon, #best_interns_container .container-header .icon {
#project_list_container .container-header .icon {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -1806,10 +1796,7 @@ input[type=date]:focus {
border-radius: 0.4rem; border-radius: 0.4rem;
} }
#dashboard_page { #dashboard_page {
grid-template-columns: 3fr 18rem; grid-template-columns: 1fr 18rem;
}
#dashboard_page #pinned_project_section {
align-self: flex-start;
} }
#all_interns_page__header { #all_interns_page__header {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
css/main.scss
View File

@ -825,10 +825,6 @@ ul {
margin-top: auto; margin-top: auto;
margin-left: auto; margin-left: auto;
} }
h1 {
color: #262d4c;
mix-blend-mode: multiply;
}
p { p {
margin-top: auto; margin-top: auto;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
@ -1413,12 +1409,6 @@ ul {
} }
} }
} }
.temp-task {
.cancel-task-button {
margin-right: 0.5rem;
}
}
#branch_container { #branch_container {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -1440,13 +1430,11 @@ ul {
} }
} }
#best_interns_container, #best_interns_container {
#project_list_container {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#best_interns_container .container-header .icon, #best_interns_container .container-header .icon {
#project_list_container .container-header .icon {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -1806,11 +1794,7 @@ input[type="date"] {
} }
#dashboard_page { #dashboard_page {
grid-template-columns: 3fr 18rem; grid-template-columns: 1fr 18rem;
}
#dashboard_page #pinned_project_section {
align-self: flex-start;
} }
#all_interns_page__header { #all_interns_page__header {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;

100
index.html
View File

@ -79,7 +79,8 @@
Blockchain based <br> Internship Platform Blockchain based <br> Internship Platform
</h1> </h1>
<div class="flex gap-0-3"> <div class="flex gap-0-3">
<a href="#/sign_up" class="button" style="background-color: rgba( 0 0 0 / 0.3);">Get <a href="#/sign_up" class="button"
style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
started</a> started</a>
<a href="#/sign_in" class="button button--primary">Sign In</a> <a href="#/sign_in" class="button button--primary">Sign In</a>
</div> </div>
@ -417,7 +418,7 @@
<div id="project_list" class="flex flex-direction-column gap-0-3"></div> <div id="project_list" class="flex flex-direction-column gap-0-3"></div>
</div> </div>
<section id="intern_view" class="hidden intern-option"> <section id="intern_view" class="hidden intern-option">
<h2>My tasks</h2> <h4>My tasks</h4>
<ul id="assigned_task_list"></ul> <ul id="assigned_task_list"></ul>
</section> </section>
</div> </div>
@ -524,13 +525,13 @@
<ul id="task_list" class="grid observe-empty-state"></ul> <ul id="task_list" class="grid observe-empty-state"></ul>
<h4 class="empty-state padding-block-1">No tasks added yet, tasks will appear here after adding <h4 class="empty-state padding-block-1">No tasks added yet, tasks will appear here after adding
them.</h4> them.</h4>
<sm-button id="add_task" title="show element to add new task" onclick="addPlaceholderTask()"> <button id="add_task" class="button " onclick="addPlaceholderTask()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" /> <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
</svg> </svg>
Add task Add task
</sm-button> </button>
<ul id="task_context" class="hidden"> <ul id="task_context" class="hidden">
<li tabindex="0" class="interact" onclick="toggleEditing('title')"> <li tabindex="0" class="interact" onclick="toggleEditing('title')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
@ -727,18 +728,18 @@
<h4 id="intern_info__score"></h4> <h4 id="intern_info__score"></h4>
</div> </div>
<div class="flex admin-option hidden"> <div class="flex admin-option hidden">
<sm-button id="reduce_score_button" title="increase intern score" onclick="changeScore(-1)"> <button id="reduce_score_button" title="increase intern score" onclick="changeScore(-1)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path d="M5 11h14v2H5z" /> <path d="M5 11h14v2H5z" />
</svg> </svg>
</sm-button> </button>
<sm-button id="increase_score_button" title="decrease intern score" onclick="changeScore(1)"> <button id="increase_score_button" title="decrease intern score" onclick="changeScore(1)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" /> <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
</svg> </svg>
</sm-button> </button>
</div> </div>
</div> </div>
</section> </section>
@ -941,22 +942,24 @@
<div class="temp-task grid gap-0-5"> <div class="temp-task grid gap-0-5">
<sm-input class="placeholder-task__title" placeholder="Title"></sm-input> <sm-input class="placeholder-task__title" placeholder="Title"></sm-input>
<sm-textarea class="placeholder-task__description" placeholder="Description" rows="4"></sm-textarea> <sm-textarea class="placeholder-task__description" placeholder="Description" rows="4"></sm-textarea>
<div class="flex"> <div class="flex align-center gap-0-3">
<sm-button class="cancel-task-button"> <button class="button cancel-task-button">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path <path
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" /> d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
</svg> </svg>
Cancel Cancel
</sm-button> </button>
<sm-button class="add-task-button"> <button class="button button--primary add-task-button">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" /> <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
</svg> </svg>
Add Add
</sm-button> </button>
</div> </div>
</div> </div>
</template> </template>
@ -1270,6 +1273,8 @@
break; break;
case 'dashboard_page': case 'dashboard_page':
render.dashProjects(getRef('pinned_projects'), pinnedProjects); render.dashProjects(getRef('pinned_projects'), pinnedProjects);
// displays recent projects
render.dashProjects(getRef('project_list'), RIBC.getProjectList().filter(project => !pinnedProjects.includes(project)).reverse())
break; break;
case 'updates_page': case 'updates_page':
if (!getRef('updates_page__project_selector').children.length) { if (!getRef('updates_page__project_selector').children.length) {
@ -1701,7 +1706,7 @@
internUpdateCard(update) { internUpdateCard(update) {
let { floID, time, note, update: { projectId, projectBranch, task, topic, description, link } } = update let { floID, time, note, update: { projectId, projectBranch, task, topic, description, link } } = update
if (!topic) { if (!topic) {
topic = `${RIBC.getProjectDetails(projectId).projectName} / ${RIBC.getTaskDetails(projectId, projectBranch, task).taskTitle}` topic = `${RIBC.getProjectDetails(projectId.replaceAll('_', '-')).projectName} / ${RIBC.getTaskDetails(projectId.replaceAll('_', '-'), projectBranch, task).taskTitle}`
} }
const internName = RIBC.getInternList()[floID] const internName = RIBC.getInternList()[floID]
let replyButton let replyButton
@ -1754,7 +1759,7 @@
</span> </span>
` `
}, },
taskListItem(taskNo) { taskListItem(taskNo, ref) {
const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo) const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo)
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const { taskTitle, taskDescription } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo) const { taskTitle, taskDescription } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo)
@ -1778,7 +1783,7 @@
) )
} }
} }
return html` return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)`
<li class="task-list-item" .dataset=${{ taskId: taskNo }}> <li class="task-list-item" .dataset=${{ taskId: taskNo }}>
<div class="flex align-center gap-0-3"> <div class="flex align-center gap-0-3">
<sm-checkbox ?checked=${status === 'completed'}> <sm-checkbox ?checked=${status === 'completed'}>
@ -1942,9 +1947,9 @@
details = html` details = html`
<p class="status-card__details"> <p class="status-card__details">
You applied for You applied for
<b class="capitalize">${RIBC.getTaskDetails(projectCode, branch, task).taskTitle}</b> from <b class="capitalize">${RIBC.getTaskDetails(projectCode.replaceAll('_', '-'), branch, task).taskTitle}</b> from
<b class="capitalize">${branch}</b> of <b class="capitalize">${branch}</b> of
<b class="capitalize">${RIBC.getProjectDetails(projectCode).projectName}</b> <b class="capitalize">${RIBC.getProjectDetails(projectCode.replaceAll('_', '-')).projectName}</b>
</p>`; </p>`;
} }
return html` return html`
@ -2027,7 +2032,7 @@
if (projectDescription === '') { if (projectDescription === '') {
return notify('Project description is important!', 'error') return notify('Project description is important!', 'error')
} }
const projectCode = `${new Date().getFullYear()}_project_${RIBC.getProjectList() ? (RIBC.getProjectList().length + 1) : '1'}`; const projectCode = `${new Date().getFullYear()}-project-${RIBC.getProjectList() ? (RIBC.getProjectList().length + 1) : '1'}`;
RIBC.admin.createProject(projectCode) RIBC.admin.createProject(projectCode)
RIBC.admin.addProjectDetails(projectCode, { projectName, projectDescription }) RIBC.admin.addProjectDetails(projectCode, { projectName, projectDescription })
render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true) render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true)
@ -2130,7 +2135,7 @@
</p>`) </p>`)
} }
if (taskListContainer === 'task_list') { if (taskListContainer === 'task_list') {
branchTasks.slice(4).forEach((taskNo) => tasks.push(render.taskListItem(taskNo))) branchTasks.slice(4).forEach((taskNo) => tasks.push(render.taskListItem(taskNo, getRef(taskListContainer))))
} else { } else {
branchTasks.slice(4).forEach((taskNo) => tasks.push(render.taskCard(taskNo))) branchTasks.slice(4).forEach((taskNo) => tasks.push(render.taskCard(taskNo)))
} }
@ -2562,45 +2567,30 @@
// Intern's view // Intern's view
let assignedProjectsList = []; let assignedProjectsList = new Set();
if (allInternsList[myFloID] && !floGlobals.subAdmins.includes(myFloID)) { if (allInternsList[myFloID] && !floGlobals.subAdmins.includes(myFloID)) {
typeOfUser = 'intern'; typeOfUser = 'intern';
document.querySelectorAll('.intern-option').forEach((option) => { document.querySelectorAll('.intern-option').forEach((option) => {
option.classList.remove('hidden') option.classList.remove('hidden')
}) })
document.getElementById('pinned_project_section').classList.add('hidden')
// store all the projects assigned to interns in array // store all the projects assigned to interns in array
const allTasks = RIBC.getAllTasks()
sortedProjectList.forEach(projectId => { for (const taskKey in allTasks) {
nextProject: const [projectId, branch, taskNo] = taskKey.split('_')
for (const branch in RIBC.getProjectMap(projectId)) { const assignedInterns = RIBC.getAssignedInterns(projectId, branch, taskNo)
const projectTaskNos = RIBC.getProjectMap(projectId)[branch].slice(4); if (Array.isArray(assignedInterns) && assignedInterns.includes(myFloID)) {
for (taskNo of projectTaskNos) { assignedProjectsList.add(projectId)
const assignedInterns = RIBC.getAssignedInterns(projectId, branch, taskNo) console.log(RIBC.getTaskStatus(projectId, branch, taskNo))
if (Array.isArray(assignedInterns) && assignedInterns.includes(myFloID)) { if (RIBC.getTaskStatus(projectId, branch, taskNo) === 'incomplete') {
assignedProjectsList.push(projectId) floGlobals.assignedTasks[floCrypto.randString(16, true)] = {
break nextProject; projectId,
projectBranch: branch,
task: taskNo
} }
} }
} }
}) }
// store all the tasks assigned to intern in array
assignedProjectsList.forEach(project => {
for (const branch in RIBC.getProjectMap(project)) {
branchTasks = RIBC.getProjectMap(project)[branch].slice(4);
branchTasks.forEach(task => {
if (RIBC.getTaskStatus(project, branch, task) === 'incomplete') {
floGlobals.assignedTasks[floCrypto.randString(16, true)] = {
projectId: project,
projectBranch: branch,
task
}
}
})
}
})
let parent = document.getElementById('assigned_task_list'); let parent = document.getElementById('assigned_task_list');
if (!Object.keys(floGlobals.assignedTasks).length) { if (!Object.keys(floGlobals.assignedTasks).length) {
@ -2633,7 +2623,6 @@
document.querySelectorAll('.intern-option').forEach((option) => { document.querySelectorAll('.intern-option').forEach((option) => {
option.classList.add('hidden') option.classList.add('hidden')
}) })
document.getElementById('pinned_project_section').classList.remove('hidden')
} }
// admin view // admin view
@ -2754,12 +2743,9 @@
return render.internCard(internName, floId, rating) return render.internCard(internName, floId, rating)
})}`); })}`);
// displays recent projects
render.dashProjects(getRef('project_list'), RIBC.getProjectList().filter(project => !pinnedProjects.includes(project)).reverse())
if (typeOfUser === 'intern') { if (typeOfUser === 'intern') {
render.projectList(getRef('my_projects'), assignedProjectsList) render.projectList(getRef('my_projects'), [...assignedProjectsList])
sortedProjectList = sortedProjectList.filter(val => !assignedProjectsList.includes(val)); sortedProjectList = sortedProjectList.filter(val => !assignedProjectsList.has(val));
} }
if (sortedProjectList.length > 0) { if (sortedProjectList.length > 0) {
getRef('other_projects').previousElementSibling.classList.remove('hidden') getRef('other_projects').previousElementSibling.classList.remove('hidden')

33
scripts/ribc.js
View File

@ -104,6 +104,26 @@
Ribc.getInternList = () => _.internList; Ribc.getInternList = () => _.internList;
Ribc.getInternRating = (floID) => _.internRating[floID]; Ribc.getInternRating = (floID) => _.internRating[floID];
Ribc.getAssignedInterns = (projectCode, branch, taskNumber) => _.internsAssigned[projectCode + "_" + branch + "_" + taskNumber] Ribc.getAssignedInterns = (projectCode, branch, taskNumber) => _.internsAssigned[projectCode + "_" + branch + "_" + taskNumber]
Ribc.getAllTasks = () => _.projectTaskDetails
// Ribc.updateProjectIds = () => {
// for (const projectKey in _.projectTaskStatus) {
// const splitTaskKey = projectKey.split("_")
// updateObjectKey(_.projectTaskStatus, projectKey, splitTaskKey.slice(0, 3).join("-") + '_' + splitTaskKey.slice(3).join('_'))
// }
// }
// Ribc.showProjectMap = () => {
// for (const projectKey in _.projectTaskStatus) {
// console.log(projectKey)
// }
// }
// function updateObjectKey(object, oldKey, newKey) {
// if (oldKey !== newKey) {
// Object.defineProperty(object, newKey,
// Object.getOwnPropertyDescriptor(object, oldKey));
// delete object[oldKey];
// }
// }
Admin.updateObjects = () => new Promise((resolve, reject) => { Admin.updateObjects = () => new Promise((resolve, reject) => {
floCloudAPI.updateObjectData("RIBC") floCloudAPI.updateObjectData("RIBC")
@ -219,10 +239,8 @@
} }
Admin.unassignInternFromTask = function (floID, projectCode, branch, taskNumber) { Admin.unassignInternFromTask = function (floID, projectCode, branch, taskNumber) {
var index = projectCode + "_" + branch + "_" + taskNumber const index = projectCode + "_" + branch + "_" + taskNumber
var pos = _.internsAssigned[index].indexOf(floID) _.internsAssigned[index] = _.internsAssigned[index].filter(id => id != floID)
if (pos > -1)
_.internsAssigned[index].splice(pos, 1)
} }
Admin.putTaskStatus = function (taskStatus, projectCode, branch, taskNumber) { Admin.putTaskStatus = function (taskStatus, projectCode, branch, taskNumber) {
@ -316,8 +334,9 @@
//Checking for links elsewhere //Checking for links elsewhere
var otherBranches = Object.keys(_.projectMap[projectCode]); var otherBranches = Object.keys(_.projectMap[projectCode]);
//Remove the native branch and mainLine from otherBranches list //Remove the native branch and mainLine from otherBranches list
otherBranches.splice(otherBranches.indexOf(branch), 1); // otherBranches.splice(otherBranches.indexOf(branch), 1);
otherBranches.splice(otherBranches.indexOf("mainLine"), 1); // otherBranches.splice(otherBranches.indexOf("mainLine"), 1);
otherBranches = otherBranches.filter(currBranch => currBranch !== branch || currBranch !== "mainLine");
//Checking the link other branches //Checking the link other branches
for (var i = 0; i < otherBranches.length; i++) { for (var i = 0; i < otherBranches.length; i++) {
@ -355,7 +374,7 @@
} }
} // end function } // end function
//Now splice the element //Now splice the element
arr.splice(currentIndex, 1); arr = arr.slice(currentIndex, 1);
arr[1] = arr[1] - 1; arr[1] = arr[1] - 1;
} }