alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

have many of the primary interactions working

Browse Source
This commit is contained in:
Alex Mickelson
2023-07-24 19:08:23 -06:00
parent d1383fe1d4
commit ffaf4e1164
19 changed files with 577 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Management.Web/Pages/Index.razor
View File

@@ -13,9 +13,17 @@
@code
{
private bool showNewFile { get; set; } = false;
protected override void OnInitialized()
protected override void OnInitialized()
{
planner.StateHasChanged += () => this.InvokeAsync(this.StateHasChanged);
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
}

6
Management.Web/Pages/_Host.cshtml
View File

@@ -9,13 +9,15 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
@* <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> *@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<link href="css/site.css" rel="stylesheet" />
<link href="Management.Web.styles.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="favicon.png"/>
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
<body data-bs-theme="dark">
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">

52
Management.Web/Shared/Components/Modal.razor Normal file
View File

@@ -0,0 +1,52 @@
@using Management.Web.Shared.Components
@code {
[Parameter, EditorRequired]
public RenderFragment? Title { get; set; }
[Parameter, EditorRequired]
public RenderFragment? Body { get; set; }
[Parameter, EditorRequired]
public RenderFragment? Footer { get; set; }
[Parameter]
public Action OnShow { get; set; } = () => { };
[Parameter]
public Action OnHide { get; set; } = () => { };
private string modalClass = "hide-modal";
private bool showBackdrop = false;
public void Show()
{
modalClass = "show-modal";
showBackdrop = true;
OnShow();
}
public void Hide()
{
modalClass = "hide-modal";
showBackdrop = false;
OnHide();
}
}
<div class="modal @modalClass">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center w-100">@Title</h4>
<button type="button" class="btn-close" @onclick="Hide"></button>
</div>
<div class="modal-body">@Body</div>
<div class="modal-footer">@Footer</div>
</div>
</div>
</div>
@if (showBackdrop)
{
<div class="modal-backdrop fade show"></div>
}

16
Management.Web/Shared/Components/Modal.razor.css Normal file
View File

@@ -0,0 +1,16 @@
.show-modal {
animation: enter 250ms;
display: block;
opacity: 1;
}
@keyframes enter {
from {
display: block;
opacity: 0;
}
to {
opacity: 1;
}
}

12
Management.Web/Shared/Course/CourseDetails.razor
View File

@@ -10,7 +10,15 @@
private bool showEditCourseSettings = false;
protected override void OnInitialized()
{
planner.StateHasChanged += () => this.InvokeAsync(this.StateHasChanged);
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
}
<br>
@@ -42,7 +50,7 @@ else
}
}
</div>
<div class="col">
<div class="col-4">
<Modules />
</div>
</div>

9
Management.Web/Shared/MainLayout.razor
View File

@@ -3,14 +3,15 @@
<PageTitle>Management.Web</PageTitle>
<div class="page">
<div class="sidebar">
@* <div class="sidebar">
<NavMenu />
</div>
</div> *@
<main>
<div class="top-row px-4">
@* maybe put some common buttons up here *@
@* <div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
</div> *@
<article class="content px-4">
@Body

24
Management.Web/Shared/Module/Assignment/AssignmentCard.razor
View File

@@ -1,24 +0,0 @@
@inject AssignmentDragContainer dragContainer
@code {
[Parameter]
[Required]
public LocalAssignment assignment { get; set; } = new();
private void HandleDragStart()
{
dragContainer.AssignmentBeingDragged = assignment;
System.Console.WriteLine("assignment set");
}
}
<div
draggable="true"
@ondragstart="HandleDragStart"
class="col-2"
>
<div class="card">
<div class="card-body">
<div class="card-title">@assignment.name</div>
</div>
</div>
</div>

98
Management.Web/Shared/Module/Assignment/AssignmentDetails.razor Normal file
View File

@@ -0,0 +1,98 @@
@using Management.Web.Shared.Components
@inject AssignmentDragContainer dragContainer
@inject CoursePlanner planner
@code {
[Parameter]
[EditorRequired]
public LocalAssignment assignment { get; set; } = new();
[Parameter]
[EditorRequired]
public LocalModule module { get; set; } = new();
private bool showUpdateForm = false;
protected override void OnInitialized()
{
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
private Modal? assignmentEditorModal {get; set;}
private void HandleDragStart()
{
dragContainer.DropCallback = (DateTime dropDate) => {
if (planner.LocalCourse != null)
{
var newCourse = planner.LocalCourse with
{
Modules = planner.LocalCourse.Modules.Select(m =>
m.Name != module.Name
? m
: m with
{
Assignments = module.Assignments.Select(a =>
a.id != assignment.id
? a
: a with
{
due_at=dropDate
}
)
}
)
};
planner.LocalCourse = newCourse;
}
};
}
private void HandleDragEnd()
{
dragContainer.DropCallback = null;
}
}
<div
draggable="true"
@ondragstart="HandleDragStart"
@ondragend="HandleDragEnd"
@onclick="@(() => showUpdateForm = true)"
class="draggableCart"
role="button"
>
<div class="card">
<div class="card-body">
<div class="card-title">@assignment.name</div>
<div class="card-text">
@assignment.description
<div>Due At: @assignment.due_at</div>
<div>Lock At: @assignment.lock_at</div>
<div>Points: @assignment.points_possible</div>
@if(assignment.canvasId != null)
{
<div>Synced with canvas</div>
}
else
{
<div>Not synced with canvas</div>
}
<code>@JsonSerializer.Serialize(@assignment.rubric)</code>
</div>
</div>
</div>
</div>
<AssignmentForm
assignment="assignment"
Show="showUpdateForm"
OnHide="@(() => showUpdateForm = false)"
/>

59
Management.Web/Shared/Module/Assignment/AssignmentForm.razor Normal file
View File

@@ -0,0 +1,59 @@
@using Management.Web.Shared.Components
@code {
[Parameter]
[EditorRequired]
public LocalAssignment assignment
{
get;
set;
} = default!;
[Parameter]
[EditorRequired]
public bool Show { get; set; }
[Parameter]
public Action OnHide { get; set; } = () => { };
public Modal AssignmentModal { get; set; }
private string description { get; set; }
protected override void OnParametersSet()
{
if(Show)
{
AssignmentModal.Show();
}
description = assignment.description;
}
private void submitHandler()
{
}
}
<Modal @ref="AssignmentModal" OnHide="@(() => OnHide())">
<Title>@assignment.name</Title>
<Body>
<form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
<label
for="description"
class="form-label"
>
Description
</label>
<textarea
id="description"
class="form-control"
@bind="description"
/>
</form>
</Body>
<Footer>
<button class="btn btn-primary" @onclick="submitHandler">
Save
</button>
</Footer>
</Modal>

71
Management.Web/Shared/Module/Assignment/NewAssignment.razor
View File

@@ -1,26 +1,28 @@
@using Management.Web.Shared.Components
@inject CoursePlanner planner
@code {
[Parameter, EditorRequired]
public string ModuleName { get; set; } = "";
[Parameter]
public EventCallback OnSubmit { get; set; }
[EditorRequired]
public LocalModule Module { get; set; } = default!;
[Required]
[StringLength(50, ErrorMessage = "Name too long (50 character limit).")]
private string Name { get; set; } = "";
private async Task submitHandler()
private Modal? modal { get; set; }
private void submitHandler()
{
System.Console.WriteLine("new assignment");
var newAssignment = new LocalAssignment
{
id = Guid.NewGuid().ToString(),
name = Name,
description = "testDescription",
published = false,
description = "",
lock_at_due_date = true,
rubric = new RubricItem[] { },
lock_at = null,
@@ -28,21 +30,46 @@
points_possible = 10,
submission_types = new SubmissionType[] { SubmissionType.online_text_entry }
};
@* planner.LocalCourse.Assignments = planner.Assignments.Append(newAssignment); *@
await OnSubmit.InvokeAsync();
if(planner.LocalCourse != null)
{
planner.LocalCourse = planner.LocalCourse with
{
Modules=planner.LocalCourse.Modules.Select(m =>
m.Name != Module.Name
? m
: Module with
{
Assignments=Module.Assignments.Append(newAssignment)
}
)
};
}
modal?.Hide();
}
}
<button
class="btn btn-outline-secondary"
@onclick="() => modal?.Show()"
>
New Assignment
</button>
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
<label for="Assignment Name">Name</label>
<input id="moduleName" class="form-control" @bind="Name" />
<button class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
<Modal @ref="modal">
<Title>New Assignment</Title>
<Body>
<form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
<label for="Assignment Name">Name</label>
<input id="moduleName" class="form-control" @bind="Name" />
</form>
</Body>
<Footer>
<button
type="button"
class="btn btn-primary"
@onclick="submitHandler"
>
Save changes
</button>
</Footer>
</Modal>

78
Management.Web/Shared/Module/ModuleDetail.razor
View File

@@ -1,35 +1,71 @@
@using Management.Web.Shared.Module.Assignment
@using LocalModels
@inject CoursePlanner configurationManagement
@inject CoursePlanner planner
@code {
[Parameter, EditorRequired]
public LocalModule Module { get; set; } = default!;
private bool showAddAssignment { get; set; } = false;
protected override void OnInitialized()
{
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
private string accordionId {
get => Module.Name.Replace(" ", "") + "-AccordionItem";
}
}
<div class="accordion-item">
<h3 class="text-center">@Module.Name</h3>
<button
class="btn btn-primary"
@onclick="() => showAddAssignment = true"
>
Add Assignment
</button>
<h2 class="accordion-header">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="@("#" + accordionId)"
aria-expanded="true"
aria-controls="@accordionId"
>
@Module.Name
</button>
</h2>
<div
id="@accordionId"
class="accordion-collapse collapse"
data-bs-parent="#modulesAccordion"
>
<div class="accordion-body pt-1">
@if (showAddAssignment)
{
<NewAssignment ModuleName="Module.Name" OnSubmit="() => showAddAssignment = false" />
}
<h5>Assignments</h5>
<div class="row">
@* @foreach (var a in module.Assignments)
{
<AssignmentCard assignment="a" />
} *@
</div>
<div class="row m-1">
<div class="col my-auto">
<h5>Assignments</h5>
</div>
<div class="col-auto">
<NewAssignment
Module="Module"
/>
</div>
</div>
<div class="row">
@foreach (var a in Module.Assignments)
{
<AssignmentDetails assignment="a" module="Module" />
}
</div>
</div>
</div>
</div>

36
Management.Web/Shared/Module/Modules.razor
View File

@@ -8,16 +8,32 @@
@code {
private bool showNewModule { get; set; } = false;
protected override void OnInitialized()
{
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
}
@if (!showNewModule)
{
<button class="btn btn-secondary" @onclick="() => showNewModule = true">New Module</button>
}
else
{
<button class="btn btn-secondary" @onclick="() => showNewModule = false">Hide New Module</button>
}
<div class="row justify-content-end mb-1">
<div class="col-auto">
@if (!showNewModule)
{
<button class="btn btn-outline-secondary" @onclick="() => showNewModule = true">New Module</button>
}
else
{
<button class="btn btn-outline-secondary" @onclick="() => showNewModule = false">Hide New Module</button>
}
</div>
</div>
@if (showNewModule)
{
@@ -26,9 +42,11 @@ else
@if (planner.LocalCourse != null)
{
<div class="accordion" id="modulesAccordion">
@foreach (var module in planner.LocalCourse.Modules)
{
<hr>
<ModuleDetail Module="module" />
}
</div>
}

39
Management.Web/Shared/NavMenu.razor
View File

@@ -1,29 +1,30 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Management.Web</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="container-fluid">
<a class="navbar-brand" href="">Management.Web</a>
<button
title="Navigation menu"
class="navbar-toggler"
@onclick="ToggleNavMenu"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
</nav>
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link px-3" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
private bool collapseNavMenu = true; private string? NavMenuCssClass =>
collapseNavMenu ? "collapse" : null; private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
}

66
Management.Web/Shared/Semester/Day.razor
View File

@@ -13,6 +13,30 @@
get => date?.DayOfWeek != null;
}
private bool dragging {get; set;} = false;
protected override void OnInitialized()
{
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
private IEnumerable<LocalAssignment> TodaysAssignments {
get
{
if(planner.LocalCourse == null || date == null)
return Enumerable.Empty<LocalAssignment>();
else
return planner.LocalCourse.Modules
.SelectMany(m => m.Assignments)
.Where(a => a.due_at.Date == date?.Date);
}
}
private string calculatedClass
{
get
@@ -30,7 +54,7 @@
&& date < planner.LocalCourse.EndDate
&& date > planner.LocalCourse.StartDate;
var totalClasses = dayInSemester ? $"bg-light {baseClasses}" : baseClasses;
var totalClasses = dayInSemester ? $"bg-light-subtle text-light {baseClasses}" : baseClasses;
return totalClasses;
}
@@ -40,30 +64,27 @@
}
}
}
void OnDragStart()
{
Console.WriteLine("on drag start");
}
void OnDrop()
{
Console.WriteLine("on drop");
dragging = false;
if(dragContainer.AssignmentBeingDragged == null){
System.Console.WriteLine("no assignment in drop event");
return;
}
Console.WriteLine(JsonSerializer.Serialize(dragContainer.AssignmentBeingDragged));
dragContainer.AssignmentBeingDragged = null;
}
void OnDragEnter() {
dragging = true;
}
void OnDragLeave() {
dragging = false;
}
void OnDrop()
{
@* System.Console.WriteLine("on drop"); *@
dragging = false;
if(dragContainer.DropCallback == null){
System.Console.WriteLine("no drop callback set");
return;
}
if(date != null)
{
DateTime d = date ?? throw new Exception("should not get here, error converting date from nullable");
dragContainer.DropCallback?.Invoke(d);
}
}
}
<div
@@ -72,7 +93,12 @@
@ondragenter="OnDragEnter"
@ondragleave="OnDragLeave"
ondragover="event.preventDefault();"
ondragstart="event.dataTransfer.setData('', event.target.id);"
>
@(isWeekDay ? date?.Day : "")
<ul class="m-0 ps-3">
@foreach (var assignment in TodaysAssignments)
{
<li>@assignment.name</li>
}
</ul>
</div>

4
Management.Web/Utils/AssignmentDragContainer.cs
View File

@@ -1,4 +1,4 @@
public class AssignmentDragContainer
{
public LocalAssignment? AssignmentBeingDragged { get; set; }
}
public Action<DateTime>? DropCallback { get; set; }
}