Skip to content

Commit

Permalink
Merge pull request #628 from PRX/feat/606-episode-drafts-sweep
Browse files Browse the repository at this point in the history
Podcast Planner verbiage and layout
  • Loading branch information
cavis committed May 3, 2023
2 parents 473c0bd + f4d431b commit 86a1ac3
Show file tree
Hide file tree
Showing 11 changed files with 108 additions and 97 deletions.
3 changes: 2 additions & 1 deletion app/assets/stylesheets/app/calendar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@
}

.day.current-month:hover {
background-color: $secondary !important;
background-color: $primary !important;
color: $light;
cursor: pointer;
}
}
}
4 changes: 4 additions & 0 deletions app/assets/stylesheets/shared/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ body {
background-position: top left;
}

h3 {
color: $black;
}

.prx-main {
position: relative;
display: grid;
Expand Down
2 changes: 1 addition & 1 deletion app/controllers/podcast_planner_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class PodcastPlannerController < ApplicationController
def show
@planner = PodcastPlanner.new(planner_params)
@planner.generate_dates!
@draft_dates = @podcast.episodes.draft.pluck(:released_at)
@draft_dates = @podcast.episodes.draft_or_scheduled.pluck(:released_at)
end

# POST /podcasts/1/planner
Expand Down
3 changes: 2 additions & 1 deletion app/helpers/podcast_planner_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ module PodcastPlannerHelper
MONTHLY_WEEKS = I18n.t([:first, :second, :third, :fourth, :fifth], scope: [:podcast_planner, :helper, :monthly_options])
DATE_CONTROLLER = "date"
TOGGLE_ACTION = "click->date#toggleSelect"
RECOUNT_ACTION = "click->count#recount"

def day_options
DateTime::DAYNAMES.map.with_index { |day, i| [day, i] }
Expand Down Expand Up @@ -59,7 +60,7 @@ def calendar_day_tag(day:, month:, calendar:, &block)
data = {}
if date_is_in_month?(day, month)
data[:controller] = DATE_CONTROLLER
data[:action] = TOGGLE_ACTION
data[:action] = [TOGGLE_ACTION, RECOUNT_ACTION].join(" ")
end

content_tag(:td, class: calendar.td_classes_for(day), data: data) do
Expand Down
16 changes: 16 additions & 0 deletions app/javascript/controllers/count_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
static targets = ["counter", "display"]

recount() {
this.displayTarget.innerHTML = this.countSelectedTargets()
}

countSelectedTargets() {
const selectedTargets = this.counterTargets.filter((el) => {
return !el.disabled
})
return selectedTargets.length
}
}
4 changes: 2 additions & 2 deletions app/views/podcast_planner/_calendar.html.erb
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="col <%= "d-none" if index >= range %>" data-pager-target="page">
<div class="col col-xl-4 <%= "d-none" if index >= range %>" data-pager-target="page">
<%= month_calendar(start_date: start_date) do |date| %>
<% if date_is_in_month?(date, start_date.month) %>
<%= date.day %>
<%= form.hidden_field :selected_dates, multiple: true, data: {date_target: "preselected"}, value: date.to_datetime, disabled: !date_is_in_dates?(date, @planner.dates), draft: date_is_in_dates?(date, @draft_dates) %>
<%= form.hidden_field :selected_dates, multiple: true, data: {date_target: "preselected", count_target: "counter"}, value: date.to_datetime, disabled: !date_is_in_dates?(date, @planner.dates), draft: date_is_in_dates?(date, @draft_dates) %>
<% end %>
<% end %>
</div>
33 changes: 12 additions & 21 deletions app/views/podcast_planner/_form_date_calculator.html.erb
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<section>
<div class="mb-4">
<h2 class="fw-bold"><%= t(".header.date_calculation") %></h2>
<p><%= t(".help.date_calculation") %></p>
</div>

<div class="mb-4">
<h3 class="fw-bold"><%= t(".header.day_select") %></h3>
<p><%= t(".help.day_select") %></p>
<h3 class="mb-3"><%= t(".header.day_select") %></h3>
<div class="col-lg-12">
<div class="form-floating">
<%= form.select :selected_days, day_options, {include_blank: true}, data: {action: "click#submit"}, multiple: true %>
Expand All @@ -16,26 +10,22 @@
</div>

<div class="mb-4" data-controller="toggle-field">
<h3 class="fw-bold"><%= t(".header.week_select") %></h3>
<p><%= t(".help.week_select") %></p>
<h3 class="mb-3"><%= t(".header.week_select") %></h3>
<div class="row">
<div class="col-lg-6">
<p><%= t(".help.calculate_weeks") %></p>
<div class="form-floating">
<%= form.select :week_condition, week_condition_options, {}, data: {action: "toggle-field#displayOnlyThisField click#submit"} %>
<%= form.label t(".label.week_condition") %>
</div>
</div>
<div class="col-lg-6">
<div class="" data-toggle-field-target="field" field="monthly">
<p><%= t(".help.select_weeks") %></p>
<div class="form-floating">
<%= form.select :monthly_weeks, monthly_weeks_options, {include_blank: true}, data: {action: "click#submit"}, multiple: true %>
<%= form.label t(".label.week_of_month") %>
</div>
</div>
<div class="d-none" data-toggle-field-target="field" field="periodic">
<p><%= t(".help.select_period") %></p>
<div class="form-floating">
<%= form.select :period, periodic_weeks_options, {}, data: {action: "click#submit"} %>
<%= form.label t(".label.period") %>
Expand All @@ -46,25 +36,26 @@
</div>

<div class="mb-4" data-controller="toggle-field">
<h3 class="fw-bold"><%= t(".header.range_select") %></h3>
<p><%= t(".help.range_select") %></p>
<h3 class="mb-3"><%= t(".header.range_select") %></h3>
<div class="row mb-4">
<div class="col-lg-6">
<p><%= t(".help.calculate_range") %></p>
<div class="col-12">
<div>
<div class="form-floating">
<%= form.select :date_range_condition, end_condition_options, {}, data: {action: "toggle-field#displayOnlyThisField click#submit"} %>
<%= form.label t(".label.date_range_condition") %>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-lg-6">
<p><%= t(".help.select_range") %></p>
<div class="form-floating mb-2">
<%= form.date_field :start_date, min: DateTime.tomorrow, max: DateTime.tomorrow + 1.years, value: DateTime.tomorrow, data: {action: "click#submit"} %>
<%= form.label :start_date %>
</div>
<div class="form-floating mb-2">
<%= form.date_field :start_date, min: DateTime.tomorrow, max: DateTime.tomorrow + 1.years, value: DateTime.tomorrow, data: {action: "click#submit"} %>
<%= form.label :start_date %>
</div>
</div>

<div class="col-lg-6">
<div data-toggle-field-target="field" field="episodes">
<div class="form-floating">
<%= form.number_field :number_of_episodes, {min: 1, max: 100, step: 1, value: 10, data: {action: "click#submit"}} %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/podcast_planner/_form_main.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}
) do |form| %>
<h1 class="text-black fw-bold d-flex flex-fill"><%= t(".header") %></h1>
<p><%= t(".help_html", url: new_podcast_episode_path(@podcast)) %></p>
<p class="lh-sm"><%= t(".help_html", url: new_podcast_episode_path(@podcast)) %></p>

<%= render "form_date_calculator", form: form %>
Expand Down
93 changes: 46 additions & 47 deletions app/views/podcast_planner/_form_side.html.erb
Original file line number Diff line number Diff line change
@@ -1,56 +1,55 @@
<div class="card">
<div class="card-header-primary">
<h5 class="card-title"><%= t(".header.preview") %></h5>
<%= form_with(
url: podcast_planner_path(@podcast),
method: :post
) do |form| %>
<div class="mb-4">
<h3 class="mb-3"><%= t(".header.publish_time") %></h3>
<div class="col-lg-12">
<div class="form-floating">
<%= form.select :publish_time, time_options %>
<%= form.label :publish_time %>
</div>
</div>
</div>

<%= form_with(
url: podcast_planner_path(@podcast),
method: :post
) do |form| %>
<div class="card-body">
<div class="row mb-4">
<div class="col-lg-6">
<h3 class="fw-bold"><%= t(".header.publish_time") %></h3>
<div class="form-floating">
<%= form.select :publish_time, time_options %>
<%= form.label :publish_time %>
</div>
</div>
<div class="mb-4">
<h3 class="mb-3"><%= t(".header.audio_segments") %></h3>
<div class="col-lg-12">
<div class="form-floating">
<%= form.number_field :segment_count, {min: 1, max: 10, step: 1, value: 2} %>
<%= form.label :segment_count %>
</div>
</div>
</div>

<div class="col-lg-6">
<h3 class="fw-bold"><%= t(".header.audio_segments") %></h3>
<div class="form-floating">
<%= form.number_field :segment_count, {min: 1, max: 10, step: 1, value: 2} %>
<%= form.label :segment_count %>
</div>
<div class="card p-4 mt-4mb-4">
<%= turbo_frame_tag "preview", target: "_top" do %>
<div data-controller="pager count" data-pager-range-value="6">
<div class="d-flex justify-content-between">
<h3 class="mb-3"><%= t(".header.number_of_drafts") %>
<span data-count-target="display"><%= @planner.dates.present? ? @planner.dates.count : "0" %></span>
</h3>
<div class="mb-2">
<%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageBackward", pager_target: "prev"}, disabled: true do %>
<span class="material-icons">arrow_left</span>
Month
<% end %>
<%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageForward", pager_target: "next"} do %>
Month
<span class="material-icons">arrow_right</span>
<% end %>
</div>
</div>

<div class="col-lg">
<div data-controller="pager" data-pager-range-value="6">
<div class="mb-2">
<%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageBackward", pager_target: "prev"}, disabled: true do %>
<span class="material-icons">arrow_left</span>
Month
<% end %>
<%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageForward", pager_target: "next"} do %>
Month
<span class="material-icons">arrow_right</span>
<% end %>
</div>

<%= turbo_frame_tag "preview", target: "_top" do %>
<div class="row">
<% 24.times do |i| %>
<%= render "calendar", form: form, start_date: Date.today.beginning_of_month + i.months, planner: @planner, index: i, range: 6 %>
<% end %>
</div>
<div class="row d-flex flex-wrap gx-4">
<% 24.times do |i| %>
<%= render "calendar", form: form, start_date: Date.today.beginning_of_month + i.months, planner: @planner, index: i, range: 6 %>
<% end %>
</div>
</div>
<p class="mb-0 fs-6">Key: <span class="badge bg-warning text-dark">Existing Episode Draft</span> <span class="badge bg-primary">New Episode Draft</span></p>
</div>
<div class="card-footer">
<%= form.submit t(".label.submit"), class: "btn btn-primary" %>
</div>
<% end %>
</div>
<% end %>

</div>
<%= form.submit t(".label.submit"), class: "btn btn-primary mb-4" %>
<% end %>
10 changes: 3 additions & 7 deletions app/views/podcast_planner/show.html.erb
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<%= render "podcasts/tabs" %>

<div class="row my-4 px-2">
<div class="col-lg-4">
<%= render "form_main" %>
</div>
<div class="col-lg-8">
<%= render "form_side" %>
</div>
<div class="my-4 px-2">
<%= render "form_main" %>
<%= render "form_side" %>
</div>
35 changes: 19 additions & 16 deletions config/locales/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -236,13 +236,13 @@ en:
success: Episode drafts generated.
form_main:
header: Plan Episodes
help_html: Save yourself some time by automatically creating multiple episode drafts to create a production schedule, it may also help your revenue as our sales teams will have access to dropdates to sell against. If you only wish to add a single episode, <a href="%{url}">go here</a>.
help_html: Add multiple episode drafts to create a production schedule. Episode drafts improve the accuracy of your podcast's forecasts. If you only need to add a single episode, <a href="%{url}">go here</a>.
form_date_calculator:
header:
date_calculation: Date Calculation of Draft Batch
day_select: Day Selection
week_select: Week Selection
range_select: Date Range Selection
day_select: Which day of the week do you plan to publish your episodes?
week_select: Which weeks of each month do you plan to publish on?
range_select: How long will episodes recur?
help:
date_calculation: Calculate release dates for your drafts by selecting which days and weeks you plan to publish, and then select a date range.
day_select: Which day of the week do you plan to publish your episodes? Select all that apply.
Expand All @@ -254,16 +254,19 @@ en:
calculate_range: Calculate the end of the batch by
select_range: Select range
label:
week_condition: Weekly rhythm
week_of_month: Week of the month
period: Interval
date_range_condition: End range
week_condition: Calculate the weeks by
week_of_month: Select Week of the month
period: Select weekly interval
date_range_condition: Calculate the end of the batch by
form_side:
header:
preview: Schedule Preview
publish_time: Publish Time
audio_segments: Audio Segments
number_of_drafts: "Number of Draft Episodes: %{count}"
preview: Preview Draft Schedule
publish_time: What time of day do you plan to publish the episodes?
audio_segments: How many audio segments?
segment_count: Number of segments
number_of_drafts: "Drafts planned: "
help:
segment_count: Enter the number of original audio segments. The number of segments helps determine the number and location of ad breaks for this episode.
help:
preview: Select more options to get a schedule preview.
label:
Expand All @@ -280,10 +283,10 @@ en:
third: Third
fourth: Fourth
fifth: Fifth
episodes: number of episodes
end_date: end date
month: month
period: interval
episodes: Number of episodes
end_date: End date
month: Weeks of the Month
period: Weekly interval
podcast_switcher:
dropdown:
all: View all my Podcasts
Expand Down

0 comments on commit 86a1ac3

Please sign in to comment.