From 75fa7e6167109aa54d7d03c9cbcb53b59a5c8709 Mon Sep 17 00:00:00 2001 From: Louis Charbonnier Date: Tue, 28 Mar 2023 16:47:35 +0200 Subject: [PATCH 1/3] add modal on challenges --- app/assets/stylesheets/components/_index.scss | 1 + app/assets/stylesheets/components/_modal.scss | 4 ++ app/controllers/challenges_controller.rb | 15 ++++++- app/controllers/leagues_controller.rb | 2 +- .../controllers/league_controller.js | 15 ++++++- .../challenges/_show_details_challenge.erb | 14 ++++++ app/views/leagues/_details_challenge.html.erb | 15 +++++++ app/views/leagues/_popup.html.erb | 12 ----- app/views/leagues/_show_friend.html.erb | 44 +------------------ app/views/leagues/_user_challenges.html.erb | 26 +++++------ app/views/leagues/new.html.erb | 2 - app/views/leagues/show.html.erb | 9 +++- app/views/users/_show_user.erb | 38 ++++++++++++++++ app/views/users/show.html.erb | 40 +---------------- 14 files changed, 123 insertions(+), 114 deletions(-) create mode 100644 app/assets/stylesheets/components/_modal.scss create mode 100644 app/views/challenges/_show_details_challenge.erb create mode 100644 app/views/leagues/_details_challenge.html.erb delete mode 100644 app/views/leagues/_popup.html.erb create mode 100644 app/views/users/_show_user.erb diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss index acdd200..778553c 100644 --- a/app/assets/stylesheets/components/_index.scss +++ b/app/assets/stylesheets/components/_index.scss @@ -7,3 +7,4 @@ @import "footer"; @import "card"; @import "popup"; +@import "modal"; diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss new file mode 100644 index 0000000..3021f7c --- /dev/null +++ b/app/assets/stylesheets/components/_modal.scss @@ -0,0 +1,4 @@ +.modal{ + height: 80vh; + bottom: 0; +} diff --git a/app/controllers/challenges_controller.rb b/app/controllers/challenges_controller.rb index 4025e72..e96e816 100644 --- a/app/controllers/challenges_controller.rb +++ b/app/controllers/challenges_controller.rb @@ -1,19 +1,32 @@ class ChallengesController < ApplicationController before_action :set_league + before_action :set_challenge, only: [:show] def index @challenges = @league.user_league_challenges end def show - @challenge = Challenge.find(params[:id]) + @details_challenge = UserLeagueChallenge.joins(user_league: :league).includes(:user_league) + .where(challenge_id: @challenge.id, user_league: { league_id: @league.id }) + .order('progress DESC') + respond_to do |format| + format.html + format.text { render partial: "challenges/show_details_challenge", locals: { details_challenge: @details_challenge}, formats: [:html] } + end end + private def set_league @league = League.find(params[:league_id]) end + + def set_challenge + @challenge = Challenge.find(params[:id]) + end + end # Faire un tableau avec les kills / Hit diff --git a/app/controllers/leagues_controller.rb b/app/controllers/leagues_controller.rb index 1de235f..cb35eb6 100644 --- a/app/controllers/leagues_controller.rb +++ b/app/controllers/leagues_controller.rb @@ -9,10 +9,10 @@ def index def show @league_challenges = @league.challenges + @details_challenge = [] @user_challenges = UserLeagueChallenge.joins(user_league: [:league]).includes(:challenge) .where(user_leagues: { user_id: current_user, league_id: @league }) .order('progress DESC') - @url = "#{join_league_url}?token=#{@league.token}" @users = @league.users @league = League.find(params[:id]) diff --git a/app/javascript/controllers/league_controller.js b/app/javascript/controllers/league_controller.js index 37b1561..1ac8d28 100644 --- a/app/javascript/controllers/league_controller.js +++ b/app/javascript/controllers/league_controller.js @@ -4,7 +4,7 @@ import { createConsumer } from "@rails/actioncable" // Connects to data-controller="league" export default class extends Controller { static values = { leagueId: Number, currentUserId: Number } - static targets = ["userChallenges", "ranking", "players", "leagueChallenges"] + static targets = ["userChallenges", "ranking", "players", "leagueChallenges", "detailsChallenge"] initialize() { this.received = this.received.bind(this) @@ -14,6 +14,7 @@ export default class extends Controller { console.log("coucou") console.log(this.leagueIdValue) console.log(this.currentUserIdValue) + console.log(this.detailsChallengeTarget) this.channel = createConsumer().subscriptions.create( { channel: "LeagueChannel", id: this.leagueIdValue }, { received: this.received } @@ -61,4 +62,16 @@ export default class extends Controller { received(json) { this[json.key](json.data) } + + showDetails(event) { + console.log(event.currentTarget.dataset.cid) + const challengeId = event.currentTarget.dataset.cid + const url = `/leagues/${this.leagueIdValue}/challenges/${challengeId}` + fetch(url, {headers: {"Accept": "text/plain"}}) + .then(response => response.text()) + .then((data) => { + console.log(data) + this.detailsChallengeTarget.outerHTML = data; + }) + } } diff --git a/app/views/challenges/_show_details_challenge.erb b/app/views/challenges/_show_details_challenge.erb new file mode 100644 index 0000000..1d9e866 --- /dev/null +++ b/app/views/challenges/_show_details_challenge.erb @@ -0,0 +1,14 @@ +<% details_challenge.each do |challenge| %> +
+

<%= challenge.user_league.user.steam_username %>

+

<%= challenge.succes? ? "Completed" : "In progress" %>

+
+
= 50 ? "progress-medium" : "progress-low" %>" style="width: <%= challenge.progress %>%;">
+
+
+
+ <%= challenge.progress %> % +
+
+
+<% end %> diff --git a/app/views/leagues/_details_challenge.html.erb b/app/views/leagues/_details_challenge.html.erb new file mode 100644 index 0000000..a4be3aa --- /dev/null +++ b/app/views/leagues/_details_challenge.html.erb @@ -0,0 +1,15 @@ +<% user_challenges.each do |user_challenge| %> + +<% end %> diff --git a/app/views/leagues/_popup.html.erb b/app/views/leagues/_popup.html.erb deleted file mode 100644 index 44291db..0000000 --- a/app/views/leagues/_popup.html.erb +++ /dev/null @@ -1,12 +0,0 @@ - -
-
-

POP UP

-

- window window window.window window window. window. -

- × -
-
diff --git a/app/views/leagues/_show_friend.html.erb b/app/views/leagues/_show_friend.html.erb index bddef87..de0d4a5 100644 --- a/app/views/leagues/_show_friend.html.erb +++ b/app/views/leagues/_show_friend.html.erb @@ -6,49 +6,7 @@ - - - - + <%= render "users/show_user", user: user %> diff --git a/app/views/leagues/_user_challenges.html.erb b/app/views/leagues/_user_challenges.html.erb index 45ca9ea..9f9f1c0 100644 --- a/app/views/leagues/_user_challenges.html.erb +++ b/app/views/leagues/_user_challenges.html.erb @@ -1,18 +1,18 @@ -
<% user_challenges.each do |user_challenge| %> -
- <%#= image_tag challenge.photo %> -

<%= user_challenge.challenge.name %>

-

<%= user_challenge.challenge.description %>

-
-
= 50 ? "progress-medium" : "progress-low" %>" style="width: <%= user_challenge.progress %>%;">
-
-
-
- <%= user_challenge.challenge.points %> points + <%#= link_to league_challenge_path(league, user_challenge.challenge), data: { bs_toggle: "modal", bs_target: "#chaldetails" } do %> +
+ <%#= image_tag challenge.photo %> +

<%= user_challenge.challenge.name %>

+

<%= user_challenge.challenge.description %>

+
+
= 50 ? "progress-medium" : "progress-low" %>" style="width: <%= user_challenge.progress %>%;">
+
+
+
+ <%= user_challenge.challenge.points %> points +
-
- <% end %> + <% end %>
diff --git a/app/views/leagues/new.html.erb b/app/views/leagues/new.html.erb index 4d71ee3..0eab83c 100644 --- a/app/views/leagues/new.html.erb +++ b/app/views/leagues/new.html.erb @@ -1,6 +1,4 @@

CREATE YOUR LEAGUE

<%= render 'form_league', league: @league%> -

-
diff --git a/app/views/leagues/show.html.erb b/app/views/leagues/show.html.erb index 02a5990..0198158 100644 --- a/app/views/leagues/show.html.erb +++ b/app/views/leagues/show.html.erb @@ -15,9 +15,9 @@ <%= render "invite_player" %> <%= render "player_list" %> - <%= render "popup"%> <%= render "timer" %> + <%#

<%= @league.game.genre %>

<%#

<%= @league.game.description %>

@@ -26,8 +26,13 @@ <%= render "league_challenges", challenges: @league_challenges, league: @league %>
- <%= render "user_challenges", user_challenges: @user_challenges %> + <%= render "user_challenges", user_challenges: @user_challenges, league: @league, details_challenge: @details_challenge%>
+ <%= render "details_challenge", user_challenges: @user_challenges, details_challenge: @details_challenge, league: @league %> + + + + <%= render "show_friend", users: @users %>
diff --git a/app/views/users/_show_user.erb b/app/views/users/_show_user.erb new file mode 100644 index 0000000..bce7eac --- /dev/null +++ b/app/views/users/_show_user.erb @@ -0,0 +1,38 @@ +
+
+
+
+

<%= user.steam_username.upcase %>

+
+ User Image +
+
+

Rank: <%= user.rank %>

+
+
+
+
+
Leagues 👾
+

<%= user.user_leagues.count %>

+
+
+
+
+
Favorite Game 🎮
+

<%#= @league.game.name %> CS GO

+
+
+
+
+
Challenges completed 🎯
+

<%= user.completed_challenges_count %>

+
+
+
+
+
Member since ⏲
+

<%= user.created_at.strftime("%B %Y") %>

+
+
+
+
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb index d0a39e2..c45cd23 100644 --- a/app/views/users/show.html.erb +++ b/app/views/users/show.html.erb @@ -1,39 +1 @@ -
-
-
-
-

<%= @user.steam_username.upcase %>

-
- User Image -
-
-

Rank: <%= @user.rank %>

-
-
-
-
-
Leagues 👾
-

<%= @user.user_leagues.count %>

-
-
-
-
-
Favorite Game 🎮
-

<%#= @league.game.name %> CS GO

-
-
-
-
-
Challenges completed 🎯
-

<%= @user.completed_challenges_count %>

-
-
-
-
-
Member since ⏲
-

<%= @user.created_at.strftime("%B %Y") %>

-
-
-
-
- +<%= render "show_user", user: @user %> From 0e564b97c50b331ae2bb6c133baf3540583fc8e8 Mon Sep 17 00:00:00 2001 From: Louis Charbonnier Date: Wed, 29 Mar 2023 10:50:45 +0200 Subject: [PATCH 2/3] change front modal --- app/assets/stylesheets/components/_modal.scss | 15 ++++++++++++++- .../stylesheets/config/_bootstrap_variables.scss | 1 + app/assets/stylesheets/pages/_myleague.scss | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss index 3021f7c..04011ba 100644 --- a/app/assets/stylesheets/components/_modal.scss +++ b/app/assets/stylesheets/components/_modal.scss @@ -1,4 +1,17 @@ .modal{ - height: 80vh; + height: auto; bottom: 0; + top: 200px; +} + +.modal-content{ + top: 300px; + +} + +.modal-header { + position: sticky; + top: 0; + z-index: 1056; + background-color: #FFF; } diff --git a/app/assets/stylesheets/config/_bootstrap_variables.scss b/app/assets/stylesheets/config/_bootstrap_variables.scss index e3684fe..227b22c 100755 --- a/app/assets/stylesheets/config/_bootstrap_variables.scss +++ b/app/assets/stylesheets/config/_bootstrap_variables.scss @@ -22,3 +22,4 @@ $border-radius-lg: 2px; $border-radius-sm: 2px; // Override other variables below! + diff --git a/app/assets/stylesheets/pages/_myleague.scss b/app/assets/stylesheets/pages/_myleague.scss index 45844a8..88322d1 100644 --- a/app/assets/stylesheets/pages/_myleague.scss +++ b/app/assets/stylesheets/pages/_myleague.scss @@ -135,7 +135,7 @@ table tbody tr { .card-challenges { position: relative; display: flex; -width: 88vw; +width: auto; flex-direction: column; justify-content: space-between; padding: 1rem; From 52400379e5d90b45f3f16507b42d8509f0d4ac50 Mon Sep 17 00:00:00 2001 From: Louis Charbonnier Date: Mon, 3 Apr 2023 13:40:41 +0200 Subject: [PATCH 3/3] allow sidekiq in with dev command for test --- Procfile.dev | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Procfile.dev b/Procfile.dev index 714108d..ca7367d 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,3 @@ web: bin/rails server -p 3000 -b 0.0.0.0 js: yarn build --watch -# worker: redis-cli flushall ; bundle exec sidekiq -C config/sidekiq.yml +worker: redis-cli flushall ; bundle exec sidekiq -C config/sidekiq.yml