mirror of
https://github.com/sartography/spiffworkflow-backend.git
synced 2025-02-24 05:18:22 +00:00
we can view stuff.
This commit is contained in:
Dan
parent
6d108a1b57
commit
bcd87d63e8
@ -11,4 +11,10 @@ if [[ -z "${FLASK_ENV:-}" ]]; then
|
||||
export FLASK_ENV=development
|
||||
fi
|
||||
|
||||
if [[ -z "${BPMN_SPEC_ABSOLUTE_DIR:-}" ]]; then
|
||||
script_dir="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
|
||||
export BPMN_SPEC_ABSOLUTE_DIR="$script_dir/../../spiff-workflow-models"
|
||||
fi
|
||||
|
||||
|
||||
FLASK_APP=src/spiff_workflow_webapp poetry run flask run
|
||||
|
||||
@ -36,4 +36,7 @@ def create_app() -> flask.app.Flask:
|
||||
app.register_blueprint(admin_blueprint, url_prefix="/admin")
|
||||
connexion_app.add_api("api.yml", base_path='/v1.0')
|
||||
|
||||
for name, value in app.config.items():
|
||||
print(f"{name} = {value}")
|
||||
|
||||
return app
|
||||
|
||||
@ -1 +1,4 @@
|
||||
"""Default."""
|
||||
from os import environ
|
||||
|
||||
BPMN_SPEC_ABSOLUTE_DIR = environ.get('BPMN_SPEC_ABSOLUTE_DIR', default="")
|
||||
@ -3,8 +3,19 @@
|
||||
import connexion
|
||||
from flask import Blueprint, g, render_template
|
||||
|
||||
from spiff_workflow_webapp.services.spec_file_service import SpecFileService
|
||||
from spiff_workflow_webapp.services.process_model_service import ProcessModelService
|
||||
|
||||
admin_blueprint = Blueprint("admin", __name__, template_folder='templates', static_folder='static')
|
||||
|
||||
@admin_blueprint.route("/index", methods=["GET"])
|
||||
def hello_world():
|
||||
return render_template('index.html')
|
||||
|
||||
|
||||
@admin_blueprint.route("/view/<process_model_id>/<file_id>", methods=["GET"])
|
||||
def view_bpmn(process_model_id, file_id):
|
||||
process_model = ProcessModelService().get_spec(process_model_id)
|
||||
files = SpecFileService.get_files(process_model)
|
||||
bpmn_xml = SpecFileService.get_data(process_model, files[0].name)
|
||||
return render_template('view.html', bpmn_xml=bpmn_xml.decode("utf-8") )
|
||||
|
||||
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello World</title>
|
||||
|
||||
<script src="{{ url_for('admin.static', filename='node_modules/bpmn-js/dist/bpmn-viewer.development.js') }}"></script>
|
||||
|
||||
<!-- viewer distro (without pan and zoom) -->
|
||||
<!--
|
||||
<script src="https://unpkg.com/bpmn-js@9.1.0/dist/bpmn-viewer.development.js"></script>
|
||||
-->
|
||||
|
||||
<!-- required viewer styles -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@9.1.0/dist/assets/bpmn-js.css">
|
||||
|
||||
<!-- viewer distro (with pan and zoom) -->
|
||||
<script src="https://unpkg.com/bpmn-js@9.1.0/dist/bpmn-navigated-viewer.development.js"></script>
|
||||
|
||||
<!-- needed for this example only -->
|
||||
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
|
||||
|
||||
<!-- example styles -->
|
||||
<style>
|
||||
html, body, #canvas {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.diagram-note {
|
||||
background-color: rgba(66, 180, 21, 0.7);
|
||||
color: White;
|
||||
border-radius: 5px;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
min-height: 16px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="canvas"></div>
|
||||
<meta id="bpmn_xml" data-name="{{bpmn_xml}}">
|
||||
<script>
|
||||
|
||||
var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
|
||||
|
||||
// viewer instance
|
||||
var bpmnViewer = new BpmnJS({
|
||||
container: '#canvas'
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Open diagram in our viewer instance.
|
||||
*
|
||||
* @param {String} bpmnXML diagram to display
|
||||
*/
|
||||
async function openDiagram(bpmnXML) {
|
||||
|
||||
// import diagram
|
||||
try {
|
||||
|
||||
await bpmnViewer.importXML(bpmnXML);
|
||||
|
||||
// access viewer components
|
||||
var canvas = bpmnViewer.get('canvas');
|
||||
var overlays = bpmnViewer.get('overlays');
|
||||
|
||||
|
||||
// zoom to fit full viewport
|
||||
canvas.zoom('fit-viewport');
|
||||
|
||||
// attach an overlay to a node
|
||||
overlays.add('SCAN_OK', 'note', {
|
||||
position: {
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
html: '<div class="diagram-note">Mixed up the labels?</div>'
|
||||
});
|
||||
|
||||
// add marker
|
||||
canvas.addMarker('SCAN_OK', 'needs-discussion');
|
||||
} catch (err) {
|
||||
|
||||
console.error('could not import BPMN 2.0 diagram', err);
|
||||
}
|
||||
}
|
||||
var bpmn_xml = $('#bpmn_xml').data();
|
||||
openDiagram(bpmn_xml.name)
|
||||
|
||||
// load external diagram file via AJAX and open it
|
||||
//$.get(diagramUrl, openDiagram, 'text');
|
||||
</script>
|
||||
<!--
|
||||
Thanks for trying out our BPMN toolkit!
|
||||
If you'd like to learn more about what our library,
|
||||
continue with some more basic examples:
|
||||
* https://github.com/bpmn-io/bpmn-js-examples/overlays
|
||||
* https://github.com/bpmn-io/bpmn-js-examples/interaction
|
||||
* https://github.com/bpmn-io/bpmn-js-examples/colors
|
||||
* https://github.com/bpmn-io/bpmn-js-examples/commenting
|
||||
To get a bit broader overview over how bpmn-js works,
|
||||
follow our walkthrough:
|
||||
* https://bpmn.io/toolkit/bpmn-js/walkthrough/
|
||||
Related starters:
|
||||
* https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/starter/modeler.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user