changed from formio to webformbuilder

forms

@@ -82,331 +82,16 @@ class GetJson < Riddl::Implementation #{{{
   end
 end #}}}
 
-
-
-
-
-
-class Get < Riddl::Implementation
-  def response
-    if @r[0] == 'test'
-      Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','test.html')))
-    elsif @r[0] == 'menu'
-      Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','menu.html')))
-    else
-      Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','template.html')))
-    end
-  end
-end
-
-class Put < Riddl::Implementation
-  def response
-    Dir.mkdir(File.join('data',@r.last)) rescue nil 
-    File.write(File.join('data',@r.last,'style.url'),@p[0].value)
-    
-    File.write(File.join('data',@r.last,'document.xml'),@p[1].value)
-    
-    File.write(File.join('data',@r.last,'frames.json'),JSON.dump(JSON.parse('{"data":[]}')))
-    
-    
-    File.write(File.join('data',@r.last,'info.json'),JSON.dump(JSON.parse('{"x_amount":' + @p[2].value + ', "y_amount":' + @p[3].value + ', "lang":"' + @p[4].value  + '", "langs":["' + @p[4].value +  '"]}')))
-
-
-    File.write(File.join('data',@r.last,'callback'),@h['CPEE_CALLBACK'])
-
-    @a[0].send('new')
-    nil
-  end
-
-  
-  #def headers
-  #  Riddl::Header.new('CPEE-CALLBACK', 'true')
-  #end
-end
-
-class NewFrame < Riddl::Implementation
-  def response    
-    path = File.join('data',@r.last,'frames.json')
-    file = File.read(path)
-    data_hash = JSON::parse(file)
-    
-    data_hash["data"].each do | c |
-      if doOverlap(c['lx'], c['ly'], c['rx'], c['ry'], @p[0].value.to_i, @p[1].value.to_i, (@p[0].value.to_i + @p[2].value.to_i - 1), (@p[1].value.to_i + @p[3].value.to_i - 1))
-        data_hash["data"].delete(c)
-      end
-    end
-    
-#    example
-#    myObj = {
-#      "lx":3,
-#      "ly":3,
-#      "rx":3,
-#      "ry":3,
-#      "url": {
-#        "de-at":"xyz.at",
-#        "en-us":"xyz.com"
-#      }
-#     }
-    urls = JSON::parse(@p[4].value);
-    
-    hash = {lx: @p[0].value.to_i, ly: @p[1].value.to_i, rx: (@p[0].value.to_i + @p[2].value.to_i - 1), ry: (@p[1].value.to_i + @p[3].value.to_i - 1), url: urls};
-    data_hash["data"].push(hash)
-    File.write(path, JSON.dump(data_hash))
-    
-    #only send active url to client
-    infofile = File.join('data',@r.last,'info.json')
-    infojson = JSON::parse(File.read(infofile))
-    hash["url"] = urls[infojson["lang"]]
-
-    @a[0].send(JSON.dump(hash))
-    nil
- 
-  end
-end
-
-
-class NewFramePut < Riddl::Implementation
-  def response    
-    path = File.join('data',@r.last,'frames.json')
-    file = File.read(path)
-    data_hash = JSON::parse(file)
-    
-    data_hash["data"].each do | c |
-      if doOverlap(c['lx'], c['ly'], c['rx'], c['ry'], @p[0].value.to_i, @p[1].value.to_i, (@p[0].value.to_i + @p[2].value.to_i - 1), (@p[1].value.to_i + @p[3].value.to_i - 1))
-        data_hash["data"].delete(c)
-      end
-    end
-    
-    urls = JSON::parse(@p[4].value);
-    
-    hash = {lx: @p[0].value.to_i, ly: @p[1].value.to_i, rx: (@p[0].value.to_i + @p[2].value.to_i - 1), ry: (@p[1].value.to_i + @p[3].value.to_i - 1), url: urls, callback: @h['CPEE_CALLBACK']};
-    data_hash["data"].push(hash)
-    File.write(path, JSON.dump(data_hash))
-    
-    #only send active url to client
-    infofile = File.join('data',@r.last,'info.json')
-    infojson = JSON::parse(File.read(infofile))
-    hash["url"] = urls[infojson["lang"]]
-
-    @a[0].send(JSON.dump(hash))
-    nil
- 
-  end
-  
-  def headers
-    Riddl::Header.new('CPEE-CALLBACK', 'true')
-  end
-end
-
-
-
-
-def doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y) 
-  if l1x > r2x || l2x > r1x
-      return false;
-  end
-  if l1y > r2y || l2y > r1y
-      return false;
-  end
-  return true; 
-end
-
-
-class Delete < Riddl::Implementation
-  def response
-    if cbu = File.read(File.join('data',@r.last,'callback'))
-      send = { 'operation' => @p[0].value }
-      case send['operation']
-        when 'result'
-          send['target'] = JSON::parse(@p[1].value.read)
-      end
-      cbu += '/' unless cbu[-1] == '/'
-
-      Typhoeus.put(cbu, body: JSON::generate(send), headers: { 'content-type' => 'application/json'})
-    end
-
-    File.unlink(File.join('data',@r.last,'callback')) rescue nil
-    File.unlink(File.join('data',@r.last,'style.url')) rescue nil
-    File.unlink(File.join('data',@r.last,'document.xml')) rescue nil
-    File.unlink(File.join('data',@r.last,'info.json')) rescue nil
-
-    @a[0].send('reset')
-    nil
-  end
-end
-
-class GetFrames < Riddl::Implementation #{{{
-  def response
-    fname = File.join('data',@r[-2],'frames.json')
-    if File.exists? fname
-    
-      infofile = File.join('data',@r[-2],'info.json')
-      infojson = JSON::parse(File.read(infofile))
-      
-      #remove not used languages
-      file = JSON::parse(File.read(fname))
-      file["data"].each do |child|      
-        child["url"] = child["url"][infojson["lang"]]
-      end
-      
-      Riddl::Parameter::Complex.new('value','application/json',JSON.dump(file))
-    else
-      @status = 404
-    end
-  end
-end #}}}
-
-
-
-class GetLangs < Riddl::Implementation #{{{
-  def response
-    fname = File.join('data',@r[-2],'document.xml')
-    if File.exists? fname
-      doc = XML::Smart.open_unprotected(fname)
-      ndoc = XML::Smart.string('<languages/>')
-      doc.find('//@lang').each do |e|
-        ndoc.root.add('language',e.value)
-      end
-      Riddl::Parameter::Complex.new('value','text/xml',ndoc.to_s)
-    else
-      @status = 404
-    end
-  end
-end #}}}
-
-class SetLang < Riddl::Implementation #{{{
-  def response
-    fname = File.join('data',@r[-2],'info.json')
-    if File.exists? fname
-      infojson = JSON::parse(File.read(fname))
-      infojson["lang"] = @p[0].value
-      
-      
-      #add to langs
-      if !infojson["langs"].include?(@p[0].value)
-        infojson["langs"].push(@p[0].value)
-      end
-      
-      File.write(fname, JSON.dump(infojson))
-      
-      
-      
-      @a[0].send('reset')
-      nil
-    else
-      @status = 404
-    end
-  end
-end #}}}
-
-class GetStyle < Riddl::Implementation #{{{
-  def response
-    fname = File.join('data',@r[-2],'style.url')
-    if File.exists? fname
-      Riddl::Parameter::Complex.new('url','text/plain',File.read(fname).strip)
-    else
-      @status = 404
-    end
-  end
-end #}}}
-class GetDocument < Riddl::Implementation #{{{
-  def response
-    fname = File.join('data',@r[-3],'document.xml')
-    if File.exists? fname
-      doc = XML::Smart.open_unprotected(fname)
-      val = nil
-      doc.find("//variant[@lang='#{@r[-1]}']").each do |e|
-        val = e.text
-      end
-      if val
-        Riddl::Parameter::Complex.new('url','text/plain',val.strip)
-      else
-        @status = 404
-      end
-    else
-      @status = 404
-    end
-  end
-end #}}}
-class GetButton < Riddl::Implementation #{{{
-  def response
-    fname = File.join('data',@r[-3],'document.xml')
-    if File.exists? fname
-      doc = XML::Smart.open_unprotected(fname)
-      val = nil
-      doc.find("//variant[@lang='#{@r[-1]}']").each do |e|
-        val = e.attributes['button']
-      end
-      if val
-        Riddl::Parameter::Complex.new('url','text/plain',val.strip)
-      else
-        @status = 404
-      end
-    else
-      @status = 404
-    end
-  end
-end #}}}
-
-class SSE < Riddl::SSEImplementation #{{{
-  def onopen
-    signals = @a[0]
-    signals.add self
-    send 'started'
-  end
-
-  def onclose
-    signals = @a[0]
-    signals.remove self
-    nil
-  end
-end #}}}
-
-class Signaling # {{{
-  def initialize
-    @binding = []
-  end
-
-  def add(binding)
-    @binding << binding
-  end
-  def remove(binding)
-    @binding.delete(binding)
-  end
-  def length
-    @binding.length
-  end
-
-  def send(value)
-    @binding.each do |b|
-      b.send(value)
-    end
-  end
-end #}}}
-
 server = Riddl::Server.new(File.join(__dir__,'/forms.xml'), :host => 'localhost') do |opts|
   accessible_description true
   cross_site_xhr true
 
-  opts[:signals] = {}
-
-  parallel do
-    loop do
-      opts[:signals].each do |k,v|
-        v.send('keepalive')
-      end
-      sleep 5
-    end
-  end
 
   on resource do
     run Index if get  
     run NewInstance if post  
-  
     on resource do |r|
-    
       run DisplayForm if get
-      
       on resource 'builder' do
         run Builder if get
         run SaveForm if post 'form' 
@@ -415,49 +100,6 @@ server = Riddl::Server.new(File.join(__dir__,'/forms.xml'), :host => 'localhost'
       on resource 'json' do
         run GetJson if get
       end
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-      idx = r[:r][0]
-      opts[:signals][idx] ||= Signaling.new
-
-      run Put, opts[:signals][idx] if put 'input'
-      
-      run NewFrame, opts[:signals][idx] if post 'frame'
-      run NewFramePut, opts[:signals][idx] if put 'frame'
-      run Delete, opts[:signals][idx] if delete 'opa'
-      run Delete, opts[:signals][idx] if delete 'opb'
-      on resource 'sse' do
-        run SSE, opts[:signals][idx] if sse
-      end
-      on resource 'languages' do
-        run GetLangs if get
-        run SetLang, opts[:signals][idx] if post 'lang'
-      end
-      on resource 'style.url' do
-        run GetStyle if get
-      end
-      on resource 'frames.json' do
-        run GetFrames if get
-      end
-      
-      on resource 'buttons' do
-        on resource '[a-zA-Z]{1,8}(-[a-zA-Z0-9]{1,8})*' do
-          run GetButton if get
-        end
-      end
-      on resource 'documents' do
-        on resource '[a-zA-Z]{1,8}(-[a-zA-Z0-9]{1,8})*' do
-          run GetDocument if get
-        end
-      end
     end
   end
 end.loop!

forms.pid

@@ -1 +1 @@
-1721184
+3071384

template/builder.html

@@ -16,12 +16,15 @@
     <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
     <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
     <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
-    
+    <!---
     <link rel='stylesheet' href='../../css/bootstrap.min.css'>
     <link rel='stylesheet' href='../../css/formio.full.min.css'>
     <link rel='stylesheet' href='../../css/forms.css'>
-    <script src='../../js/formio.full.min.js'></script>
     <script src='../../js/builder.js'></script>
+    -->
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
+
+    <script src='../../js/form-builder.min.js'></script>
     <script>
       if (location.href.match(/\/$/) == null) {
         location.href = location.href + '/';
@@ -30,6 +33,7 @@
   </head>
   <body>
   
+  <!--
   <div id="container" style="--grid-rows:3; --grid-cols:3;">    
     <div class="grid-item" style="grid-column: 1 / span 2; grid-row: 1 / span 3" ><div id='builder'></div></div>
     <div class="grid-item" style="grid-column: 3 / span 1; grid-row: 1 / span 2">
@@ -43,8 +47,50 @@
   </div>
   
   <div id='form' style="display: none"></div>
-    
-    
+  -->
+  
+  
+  <!-- https://formbuilder.online/ -->
+  <div id="fb-editor"></div>
+  <script>
+  jQuery(function($) {
+  
+  
+  
+  
+    var options = {
+      onSave: function(evt, formData) {
+          JSON.stringify(formData);
+            $.ajax({
+              type: "POST",
+              url: "",
+              data: JSON.stringify(formData),
+              headers: {"content-id": "form"},
+              contentType: "application/json",
+              success: function(res) {
+                alert("Saved")
+              },
+              error: function (request, status, error) {
+                alert(request.responseText + status + error);
+              }
+            });
+          
+        },
+    };
+    $.ajax({
+      type: "GET",
+      url: "../json",
+      dataType: "json",
+      success: function(json) {
+        options["formData"] = json
+        $(document.getElementById('fb-editor')).formBuilder(options);
+      },
+      error: function (request, status, error) {    
+        $(document.getElementById('fb-editor')).formBuilder(options);
+      }
+    });
+  });
+  </script>
     
     
   </body>

template/css/en-US.lang

@@ -0,0 +1,110 @@
+NATIVE_NAME = English (US)
+ENGLISH_NAME = English
+
+addOption = Add Option +
+allFieldsRemoved = All fields were removed.
+allowMultipleFiles = Allow users to upload multiple files
+autocomplete = Autocomplete
+button = Button
+cannotBeEmpty = This field cannot be empty
+checkboxGroup = Checkbox Group
+checkbox = Checkbox
+checkboxes = Checkboxes
+className = Class
+clearAllMessage = Are you sure you want to clear all fields?
+clear = Clear
+close = Close
+content = Content
+copy = Copy To Clipboard
+copyButton = +
+copyButtonTooltip = Copy
+dateField = Date Field
+description = Help Text
+descriptionField = Description
+devMode = Developer Mode
+editNames = Edit Names
+editorTitle = Form Elements
+editXML = Edit XML
+enableOther = Enable "Other"
+enableOtherMsg = Let users enter an unlisted option
+fieldDeleteWarning = false
+fieldVars = Field Variables
+fieldNonEditable = This field cannot be edited.
+fieldRemoveWarning = Are you sure you want to remove this field?
+fileUpload = File Upload
+formUpdated = Form Updated
+getStarted = Drag a field from the right to this area
+header = Header
+hide = Edit
+hidden = Hidden Input
+inline = Inline
+inlineDesc = Display {type} inline
+label = Label
+labelEmpty = Field Label cannot be empty
+limitRole = Limit access to one or more of the following roles:
+mandatory = Mandatory
+maxlength = Max Length
+minOptionMessage = This field requires a minimum of 2 options
+minSelectionRequired = Minimum {min} selections required
+multipleFiles = Multiple Files
+name = Name
+no = No
+noFieldsToClear = There are no fields to clear
+number = Number
+off = Off
+on = On
+option = Option
+optionCount = Option {count}
+options = Options
+optional = optional
+optionLabelPlaceholder = Label
+optionValuePlaceholder = Value
+optionEmpty = Option value required
+other = Other
+paragraph = Paragraph
+placeholder = Placeholder
+placeholders.value = Value
+placeholders.label = Label
+placeholders.text =
+placeholders.textarea =
+placeholders.email = Enter your email
+placeholders.placeholder =
+placeholders.className = space separated classes
+placeholders.password = Enter your password
+preview = Preview
+radioGroup = Radio Group
+radio = Radio
+removeMessage = Remove Element
+removeOption = Remove Option
+remove = ×
+required = Required
+requireValidOption = Only accept a pre-defined Option
+richText = Rich Text Editor
+roles = Access
+rows = Rows
+save = Save
+selectOptions = Options
+select = Select
+selectColor = Select Color
+selectionsMessage = Allow Multiple Selections
+size = Size
+size.xs = Extra Small
+size.sm = Small
+size.m = Default
+size.lg = Large
+style = Style
+styles.btn.default = Default
+styles.btn.danger = Danger
+styles.btn.info = Info
+styles.btn.primary = Primary
+styles.btn.success = Success
+styles.btn.warning = Warning
+subtype = Type
+text = Text Field
+textArea = Text Area
+toggle = Toggle
+warning = Warning!
+value = Value
+viewJSON = [{…}]
+viewXML = </>
+yes = Yes

template/form.html

@@ -24,20 +24,82 @@
     
     
     <!-- custom stuff, play arround  -->
-    <link rel='stylesheet' href='../css/bootstrap.min.css'>
-    <link rel='stylesheet' href='../css/formio.full.min.css'>
-    <link rel='stylesheet' href='../css/forms.css'>
-    <script src='../js/formio.full.min.js'></script>
-    <script src='../js/form_view.js'></script>
+    <script src='../js/form-render.min.js'></script>
     <script>
       if (location.href.match(/\/$/) == null) {
         //location.href = location.href + '/';
       }
     </script>
   </head>
-  <body>    
-    <div id='builder' style="display: none"></div>
-    <form id='form'></form>
-    <div id='submission'></div>
+  <body>
+    
+  <form id="fb-render">
+    
+  <script>
+  
+function openlink(menuitem){
+  var menu = { name: menuitem };
+
+  $.ajax({
+    type: "PUT",
+    url: window.name,
+    contentType: "application/json",
+    data: JSON.stringify(menu),
+    success: function (data) {
+      
+    }
+  });
+}
+
+var formRenderInstance;
+
+//https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery
+function objectifyForm(formArray) {
+  //serialize data function
+    var returnArray = {};
+    for (var i = 0; i < formArray.length; i++){
+        returnArray[formArray[i]['name']] = formArray[i]['value'];
+    }
+    return returnArray;
+}
+
+//return json data that should be sent when frames button is pressed
+function buttonPressed(){
+  
+  //does not allow for multi select boxes
+  //getting formdata: https://gomakethings.com/serializing-form-data-with-the-vanilla-js-formdata-object/ */
+  //var myForm = document.getElementById('fb-render');  
+  //return Object.fromEntries(new FormData(myForm));
+  
+  objectifyForm($("#fb-render").serializeArray())
+  return objectifyForm($("#fb-render").serializeArray());
+  
+  //return formRenderInstance.userData;
+}
+  
+jQuery(function($) {
+    $.ajax({
+      type: "GET",
+      url: "./json",
+      dataType: "json",
+      success: function(json) {
+        formRenderInstance = $('#fb-render').formRender({
+          formData: json,
+        });
+        
+        //necesarry as input fields do not have unique names resulting in overriding when the data is serialized
+        $("#fb-render input[type=checkbox]").each(function(){
+          this.name = this.value
+          this.value = "true"
+        });
+      },
+      error: function (request, status, error) {
+      }
+    });
+    
+    
+    
+});
+  </script>
   </body>
 </html>

template/js/builder.js

@@ -3,7 +3,7 @@
 var builder;
 
 function saveForm() {
-  /*
+  
   $.ajax({
     type: "POST",
     url: "",
@@ -17,14 +17,15 @@ function saveForm() {
       alert(request.responseText + status + error);
     }
   });
-  */
   
   
+  
+  /*
+  Save HTML
   var formElement = document.getElementById('form');
   Formio.createForm(formElement, builder.instance.form);
 
   
-  //$("#form").html()
   $.ajax({
     type: "POST",
     url: "",
@@ -38,6 +39,7 @@ function saveForm() {
       alert(request.responseText + status + error);
     }
   });
+  */
   
 }
 
@@ -47,8 +49,6 @@ $(document).ready(function(){
   var jsonElement = document.getElementById('json');
   var subJSON = document.getElementById('subjson');
 
- 
-
   var onForm = function(form) {
     form.on('change', function() {
       subJSON.innerHTML = '';

template/js/form_view.js

@@ -1,5 +1,13 @@
 
 var builder;  
+
+
+//return json data that should be sent when frames button is pressed
+function buttonPressed(){
+  console.log("Form data send")
+  return $("#submission").html(); 
+}
+
     
 function openlink(menuitem){
   var menu = { name: menuitem };