From a935711eb0219d38bc73b93882f91e67de8ed379 Mon Sep 17 00:00:00 2001 From: KVGarg Date: Fri, 9 Aug 2019 17:54:21 +0530 Subject: [PATCH 1/5] app.js: Get mentors from Webservices The webservices now has a table for mentors, that stores the requests created by contributor on the community website. After all checks are green, the contributor is added a mentor for the upcoming program based on the request. Therefore, fetch all those contributors from webservices for the upcoming GSoC program and append them to the mentors list Closes https://github.com/coala/projects/issues/728 --- partials/tabs/mentors.html | 8 ++++---- resources/css/style.css | 3 +++ resources/js/app.js | 24 ++++++++++++++++++++++++ 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/partials/tabs/mentors.html b/partials/tabs/mentors.html index 28b87b02..061a6fe9 100644 --- a/partials/tabs/mentors.html +++ b/partials/tabs/mentors.html @@ -4,7 +4,7 @@

Hello there!

- We are the mentors for coala in GSoC 2018. + We are the mentors for coala in GSoC {{ gic.nextProgramYear }}.

Just drop a message on Gitter - @@ -18,7 +18,7 @@

-
+
@@ -42,7 +42,7 @@

Admins

- We are the admins for coala in GSoC 2018. + We are the admins for coala in GSoC {{ gic.nextProgramYear }}.

Just drop a message on Gitter @@ -55,7 +55,7 @@

-
+
diff --git a/resources/css/style.css b/resources/css/style.css index f2395d87..1f94747e 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -1,3 +1,6 @@ +.black-shadow { + box-shadow: 0 0 15px 2px black; +} .hash_value_dup { position: 'absolute'; left: '-9999px'; diff --git a/resources/js/app.js b/resources/js/app.js index af811167..959b7735 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -386,6 +386,30 @@ self.mentorsList = {} self.adminsList = {} + $scope.getMentorsWebservicesURL = function(year){ + return 'https://webservices.coala.io/mentors?year='+year+'&program=GSoC' + } + + var today = new Date() + if (today.getMonth() >= 6){ + self.nextProgramYear = today.getFullYear() + 1 + } + else { + self.nextProgramYear = today.getFullYear() + } + + var mentorsWebservicesURL = $scope.getMentorsWebservicesURL(self.nextProgramYear); + + $http.get(mentorsWebservicesURL) + .then(function(response){ + var mentors = response.data + angular.forEach(mentors, function (data) { + self.mentorsList[data.user.login] = { + "github_handle": data.user.login, + "github_avatar_url": "https://avatars.githubusercontent.com/" + data.user.login + } + }); + }) $http.get('data/projects.liquid') .then(function (res) { $scope.projects = res.data.filter(project => project.status != "completed") From 4f4ef06343380406b1178296bd9b9723e7e07744 Mon Sep 17 00:00:00 2001 From: KVGarg Date: Fri, 9 Aug 2019 23:55:01 +0530 Subject: [PATCH 2/5] tabs: Fetch and Display forms from webservices The forms uploaded by developers from community website, are being fetched from Webservices where the request to add a new form is being processed. If a valid request is created, the form is added to the database. Therefore, we can fetch those forms and display them on the projects website. Closes https://github.com/coala/projects/issues/284 --- index.html | 8 ++++--- partials/tabs/forms.html | 46 ++++++++++++++++++++++++++++++++++++++++ resources/css/style.css | 7 ++++++ resources/js/app.js | 20 +++++++++++++++++ 4 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 partials/tabs/forms.html diff --git a/index.html b/index.html index dcd9166e..0488d153 100644 --- a/index.html +++ b/index.html @@ -38,11 +38,13 @@
diff --git a/partials/tabs/forms.html b/partials/tabs/forms.html new file mode 100644 index 00000000..6cee7c6c --- /dev/null +++ b/partials/tabs/forms.html @@ -0,0 +1,46 @@ + +
+
+
+

Open Source Forms

+
+
+
+
+
+
+ + + + + + + + + + + + + +
TitleSubmissions Till
+
+ {{ form.title }} +
+

{{ form.description }}

+

+ Uploaded by: {{ form.user }} +

+
+
+ 		+ {{ form.expiry_date | date:"medium" }} +
+
+
+ No forms have been uploaded, yet! If you are already a member of organization and a developer, + you can share it with us on Community website + by logging-in. +
+
+
+
diff --git a/resources/css/style.css b/resources/css/style.css index 1f94747e..cd39fd17 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -1,6 +1,13 @@ +.apply-flex { + display: flex; + justify-content: center; +} .black-shadow { box-shadow: 0 0 15px 2px black; } +.center-align-text { + text-align: center; +} .hash_value_dup { position: 'absolute'; left: '-9999px'; diff --git a/resources/js/app.js b/resources/js/app.js index 959b7735..08620498 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -55,6 +55,9 @@ when('/faq', { template: '' }). + when('/forms', { + template: '' + }). otherwise({ redirectTo: '/projects' }); @@ -440,4 +443,21 @@ } }]); + app.directive('forms', ['$http', function ($http) { + return { + restrict: 'E', + templateUrl: '/partials/tabs/forms.html', + controller: function ($scope, $rootScope) { + self = this + self.formsList = [] + + $http.get('https://webservices.coala.io/osforms') + .then(function (forms) { + self.formsList = forms.data + }) + }, + controllerAs: "osforms" + } + }]); + })(); From 8e239d6590db5ab496a3e2c5365dfbdb2b157326 Mon Sep 17 00:00:00 2001 From: KVGarg Date: Sun, 11 Aug 2019 15:29:54 +0530 Subject: [PATCH 3/5] projects.html: Add filters for searching projects This commit adds filters for filtering the projects based on project work status, tags, difficulty level, initiatives and collaborating projects. Closes https://github.com/coala/projects/issues/559 --- .coafile | 2 +- partials/tabs/projects.html | 40 +++++++- resources/css/style.css | 79 ++++++++++++++- resources/js/app.js | 195 +++++++++++++++++++++++++++++++++++- 4 files changed, 309 insertions(+), 7 deletions(-) diff --git a/.coafile b/.coafile index 90150cc7..d19ca105 100644 --- a/.coafile +++ b/.coafile @@ -35,7 +35,7 @@ ignore = _projects/README.md, data/locale/en/projects/README.md, # README.md symlinks: https://github.com/coala/coala-bears/issues/2950 -max_lines_per_file = 500 +max_lines_per_file = 1000 [filenames] bears = FilenameBear diff --git a/partials/tabs/projects.html b/partials/tabs/projects.html index 58c125e4..0cce9d3b 100644 --- a/partials/tabs/projects.html +++ b/partials/tabs/projects.html @@ -5,8 +5,39 @@
-
-
+
+
+
+
+ + Filter Projects + +
+
+
+ +
+
+
Filter Google Summer of Code Projects
+
+
+ +
+
+ + + + + Clear Filters + +
+
+
For more project ideas, click here.
@@ -21,6 +52,9 @@
+
+ {{ message.noProjectsFound }} +
{{ project.name }}
@@ -97,6 +131,8 @@ 'slow'); }) + $('.filter-select-fields select').material_select(); + $('.modal').modal({ dismissible: true, // Modal can be dismissed by clicking outside of the modal opacity: 0.8, // Opacity of modal background diff --git a/resources/css/style.css b/resources/css/style.css index cd39fd17..9aee65e0 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -1,12 +1,38 @@ +.all-filters-option { + position: relative; + z-index: 1002; + min-width: 350px; + margin: 10px 0; + background-color: white; + box-shadow: 0 0 15px 2px black; + border-radius: 20px; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} .apply-flex { display: flex; - justify-content: center; + flex-flow: row wrap; + align-items: center; } .black-shadow { box-shadow: 0 0 15px 2px black; } -.center-align-text { - text-align: center; +.center-content { + justify-content: center; +} +.close-filters { + right: 6%; + margin-top: 1.25rem; + position: absolute; + z-index: 1003; +} +.display-none { + display: none; +} +.evenly-spread-content { + justify-content: space-evenly; } .hash_value_dup { position: 'absolute'; @@ -42,6 +68,36 @@ .fa-clipboard:hover .hinttext { visibility: visible; } +.filter-projects-inputs { + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + margin-top: 1rem; +} +.filter-btn { + width: 165px; + z-index: 0; +} +.filter-btn .btn-large { + border-radius: 100px; + box-shadow: 0 0 10px 1px darkslategray; +} +.filters-btns { + width: 50%; +} +.filters-inputs { + justify-content: space-around; + padding: 20px 0; +} +.filter-select-fields { + width: 100%; + padding-top: 20px; + padding-bottom: 10px; + justify-content: space-around; +} +i.fa { + cursor: pointer; +} .project-detail-element > .clickable:hover, .clickable:hover .chip:hover { cursor: pointer; background-color: #f3f5f8; @@ -124,6 +180,11 @@ border: 0; z-index: 9; } +.searchbar { + width: 85%; + min-width: 340px; + margin-top: 0; +} .sha256sum_hash { display: flex; justify-content: space-evenly; @@ -136,3 +197,15 @@ #sha256sum_hash_value { word-wrap: break-word; } +@-webkit-keyframes fade-in { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +@keyframes fade-in { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +.fade-in { + -webkit-animation-name: fade-in; + animation-name: fade-in; +} diff --git a/resources/js/app.js b/resources/js/app.js index 08620498..0a22c397 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -97,21 +97,213 @@ controller: function ($scope, $location, Languages) { self = this + $scope.message = {} + $scope.projectFilterOptions = {} + $scope.selectedStatusesList = [] + $scope.selectedTagsList = [] + $scope.selectedLevelsList = [] + $scope.selectedInitiativesList = [] + $scope.selectedCollabsList = [] + var mapping = { '': 0, 'crowded': 1, 'in_progress': 2, - 'completed': 3 + 'completed': 3, + 'disabled': 4 + } + + self.displayFilters = false + $scope.toggleFiltersDisplay = function(){ + self.displayFilters = !self.displayFilters + $('select').material_select(); } $scope.sortOrder = function(project) { return mapping[project.status]; } + $scope.getFiltersMetadata = function(){ + $http.get('data/projects.liquid') + .then(function (res) { + var projects = res.data; + angular.forEach(projects, function(project){ + if (project.status.length === 0){ + $scope.projectFilterOptions.status.options['NOT YET STARTED'] = 0 + } + angular.forEach(project.status, function(state){ + $scope.projectFilterOptions.status.options[state.toUpperCase()] = mapping[state] + }) + angular.forEach(project.tags, function(tag){ + $scope.projectFilterOptions.tags.options[tag] = tag + }) + $scope.projectFilterOptions.difficulty.options[project.difficulty.toUpperCase()] = project.difficulty + angular.forEach(project.initiatives, function(initiative){ + $scope.projectFilterOptions.initiatives.options[initiative] = initiative + }) + angular.forEach(project.collaborating_projects, function(collab){ + $scope.projectFilterOptions['collab-projects'].options[collab] = collab + }) + }) + }) + } + + $scope.initializeSelectorData = function(name, label, model_name){ + $scope.projectFilterOptions[name] = { + label: label, model: model_name,options: {} + } + } + + $scope.getAllFilters = function () { + $scope.initializeSelectorData('status', 'Status', 'selectedStatusesList') + $scope.initializeSelectorData('tags', 'Project Tags', 'selectedTagsList') + $scope.initializeSelectorData('difficulty', 'Difficulty Level', 'selectedLevelsList') + $scope.initializeSelectorData('initiatives', 'Initiatives', 'selectedInitiativesList') + $scope.initializeSelectorData('collab-projects', 'Collaborating Projects', 'selectedCollabsList') + $scope.getFiltersMetadata() + } + + function filterProjectsByStatus(projects){ + var selectedProjects = [] + angular.forEach(projects, function(project){ + if (project.status.length === 0 && !selectedProjects.includes(project)){ + if ( + ($scope.selectedStatusesList.includes("0") && project.mentors.length > 0) || + ($scope.selectedStatusesList.includes("4") && project.mentors.length === 0) + ){ + selectedProjects.push(project) + } + } + else { + angular.forEach(project.status, function (state) { + var mappedState = (mapping[state]).toString() + if ($scope.selectedStatusesList.includes(mappedState) && !selectedProjects.includes(project)) { + selectedProjects.push(project) + } + }) + } + }) + return selectedProjects + } + + function filterProjectsByTags(projects){ + var selectedProjects = [] + angular.forEach(projects, function(project){ + angular.forEach(project.tags, function(tag){ + if ($scope.selectedTagsList.includes(tag) && !selectedProjects.includes(project)){ + selectedProjects.push(project) + } + }) + }) + return selectedProjects + } + + function filterProjectsByDifficulty(projects){ + var selectedProjects = [] + angular.forEach(projects, function(project){ + if ($scope.selectedLevelsList.includes(project.difficulty) && !selectedProjects.includes(project)){ + selectedProjects.push(project) + } + }) + return selectedProjects + } + + function filterProjectsByInitiatives(projects){ + var selectedProjects = [] + angular.forEach(projects, function(project){ + angular.forEach(project.initiatives, function(initiative){ + if ($scope.selectedInitiativesList.includes(initiative) && !selectedProjects.includes(project)){ + selectedProjects.push(project) + } + }) + }) + return selectedProjects + } + + function filterProjectsByCollaboratingProjects(projects){ + var selectedProjects = [] + angular.forEach(projects, function(project){ + angular.forEach(project.collaborating_projects, function(collab){ + if ($scope.selectedCollabsList.includes(collab) && !selectedProjects.includes(project)){ + selectedProjects.push(project) + } + }) + }) + return selectedProjects + } + + $scope.setModelList = function(filter, list){ + if (filter === 'status'){ + $scope.selectedStatusesList = list + } + else if (filter === 'tags'){ + $scope.selectedTagsList = list + } + else if (filter === 'difficulty'){ + $scope.selectedLevelsList = list + } + else if (filter === 'initiatives'){ + $scope.selectedInitiativesList = list + } + else { + $scope.selectedCollabsList = list + } + } + + function anyFiltersApplied(){ + return ( + $scope.selectedStatusesList.length > 0 || + $scope.selectedTagsList.length > 0 || + $scope.selectedLevelsList.length > 0 || + $scope.selectedInitiativesList.length > 0 || + $scope.selectedCollabsList.length > 0 + ) + } + + $scope.applyFilters = function(){ + var filteredProjects = $scope.allProjects + if(anyFiltersApplied()){ + if ($scope.selectedStatusesList.length > 0 && filteredProjects.length > 0) { + filteredProjects = filterProjectsByStatus(filteredProjects) + } + if ($scope.selectedTagsList.length > 0 && filteredProjects.length > 0) { + filteredProjects = filterProjectsByTags(filteredProjects) + } + if ($scope.selectedLevelsList.length > 0 && filteredProjects.length > 0) { + filteredProjects = filterProjectsByDifficulty(filteredProjects) + } + if ($scope.selectedInitiativesList.length > 0 && filteredProjects.length > 0) { + filteredProjects = filterProjectsByInitiatives(filteredProjects) + } + if ($scope.selectedCollabsList.length > 0 && filteredProjects.length > 0) { + filteredProjects = filterProjectsByCollaboratingProjects(filteredProjects) + } + if (filteredProjects.length === 0){ + $scope.message.noProjectsFound = 'No projects found for your selected filters' + + ' options! Please try a different filter search combination.' + $scope.projectList = [] + } + else { + $scope.projectList = filteredProjects + } + } + else { + $scope.projectList = filteredProjects + } + } + + $scope.clearFilters = function(){ + $scope.projectList = $scope.allProjects + var select = $('select') + select.prop('selectedIndex', 0) + select.material_select() + } + $scope.getDefaultProjectsMetadata = function () { $http.get('data/projects.liquid') .then(function (res) { $scope.projectList = res.data; + $scope.allProjects = res.data; $scope.projectRequest(); }) } @@ -284,6 +476,7 @@ $scope.searchText = search_requested } + $scope.getAllFilters(); }, controllerAs: 'lc' } From 353bed9af50c44e81653631216a07a9f86aa3bfe Mon Sep 17 00:00:00 2001 From: KVGarg Date: Mon, 12 Aug 2019 15:16:38 +0530 Subject: [PATCH 4/5] events.html: Get & Show events from webservices The commits adds an events directive that fetches the events from coala Webservices and displays them on the website in the card format. Instead of dissplaying all events, only the ongoing events, events occured in last 3 months and the events which are about to occur in next 3 months will be displayed to avoid a long list of cards. Closes https://github.com/coala/projects/issues/560 --- index.html | 10 ++++--- partials/tabs/events.html | 39 ++++++++++++++++++++++++ resources/css/style.css | 25 ++++++++++++++++ resources/js/app.js | 62 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 partials/tabs/events.html diff --git a/index.html b/index.html index 0488d153..e3ee1d01 100644 --- a/index.html +++ b/index.html @@ -38,13 +38,15 @@
diff --git a/partials/tabs/events.html b/partials/tabs/events.html new file mode 100644 index 00000000..b2ca401c --- /dev/null +++ b/partials/tabs/events.html @@ -0,0 +1,39 @@ + +
+
+
+

Organization Events

+
+
+
+
+
+
+
{{ category.name }}
+
+
+
+
+ {{ event.title }} +

{{ event.description }}

+ No event description available! +
+
+ + {{ event.start_date_time | date:"medium" }} + + - {{ event.end_date_time | date:"medium" }} + + +
+
+
+
+
+
+
+ No Events Found! If you're already a member of organization and a developer, + you can share it with us on Community website + by logging-in. +
+
diff --git a/resources/css/style.css b/resources/css/style.css index 9aee65e0..c3a090c7 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -19,6 +19,15 @@ .black-shadow { box-shadow: 0 0 15px 2px black; } +.break-word { + word-wrap: break-word; +} +.center-align-text { + text-align: center; +} +.constant-content-height { + height: 150px; +} .center-content { justify-content: center; } @@ -31,6 +40,13 @@ .display-none { display: none; } +.event-card { + width: 320px; + margin-right: 20px; +} +.events-detail { + margin: 15px 0; +} .evenly-spread-content { justify-content: space-evenly; } @@ -98,6 +114,15 @@ i.fa { cursor: pointer; } +.lighter-font { + font-weight: lighter; +} +.no-events-available { + font-size: 1.2em; + height: 30vh; + justify-content: center; + flex-direction: column; +} .project-detail-element > .clickable:hover, .clickable:hover .chip:hover { cursor: pointer; background-color: #f3f5f8; diff --git a/resources/js/app.js b/resources/js/app.js index 0a22c397..b0567be4 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -58,6 +58,9 @@ when('/forms', { template: '' }). + when('/events', { + template: '' + }). otherwise({ redirectTo: '/projects' }); @@ -653,4 +656,63 @@ } }]); + app.directive('events', ['$http', function ($http) { + return { + restrict: 'E', + templateUrl: '/partials/tabs/events.html', + controller: function ($scope, $rootScope) { + var today = new Date() + $scope.eventsData = [] + $scope.eventsList = { + ongoing_events: { + name: 'Ongoing Event(s)', + events: [] + }, + upcoming_events: { + name: 'Upcoming Events(s)', + events: [] + }, + past_events: { + name: 'Past Event(s)', + events: [] + } + } + + $http.get('https://webservices.coala.io/calendar') + .then(function(result){ + self.eventsData = result.data + }) + + $scope.groupEvents = function(){ + angular.forEach($scope.eventsData, function(event){ + var event_start_time = new Date(event.start_date_time) + if(event.end_date_time === null){ + var event_end_time = new Date(today.getTime() + 86400000) + } + else{ + var event_end_time = new Date(event.end_date_time) + } + + if(event_start_time <= today && today <= event_end_time) { + $scope.eventsList.ongoing_events.events.push(event) + } // ongoing event + else if (event_end_time < today && + ((today - event_start_time) / (86400000) <= 90)) { + $scope.eventsList.past_events.events.push(event) + } // has happened in last 3 months + else if( + event_start_time > today && event_end_time > today && + ((event_start_time - today) / (86400000) <= 90)) { + $scope.eventsList.upcoming_events.events.push(event) + } // will occur in next 3 months + }) + } + + $scope.groupEvents() + + }, + controllerAs: "ed" + } + }]); + })(); From a87bb704a966601785f7a60f8338e0b0260f2073 Mon Sep 17 00:00:00 2001 From: KVGarg Date: Mon, 12 Aug 2019 23:04:26 +0530 Subject: [PATCH 5/5] projects.html: Get issues detail from webservices The commit adds a method, to get related issues states from coala Webservices and adds the issue state to a HashMap which is being used to get issue css class, when the project pop-ups. Closes https://github.com/coala/projects/issues/298 --- partials/tabs/projects.html | 2 +- resources/css/style.css | 15 +++++++++++++++ resources/js/app.js | 29 +++++++++++++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/partials/tabs/projects.html b/partials/tabs/projects.html index 0cce9d3b..9c1bbeb1 100644 --- a/partials/tabs/projects.html +++ b/partials/tabs/projects.html @@ -106,7 +106,7 @@
Filter Google Summer of Code Projects
Developers Involved
@{{developers}}
-
Related issues
{{ issue | format_issue }} +
Related issues
{{ issue | format_issue }}


diff --git a/resources/css/style.css b/resources/css/style.css index c3a090c7..de6dd29c 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -31,6 +31,10 @@ .center-content { justify-content: center; } +.closed { + background-color: #cb2431; + color: white +} .close-filters { right: 6%; margin-top: 1.25rem; @@ -117,12 +121,23 @@ i.fa { .lighter-font { font-weight: lighter; } +.merged { + background-color: #6f42c1; + color: white; +} .no-events-available { font-size: 1.2em; height: 30vh; justify-content: center; flex-direction: column; } +.no-state { + background-color: #e4e4e4; +} +.open, .opened { + background-color: #2cbe4e; + color: white; +} .project-detail-element > .clickable:hover, .clickable:hover .chip:hover { cursor: pointer; background-color: #f3f5f8; diff --git a/resources/js/app.js b/resources/js/app.js index b0567be4..c3f7b156 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -121,6 +121,7 @@ self.displayFilters = !self.displayFilters $('select').material_select(); } + self.issueStates = {} $scope.sortOrder = function(project) { return mapping[project.status]; @@ -480,6 +481,34 @@ } $scope.getAllFilters(); + self.getIssueStateClass = function(issue){ + return self.issueStates[issue] + } + + function getIssueState(issue) { + self.issueStates[issue] = 'no-state' + $http({ + method: 'GET', + url: 'https://webservices.coala.io/issue/details', + params: { url: issue } + }).then(function (response) { + var issue_data = response.data + self.issueStates[issue] = issue_data.state + }) + } + + function getAllRelatedIssuesState(){ + $http.get('data/projects.liquid') + .then(function (res) { + angular.forEach(res.data, function(project){ + angular.forEach(project.issues, function(issue){ + getIssueState(issue) + }) + }) + }) + } + getAllRelatedIssuesState() + }, controllerAs: 'lc' }