├── LICENSE ├── README.md ├── _config.yml ├── index.html ├── preview.PNG ├── rules.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Ozan ERTÜRK 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # json-rules-engine-ui 2 | example rule definition ui for json-rules-engine 3 | DEMO https://ozanerturk.github.io/json-rules-engine-ui/ 4 | 5 | From the begging, do not forget, it is only an example. 6 | 7 | This example uses CND links, when you clone this repository you could see it doesn't work. Consider to check cdn links. 8 | 9 | It has very sensitive css definitions. So, be carefull when you play with design. 10 | 11 | I would be realy glad if there is someone who can simplfy this example. This is what I can do for now :) 12 | ![preview](preview.PNG) 13 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 29 | 30 | 37 | 38 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /preview.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozanerturk/json-rules-engine-ui/70f37c1795333f8c84e6c4b36ffaac94b3c28af4/preview.PNG -------------------------------------------------------------------------------- /rules.js: -------------------------------------------------------------------------------- 1 | var conditions = { 2 | any: [ 3 | { 4 | any: [ 5 | { 6 | all: [ 7 | ] 8 | }, 9 | { 10 | fact: 'f1', 11 | operator: 'equal', 12 | value: 1 13 | }, 14 | { 15 | any: [ 16 | { 17 | fact: 'f1', 18 | operator: 'equal', 19 | value: 3 20 | }, 21 | { 22 | fact: 'f2', 23 | operator: 'equal', 24 | value: 4 25 | } 26 | ] 27 | } 28 | 29 | ] 30 | }, 31 | { 32 | any: [ 33 | { 34 | all: [ 35 | { 36 | fact: 'f1', 37 | operator: 'equal', 38 | value: 1 39 | }, 40 | { 41 | fact: 'f2', 42 | operator: 'equal', 43 | value: 2 44 | } 45 | ] 46 | }, 47 | { 48 | any: [ 49 | { 50 | fact: 'f1', 51 | operator: 'equal', 52 | value: 3 53 | }, 54 | { 55 | fact: 'f2', 56 | operator: 'equal', 57 | value: 4 58 | } 59 | ] 60 | } 61 | 62 | ] 63 | } 64 | ] 65 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .group { 2 | min-height: 100px; 3 | position: relative; 4 | padding-left: 15px; 5 | margin: 10px; 6 | margin-top: 20px; 7 | border: 1px solid rgb(212, 218, 218); 8 | border-radius: 6px; 9 | background-color: rgb(236, 243, 243); 10 | } 11 | .group-container{ 12 | min-height: 80px; 13 | } 14 | .rule-definition>.group>.options .remove-group, 15 | .rule-definition>.group>.options .drag-handler { 16 | display: none; 17 | } 18 | .rule-definition>.group { 19 | margin: 0px; 20 | } 21 | 22 | .rule { 23 | position: relative; 24 | padding: 10px; 25 | margin: 15px; 26 | background-color: #ffffff; 27 | border: 1px solid #c5e3c5; 28 | } 29 | 30 | .rule-definition { 31 | padding: 10px; 32 | margin: auto; 33 | width: 60%; 34 | min-height: 600px; 35 | background-color: white; 36 | border: 1px solid #b3b3b3; 37 | } 38 | 39 | .group .rule::after, 40 | .group .rule::before, 41 | .group-container .group::after, 42 | .group-container .group::before { 43 | border-color: #adadad; 44 | } 45 | 46 | .group-container .group::after, 47 | .group-container .group::before { 48 | content: ''; 49 | position: absolute; 50 | left: -11px; 51 | width: 9px; 52 | height: calc(50% + 20px); 53 | border-style: solid 54 | } 55 | 56 | .group-container .group::before { 57 | top: -9px; 58 | border-width: 0 0 2px 2px; 59 | } 60 | 61 | .group-container .group::after { 62 | top: calc(50%); 63 | border-width: 0 0 0 2px; 64 | } 65 | 66 | .group-container .group:first-child::before { 67 | top: -23px; 68 | height: calc(50% + 40px); 69 | } 70 | 71 | .group-container .group:last-child::before { 72 | border-radius: 0 0 0 4px; 73 | } 74 | 75 | .group-container .group:last-child::after { 76 | display: none; 77 | } 78 | 79 | /**/ 80 | 81 | .group .rule::after, 82 | .group .rule::before { 83 | content: ''; 84 | position: absolute; 85 | left: -16px; 86 | width: 14px; 87 | height: calc(50% + 14px); 88 | border-style: solid 89 | } 90 | 91 | .group .rule::before { 92 | top: -13px; 93 | border-width: 0 0 2px 2px; 94 | } 95 | 96 | .group .rule::after { 97 | top: calc(50%); 98 | border-width: 0 0 0 2px; 99 | } 100 | 101 | .group .rule:first-child::before { 102 | top: -18px; 103 | height: calc(50% + 20px); 104 | } 105 | 106 | .group .rule:last-child::before { 107 | border-radius: 0 0 0 4px; 108 | } 109 | 110 | .group .rule:last-child::after { 111 | display: none; 112 | } 113 | 114 | .options { 115 | margin-top: 10px; 116 | margin-left: -10px; 117 | } 118 | 119 | .body { 120 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 121 | } 122 | 123 | .group .dragging{ 124 | position: fixed; 125 | opacity: .5; 126 | z-index: 100; 127 | } 128 | 129 | .group .rule-placeholder{ 130 | position: relative; 131 | margin: 4px 0; 132 | border-radius: 5px; 133 | padding: 5px; 134 | background: rgba(255,255,255,.9); 135 | border: 1px dashed #bbb; 136 | opacity: .7; 137 | } --------------------------------------------------------------------------------