Hub Santé - JSON Schema Viewer (JSV)

Site de manipulation des structures de données JSON Schema

Deploy

docker buildx build --platform linux/amd64 -t romainfd/hub-jsv:latest .
docker push romainfd/hub-jsv:latest
# Make sure you are on correct Kubernetes context
kubectl replace --force -f ../SAMU-Hub-Sante/hub/infra/web/json-schema-viewer.yaml

Comments

Run locally

grunt prod 
python -m http.server

Schemas are passed from hub-schemas/ to schemas/ using Gruntfile.js's copy:prod:files task

Schema id should match his name with trailing # (e.g. schema.json#) to run OK

JSON Schema Viewer

JavaScript tool for visualizing json-schemas, includes validator.

Fair warning, the code "just works" - it could use a good refactoring. Pull requests welcome. The JSV was built to support a specific use case, so support for JSON schema(draft v4) keywords are added on an as-needed basis. You may also notice a few extensions to the spec, e.g. example, translation, version, deprecated, etc.

The demo is rendering the mdJson-schemas. There's also a basic example without the jQuery Mobile interface elements.

JSDocs are here

Built using:

Installation

Clone repository: git clone https://github.com/jlblcc/json-schema-viewer.git
Enter project directory: cd json-schema-viewer
Install dependencies via Bower: bower install
Install dependencies via NPM: npm install
Build project via Grunt: grunt
- grunt dev: Development build. This will create dev.html and basic.html in the project root(these files are .gitignored). This build will load all unminified js files individually.
- grunt prod: Production build. This will create a production version at ./prod/<%= pkg.version %>/<%= now %>/<%= ver %>. The production version includes concatenated and minified js/css. Note: jQuery/JQuery Mobile are not included in the js builds. The prod directory is also .gitignored.
Serve with your favorite web server:
- Use grunt connect:server:keepalive to start a basic server at http://localhost:9001
- example basic nginx config
- Python: python -m SimpleHTTPServer 9001
- php 5.4+: php -S localhost:9001

Use in Browser

          (function($) {

            var loc = window.location;
            //if not already set, set the root schema location
            //this allows dev ENV to override the schema location
            var schema = JSV.schema ? JSV.schema : loc.origin + loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1) + 'schemas/schema/schema.json';

            JSV.init({
              schema : schema,
              plain : true, //don't use JQM
              viewerHeight : $('#main-body').height(), //set initial dimensions of SVG
              viewerWidth : $('#main-body').width()
            }, function() {
              $('#jsv-tree').css('width', '100%');
              //set diagram width to 100%, this DOES NOT resize the svg container
              //it will not adjust to window resize, needs a listener to support that
              JSV.resetViewer();
              $('#loading').fadeOut('slow');
            });
          })(jQuery);

The JSV.schema property must be set to the url of your schema.

Example: http://jlblcc.github.io/json-schema-viewer/basic.html

##Development

Edit the templates to modify layout:

index.html: jQuery Mobile interface. Copied to /dev.html on grunt dev.
basic.html: a basic example without jQuery Mobile or Sass dependency(css included in <head>).
latest.html: redirects to the last production build. Copied to /index.html on grunt prod.

##Grunt

See [Gruntfile.js] (https://github.com/jlblcc/json-schema-viewer/blob/master/Gruntfile.js) or the JSDocs for details on the available Grunt tasks. grunt --help will also list available tasks.

This project was inspired by robschmuecker’s block #7880033.

romainfd/SAMU-JSV