Lots of stuff

2025-10-28 10:10:04 +00:00 · 2016-02-01 23:19:30 +01:00
commit d7316d5799
6681 changed files with 527969 additions and 0 deletions
--- a/client/templates/modify/formes.html
+++ b/client/templates/modify/formes.html
@@ -0,0 +1,138 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Advanced JSON Editor Example</title>
+
+    <script src="https://raw.githubusercontent.com/jdorn/json-editor/master/dist/jsoneditor.min.js"></script>
+</head>
+<body>
+    <h1>Advanced JSON Editor Example</h1>
+
+    <p>This example demonstrates the following:</p>
+    <ul>
+        <li>Loading external schemas via ajax (using $ref)</li>
+        <li>Setting the editor's value from javascript (try the Restore to Default button)</li>
+        <li>Validating the editor's contents (try setting name to an empty string)</li>
+        <li>Macro templates (try changing the city or state fields and watch the citystate field update automatically)</li>
+        <li>Enabling and disabling editor fields</li>
+    </ul>
+
+    <button id='submit'>Submit (console.log)</button>
+    <button id='restore'>Restore to Default</button>
+    <button id='enable_disable'>Disable/Enable Form</button>
+    <span id='valid_indicator'></span>
+
+    <div id='editor_holder'></div>
+
+    <script>
+      // This is the starting value for the editor
+      // We will use this to seed the initial editor
+      // and to provide a "Restore to Default" button.
+      var starting_value = [
+        {
+          name: "John Smith",
+          age: 35,
+          gender: "male",
+          location: {
+            city: "San Francisco",
+            state: "California",
+            citystate: ""
+          },
+          pets: [
+            {
+              name: "Spot",
+              type: "dog",
+              fixed: true
+            },
+            {
+              name: "Whiskers",
+              type: "cat",
+              fixed: false
+            }
+          ]
+        }
+      ];
+
+      // Initialize the editor
+      var editor = new JSONEditor(document.getElementById('editor_holder'),{
+        // Enable fetching schemas via ajax
+        ajax: true,
+
+        // The schema for the editor
+        schema: {
+          type: "array",
+          title: "People",
+          format: "tabs",
+          items: {
+            title: "Person",
+            headerTemplate: "{{i}} - {{self.name}}",
+            oneOf: [
+              {
+                $ref: "basic_person.json",
+                title: "Basic Person"
+              },
+              {
+                $ref: "person.json",
+                title: "Complex Person"
+              }
+            ]
+          }
+        },
+
+        // Seed the form with a starting value
+        startval: starting_value,
+
+        // Disable additional properties
+        no_additional_properties: true,
+
+        // Require all properties by default
+        required_by_default: true
+      });
+
+      // Hook up the submit button to log to the console
+      document.getElementById('submit').addEventListener('click',function() {
+        // Get the value from the editor
+        console.log(editor.getValue());
+      });
+
+      // Hook up the Restore to Default button
+      document.getElementById('restore').addEventListener('click',function() {
+        editor.setValue(starting_value);
+      });
+
+      // Hook up the enable/disable button
+      document.getElementById('enable_disable').addEventListener('click',function() {
+        // Enable form
+        if(!editor.isEnabled()) {
+          editor.enable();
+        }
+        // Disable form
+        else {
+          editor.disable();
+        }
+      });
+
+      // Hook up the validation indicator to update its
+      // status whenever the editor changes
+      editor.on('change',function() {
+        // Get an array of errors from the validator
+        var errors = editor.validate();
+
+        var indicator = document.getElementById('valid_indicator');
+
+        // Not valid
+        if(errors.length) {
+          indicator.style.color = 'red';
+          indicator.textContent = "not valid";
+        }
+        // Valid
+        else {
+          indicator.style.color = 'green';
+          indicator.textContent = "valid";
+        }
+      });
+    </script>
+</body>
+</html>