Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Panel
titleInstallation

Anchor
2
2

NodeJS version

Install the package from npm:

Code Block
languagebash
themeDJango
npm install https://github.com/spinalcom/spinal-browser-admin.git

You can require the module in the standard way:

Code Block
languagejs
themeDJango
const spinalCore = require("spinal-core-connectorjs");
Browser version

Download the SpinalCore browser version from http://resources.spinalcom.com/spinalcore.browser.js

Add it to your HTML file:

Code Block
languagexml
themeDJango
<script type="text/javascript" src="/path/to/spinalcore.browser.js"></script>

Most of the API is exposed in a global object named spinalCore.


Panel
titleConnecting to the hub

Anchor
3
3

Code Block
languagejs
themeDJango
const conn = spinalCore.connect("http://644:password@127.0.0.1:8888/__myApp__");

This method establishes a connection with the hub. It returns an object containing the connection information, which will be used in the other API methods that communicate with the hub.

The string parameter has the following format:

Code Block
languagetext
themeDJango
protocol://userid:password@host:port/path
Explanation:
  • protocol: the communication protocol used to communicate with the hub; currently only supporting "http"
  • userid: a user id that has access to the data; beware that the user has the needed rights to manage the data (read more about it here)
  • password: the password of the user
  • host: address of the hub
  • port: port number where the hub is running
  • path: location in the filesystem of the files that we want to store/load


Panel
titleDefining a model

Anchor
4
4

Code Block
languagejs
themeDJango
class MyModel extends Model {
	constructor() {
  	  	super();

   	  	this.add_attr({
       		// key: value
       	    // attribute1: "sample",
       	 	// attribute2: 2,
       	 	// attribute3: ["one", "two"],
       	 	// attribute4: {one: 1}
       	 	// ...
    	});
	}
}

spinalCore.extend(MyModel, Model);


A Model is a class, which contains a structure of the data we want to synchronize with the hub. There are three required steps to define a class:

  1. Create a class and call its super()
  2. Add all the attributes of the class we want to synchronize using the add_attr() method
  3. Extend the class from the base Model class provided by SpinalCore

The value of the attributes should correspond to one of these data types:

  • string
  • number
  • array
  • object
  • boolean
  • any class inherited from Model


Panel
titleStoring and Synching a model

Anchor
5
5

Code Block
languagejs
themeDJango
const models = require('../path-to-model/models.js');
let myObj = new models.MyModel();
spinalCore.store(conn, myObj, "myObj", callbackSucces, callbackFailure);


A model object is created as an instance of a Model class, and then saved in the hub with the store() method. All the changes made in it will be automatically submited to the hub. The parameters accepted are:

  • Connection instance, obtained from the connect() method
  • Model object
  • New name of the object in the hub (used for retrieving it later)
  • Callback function executed once the model has been successfully stored
  • Callback function executed if there was an error while storing the model (probably another model exists)


Panel
titleLoading and Synching a model

Anchor
6
6

Code Block
languagejs
themeDJango
spinalCore.load(conn, "myObj", callbackSuccess, callbackFailure);


Once an object has been saved in the hub, this command is used for fetching it and keeping synchronized with its changes. The parameters accepted are:

  • Connection instance, obtained from the connect() method
  • Name of the object in the hub (the same one used for storing it)
  • Callback function executed once the model has been successfully loaded; as a parameter it receives the object itself
  • Callback function executed if there was an error while loading the model (probably it doesn't exists)



Panel
titleLoading and Synching all the models of a specific class

Anchor
7
7

Code Block
languagejs
themeDJango
spinalCore.load_type(conn, "className", callbackSuccess, callbackFailure);


Once some objects have been saved in the hub, this command is used for fetching all the models of a specific class and keeping synchronized with their changes. The parameters accepted are:

  • Connection instance, obtained from the connect() method
  • Name of the class
  • Callback function executed once the models have been successfully loaded. The same function is called for each models, and each one receives the object itself as a parameter.
  • Callback function executed if there was an error while loading the models (probably there is no model of the chosen class in the hub)


Panel
titleGetting/Setting the data in the models

Anchor
8
8

Code Block
languagejs
themeDJango
let value = myObj.attribute1.get();
myObj.attribute1.set(value);


To obtain or modify an attribute of the model object, the classic get() and set() methods should be applied. Note that if the object has previously been stored with the store() function, the modified data will automatically synchronize with the hub.


Panel
titleReacting to changes in the model without a process

Anchor
9
9

Code Block
languagejs
themeDJango
myObj.bind(reactFunction);


The method bind() will execute the reactFunction(), that should be defined by the developer, everytime the data in the models are changed.


Panel
titleDefining a process

Anchor
10
10

Code Block
languagejs
themeDJango
function MyProcess (model) {
    myProcess.super(this, model);

    this.onchange = function () {
        // code to execute whenever the model changes
    };
}

spinalCore.extend(MyProcess, Process);


A Process is a class prepared to interact with models. It can listen for changes in one or more models and reacts to them. There are three steps to define a process:


  1. Create a function and call its super(), passing its context and a model or array of models as arguments
  2. Optionally, you can override the onchange() method that will be executed whenever the given models change
  3. Extend the class from the base Process class provided by SpinalCore


Panel
titleSpinal User Manager

Anchor
11
11

In SpinalCoreJs, the management of users is done with a set of function of the SpinalUserManager object:

  1. get_user_id
  2. new_account
  3. change_password
  4. delete_account
  5. get_admin_id
  6. change_password_by_admin
  7. delete_account_by_admin
  8. change_account_rights_by_admin


Anchor
get_user_id
get_user_id
get_user_id
(options, user_name, password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_name: String containing the username.
  3. password: String containing the password of the user.
  4. success_callback: function callback with the response when the function succeed.
  5. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.get_user_id('http://127.0.0.1:8888', 'test@spinalhub', 'password',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
new_account
new_account
new_account
(options, user_name, password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_name: String containing the username.
  3. password: String containing the password of the user.
  4. success_callback: function callback with the response when the function succeed.
  5. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.new_account('http://127.0.0.1:8888', 'test@spinalhub', 'password',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
change_password
change_password
change_password
(options, user_id, password, new_password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_id: Contain the user id.
  3. password: String containing the password of the user.
  4. new_password: String containing the new_password of the user.
  5. success_callback: function callback with the response when the function succeed.
  6. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.change_password('http://127.0.0.1:8888', 777777, 'password', 'new_password',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
delete_account
delete_account
delete_account
(options, user_id, password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_id: Contain the user id.
  3. password: String containing the password of the user.
  4. success_callback: function callback with the response when the function succeed.
  5. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.delete_account('http://127.0.0.1:8888', 777777, 'password',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
get_admin_id
get_admin_id
get_admin_id
(options, admin_name, password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. admin_name: String containing the admin username.
  3. password: String containing the password of the admin user.
  4. success_callback: function callback with the response when the function succeed.
  5. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.get_admin_id('http://127.0.0.1:8888', 'admin name', 'password',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
change_password_by_admin
change_password_by_admin
change_password_by_admin
(options, user_name, new_password, admin_id, admin_password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_name: String containing the username.
  3. new_password: String containing the new password of the user.
  4. admin_id: Contain the id of a admin (default: 644 or 168)
  5. admin_password: String containing the password of the admin.
  6. success_callback: function callback with the response when the function succeed.
  7. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.change_password_by_admin('http://127.0.0.1:8888', 777777, 'new_password', 644,'4YCSeYUzsDG8XSrjqXgkDPrdmJ3fQqHs',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
delete_account_by_admin
delete_account_by_admin
delete_account_by_admin
(options, user_name, admin_id, admin_password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_name: String containing the username.
  3. admin_id: Contain the id of a admin (default: 644 or 168)
  4. admin_password: String containing the password of the admin.
  5. success_callback: function callback with the response when the function succeed.
  6. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.delete_account_by_admin('http://127.0.0.1:8888', 777777, 644,'4YCSeYUzsDG8XSrjqXgkDPrdmJ3fQqHs',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );


Anchor
change_account_rights_by_admin
change_account_rights_by_admin
change_account_rights_by_admin
(options, user_name, right, admin_id, admin_password, success_callback, error_callback = null)

  1. options: String the parameter to connect to the SpinalHub, example "http://127.0.0.1:8888"
  2. user_name: String containing the username.
  3. right: Contain the right (0 = Read/Write // 1 = Read).
  4. admin_id: Contain the id of a admin (default: 644 or 168)
  5. admin_password: String containing the password of the admin.
  6. success_callback: function callback with the response when the function succeed.
  7. error_callback (optionnal): function callback with the response or status error when the function fail.
Code Block
languagejs
themeDJango
SpinalUserManager.change_account_rights_by_admin('http://127.0.0.1:8888', 'test@spinalhub', 0, '644','4YCSeYUzsDG8XSrjqXgkDPrdmJ3fQqHs',
        function(response) { console.log( 'success : ' + response ) },
        function(response) { console.log( 'error : ' + response ) } );