Skip to content

Commit

Permalink
[wip] adding dashboard navigation menu to the main page (#1055)
Browse files Browse the repository at this point in the history 
* wip
adding dashboard navigation menu to the main page

* eslint

* making the dashboard tab clickable

* comments

* eslint

* added additional text for each dashboard tab
attempting to use sessions to manipulate dashboard display

* eslint

* finalizing client and server side session functionality

* eslint

* renaming functions, routes, and variables for clarity
  • Loading branch information
@JaymeeH
JaymeeH authored Nov 19, 2024
1 parent 6649714 commit bc0cbaa
Show file tree
Hide file tree
Showing 6 changed files with 350 additions and 101 deletions.
47 changes: 31 additions & 16 deletions app/assets/stylesheets/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,30 +60,19 @@
margin-top: 0.5em;
}
}
// TODO
// Turn the tab nav css into a mixin component
#welcome {
.emulation {
display: inline-flex;
}

.welcome-pane {
display: inline-flex;
}

.project-button {
margin-top: 11px;
margin-left: 22em;
}
@mixin tab-nav {
.tab-nav {
padding: 0;
border: none;
background: none;

display: inline-flex;
flex-direction: column;
align-items: center;

padding: 8px 24px;
justify-content: center;

// Typography
color: var(--Neutral-Black, #121212);
/* Body S Bold */
Expand All @@ -97,6 +86,32 @@
button:active {
color: var(--Primary-Blue, #0d6efd);
}
}
}

#welcome {
.emulation {
display: inline-flex;
}

.welcome-pane {
display: inline-flex;
}

.project-button {
margin-top: 11px;
margin-left: 22em;
}

#dashboard-nav{
@include tab-nav;
margin-top: 3em;
margin-left: 1em;
margin-bottom: 1em;

border-bottom: solid;
border-color: #D0D0D0;
}

}
#emulation_bar {
Expand Down Expand Up @@ -126,7 +141,7 @@
margin-top: 1em;
min-width: 30em;
}
}


#show {
.pending-project {
Expand Down
33 changes: 33 additions & 0 deletions app/controllers/welcome_controller.rb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# frozen_string_literal: true
class WelcomeController < ApplicationController
skip_before_action :authenticate_user!, except: [:styles_preview]
skip_before_action :verify_authenticity_token

def index
return if current_user.nil?
@sponsored_projects = Project.sponsored_projects(@current_user.uid)
Expand All @@ -12,6 +14,9 @@ def index
@eligible_data_user = true if !current_user.eligible_sponsor? && !current_user.eligible_manager?

@my_inventory_requests = current_user.user_requests.where(type: "FileInventoryRequest")
@dashtab = "classic"
session[:dashtab] ||= @dashtab
@dashtab = session[:dashtab]
end

def emulate
Expand All @@ -26,6 +31,34 @@ def emulate
end
end

def dash_classic
return if current_user.nil? || current_user.id.nil?
if params.key?("dashtab")
session[:dashtab] = params[:dashtab]
end
end

def dash_project
return if current_user.nil? || current_user.id.nil?
if params.key?("dashtab")
session[:dashtab] = params[:dashtab]
end
end

def dash_activity
return if current_user.nil? || current_user.id.nil?
if params.key?("dashtab")
session[:dashtab] = params[:dashtab]
end
end

def dash_admin
return if current_user.nil? || current_user.id.nil?
if params.key?("dashtab")
session[:dashtab] = params[:dashtab]
end
end

def help
# Piggybacking on this page to pass custom HTTP headers to Mediaflux
# in a very controlled scenario.
Expand Down
220 changes: 204 additions & 16 deletions app/javascript/entrypoints/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,36 +240,223 @@ function showValidationError() {
});
}

function tabNav() {
$('#tab-nav').on('mouseenter', (el) => {
function dashStyle() {
const classic = document.getElementById('dash-classic');
const project = document.getElementById('dash-project');
const activity = document.getElementById('dash-activity');
const admin = document.getElementById('dash-admin');
const session = sessionStorage.getItem('dashtab');

// Check the session to see which tab should start as active be active
switch (session) {
case 'classic':
classic.style.borderBottom = 'solid';
classic.style.borderColor = '#E77500';
classic.classList.add('active');
break;
case 'project':
project.style.borderBottom = 'solid';
project.style.borderColor = '#E77500';
project.classList.add('active');
break;
case 'activity':
activity.style.borderBottom = 'solid';
activity.style.borderColor = '#E77500';
activity.classList.add('active');
break;
case 'admin':
admin.style.borderBottom = 'solid';
admin.style.borderColor = '#E77500';
admin.classList.add('active');
break;
default:
classic.style.borderBottom = 'solid';
classic.style.borderColor = '#E77500';
classic.classList.add('active');
break;
}

$('#dash-classic').on('mouseenter', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');

if (!classic.classList.contains('active')) {
classic.style.borderBottom = 'solid';
classic.style.borderColor = '#121212';
}
});

$('#dash-classic').on('mouseleave', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');

if (!classic.classList.contains('active')) {
classic.style.border = 'none';
}
});

$('#dash-classic').on('click', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');
// change background color to red
classic.style.borderBottom = 'solid';
classic.style.borderColor = '#E77500';
classic.classList.add('active');
});

$('#dash-project').on('mouseenter', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');

if (!project.classList.contains('active')) {
project.style.borderBottom = 'solid';
project.style.borderColor = '#121212';
}
});

$('#dash-project').on('mouseleave', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');

if (!project.classList.contains('active')) {
project.style.border = 'none';
}
});

$('#dash-project').on('click', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');
// change background color to red
project.style.borderBottom = 'solid';
project.style.borderColor = '#E77500';
project.classList.add('active');
});

$('#dash-activity').on('mouseenter', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');

if (!activity.classList.contains('active')) {
activity.style.borderBottom = 'solid';
activity.style.borderColor = '#121212';
}
});

$('#dash-activity').on('mouseleave', (el) => {
const element = el;
element.preventDefault();
const tab = document.getElementById('tab-nav');
// const tab = document.getElementById('tab-nav');

if (!tab.classList.contains('active')) {
tab.style.borderBottom = 'solid';
tab.style.borderColor = '#121212';
if (!activity.classList.contains('active')) {
activity.style.border = 'none';
}
});

$('#tab-nav').on('mouseleave', (el) => {
$('#dash-activity').on('click', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');
// change background color to red
activity.style.borderBottom = 'solid';
activity.style.borderColor = '#E77500';
activity.classList.add('active');
});

$('#dash-admin').on('mouseenter', (el) => {
const element = el;
element.preventDefault();
const tab = document.getElementById('tab-nav');
// const tab = document.getElementById('tab-nav');

if (!tab.classList.contains('active')) {
tab.style.border = 'none';
if (!admin.classList.contains('active')) {
admin.style.borderBottom = 'solid';
admin.style.borderColor = '#121212';
}
});

$('#tab-nav').on('click', (el) => {
$('#dash-admin').on('mouseleave', (el) => {
const element = el;
element.preventDefault();
const tab = document.getElementById('tab-nav');
// const tab = document.getElementById('tab-nav');

if (!admin.classList.contains('active')) {
admin.style.border = 'none';
}
});

$('#dash-admin').on('click', (el) => {
const element = el;
element.preventDefault();
// const tab = document.getElementById('tab-nav');
// change background color to red
tab.style.borderBottom = 'solid';
tab.style.borderColor = '#E77500';
tab.classList.add('active');
admin.style.borderBottom = 'solid';
admin.style.borderColor = '#E77500';
admin.classList.add('active');
});
}

function dashTab() {
const url = window.location.href;
$('#dash-classic').on('click', (inv) => {
const element = inv;
element.preventDefault();
$.ajax({
type: 'POST',
url: `${url}dash_classic`,
data: { dashtab: 'classic' },
success() { // on success..
window.location = url; // update the DIV
sessionStorage.setItem('dashtab', 'classic');
},
});
});

$('#dash-project').on('click', (inv) => {
const element = inv;
element.preventDefault();
$.ajax({
type: 'POST',
url: `${url}dash_project`,
data: { dashtab: 'project' },
success() { // on success..
sessionStorage.setItem('dashtab', 'project');
window.location.reload(); // update the DIV
},
});
});

$('#dash-activity').on('click', (inv) => {
const element = inv;
element.preventDefault();
$.ajax({
type: 'POST',
url: `${url}dash_activity`,
data: { dashtab: 'activity' },
success() { // on success..
sessionStorage.setItem('dashtab', 'activity');
window.location.reload(); // update the DIV
},
});
});

$('#dash-admin').on('click', (inv) => {
const element = inv;
element.preventDefault();
$.ajax({
type: 'POST',
url: `${url}dash_admin`,
data: { dashtab: 'admin' },
success() { // on success..
sessionStorage.setItem('dashtab', 'admin');
window.location.reload(); // update the DIV
},
});
});
}

Expand All @@ -283,7 +470,8 @@ function initPage() {
showMoreLessSysAdmin();
emulate();
showValidationError();
tabNav();
dashStyle();
dashTab();
}

window.addEventListener('load', () => initPage());
Expand Down
Loading

0 comments on commit bc0cbaa

Please sign in to comment.