Skip to content

Commit

Permalink
Merge pull request #73 from AAU-P5-Moodle/64-homework-teacherpretify-…
Browse files Browse the repository at this point in the history 
…editor-modal

64 homework teacherpretify editor modal
  • Loading branch information
@Skjodt
Skjodt authored Dec 4, 2024
2 parents 1ffb81b + 54cf840 commit 2bc208a
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 50 deletions.
1 change: 1 addition & 0 deletions server/moodle/mod/homework/amd/build/eventlinker.min.js.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 11 additions & 37 deletions server/moodle/mod/homework/classes/external/get_homework_chooser.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,12 @@

global $CFG;

use core\exception\coding_exception;
use core_external\external_api;
use core_external\external_function_parameters;
use core_external\external_value;
use core_external\external_single_structure;
use core\output\mustache_engine;

/**
*
Expand All @@ -53,51 +55,23 @@ public static function execute_parameters() {
* @param $cmid - The current modules id
* @return string[] - The html to be shown client-side
*/
public static function execute($cmid) {
global $DB;
public static function execute() : array {
$mustache = new Mustache_Engine();

// Custom HTML for the homework chooser modal.
$html = '
<div id="homework-chooser-modal">
<form>
<label for="inputField">Input Field:</label><br>
<textarea type="text" id="inputField" name="inputField"></textarea><br><br>
<br>
<div id="linkDiv">
<label for="link">Link:</label><br>
<input name="link" id="link" type="url" placeholder="Enter URL">
</div>
<br>
<div id="page-range-input">
<label for="startPage">Page Range:</label><br>
<input type="number" id="startPage" name="startPage" min="1" placeholder="Start Page" style="width: 50px;">
<span>-</span>
<label for="endPage"></label>
<input type="number" id="endPage" name="endPage" min="1" placeholder="End Page" style="width: 50px;">
</div>
<div id="video-time-input">
<label for="startTime">Time Range (seconds):</label><br>
<input type="number" id="startTime" name="startTime" min="1" placeholder="Start Time" style="width: 50px;">
<span>-</span>
<label for="endTime"></label>
<input type="number" id="endTime" name="endTime" min="1" placeholder="End Time" style="width: 50px;">
</div>
<br>
<div id="file-content"></div>
<div id="dropzone-container">
</div>
</form>
</div>
';
$templatepath = __DIR__ . "/../../templates/get_homework_chooser.mustache";
if (!file_exists($templatepath)) {
throw new coding_exception("Template file does not exist: " . $templatepath);
}
$templatecontent = file_get_contents($templatepath);

return ['html' => $html];
return ['html' => $mustache->render($templatecontent)];
}

/**
*
* @return external_single_structure - Is a definition of the functions return type and a description of it
*/
public static function execute_returns() {
public static function execute_returns() : external_single_structure {
return new external_single_structure([
'html' => new external_value(PARAM_RAW, 'HTML for the homework chooser modal'),
]);
Expand Down
32 changes: 20 additions & 12 deletions server/moodle/mod/homework/edit.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@
// Output the header - REQUIRED.
echo $OUTPUT->header();

echo html_writer::tag('div', 'This is the homework edit page', ['class' => 'content']);

$homeworkmaterials = $DB->get_records_sql(
"SELECT hm.*, f.filename
Expand All @@ -85,6 +84,9 @@
* @copyright 2024, cs-24-sw-5-01 <cs-24-sw-5-01@student.aau.dk>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

echo '<div class="view-homework-container">';

foreach ($homeworkmaterials as $materials) :
// Generate the preview URL for the file if it exists.
if ($materials->file_id !== null) {
Expand All @@ -104,16 +106,20 @@
}
?>

<div
class="material"
style="
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
"
>
<div class="material">

<?php if ($materials->startpage != null):
echo '<i class="fa-solid fa-book"></i>';
elseif ($materials->link != null):
echo '<i class="fa-solid fa-link"></i>';
elseif ($materials->starttime != null):
echo '<i class="fa-solid fa-play"></i>';
elseif ($materials->file_id != null):
echo '<i class="fa-solid fa-file"></i>';
endif; ?>

<div class="material-container">

<p><?= htmlspecialchars($materials->description) ?></p>
<?php if ($materials->startpage !== null && $materials->endpage !== null) : ?>
<p><?= "Page: " .
Expand All @@ -138,7 +144,7 @@ class="material"
<?php if ($materials->file_id !== null && isset($previewurl)) : ?>
<?php if (strtolower(pathinfo($file->filename, PATHINFO_EXTENSION)) === 'mp4') : ?>
<!-- Display the video inline if it's an mp4 file -->
<video controls width="800" height="360">
<video controls width="640" height="360">
<source src="<?= $previewurl ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand Down Expand Up @@ -171,7 +177,9 @@ class="material"
]
); ?>
</div>
</div>
<?php endforeach; ?>

<?php
/**
*
Expand Down
94 changes: 93 additions & 1 deletion server/moodle/mod/homework/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,96 @@
.material-container > *:first-child {
font-size: 20px;
font-weight: bold;
}
}

.homework-action-buttons button {
margin-right: 10px;
}

.homework-action-buttons button:last-child {
margin-right: 0;
}


/* Below is the styling for the homework chooser modal */
#homework-chooser-modal {
padding: 10px 20px;
}

#homework-chooser-modal .block {
display: block;
}

#homework-chooser-modal .maxw-100 {
max-width: 125px;
}

#homework-chooser-modal .w-full {
width: 100%;
}

#homework-chooser-modal .inline-flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
gap: 5px;
}

#homework-chooser-modal .mb-10 {
margin-bottom: 10px;
}

#homework-chooser-modal .mb-20 {
margin-bottom: 20px;
}

#homework-chooser-modal .flex-grow {
flex: 1;
}

form label {
font-weight: bold;
}

textarea {
width: 100%;
height: 80px;
padding: 10px;
border: 1px solid black;
border-radius: 4px;
}

input[type="text"],
input[type="url"],
input[type="number"] {
padding: 10px;
border: 1px solid black;
border-radius: 4px;
}


.page-range-input, .video-time-input {
gap: 5px;
margin-bottom: 10px;
}

#dropzone-container {
padding: 20px;
margin-top: 10px;
}

#file-content {
min-height: 43px;
padding: 10px;
}

#file-content:empty:before {
content:attr(data-placeholder);
color: grey;
}

#file-content p {
margin-bottom: 0;
}
41 changes: 41 additions & 0 deletions server/moodle/mod/homework/templates/get_homework_chooser.mustache
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<div id="homework-chooser-modal">
<form>
<div class="mb-20">
<label for="inputField">Input Field:</label>
<textarea type="text" id="inputField" name="inputField">
</textarea>
</div>
<div id="linkDiv" class="linkDiv mb-20">
<label for="link" class="block">Link:</label>
<input name="link" id="link" type="url" placeholder="Enter URL" class="block w-full">
</div>
<div class="inline-flex mb-20">
<div id="page-range-input" class="page-range-input flex-grow">
<label for="startPage" class="block">Page Range:</label>
<div class="inline-flex">
<input type="number" id="startPage" name="startPage" min="1" placeholder="Start Page" class="maxw-100">
<span>-</span>

<input type="number" id="endPage" name="endPage" min="1" placeholder="End Page" class="maxw-100">
</div>
</div>
<div id="video-time-input" class="video-time-input flex-grow">
<label for="startTime" class="block">Time Range (seconds):</label>
<div class="inline-flex">

<input type="number" id="startTime" name="startTime" min="1" placeholder="Start Time" class="maxw-100">
<span>-</span>

<input type="number" id="endTime" name="endTime" min="1" placeholder="End Time" class="maxw-100">
</div>
</div>
</div>
<hr>
<div class="inline-flex mb-10">
<div class="bold">Attached file:</div>
<div id="file-content" data-placeholder="No attached file"></div>
</div>
<div id="dropzone-container">
</div>
</form>
</div>

0 comments on commit 2bc208a

Please sign in to comment.