From b2a34585ac7c4cac469017ddc1aabb72cf02002c Mon Sep 17 00:00:00 2001 From: sghsri Date: Thu, 31 Oct 2019 15:40:57 -0500 Subject: [PATCH] conflicts hover over message --- css/styles.css | 25 +++++++++++++++++++++++++ js/background.js | 7 +++++-- js/courseCatalog.js | 35 ++++++++++++++++++++++++++++++----- 3 files changed, 60 insertions(+), 7 deletions(-) diff --git a/css/styles.css b/css/styles.css index e7aead06..10410ee4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -234,6 +234,31 @@ outline: 0; } + +.tooltip { + position: relative; +} + +.tooltip .tooltiptext { + visibility: hidden; + background-color: black; + background:rgba(1,1,1,0.5); + color: #fff; + text-align: center; + border-radius: 6px; + font-size: 10px; + max-width: 50px; + margin-left: 5px; + padding: 5px 10px; + z-index: 2; + position: absolute; +} + +.tooltip:hover .tooltiptext { + visibility: visible; +} + + @-webkit-keyframes fadein { from { bottom: 0; diff --git a/js/background.js b/js/background.js index 9036c6e0..0387d339 100644 --- a/js/background.js +++ b/js/background.js @@ -228,12 +228,14 @@ function checkConflicts(sendResponse) { function isSingleConflict(currdatearr, unique, sendResponse) { chrome.storage.sync.get('savedCourses', function (data) { var courses = data.savedCourses; + var conflict_list = []; var conflict = false; var contains = false; for (let i = 0; i < courses.length; i++) { let course = courses[i]; - if (!conflict && isConflict(currdatearr, course.datetimearr)) { + if (isConflict(currdatearr, course.datetimearr)) { conflict = true; + conflict_list.push(course); } if (!contains && isSameCourse(course, unique)) { contains = true; @@ -241,7 +243,8 @@ function isSingleConflict(currdatearr, unique, sendResponse) { } sendResponse({ isConflict: conflict, - alreadyContains: contains + alreadyContains: contains, + conflictList: conflict_list }); }); } diff --git a/js/courseCatalog.js b/js/courseCatalog.js index fc4f835f..6cc5e88a 100644 --- a/js/courseCatalog.js +++ b/js/courseCatalog.js @@ -194,9 +194,10 @@ function updateListConflictHighlighting(start = 0) { }, (response) => { let { isConflict, - alreadyContains + alreadyContains, + conflictList } = response - updateTextHighlighting($(this).find('td'), canHighlight, isConflict, alreadyContains); + updateTextHighlighting($(this).find('td'), canHighlight, isConflict, alreadyContains, conflictList, $(this), unique); }); } } @@ -204,11 +205,35 @@ function updateListConflictHighlighting(start = 0) { }); } -function updateTextHighlighting(tds, canHighlight, isConflict, alreadyContains) { +function updateTextHighlighting(tds, canHighlight, isConflict, alreadyContains, conflictList, row, unique) { + if(conflictList.length){ + console.log(conflictList); + } + conflict_texts = row.find('.tooltiptext'); + let unique_list = conflictList.filter(function(course){ + if(course.unique != unique){ + return true; + } + return false; + }).map(function(course){ + return course.unique; + }); + if(isConflict && unique_list.length){ + if(conflict_texts){ + row.find('.tooltiptext').remove(); + } + row.addClass('tooltip'); + row.append(`Conflicts: ${unique_list.join(',\n')}`); + } else { + row.removeClass('tooltip'); + conflict_texts.remove(); + } let current_color = rgb2hex(tds.css('color')); if (isConflict && canHighlight && !alreadyContains) { - if (current_color != Colors.highlight_conflict) - tds.css('color', Colors.highlight_conflict).css('text-decoration', 'line-through').css('font-weight', 'normal'); + if (current_color != Colors.highlight_conflict){ + tds.css('color', Colors.highlight_conflict).css('text-decoration', 'line-through').css('font-weight', 'normal') + } + } else if (!alreadyContains) { if (tds.css('color') != Colors.highlight_default) tds.css('color', Colors.highlight_default).css('text-decoration', 'none').css('font-weight', 'normal');