parent
22b9b44773
commit
8dc503f454
@ -1,152 +1,25 @@
|
|||||||
import { Controller } from "@hotwired/stimulus";
|
import { Controller } from "@hotwired/stimulus";
|
||||||
|
import debounce from "debounce";
|
||||||
|
|
||||||
// Connects to data-controller="analyze"
|
// Connects to data-controller="analyze"
|
||||||
export default class extends Controller {
|
export default class extends Controller {
|
||||||
connect() { }
|
static targets = ["category", "subcategory"]
|
||||||
refresh(event) {
|
|
||||||
let base_url = event.target.value;
|
|
||||||
let target = event.target;
|
|
||||||
console.log(this.selected_slice(target))
|
|
||||||
console.log(target.name)
|
|
||||||
|
|
||||||
let url =
|
initialize() {
|
||||||
base_url +
|
this.submit = debounce(this.submit.bind(this), 300)
|
||||||
"&academic_years=" +
|
|
||||||
this.selected_years().join(",") +
|
|
||||||
"&source=" +
|
|
||||||
this.selected_source(target) +
|
|
||||||
"&slice=" +
|
|
||||||
this.selected_slice(target) +
|
|
||||||
"&group=" +
|
|
||||||
this.selected_group() +
|
|
||||||
"&graph=" +
|
|
||||||
this.selected_graph(target) +
|
|
||||||
"&races=" +
|
|
||||||
this.selected_items("race").join(",") +
|
|
||||||
"&genders=" +
|
|
||||||
this.selected_items("gender").join(",") +
|
|
||||||
"&incomes=" +
|
|
||||||
this.selected_items("income").join(",") +
|
|
||||||
"&grades=" +
|
|
||||||
this.selected_items("grade").join(",") +
|
|
||||||
"&ells=" +
|
|
||||||
this.selected_items("ell").join(",") +
|
|
||||||
"&speds=" +
|
|
||||||
this.selected_items("sped").join(",");
|
|
||||||
|
|
||||||
this.go_to(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
go_to(location) {
|
|
||||||
window.location = location;
|
|
||||||
}
|
|
||||||
|
|
||||||
selected_years() {
|
|
||||||
let year_checkboxes = [...document.getElementsByName("year-checkbox")];
|
|
||||||
let years = year_checkboxes
|
|
||||||
.filter((item) => {
|
|
||||||
return item.checked;
|
|
||||||
})
|
|
||||||
.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
|
|
||||||
return years;
|
|
||||||
}
|
|
||||||
|
|
||||||
selected_group() {
|
|
||||||
let groups = [...document.getElementsByName("group-option")];
|
|
||||||
let selected_group = groups
|
|
||||||
.filter((item) => {
|
|
||||||
return item.selected;
|
|
||||||
})
|
|
||||||
.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
|
|
||||||
return selected_group[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
selected_source(target) {
|
|
||||||
if (target.name === 'source') {
|
|
||||||
return target.id;
|
|
||||||
}
|
|
||||||
if (target.name === 'slice' || target.name === 'group') {
|
|
||||||
return 'survey-data-only';
|
|
||||||
}
|
|
||||||
|
|
||||||
return window.source;
|
|
||||||
}
|
|
||||||
|
|
||||||
selected_slice(target) {
|
|
||||||
if (target.name === 'source' && target.id === 'all-data') {
|
|
||||||
return 'all-data';
|
|
||||||
}
|
|
||||||
if (target.name === 'source' && target.id === 'survey-data-only') {
|
|
||||||
return 'students-and-teachers';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (target.name === 'group') {
|
|
||||||
return 'students-by-group';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (target.name === 'source' || target.name === 'slice') {
|
connect() {
|
||||||
let slices = [...document.getElementsByName("slice")];
|
const collection = document.getElementsByClassName("popover");
|
||||||
let selected_slice = slices
|
|
||||||
.filter((item) => {
|
|
||||||
return item.id != "all-data";
|
|
||||||
})
|
|
||||||
.filter((item) => {
|
|
||||||
return item.checked;
|
|
||||||
})
|
|
||||||
.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
|
|
||||||
return selected_slice[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
return window.slice;
|
|
||||||
}
|
|
||||||
|
|
||||||
selected_graph(target) {
|
for (let i = 0; i < collection.length; i++) {
|
||||||
if (target.name === 'source' && target.id === 'all-data') {
|
collection[i].parentNode.removeChild(collection[i]);
|
||||||
return 'all-data'
|
|
||||||
}
|
}
|
||||||
if (target.name === 'source' && target.id === 'survey-data-only') {
|
|
||||||
return 'students-and-teachers'
|
|
||||||
}
|
|
||||||
|
|
||||||
let graphs = [...document.getElementsByName("slice")];
|
|
||||||
let selected_slice = graphs
|
|
||||||
.filter((item) => {
|
|
||||||
return item.checked;
|
|
||||||
})
|
|
||||||
.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
})[0];
|
|
||||||
|
|
||||||
if (target.name === 'slice' || target.name === 'group') {
|
|
||||||
if (selected_slice === 'students-and-teachers') {
|
|
||||||
return 'students-and-teachers';
|
|
||||||
}
|
|
||||||
return `students-by-${this.selected_group()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return window.graph;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
selected_items(type) {
|
submit() {
|
||||||
let checkboxes = [...document.getElementsByName(`${type}-checkbox`)]
|
console.log("Submitting form");
|
||||||
let items = checkboxes
|
|
||||||
.filter((item) => {
|
|
||||||
return item.checked;
|
|
||||||
})
|
|
||||||
.map((item) => {
|
|
||||||
return item.id.replace(`${type}-`, '');
|
|
||||||
});
|
|
||||||
|
|
||||||
return items;
|
this.element.requestSubmit();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +1,13 @@
|
|||||||
<div class="d-flex align-items-center mx-5">
|
<div class="d-flex align-items-center mx-5">
|
||||||
<input
|
<input
|
||||||
id="<%= id %>"
|
id="<%= id %>"
|
||||||
class="m-3 <%= name %>-checkbox form-check-input"
|
class="m-3 form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="<%= name %>-checkbox"
|
name="<%= "#{name}#{index}" %>-checkbox"
|
||||||
value="<%= base_url %>"
|
value="<%= item %>"
|
||||||
data-action="click->analyze#refresh"
|
|
||||||
<%= selected_items.include?(item) ? "checked" : "" %>
|
<%= selected_items.include?(item) ? "checked" : "" %>
|
||||||
<%= @presenter.graph.slug == 'students-and-teachers' || @presenter.source.slug == 'all-data' ? "disabled" : "" %>
|
>
|
||||||
<%= @presenter.group.slug == name ? "" : "hidden" %>>
|
<label for="<%= id %>" >
|
||||||
|
|
||||||
<label for="<%= id %>"
|
|
||||||
<%= @presenter.group.slug == name ? "" : "hidden" %>>
|
|
||||||
<%= label_text %>
|
<%= label_text %>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,14 +1,44 @@
|
|||||||
|
|
||||||
<h3 class="sub-header-4">Focus Area</h3>
|
<h3 class="sub-header-4">Focus Area</h3>
|
||||||
<p>Select a category & subcategory to analyze measure-level results</p>
|
<p>Select a category & subcategory to analyze measure-level results</p>
|
||||||
<select id="select-category" class="mx-3 form-select" data-id="category-dropdown" data-action="analyze#refresh">
|
|
||||||
|
<%= form_with(url: district_school_analyze_index_path,
|
||||||
|
method: :get,
|
||||||
|
data: {
|
||||||
|
turbo_frame: "results",
|
||||||
|
turbo_action: "advance",
|
||||||
|
controller: "analyze",
|
||||||
|
action: "input->analyze#submit"
|
||||||
|
}) do |f| %>
|
||||||
|
|
||||||
|
<% params.reject{|key,_| key.start_with?("category") || key.start_with?("subcategory")}.each do |key, value| %>
|
||||||
|
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<select id="select-category" class="mx-3 form-select" name="category" data-id="category-dropdown">
|
||||||
<% categories.each do |category| %>
|
<% categories.each do |category| %>
|
||||||
<option value="<%= analyze_category_link(district: district, school: school, academic_year: academic_year, category: category) %>" <%= category.id == @presenter.category.id ? "selected": "" %>><%= "#{category.category_id}: #{category.name}" %></option>
|
<option value="<%= category.category_id %>" <%= category.category_id == @presenter.category.category_id ? "selected": "" %>><%= "#{category.category_id}: #{category.name}" %></option>
|
||||||
<% end %>
|
<% end %>
|
||||||
</select>
|
</select>
|
||||||
<select id="select-subcategory" class="mx-3 form-select mt-3" data-id="subcategory-dropdown" data-action="analyze#refresh">
|
<% end %>
|
||||||
|
|
||||||
|
<%= form_with(url: district_school_analyze_index_path,
|
||||||
|
method: :get,
|
||||||
|
data: {
|
||||||
|
turbo_frame: "results",
|
||||||
|
turbo_action: "advance",
|
||||||
|
controller: "analyze",
|
||||||
|
action: "input->analyze#submit"
|
||||||
|
}) do |f| %>
|
||||||
|
<% params.each do |key, value| %>
|
||||||
|
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<select id="select-subcategory" class="mx-3 form-select mt-3" name="subcategory" data-id="subcategory-dropdown">
|
||||||
<% subcategories.each do |subcategory| %>
|
<% subcategories.each do |subcategory| %>
|
||||||
<option value="<%= analyze_subcategory_link(district: district, school: school, academic_year: academic_year, category: category, subcategory: subcategory) %>" <%= subcategory.subcategory_id == @presenter.subcategory.subcategory_id ? "selected": "" %>>
|
<option value="<%= subcategory.subcategory_id %>" <%= subcategory.subcategory_id == @presenter.subcategory.subcategory_id ? "selected": "" %>>
|
||||||
<%= "#{subcategory.subcategory_id}: #{subcategory.name}" %>
|
<%= "#{subcategory.subcategory_id}: #{subcategory.name}" %>
|
||||||
</option>
|
</option>
|
||||||
<% end %>
|
<% end %>
|
||||||
</select>
|
</select>
|
||||||
|
<% end %>
|
||||||
|
|||||||
@ -1,31 +1,60 @@
|
|||||||
<select id="select-group" name="group" class="mx-4 form-select" data-id="group-dropdown" data-action="analyze#refresh">
|
<%= form_with(url: district_school_analyze_index_path,
|
||||||
|
method: :get,
|
||||||
|
data: {
|
||||||
|
turbo_frame: "results",
|
||||||
|
turbo_action: "advance",
|
||||||
|
controller: "analyze",
|
||||||
|
action: "input->analyze#submit"
|
||||||
|
}) do |f| %>
|
||||||
|
|
||||||
|
<% params.reject{|key,_| key == "graph" || key.end_with?("checkbox")}.each do |key, value| %>
|
||||||
|
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<select id="select-group" name="graph" class="mx-4 form-select" data-id="group-dropdown">
|
||||||
<% @presenter.groups.each do |group| %>
|
<% @presenter.groups.each do |group| %>
|
||||||
<option id="<%= group.slug %>" name="group-option" value="<%= base_url %>" <%= group.slug == @presenter.group.slug ? "Selected": "" %>><%= group.name %> </option>
|
<option id="<%= group.slug %>" value="<%= group.graph.slug %>" <%= group.graph.slug == @presenter.graph.slug ? "Selected": "" %>><%= group.name %> </option>
|
||||||
<% end %>
|
<% end %>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p class="sub-header-5 mx-4 mt-3 font-size-14"> Select a group </p>
|
<p class="sub-header-5 mx-4 mt-3 font-size-14"> Select a group </p>
|
||||||
|
|
||||||
<% @presenter.races.each do |race| %>
|
<% if @presenter.graph.slug == 'students-by-race' %>
|
||||||
<%= render(partial: "checkboxes", locals: {id: "race-#{race.slug}", item: race, selected_items: @presenter.selected_races, name: "race", label_text: race.designation}) %>
|
<% @presenter.races.each_with_index do |race, index| %>
|
||||||
|
<%= render(partial: "checkboxes", locals: {id: "race-#{}#{race.slug}", item: race.slug, selected_items: @presenter.selected_races.map(&:slug), name: "race", label_text: race.designation, index: index })%>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% @presenter.grades.each do |grade| %>
|
<% if @presenter.graph.slug == 'students-by-grade' %>
|
||||||
<%= render(partial: "checkboxes", locals: {id: "grade-#{grade}", item: grade, selected_items: @presenter.selected_grades, name: "grade", label_text: grade}) %>
|
<% @presenter.grades.each_with_index do |grade, index| %>
|
||||||
|
<%= render(partial: "checkboxes", locals: {id: "grade-#{grade}", item: grade, selected_items: @presenter.selected_grades, name: "grade", label_text: grade, index: index }) %>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% @presenter.genders.each do |gender| %>
|
<% if @presenter.graph.slug == 'students-by-gender' %>
|
||||||
<%= render(partial: "checkboxes", locals: {id: "gender-#{gender.designation}", item: gender, selected_items: @presenter.selected_genders, name: "gender", label_text: gender.designation}) %>
|
<% @presenter.genders.each_with_index do |gender, index| %>
|
||||||
|
<%= render(partial: "checkboxes", locals: {id: "gender-#{gender.designation}", item: gender.slug, selected_items: @presenter.selected_genders.map(&:slug), name: "gender", label_text: gender.designation, index: index }) %>
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<% if @presenter.graph.slug == 'students-by-income' %>
|
||||||
|
<% @presenter.incomes.each_with_index do |income, index| %>
|
||||||
|
<%= render(partial: "checkboxes", locals: {id: "income-#{income.slug}", item: income.slug, selected_items: @presenter.selected_incomes.map(&:slug), name: "income", label_text: income.label, index: index })%>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% @presenter.incomes.each do |income| %>
|
<% if @presenter.graph.slug == 'students-by-ell' %>
|
||||||
<%= render(partial: "checkboxes", locals: {id: "income-#{income.slug}", item: income, selected_items: @presenter.selected_incomes, name: "income", label_text: income.label}) %>
|
<% @presenter.ells.each_with_index do |ell, index| %>
|
||||||
|
<%= render(partial: "checkboxes", locals: {id: "ell-#{ell.slug}", item: ell.slug, selected_items: @presenter.selected_ells.map(&:slug), name: "ell", label_text: ell.designation, index: index}) %>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% @presenter.ells.each do |ell| %>
|
<% if @presenter.graph.slug == 'students-by-sped' %>
|
||||||
<%= render(partial: "checkboxes", locals: {id: "ell-#{ell.slug}", item: ell, selected_items: @presenter.selected_ells, name: "ell", label_text: ell.designation}) %>
|
<% @presenter.speds.each_with_index do |sped, index| %>
|
||||||
|
<%= render(partial: "checkboxes", locals: {id: "sped-#{sped.slug}", item: sped.slug, selected_items: @presenter.selected_speds.map(&:slug), name: "sped", label_text: sped.designation, index: index}) %>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% @presenter.speds.each do |sped| %>
|
|
||||||
<%= render(partial: "checkboxes", locals: {id: "sped-#{sped.slug}", item: sped, selected_items: @presenter.selected_speds, name: "sped", label_text: sped.designation}) %>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 493 B After Width: | Height: | Size: 492 B |
@ -0,0 +1,6 @@
|
|||||||
|
class AddSlugToGender < ActiveRecord::Migration[7.1]
|
||||||
|
def change
|
||||||
|
add_column :genders, :slug, :string
|
||||||
|
add_index :genders, :slug, unique: true
|
||||||
|
end
|
||||||
|
end
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
class AddSlugToAcademicYear < ActiveRecord::Migration[7.1]
|
||||||
|
def change
|
||||||
|
add_column :academic_years, :slug, :string
|
||||||
|
add_index :academic_years, :slug, unique: true
|
||||||
|
end
|
||||||
|
end
|
||||||
Loading…
Reference in new issue