canvasManagement/Management.Web/Pages/Index.razor

@page "/"
@using CanvasModel.EnrollmentTerms
@using Management.Web.Shared.Semester
@using CanvasModel.Courses
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage

@inject CanvasService canvas
@inject CoursePlanner planner
@inject ProtectedLocalStorage BrowserStorage

@code
{
  private string semesterConfigurationKey = "semesterCalendarConfiguration";
  private IEnumerable<EnrollmentTermModel>? terms { get; set; } = null;
  private bool loadingCourses = false;
  private IEnumerable<CourseModel>? courses {get; set;} = null;

  private ulong? _selectedTermId { get; set; }
  private ulong? selectedTermId { 
    get => _selectedTermId;
    set 
    {
      _selectedTermId = value;
      updateCourses();
    } 
  }
  private EnrollmentTermModel? selectedTerm
  {
    get => terms?.FirstOrDefault(t => t.Id == selectedTermId);
  }

  private ulong? selectedCourseId {
    get => planner.Course?.Id;
    set 
    {
      planner.Course = courses?.First(c => c.Id == value);
      updateModules();
    }
  }

  private List<DayOfWeek> days { get; set; } = new();
  private bool saved { get; set; } = false;

  protected override async Task OnInitializedAsync()
  {
    terms = await canvas.GetCurrentTermsFor();
    readTermFromConfig();
    readDaysFromConfig();
  }

  protected override async Task OnAfterRenderAsync(bool firstRender) 
  {
    if(firstRender)
    {
      var storedConfiguration = await BrowserStorage.GetAsync<SemesterCalendarConfig>(semesterConfigurationKey);
      if (storedConfiguration.Success) 
      {
        planner.SemesterCalendar = storedConfiguration.Value;
      } 
      else 
      {
        Console.WriteLine("no stored configuration");
      }
      StateHasChanged();
    }
  }

  private async Task updateCourses()
  {
    if(selectedTermId != null)
    {
      loadingCourses = true;

      courses = await canvas.GetCourses((ulong)selectedTermId);
      loadingCourses = false;
    }
    else
      courses = null;

    StateHasChanged();
  }

  private async Task updateModules()
  {
    if(planner.Course != null)
    {
      planner.Modules = await canvas.GetModules(planner.Course.Id);
    }
    StateHasChanged();
  }
  private void readTermFromConfig()
  {
    if (terms == null || planner.SemesterCalendar == null) return;
    foreach (var term in terms)
    {
      var termInConfiguration = planner.SemesterCalendar.StartDate == term.StartAt;
      if (termInConfiguration)
      {
        selectedTermId = term.Id;
      }
    }
  }

  private void readDaysFromConfig()
  {
    if (terms == null || planner.SemesterCalendar == null) return;

    days = planner.SemesterCalendar.Days.ToList();
  }

  public async void HandleSave()
  {
    saved = true;
    planner.SetConfiguration(
        selectedTerm ?? throw new Exception("cannot save configuration without selecting term"), 
        days.ToArray()
    );
    await BrowserStorage.SetAsync(
      semesterConfigurationKey, 
      planner.SemesterCalendar ?? throw new Exception("Semester Calendar configuration not properly configured")
    );
  }
}
<PageTitle>Index</PageTitle>

@if (terms != null)
{
  <div class="row justify-content-center">
    <div class="col-auto">
      <label for="termselect">Select Term:</label>
      <select id="termselect" class="form-select" @bind="selectedTermId">
        @foreach (var term in terms)
          {
            <option value="@term.Id">@term.Name</option>
          }
      </select>
    </div>
  </div>
}
@if (selectedTerm is not null)
{
  <h5 class="text-center mt-3">Select Days Of Week</h5>
  <div class="row m-3">
  @foreach (DayOfWeek day in (DayOfWeek[])Enum.GetValues(typeof(DayOfWeek)))
  {
    <div class="col">
      <button class="@(
            days.Contains(day) 
            ? "btn btn-secondary" 
            : "btn btn-outline-secondary"
          )" @onclick="() => {
            if(days.Contains(day))
              days.Remove(day);
            else
              days.Add(day);
          }" disabled="@saved">
        @day
      </button>
    </div>
  }
  @if(loadingCourses)
  {
    <Spinner />
  }
  </div>

  @if(courses != null)
  {
    <div class="row justify-content-center m-3">
      <div class="col-auto">
        <label for="courseselect">Select Course:</label>
        <select id="courseselect" class="form-select" @bind="selectedCourseId">
          @foreach (var course in courses)
          {
            <option value="@course.Id">@course.Name</option>
          }
        </select>
      </div>
    </div>
  }

  <div class="row justify-content-center">
    <div class="col-auto">
      <button @onclick="@HandleSave" class="btn btn-primary">
        Save
      </button>
    </div>
  </div>
}
@if(planner.Modules != null)
{
  <div>@JsonSerializer.Serialize(planner.Modules)</div>
}

@if (planner.SemesterCalendar is not null)
{
  <div class="text-center">Config complete</div>
}