4.0.26 • Published 5 months ago

@synerty/vortexjs v4.0.26

Weekly downloads
4
License
MIT
Repository
github
Last release
5 months ago

VortexJS

Synerty's observable, routable, data serialisation and transport code.

The "vortex" is designed to transport "Payloads" from a web browser (VortexJS) to a twisted web server (VortexPY). There is also a python client for python client to python server communication.

See the VortexPY project for more details. https://github.com/Synerty/vortexpy

Example Usage

There are some unit tests under src/app/dir, these may be useful for further reference.

Add the providers to the main app module

import {VortexService, VortexStatusService} from "@synerty/vortex";

...

@NgModule({
            ...
        imports: [
            ...
        ],
        ...
        providers: [VortexService, VortexStatusService]
        ...

Add the balloon-msg-queue-component tag

Add the balloon-msg-queue-component to your app component HTML file. This allows TupleLoader to display balloon style messages to the user.

<balloon-msg-queue-component></balloon-msg-queue-component>

Send tuples to the server

import {Component, OnInit} from "@angular/core";
import {VortexService, Tuple, Payload} from "@synerty/vortex";

// Declare a custom Tuple Type
class ExampleTuple extends Tuple {
    attr1: string;

    constructor() {
        super("doc.example.tuple.info"); // <-- This string can be anything
    }
}


// Declare a custom Tuple Type, with constructor params
class BreifExampleTuple extends Tuple {
    constructor(public attr1: string) {
        // tuple name that matches a tuple in the other end (for reconstruction)
        super("doc.example.bried.tuple.info"); // <-- This string can be anything
    }
}

@Component({
    selector: 'app-example',
    template: '<div></div>'
})
export class ExampleComponent implements OnInit {

    constructor(public vortexService: VortexService) {
    }

    ngOnInit() {
        let goodTuple = new ExampleTuple();
        goodTuple.attr1 = "Some sample data";
        
        let destinationFilt = {
            key: "a unique string" // <-- Matches server PayloadEndpoint or Handler
        };
        
        let payload = new Payload(destinationFilt, [goodTuple]);
        
        // Send the payload to the server.
        
        this.vortexService.sendPayload(payload);
        
        // OR, shorter
        
        this.vortexService.sendTuple(destinationFilt, [goodTuple]);
        
        // OR even shorter
        
        this.vortexService.sendTuple(
            { key: "a unique string" },
            [new BreifExampleTuple("attr1 value")]
        );
        
    }

}

Listen to data from the server

To receive data from the server, the Component must extend NgLifeCycleEvents

...
import {..., NgLifeCycleEvents } from "@synerty/vortexjs";

@Component({
   ...
})
export class ExampleComponent extends NgLifeCycleEvents implements OnInit {
...

Example code for listening with a PayloadEndpoint

import { Component, OnInit } from "@angular/core"
import { VortexService, Tuple, Payload } from "@synerty/vortex"
import { NgLifeCycleEvents } from "@synerty/vortexjs"

// Declare a custom Tuple Type, with constructor params
class BreifExampleTuple extends Tuple {
    constructor(public attr1: string) {
        super("doc.example.tuple.info");
    }
}

@Component({
    selector: 'app-example',
    template: '<div></div>'
})
export class ExampleComponent extends NgLifeCycleEvents implements OnInit {

    private tuples:Array<BreifExampleTuple> = [];

    constructor(public vortexService: VortexService) {
        super();
    }

    ngOnInit() {
        // There is also a vortexService.createPayloadObserable
        // this is the createEndpoint

        let endpoint = this.vortexService.createEndpoint(
                this, {key:"listen.for.some.data"});

        // Subscribe to the tuples, using the RxJS Obserable
        let subscription = endpoint.observable.subscribe(
                payload => this.tuples = < Array<BreifExampleTuple> > payload.tuples);
                
        // Unsubscribe if you so desire.
        subscription.unsubscribe();

        // You don't need to keep a reference to the endpoint, it will automatically
        // shutdown when when this components onDestroy is called.
        
        // If you do want to shutdown the endpoint prematurely, call shutdown.
        // The endpoint will no longer have payloads delivered to it.
        endpoint.shutdown();
    }

}

Use the TupleLoader

The TupleLoader is designed to work with the OrmCrudHandler in the VortexPY This streamlines the work involved to take data from the browser and apply it to a database using SQLAlchemys ORM.

The TupleLoader has the following functionality :

  • Sends an initial payload to the server. This should trigger the server to send back the data
  • Sends tuples back to the server to be created, updated and deleted.
  • Handles server response timeouts
  • Shows errors (import BalloonMsgService from @synerty/peek-plugin-base-js)

To receive data from the server, the Component must extend NgLifeCycleEvents, see PayloadEndpoint section above.

Example code for working with a TupleLoader

import { Component, OnInit } from "@angular/core"
import { VortexService, Tuple, TupleLoader } from "@synerty/vortex"
import { NgLifeCycleEvents } from "@synerty/vortexjs"

// Declare a custom Tuple Type, with constructor params
class BreifExampleTuple extends Tuple {
    constructor(public attr1: string) {
        super("doc.example.tuple.info");
    }
}

@Component({
    selector: 'app-example',
    template: '<div></div>'
})
export class ExampleComponent extends NgLifeCycleEvents implements OnInit {

    private tuples:Array<BreifExampleTuple> = [];

    private someItemId:number = 4;

    loader : TupleLoader;

    constructor(public vortexService: VortexService) {
        super();
    }

    ngOnInit() {
        // Create the loader, it takes a function that returns the payload filter.
        // This allows the TupleLoader to request more specific data, such as single
        // items in a form scenario.
        // The loader will automattically reload data when the filter changes, it
        // listens to the DoCheck Angular2 component life cycle event.
        this.loader = this.vortexService.createTupleLoader(this,
                () => { return {
                    key : "listen.for.some.data",
                    id : this.someItemId
                }; });

        // Subscribe to the tuples, using the RxJS Obserable
        // Unlike the PayloadEndpoint, the tuples are observed, not the payload.
        let subscription = this.loader.observable.subscribe(
                tuples => this.tuples = < Array<BreifExampleTuple> > tuples);

        // Unsubscribe if you so desire.
        subscription.unsubscribe();

        // The following three functions are usefull if called
        // from HTML Reset, Save, Delete buttons respectivly.

        // Reload the current data
        this.loader.load();

        // Save the updates
        this.loader.save();

        // Delete the data
        this.loader.delete();


    }

}

#Change Log

0.3.0

Implemented PY side WebSockets

Project development info

Scaffolding

This project was generated with angular-cli version 1.0.0-beta.20-4.

This test app requires access to the VortexPY

ng serve --proxy proxy.conf.json

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

4.0.26

5 months ago

4.0.25

6 months ago

4.0.24

6 months ago

4.0.23

8 months ago

4.0.21

1 year ago

4.0.20

1 year ago

3.3.14

1 year ago

3.3.15

1 year ago

4.0.19

1 year ago

4.0.18

1 year ago

4.0.14

1 year ago

3.71.0

1 year ago

4.0.13

1 year ago

4.0.12

1 year ago

4.0.11

1 year ago

4.0.10

1 year ago

4.0.9

1 year ago

4.0.8

1 year ago

4.0.7

1 year ago

4.0.5

1 year ago

4.0.4

1 year ago

4.0.6

1 year ago

4.0.3

1 year ago

4.0.2

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

3.3.13

2 years ago

3.3.11

2 years ago

3.3.9

2 years ago

3.3.8

2 years ago

3.3.7

2 years ago

3.3.6

2 years ago

3.3.5

2 years ago

3.3.4

2 years ago

3.3.3

2 years ago

3.3.2

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.2.5

3 years ago

3.2.2

3 years ago

3.0.1

3 years ago

3.2.1

3 years ago

3.1.0

3 years ago

3.0.0

3 years ago

2.7.0

3 years ago

2.6.0

3 years ago

2.4.6

3 years ago

2.4.5

3 years ago

2.4.2

4 years ago

2.4.1

4 years ago

2.3.0

5 years ago

2.1.0

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.2.9

5 years ago

1.2.8

5 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.21

6 years ago

1.1.20

6 years ago

1.1.19

6 years ago

1.1.18

6 years ago

1.1.17

6 years ago

1.1.16

6 years ago

1.1.15

6 years ago

1.1.14

7 years ago

1.1.13

7 years ago

1.1.12

7 years ago

1.1.11

7 years ago

1.1.10

7 years ago

1.1.9

7 years ago

1.1.8

7 years ago

1.1.7

7 years ago

1.1.6

7 years ago

1.1.5

7 years ago

1.1.4

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.11.7

7 years ago

0.11.6

7 years ago

0.11.5

7 years ago

0.11.4

7 years ago

0.11.3

7 years ago

0.11.2

7 years ago

0.11.1

7 years ago

0.11.0

7 years ago

0.10.10

7 years ago

0.10.9

7 years ago

0.10.8

7 years ago

0.10.7

7 years ago

0.10.6

7 years ago

0.10.5

7 years ago

0.10.4

7 years ago

0.10.3

7 years ago

0.10.2

7 years ago

0.10.1

7 years ago

0.10.0

7 years ago

0.9.44

7 years ago

0.9.43

7 years ago

0.9.42

7 years ago

0.9.41

7 years ago

0.9.40

8 years ago

0.9.39

8 years ago

0.9.38

8 years ago

0.9.37

8 years ago

0.9.36

8 years ago

0.9.35

8 years ago

0.9.34

8 years ago

0.9.33

8 years ago

0.9.32

8 years ago

0.9.31

8 years ago

0.9.30

8 years ago

0.9.29

8 years ago

0.9.28

8 years ago

0.9.27

8 years ago

0.9.26

8 years ago

0.9.25

8 years ago

0.9.24

8 years ago

0.9.23

8 years ago

0.9.22

8 years ago

0.9.21

8 years ago

0.9.20

8 years ago

0.9.19

8 years ago

0.9.18

8 years ago

0.9.17

8 years ago

0.9.16

8 years ago

0.9.15

8 years ago

0.9.14

8 years ago

0.9.13

8 years ago

0.9.12

8 years ago

0.9.11

8 years ago

0.9.10

8 years ago

0.9.9

8 years ago

0.9.8

8 years ago

0.9.7

8 years ago

0.9.6

8 years ago

0.9.5

8 years ago

0.9.4

8 years ago

0.9.3

8 years ago

0.9.2

8 years ago

0.9.1

8 years ago

0.9.0

8 years ago

0.8.13

8 years ago

0.8.12

8 years ago

0.8.11

8 years ago

0.8.10

8 years ago

0.8.9

8 years ago

0.8.8

8 years ago

0.8.7

8 years ago

0.8.6

8 years ago

0.8.5

8 years ago

0.8.4

8 years ago

0.8.3

8 years ago

0.8.2

8 years ago

0.8.1

8 years ago

0.8.0

8 years ago

0.7.15

8 years ago

0.7.14

8 years ago

0.7.13

8 years ago

0.7.12

8 years ago

0.7.11

8 years ago

0.7.10

8 years ago

0.7.9

8 years ago

0.7.8

8 years ago

0.7.7

8 years ago

0.7.6

8 years ago

0.7.5

8 years ago

0.7.4

8 years ago

0.7.3

8 years ago

0.7.2

8 years ago

0.7.1

8 years ago

0.7.0

8 years ago

0.6.5

8 years ago

0.6.4

8 years ago

0.6.3

8 years ago

0.6.2

8 years ago

0.6.1

8 years ago

0.6.0

8 years ago

0.5.13

8 years ago

0.5.12

8 years ago

0.5.11

8 years ago

0.5.10

8 years ago

0.5.9

8 years ago

0.5.8

8 years ago

0.5.7

8 years ago

0.5.6

8 years ago

0.5.5

8 years ago

0.5.4

8 years ago

0.5.3

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.4.13

8 years ago

0.4.12

8 years ago

0.4.11

8 years ago

0.4.10

8 years ago

0.4.9

8 years ago

0.4.8

8 years ago

0.4.7

8 years ago

0.4.6

8 years ago

0.4.5

8 years ago

0.4.4

8 years ago

0.4.3

8 years ago

0.4.2

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.10

8 years ago

0.3.9

8 years ago

0.3.8

8 years ago

0.3.7

8 years ago

0.3.6

8 years ago

0.3.5

8 years ago

0.3.4

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.17

8 years ago

0.2.16

8 years ago

0.2.15

8 years ago

0.2.14

8 years ago

0.2.13

8 years ago

0.2.11

9 years ago

0.2.10

9 years ago

0.2.9

9 years ago

0.2.8

9 years ago

0.2.7

9 years ago

0.2.6

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.9

9 years ago

0.1.8

9 years ago

0.1.7

9 years ago

0.1.6

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago