Global level config page front-end functional.

Need to add back-end for saving changes and reloading page.
(Got a strange 404 error on using $.post('#'....)

amd/src/leveleditor.js

@@ -0,0 +1,60 @@
+// Put this file in path/to/plugin/amd/src
+// You can call it anything you like
+
+define(['jquery', 'core/str', 'core/ajax', 'block_gradelevel/jscolor'], function ($, str, ajax, jscolor) {
+    let self = {
+        init: function init() {
+            $("input[type=number].uint").on('change', function (evt) {
+                let $this = $(this);
+                if ($this.val() < 0) {
+                    $this.val(0);
+                }
+
+            });
+
+            $("a[data-action=addlevel]").on('click', function (evt) {
+                let $newtr = $("<tr data-rowid=''>"
+                    + "<td><input data-name='points' type='number' class='uint'></td>"
+                    + "<td><input type='text' data-name='color' class='jscolor' value='7F7F7F'></td></tr>");
+
+                let $tbody = $("table#level_config tbody");
+
+                // apply jscolor to new row
+                $newtr.find("input.jscolor").each(function () {
+                    let picker = new jscolor(this);
+                });
+                // and add 
+                $tbody.append($newtr);
+
+
+            });
+
+            $("button[data-action=savechanges]").on('click', self.submit);
+
+        },
+        submit: function submit(evt) {
+            let $table = $("table#level_config");
+
+            let data = { skill_id: $table.attr('data-skill'), levels: [] };
+            $table.find("tbody tr[data-rowid]").each(function () {
+                let $this = $(this);
+                let row = {
+                    id: $this.attr('data-rowid'),
+                    points: $this.find("input[data-name=points]").val(),
+                    color: $this.find("input[data-name=color]").val(),
+                }
+                data.levels.push(row);
+            });
+
+            console.info("Attempting to submit", data);
+
+            $.post("#", { action: "submitchanges", data: data }, function (result) {
+                console.info('result: ', result);
+                window.location.href = '#';
+            });
+
+        }, 
+
+    };
+    return self;
+});

globallevels.php

@@ -1,26 +1,75 @@
 <?php
 if(isset($_SERVER['SCRIPT_FILENAME']))
 {
-	// If SCRIPT_FILENAME is set, use that one to handle the symlinked directories the develope uses
-	$cwd = dirname($_SERVER['SCRIPT_FILENAME']);
-
-	$root = dirname(dirname($cwd));
-	print "ROOT {$root}\n";
+	// If SCRIPT_FILENAME is set, use that so the symlinked directories the developmen environment uses are handled correctly
+	$root = dirname(dirname(dirname($_SERVER['SCRIPT_FILENAME'])));
 	require_once($root."/config.php");
 }
 else
 {
-	// If not, assume the cwd is not symlinked
+	// If not, assume the cwd is not symlinked and proceed as we are used to
 	require_once("../../config.php");
 }
 
+// HOW DID WE ENSURE ONLY ADMINS CAN VIEW THIS PAGE?
+
 require_once($CFG->libdir.'/adminlib.php');
 
 admin_externalpage_setup("block_gradelevel_default_levels");
 
+$action = optional_param('action', null, PARAM_ALPHA);
+$data = optional_param('data', null, PARAM_ALPHA);
+if(!empty($data))
+{
+	$data = json_decode($data);
+}
 
-print $OUTPUT->header();
-print "<h1>".get_string('cfgpage_globallevels', 'block_gradelevel')."</h1>";
+if(!empty($action) && confirm_sesskey())
+{
+	switch($action) {
+		case 'submitchanges':
+			
+			print_r($data);
 
 
-print $OUTPUT->footer();
+
+
+
+
+			redirect($PAGE->url);
+			break;
+	}
+
+}
+else
+{
+	$PAGE->requires->js_call_amd('block_gradelevel/leveleditor', 'init');
+
+	print $OUTPUT->header();
+	print $OUTPUT->heading(get_string('cfgpage_globallevels', 'block_gradelevel'));
+
+	$global_levels = $DB->get_records('block_gradelevel_levels', array('levelset_id' => 0));
+	usort( $global_levels, function( $a, $b) {
+		return ( $a->points < $b->points ) ? -1 : 1;
+	} );
+
+	$skill_id = 0;
+	print "<p>".get_string('levelcfg_description','block_gradelevel')."</p>";
+	print "<table id='level_config' data-skill='{$skill_id}'>";
+	print "<thead><tr><th>".get_string('levelcfg_head_points','block_gradelevel')."</th><th>".get_string('levelcfg_head_color','block_gradelevel')."</th></tr></thead>";
+	print "<tbody>";
+	foreach($global_levels as $lvl)
+	{
+		$color = ltrim($lvl->badgecolor,"#");
+		print "<tr data-rowid='{$lvl->id}'><td><input data-name='points' type='number' class='uint' value='{$lvl->points}'></td><td><input type='text' data-name='color' class='jscolor' value='{$color}'></td></tr>";
+
+	}
+	print "</tbody>";
+	print "<tfoot><tr><td class='block_gradelevel_addlevel' colspan='2'><a data-action='addlevel' href='#' onclick='return false;'>".get_string("levelcfg_addlevel",'block_gradelevel')."</a></td></td></tfoot>";
+	print "</table>";
+	print "<p><button data-action='savechanges'>".get_string('savechanges','core')."</button></p>";
+
+
+
+	print $OUTPUT->footer();
+}

lang/en/block_gradelevel.php

@@ -27,3 +27,8 @@ $string['descshowtitle'] = "Whether the block should show a title bar or not";
 
 $string['labelnumlevels'] = "Number of deault levels";
 $string['descnumlevels'] = "The number of levels that is set by default for all skills";
+
+$string['levelcfg_description'] = "Levels will be sorted based on points. Make sure to set the points incrementally. Leave points empty to remove level";
+$string['levelcfg_head_points'] = "Points";
+$string['levelcfg_head_color'] = "Medal color";
+$string['levelcfg_addlevel'] = "Add level";

styles.css

@@ -18,6 +18,13 @@ div.pointinfo {
         font-weight: bold;
     }
 
+td.block_gradelevel_addlevel {
+    text-align: right;
+
+}
+input.jscolor[type=text] {
+    width: 5em;
+}
 
 figure.levelset_icon {
     background-color: #ccc;