Skip to content
Snippets Groups Projects
Commit f12f5276 authored by Jonas Blatt's avatar Jonas Blatt :ant:
Browse files

Add pure html / js for dmn frontend

parent 8f60489a
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 288 additions and 103 deletions
dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css 0 → 100644
+ 79
− 0
View file @ f12f5276
.ui-tabs .ui-tabs-panel {
padding: 0 !important; /* overwrite primefaces css */
}
.ui-tabs.ui-tabs-top > .ui-tabs-nav {
background: transparent !important; /* overwrite primefaces css */
}
.ui-state-active {
font-weight: bold !important; /* overwrite primefaces css */
}
.col-type {
width: 25%;
word-wrap: break-word;
}
.col-description {
width: 60%;
word-wrap: break-word;
}
.col-quantity {
width: 15%;
}
.subcol-message {
width: 80%;
word-wrap: break-word;
}
.subcol-rules {
width: 20%;
}
.highlight {
background-color: darkred;
color: white;
}
.dmn-js-parent {
border: solid 1px #ccc;
}
.editor-tabs .tab {
display: block;
white-space: nowrap;
background: white;
padding: 5px;
margin: -1px 2px 2px 2px;
border: solid 1px #CCC;
border-radius: 0 0 2px 2px;
font-family: 'Arial', sans-serif;
font-weight: bold;
cursor: default;
font-size: 14px;
color: #444;
flex: 0 0 1%;
}
.editor-tabs {
display: flex;
flex-direction: row;
position: relative;
}
.editor-tabs .tab:first-child {
margin-left: 5px;
}
.editor-tabs .tab.active {
border-top-color: white;
}
.editor-tabs .tab.active,
.editor-tabs .tab:hover {
border-bottom: solid 3px #79818d;
margin-bottom: 0;
}
dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css 0 → 100644
+ 18
− 0
View file @ f12f5276
html, body {
height: 100%;
padding: 0;
margin: 0;
font-size: 10pt;
}
h2 {
margin: 10px;
}
input {
color: blue;
}
#dmn-file-upload {
width: 100%;
}
dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
+ 39
− 99
View file @ f12f5276
......@@ -2,106 +2,46 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactTest</title>
<title>DMN App</title>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/diagram-js.css" rel="stylesheet"
type="text/css"/>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/dmn-js-shared.css" rel="stylesheet"
type="text/css"/>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/dmn-js-drd.css" rel="stylesheet"
type="text/css"/>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/dmn-js-decision-table.css" rel="stylesheet"
type="text/css"/>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/dmn-js-decision-table-controls.css"
rel="stylesheet"
type="text/css"/>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/dmn-js-literal-expression.css"
rel="stylesheet"
type="text/css"/>
<link href="https://unpkg.com/dmn-js@6.3.1/dist/assets/dmn-font/css/dmn.css" rel="stylesheet"
type="text/css"/>
<link href="css/stylesheets.css" rel="stylesheet"
type="text/css"/>
<link href="css/dmnEditorTabs.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div id="form"></div>
<div id="syns"></div>
<script type="text/babel" id="buttoncomponent">
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
synonyms: []
};
}
componentDidMount() {
fetch("http://localhost:8080/hello/" + this.props.word)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
synonyms: result.synonyms
});
console.log(result.synonyms);
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, synonyms } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
console.log(synonyms);
return (
<ul>
{synonyms.map((val) => (
<li>{val}</li>
))}
</ul>
);
}
}
}
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
console.log("state:");
console.log(this.state);
ReactDOM.render(
<MyComponent word={this.state.value}/>,
document.getElementById('syns')
);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<NameForm />,
document.getElementById('form'));
</script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<div id="root">
<input id="dmn-file-upload" type="file">
<div id="content-dmn">
<div class="editor-parent">
<div class="editor-container"></div>
<div class="editor-tabs"></div>
</div>
</div>
<input id="dmn-verify" name="Verify" onclick="checkVerifications()" type="button">
<div id="verifier-dmn"></div>
</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/dmn-js@6.3.1/dist/dmn-modeler.production.min.js"
type="text/javascript"></script>
<script src="js/upload.js" type="text/javascript"></script>
<script src="js/dmnViewer.js" type="text/javascript"></script>
<script src="js/dmnVerifier.js" type="text/javascript"></script>
</body>
</html>
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js 0 → 100644
+ 26
− 0
View file @ f12f5276
let rootUrl = 'http://localhost:8080/';
let dmnApi = rootUrl + 'api/dmn/';
function checkVerifications() {
getVerifications();
}
function getVerifications() {
dmnModeler.saveXML({format: true}, function (err, xml) {
if (err) {
return console.log('could not save DMN 1.1 diagram');
} else {
console.log('saving dmn..');
}
$.ajax({
url: dmnApi + 'verification',
type: 'POST',
contentType: 'text/xml',
data: xml,
success: function (data) {
console.log('dmn saved');
console.log(data);
}
});
});
}
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js 0 → 100644
+ 98
− 0
View file @ f12f5276
let $container = $('.editor-container');
let $tabs = $('.editor-tabs');
let CLASS_NAMES = {
drd: 'dmn-icon-lasso-tool',
decisionTable: 'dmn-icon-decision-table',
literalExpression: 'dmn-icon-literal-expression'
};
$tabs.delegate('.tab', 'click', function (e) {
var viewIdx = parseInt(this.getAttribute('data-id'), 10);
var view = dmnModeler.getViews()[viewIdx];
dmnModeler.open(view);
});
// modeler instance
var dmnModeler = new DmnJS({
container: $container,
height: 350,
width: '100%',
keyboard: {
bindTo: window
}
});
dmnModeler.on('views.changed', function (event) {
var {views, activeView} = event;
// clear tabs
$tabs.empty();
views.forEach(function (v, idx) {
const className = CLASS_NAMES[v.type];
var tab = $(`
<div class="tab ${v === activeView ? 'active' : ''}"
data-id="${idx}" id="tab-dec-${v.element.id}">
<span class="${className}"></span>
${v.element.name || v.element.id}
</div>
`);
$tabs.append(tab);
});
});
/**
* Save diagram contents and print them to the console.
*/
function exportDiagram() {
dmnModeler.saveXML({format: true}, function (err, xml) {
if (err) {
return console.log('could not save DMN 1.1 diagram');
} else {
console.log('saving dmn..');
}
$.ajax({
url: dmnApi + 'setCurrentDmn',
type: 'POST',
contentType: 'text/xml',
data: xml,
success: function (data) {
console.log('dmn saved');
}
});
});
}
/**
* Open diagram in our modeler instance.
*
* @param {String} dmnXML diagram to display
*/
function openDiagram(dmnXML) {
// import diagram
dmnModeler.importXML(dmnXML, function (err) {
if (err) {
return console.error('could not open DMN');
}
// fetch currently active view
var activeView = dmnModeler.getActiveView();
// apply initial logic in DRD view
if (activeView.type === 'drd') {
var activeEditor = dmnModeler.getActiveViewer();
// access active editor components
var canvas = activeEditor.get('canvas');
// zoom to fit full viewport
canvas.zoom('fit-viewport');
}
});
}
function addHighlightCss(ruleC) {
$('#tab-dec-' + ruleC.rules[0].decisionKey).click();
ruleC.rules.forEach(function (rule) {
$('[data-row-id=' + rule.ruleId + ']').toggleClass('highlight');
});
}
function addHighlightCssSingleRule(id, decisionKey) {
$('#tab-dec-' + decisionKey).click();
$('[data-row-id=' + id + ']').toggleClass('highlight');
}
dmnverifierfrontend/src/main/resources/META-INF/resources/js/upload.js 0 → 100644
+ 21
− 0
View file @ f12f5276
console.log("TEST");
document.addEventListener("DOMContentLoaded", function () {
// Falls neue Eingabe, neuer Aufruf der Auswahlfunktion
document.getElementById('dmn-file-upload').addEventListener('change',
loadDmnFromFile,
false);
});
function loadDmnFromFile(evt) {
var files = evt.target.files;
var dmnFile = files[0];
var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
openDiagram(textFromFileLoaded);
};
fileReader.readAsText(dmnFile, "UTF-8");
}
dmnverifierfrontend/src/main/resources/application.properties
+ 5
− 4
View file @ f12f5276
# Configuration file
# key = value
hello=world
%dev.hello=next world
quarkus.http.port=80
%dev.quarkus.http.port=8081
# Quarkus cors settings
quarkus.http.cors=true
quarkus.http.cors.origins=http://localhost:8080
quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with
quarkus.http.cors.methods=GET, POST, OPTIONS
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment