Skip to content
GitLab
Commit ffed325a authored by Carsten Rose's avatar Carsten Rose
Browse files

Merge remote-tracking branch 'origin/raos_work' into crose_work

parents 42b38bf2 cf61161b
Hide whitespace changes
Inline Side-by-side
API.md
View file @ ffed325a
API: Client / Server
====================
Form initial call
-----------------
......@@ -13,8 +14,8 @@ data-hidden: 'yes'|'no' - yes: The element is not visible yet, maybe later.
data-disabled: 'yes'|'no' - yes: The element is visible, but the user can't interact with it.
data-required: 'yes'|'no' - yes: The element is required. The form can't be submitted if any required element is empty.
General
-------
## General
Asynchronous request (read AJAX) initiated by the client receive a JSON Response from the server containing at least:
......@@ -26,6 +27,66 @@ Asynchronous request (read AJAX) initiated by the client receive a JSON Response
`status` indicates whether or not the request has been fullfiled by the server (`"success"`) or encountered an error (`"error"`).
On `"error"` the client must display `"<message>"` to the user. On `"success"`, the client may display `"<message>"` to the user.
### Form Group Configuration
As part of the server response, the JSON stream may contain a key
`form-update`. It contains an array of objects having following
structure
{
...
"form-update" : [
{
"form-element": "<element_name>",
"hidden": true | false,
"disabled": true | false,
"required": true | false,
"value": <value>
},
...
],
...
}
`"form-element"`
: the name of the HTML Form Element as it appears in the `name`
attribute.
`"hidden"`
: whether the Form Group is visible (value: `false`) or
invisible (value: `true`).
`"disabled"`
: whether or not the Form Element is disabled HTML-wise.
`"required"`
: whether or not the Form Element receives the HTML5 `required`
attribute.
`"value"`
: For textual HTML Form Input elements, it is supposed to be a
scalar value, which is set on the element.
When `"form-element"` references a `<select>` element, a scalar value
selects the corresponding value from the option list. In order to replace
the option list, use an array of objects, having this format
[
{
"value": 100,
"text": "a",
"selected": true
},
{
"value": 200,
"text": "b",
"selected": false
}
]
`"select"` is optional, as is `"text"`. If `"text"` is omitted, it
will be derived from value.
Form load (update)
......@@ -48,7 +109,10 @@ POST
none
##### POST
HTML Form without `<input>` elements of type `file`. The HTML Form is required to have a HTML Form Element named `s`, which must contain the SIP.
HTML Form without `<input>` elements of type `file`. The HTML Form is
required to have a HTML Form Element named `s`, which must contain the
SIP.
### Response
......@@ -71,14 +135,25 @@ JSON Stream
]
}
Name | Description
------- | -----------
status | see General
message | see General
redirect | not used
field-name | HTML Form Element Name which raised error on server side. Requires status to be `"error"`
field-message | reason of error. Requires status to be `"error"`.
form-update | Array of Objects. Each object describes the state and value of a HTML Form Element identfied by its `name` attribute.
status
: see [General]
message
: see [General]
redirect
: not used
field-name
: HTML Form Element Name which raised error on server side. Requires
status to be `"error"`
field-message
: reason of error. Requires status to be `"error"`.
form-update
: Array of Objects. Each object describes the state and value of a
HTML Form Element identfied by its `name` attribute.
Form save
......@@ -199,3 +274,14 @@ Delete failed: Show message.
message = <message>
redirect = 'no'
## Glossary
SIP
: tbd
HTML Form Element
: Any `<input>` or `<select>` HTML tag. Synonymous to *Form Element*.
Form Group
: The sourrounding `<div>` containing the `.control-label`,
`.form-control` `<div>`s, and `.help-block` `<p>`.
mockup/personmock.html
View file @ ffed325a
......@@ -99,7 +99,7 @@
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="http://www.wikipedia.org" class="btn btn-default navbar-btn"><span
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
......@@ -170,7 +170,8 @@
<label for="personHandle" class="control-label">Kurzform</label>
</div>
<div class="col-md-6">
<input id="personHandle" name="personhandle" type="text" class="form-control">
<input id="personHandle" name="personhandle" type="text" class="form-control"
data-required="no">
</div>
<div class="col-md-4">
......
tests/jasmine/SpecRunner.html
View file @ ffed325a
......@@ -165,7 +165,7 @@
</div>
<div class="col-md-6">
<input id="name" type="text" class="form-control">
<input id="name" type="text" class="form-control" name="name">
</div>
</div>
......@@ -176,7 +176,7 @@
</div>
<div class="col-md-6">
<input id="firstname" type="text" class="form-control">
<input id="firstname" type="text" class="form-control" name="firstname">
</div>
</div>
......@@ -185,7 +185,7 @@
<label for="nameShort" class="control-label">Vorname Kurz</label>
</div>
<div class="col-md-6">
<input id="nameShort" type="text" name="personHandle" class="form-control">
<input id="nameShort" type="text" name="nameShort" class="form-control">
</div>
<div class="col-md-4">
......@@ -198,7 +198,7 @@
<label for="personHandle" class="control-label">Kurzform</label>
</div>
<div class="col-md-6">
<input id="personHandle" type="text" class="form-control">
<input id="personHandle" type="text" class="form-control" name="personHandle">
</div>
<div class="col-md-4">
......@@ -227,7 +227,7 @@
<label for="selectTest2" class="control-label">Titel</label>
</div>
<div class="col-md-6">
<select id="selectTest2" class="form-control">
<select id="selectTest2" class="form-control" name="selectTest2">
<option value="1">a</option>
<option value="2" selected>b</option>
<option value="3">c</option>
......
tests/jasmine/SpecRunner.tmpl
View file @ ffed325a
......@@ -10,7 +10,6 @@
</head>
<body>
<section class="container-fluid">
<header class="page-header">
<h1>Keep Track of Navigation State</h1>
......@@ -139,7 +138,7 @@
</div>
<div class="col-md-6">
<input id="name" type="text" class="form-control">
<input id="name" type="text" class="form-control" name="name">
</div>
</div>
......@@ -150,7 +149,7 @@
</div>
<div class="col-md-6">
<input id="firstname" type="text" class="form-control">
<input id="firstname" type="text" class="form-control" name="firstname">
</div>
</div>
......@@ -159,7 +158,7 @@
<label for="nameShort" class="control-label">Vorname Kurz</label>
</div>
<div class="col-md-6">
<input id="nameShort" type="text" name="personHandle" class="form-control">
<input id="nameShort" type="text" name="nameShort" class="form-control">
</div>
<div class="col-md-4">
......@@ -172,7 +171,7 @@
<label for="personHandle" class="control-label">Kurzform</label>
</div>
<div class="col-md-6">
<input id="personHandle" type="text" class="form-control">
<input id="personHandle" type="text" class="form-control" name="personHandle">
</div>
<div class="col-md-4">
......@@ -201,7 +200,7 @@
<label for="selectTest2" class="control-label">Titel</label>
</div>
<div class="col-md-6">
<select id="selectTest2" class="form-control">
<select id="selectTest2" class="form-control" name="selectTest2">
<option value="1">a</option>
<option value="2" selected>b</option>
<option value="3">c</option>
......@@ -219,6 +218,8 @@
<!-- a disturber hidden element -->
<input type="hidden" name="gender">
<div class="col-md-6">
<!-- a disturber hidden element -->
<input type="hidden" name="gender">
<div class="radio">
<label>
<input type="radio" name="gender" value="male">male
......@@ -254,6 +255,7 @@
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
......@@ -274,6 +276,7 @@
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
......
uml/javascript/classdiagram.pu
View file @ ffed325a
@startuml
scale max 2100*2970
skinparam classAttributeIconSize 0
package "QfqNS" {
class Alert {
-makeAlertContainerSingleton()
-countAlertsInAlertContainer()
-getAlertClassbasedOnMessageTyp()
-getButtons()
-afterFadeIn()
-removeAlert()
-okButtonHandler()
-saveButtonHandler()
-cancelButtonHandler()
+isShown()
+show()
+isShown()
+show()
-afterFadeIn()
-cancelButtonHandler()
-countAlertsInAlertContainer()
-getAlertClassbasedOnMessageTyp()
-getButtons()
-makeAlertContainerSingleton()
-okButtonHandler()
-removeAlert()
-saveButtonHandler()
}
class EventEmitter
class BSTabs
class FileDelete
class FileUpload
class Form
class PageState
class PageTitle <<singleton>>
class QfqForm
class QfqPage
class QfqRecordList
class Log <<singleton>>
class QfqEvents <<mixin>> {
+makePayload()
+onMixin()
}
class BSTabs {
+activateTab()
+getActiveTab()
+getContainingTabIdForFormControl()
+getCurrentTab()
+getTabAnchors()
+getTabIds()
+getTabName()
-fillTabInformation()
-installTabHandlers()
-tabShowHandler()
-getActiveTabFromDOM()
}
class FileDelete {
-setupOnClickHandler()
-buttonClicked()
-performFileDelete()
-prepareData()
-ajaxSuccessHandler()
-ajaxErrorHandler()
}
class FileUpload {
-setupOnChangeHandler()
-performFileUpload()
-prepareData()
-ajaxSuccessHandler()
-ajaxErrorHandler()
}
class Form {
+getFormChanged()
+resetFormChanged()
+submitTo()
+validate()
-ajaxSuccessHandler()
-changeHandler()
-serialize()
-submitFailureHandler()
}
class PageState {
-popStateHandler()
+getPageState()
+getPageData()
+setPageState()
+newPageState()
}
class PageTitle <<static>> {
+set()
+get()
+setSubTitle()
}
class QfqForm {
+getSip()
+submit()
-ajaxDeleteSuccessDispatcher()
-applyElementConfiguration()
-changeHandler()
-clearAllValidationStates()
-destroyFormAndSetText()
-endUploadHandler()
-fileDeleteSuccessHandler()
-fileUploadSuccessHandler()
-formUpdateHandler()
-getCloseButton()
-getDeleteButton()
-getFormGroupByControlName()
-getNewButton()
-getNewButtonTarget()
-getSaveButton()
-handleCloseClick()
-handleDeleteClick()
-handleDeleteSuccess()
-handleFormUpdate()
-handleLogicDeleteError()
-handleLogicSubmitError()
-handleNewClick()
-handleSaveClick()
-handleSubmitSuccess()
-readElementConfigurationData()
-resetHandler()
-resetValidationState()
-setBsTabs()
-setButtonEnabled()
-setHelpBlockValidationMessage()
-setValidationState()
-setupFormUpdateHandler()
-startUploadHandler()
-submitSuccessDispatcher()
}
class QfqPage {
-destroyFormHandler()
-tabShowHandler()
-popStateHandler()
}
class QfqRecordList {
-connectClickHandler()
-handleDeleteButtonClick()
-ajaxDeleteSuccessDispatcher()
-handleDeleteSuccess()
-getRecordElement()
-handleLogicDeleteError()
}
class Log <<static>> {
+message()
+debug()
+warning()
+error()
}
Alert .. FileDelete
Alert .. QfqForm
......@@ -44,27 +156,56 @@ PageTitle .. QfqPage
BSTabs "1" <--* "1" QfqForm
Form "1" <--* "1" QfqForm
EventEmitter "1" <--* "1" QfqForm
QfqEvents "1" <--* "1" QfqForm
FileUpload "1" <--* "1" QfqForm
FileDelete "1" <--* "1" QfqForm
EventEmitter "1" <--* "1" PageState
QfqEvents <-- Alert
QfqEvents "1" <--* "1" PageState
Log .. PageState
EventEmitter "1" <--* "1" FileUpload
QfqEvents "1" <--* "1" FileUpload
EventEmitter "1" <--* "1" FileDelete
QfqEvents "1" <--* "1" FileDelete
EventEmitter "1" <--* "1" BSTabs
QfqEvents "1" <--* "1" BSTabs
EventEmitter <-- QfqEvents
}
package "QfqNS.Element" {
class Checkbox
class FormGroup
class Radio
class Select
class Textual
class Checkbox {
+setValue()
+getValue()
}
class FormGroup {
+hasHelpBlock()
+hasLabel()
+isType()
+setEnabled()
+setHidden()
+setReadOnly()
+setRequired()
-$findFormGroup()
-readOnlyHandler()
}
class Radio {
+setValue()
+getValue()
}
class Select {
+getValue()
+setValue()
-clearSelection()
-setSelection()
}
class Textual {
+setValue()
+getValue()
}
FormGroup <-- Checkbox
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment