Great improvements into the edition of the visual console items
This commit is contained in:
Alejandro Gallardo Escobar
parent
078286a10f
commit
67b376466b
|
|
@ -159,19 +159,86 @@ function createVisualConsole(
|
|||
var props = item.props || {};
|
||||
var meta = item.meta || {};
|
||||
|
||||
if (meta.editMode) {
|
||||
if (meta.editMode && !meta.isUpdating) {
|
||||
// Item selection.
|
||||
visualConsole.selectItem(props.id, true);
|
||||
|
||||
var formContainer = item.getFormContainer();
|
||||
var formElement = formContainer.getFormElement();
|
||||
var $formElement = jQuery(formElement);
|
||||
|
||||
formContainer.onSubmit(function(e) {
|
||||
// TODO: Send the update.
|
||||
// Send the update.
|
||||
var id = props.id;
|
||||
var data = e.data;
|
||||
var taskId = "visual-console-item-update-" + id;
|
||||
|
||||
// Show updating state.
|
||||
item.setMeta({ isUpdating: true });
|
||||
|
||||
// Persist the new data.
|
||||
asyncTaskManager
|
||||
.add(taskId, function(done) {
|
||||
var abortable = updateVisualConsoleItem(
|
||||
baseUrl,
|
||||
visualConsole.props.id,
|
||||
id,
|
||||
data,
|
||||
function(error, data) {
|
||||
// Hide updating state.
|
||||
item.setMeta({ isUpdating: false });
|
||||
|
||||
// if (!error && !data) return;
|
||||
if (error || !data) {
|
||||
console.log(
|
||||
"[ERROR]",
|
||||
"[VISUAL-CONSOLE-CLIENT]",
|
||||
"[API]",
|
||||
error ? error.message : "Invalid response"
|
||||
);
|
||||
|
||||
// TODO: Recover from error.
|
||||
|
||||
done();
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof data === "string") {
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch (e) {
|
||||
console.log(
|
||||
"[ERROR]",
|
||||
"[VISUAL-CONSOLE-CLIENT]",
|
||||
"[API]",
|
||||
error ? error.message : "Invalid response"
|
||||
);
|
||||
|
||||
// TODO: Recover from error.
|
||||
|
||||
done();
|
||||
return; // Stop task execution.
|
||||
}
|
||||
}
|
||||
|
||||
visualConsole.updateElement(data);
|
||||
|
||||
done();
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
cancel: function() {
|
||||
abortable.abort();
|
||||
}
|
||||
};
|
||||
})
|
||||
.init();
|
||||
console.log("Form submit", e.data);
|
||||
$(formElement).dialog("close");
|
||||
$formElement.dialog("close");
|
||||
});
|
||||
|
||||
$(formElement).dialog({
|
||||
$formElement.dialog({
|
||||
title: formContainer.title
|
||||
});
|
||||
// TODO: Add submit and reset button.
|
||||
|
|
@ -185,7 +252,7 @@ function createVisualConsole(
|
|||
y: e.newPosition.y,
|
||||
type: e.item.props.type
|
||||
};
|
||||
var taskId = "visual-console-item-move-" + id;
|
||||
var taskId = "visual-console-item-update-" + id;
|
||||
|
||||
// Persist the new position.
|
||||
asyncTaskManager
|
||||
|
|
@ -221,21 +288,18 @@ function createVisualConsole(
|
|||
})
|
||||
.init();
|
||||
});
|
||||
|
||||
// VC Item resized.
|
||||
visualConsole.onItemResized(function(e) {
|
||||
var id = e.item.props.id;
|
||||
var item = e.item;
|
||||
var id = item.props.id;
|
||||
var data = {
|
||||
width: e.newSize.width,
|
||||
height: e.newSize.height,
|
||||
type: e.item.props.type
|
||||
type: item.props.type
|
||||
};
|
||||
|
||||
visualConsole.elementsById[id].meta = {
|
||||
...visualConsole.elementsById[id].meta,
|
||||
isUpdating: true
|
||||
};
|
||||
|
||||
var taskId = "visual-console-item-resize-" + id;
|
||||
var taskId = "visual-console-item-update-" + id;
|
||||
// Persist the new size.
|
||||
asyncTaskManager
|
||||
.add(taskId, function(done) {
|
||||
|
|
@ -253,56 +317,33 @@ function createVisualConsole(
|
|||
error ? error.message : "Invalid response"
|
||||
);
|
||||
|
||||
visualConsole.elementsById[id].meta = {
|
||||
...visualConsole.elementsById[id].meta,
|
||||
isUpdating: false
|
||||
};
|
||||
|
||||
// Resize the element to its initial Size.
|
||||
e.item.resize(e.prevSize.width, e.prevSize.height);
|
||||
item.resize(e.prevSize.width, e.prevSize.height);
|
||||
|
||||
done();
|
||||
return; // Stop task execution.
|
||||
}
|
||||
|
||||
var taskItem = "update-item-resize-" + id;
|
||||
asyncTaskManager
|
||||
.add(taskItem, function(done) {
|
||||
var abortable = getVisualConsoleItem(baseUrl, id, function(
|
||||
error,
|
||||
data
|
||||
) {
|
||||
if (error || !data) {
|
||||
console.log(
|
||||
"[ERROR]",
|
||||
"[VISUAL-CONSOLE-CLIENT]",
|
||||
"[API]",
|
||||
error ? error.message : "Invalid response"
|
||||
);
|
||||
if (typeof data === "string") {
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch (e) {
|
||||
console.log(
|
||||
"[ERROR]",
|
||||
"[VISUAL-CONSOLE-CLIENT]",
|
||||
"[API]",
|
||||
error ? error.message : "Invalid response"
|
||||
);
|
||||
|
||||
visualConsole.elementsById[id].meta = {
|
||||
...visualConsole.elementsById[id].meta,
|
||||
isUpdating: false
|
||||
};
|
||||
}
|
||||
// Resize the element to its initial Size.
|
||||
item.resize(e.prevSize.width, e.prevSize.height);
|
||||
|
||||
if (typeof data === "string") {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
visualConsole.updateElement(data);
|
||||
done();
|
||||
return; // Stop task execution.
|
||||
}
|
||||
}
|
||||
|
||||
visualConsole.elementsById[id].meta = {
|
||||
...visualConsole.elementsById[id].meta,
|
||||
isUpdating: false
|
||||
};
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
return {
|
||||
cancel: function() {
|
||||
abortable.abort();
|
||||
}
|
||||
};
|
||||
})
|
||||
.init();
|
||||
visualConsole.updateElement(data);
|
||||
|
||||
done();
|
||||
}
|
||||
|
|
@ -515,12 +556,13 @@ function updateVisualConsoleItem(baseUrl, vcId, vcItemId, data, callback) {
|
|||
/**
|
||||
* Fetch a Visual Console's structure and its items.
|
||||
* @param {string} baseUrl Base URL to build the API path.
|
||||
* @param {number} vcId Identifier of the Visual Console.
|
||||
* @param {number} vcItemId Identifier of the Visual Console's item.
|
||||
* @param {function} callback Function to be executed on request success or fail.
|
||||
* @return {Object} Cancellable. Object which include and .abort([statusText]) function.
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function getVisualConsoleItem(baseUrl, vcItemId, callback) {
|
||||
function getVisualConsoleItem(baseUrl, vcId, vcItemId, callback) {
|
||||
// var apiPath = baseUrl + "/include/rest-api";
|
||||
var apiPath = baseUrl + "/ajax.php";
|
||||
var jqXHR = null;
|
||||
|
|
@ -564,7 +606,8 @@ function getVisualConsoleItem(baseUrl, vcItemId, callback) {
|
|||
{
|
||||
page: "include/rest-api/index",
|
||||
getVisualConsoleItem: 1,
|
||||
itemId: vcItemId
|
||||
visualConsoleId: vcId,
|
||||
visualConsoleItemId: vcItemId
|
||||
},
|
||||
"json"
|
||||
)
|
||||
|
|
|
|||
|
|
@ -16,58 +16,99 @@ $getVisualConsoleItems = (bool) get_parameter('getVisualConsoleItems');
|
|||
$updateVisualConsoleItem = (bool) get_parameter('updateVisualConsoleItem');
|
||||
$getVisualConsoleItem = (bool) get_parameter('getVisualConsoleItem');
|
||||
|
||||
// Check groups can access user.
|
||||
$aclUserGroups = [];
|
||||
if (!users_can_manage_group_all('AR')) {
|
||||
$aclUserGroups = array_keys(users_get_groups(false, 'AR'));
|
||||
}
|
||||
|
||||
ob_clean();
|
||||
|
||||
// Retrieve the visual console.
|
||||
$visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId]);
|
||||
$visualConsoleData = $visualConsole->toArray();
|
||||
$vcGroupId = $visualConsoleData['groupId'];
|
||||
|
||||
// ACL.
|
||||
$aclRead = check_acl($config['id_user'], $vcGroupId, 'VR');
|
||||
$aclWrite = check_acl($config['id_user'], $vcGroupId, 'VW');
|
||||
$aclManage = check_acl($config['id_user'], $vcGroupId, 'VM');
|
||||
|
||||
if (!$aclRead && !$aclWrite && !$aclManage) {
|
||||
db_pandora_audit(
|
||||
'ACL Violation',
|
||||
'Trying to access visual console without group access'
|
||||
);
|
||||
http_response_code(403);
|
||||
return;
|
||||
}
|
||||
|
||||
if ($getVisualConsole === true) {
|
||||
$visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId]);
|
||||
$visualConsoleData = $visualConsole->toArray();
|
||||
$groupId = $visualConsoleData['groupId'];
|
||||
echo $visualConsole;
|
||||
return;
|
||||
} else if ($getVisualConsoleItems === true) {
|
||||
// Check groups can access user.
|
||||
$aclUserGroups = [];
|
||||
if (!users_can_manage_group_all('AR')) {
|
||||
$aclUserGroups = array_keys(users_get_groups(false, 'AR'));
|
||||
}
|
||||
|
||||
$vcItems = VisualConsole::getItemsFromDB($visualConsoleId, $aclUserGroups);
|
||||
echo '['.implode($vcItems, ',').']';
|
||||
return;
|
||||
} else if ($getVisualConsoleItem === true
|
||||
|| $updateVisualConsoleItem === true
|
||||
) {
|
||||
$itemId = (int) get_parameter('visualConsoleItemId');
|
||||
|
||||
try {
|
||||
$item = VisualConsole::getItemFromDB($itemId);
|
||||
} catch (Throwable $e) {
|
||||
// Bad params.
|
||||
http_response_code(409);
|
||||
return;
|
||||
}
|
||||
|
||||
$itemData = $item->toArray();
|
||||
$itemType = $itemData['type'];
|
||||
$itemAclGroupId = $itemData['aclGroupId'];
|
||||
|
||||
// ACL.
|
||||
$aclRead = check_acl($config['id_user'], $groupId, 'VR');
|
||||
$aclWrite = check_acl($config['id_user'], $groupId, 'VW');
|
||||
$aclManage = check_acl($config['id_user'], $groupId, 'VM');
|
||||
$aclRead = check_acl($config['id_user'], $itemAclGroupId, 'VR');
|
||||
$aclWrite = check_acl($config['id_user'], $itemAclGroupId, 'VW');
|
||||
$aclManage = check_acl($config['id_user'], $itemAclGroupId, 'VM');
|
||||
|
||||
if (!$aclRead && !$aclWrite && !$aclManage) {
|
||||
db_pandora_audit(
|
||||
'ACL Violation',
|
||||
'Trying to access visual console without group access'
|
||||
);
|
||||
exit;
|
||||
http_response_code(403);
|
||||
return;
|
||||
}
|
||||
|
||||
echo $visualConsole;
|
||||
} else if ($getVisualConsoleItems === true) {
|
||||
$vcItems = VisualConsole::getItemsFromDB($visualConsoleId, $aclUserGroups);
|
||||
echo '['.implode($vcItems, ',').']';
|
||||
} else if ($updateVisualConsoleItem === true) {
|
||||
$visualConsoleId = (integer) get_parameter('visualConsoleId');
|
||||
$visualConsoleItemId = (integer) get_parameter('visualConsoleItemId');
|
||||
$data = get_parameter('data');
|
||||
// Check also the group Id for the group item.
|
||||
if ($itemType === GROUP_ITEM) {
|
||||
$itemGroupId = $itemData['aclGroupId'];
|
||||
// ACL.
|
||||
$aclRead = check_acl($config['id_user'], $itemGroupId, 'VR');
|
||||
$aclWrite = check_acl($config['id_user'], $itemGroupId, 'VW');
|
||||
$aclManage = check_acl($config['id_user'], $itemGroupId, 'VM');
|
||||
|
||||
$class = VisualConsole::getItemClass($data['type']);
|
||||
unset($data['type']);
|
||||
if (!$aclRead && !$aclWrite && !$aclManage) {
|
||||
db_pandora_audit(
|
||||
'ACL Violation',
|
||||
'Trying to access visual console without group access'
|
||||
);
|
||||
http_response_code(403);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$item_data = [];
|
||||
$item_data['id'] = $visualConsoleItemId;
|
||||
$item_data['id_layout'] = $visualConsoleId;
|
||||
if ($getVisualConsoleItem === true) {
|
||||
echo $item;
|
||||
return;
|
||||
} else if ($updateVisualConsoleItem === true) {
|
||||
$data = get_parameter('data');
|
||||
$result = $item->save($data);
|
||||
|
||||
$updateItem = $class::fromDB($item_data);
|
||||
$result = $updateItem->save($data);
|
||||
|
||||
echo json_encode($result);
|
||||
} else if ($getVisualConsoleItem === true) {
|
||||
$itemId = (integer) get_parameter('itemId');
|
||||
|
||||
$item = VisualConsole::getItemFromDB($itemId);
|
||||
|
||||
echo $item;
|
||||
echo $item;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
exit;
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ abstract class CachedModel extends Model
|
|||
{
|
||||
global $config;
|
||||
|
||||
// TODO: Remove references to the VC items. This class should be usable with any resource.
|
||||
if ($filter['cache_expiration'] > 0) {
|
||||
// Obtain the item's data from cache.
|
||||
$cachedData = static::fetchCachedData($filter);
|
||||
|
|
|
|||
|
|
@ -407,18 +407,15 @@ final class Container extends Model
|
|||
|
||||
|
||||
/**
|
||||
* Obtain an items which belong to the Visual Console.
|
||||
* Obtain an item which belong to the Visual Console.
|
||||
*
|
||||
* @param integer $itemId Identifier of the Item.
|
||||
* @param array $groupsFilter Groups can access user.
|
||||
* @param integer $itemId Identifier of the Item.
|
||||
*
|
||||
* @return array A list of items.
|
||||
* @return Item Item.
|
||||
* @throws \Exception When the data cannot be retrieved from the DB.
|
||||
*/
|
||||
public static function getItemFromDB(
|
||||
int $itemId,
|
||||
array $groupsFilter=[]
|
||||
): Object {
|
||||
public static function getItemFromDB(int $itemId): Item
|
||||
{
|
||||
// Default filter.
|
||||
$filter = ['id' => $itemId];
|
||||
$fields = [
|
||||
|
|
|
|||
|
|
@ -1629,14 +1629,10 @@ class Item extends CachedModel
|
|||
*/
|
||||
public function save(array $data=[]): bool
|
||||
{
|
||||
if (empty($data)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$dataModelEncode = $this->encode($this->toArray());
|
||||
$dataEncode = $this->encode($data);
|
||||
|
||||
$save = \array_merge($dataModelEncode, $dataEncode);
|
||||
$save = array_merge($dataModelEncode, $dataEncode);
|
||||
|
||||
if (!empty($save)) {
|
||||
if (empty($save['id'])) {
|
||||
|
|
@ -1650,6 +1646,7 @@ class Item extends CachedModel
|
|||
$result = \db_process_sql_update('tlayout_data', $save, ['id' => $save['id']]);
|
||||
// Invalidate the item's cache.
|
||||
if ($result !== false && $result > 0) {
|
||||
// TODO: Invalidate the cache with the function clearCachedData.
|
||||
db_process_sql_delete(
|
||||
'tvisual_console_elements_cache',
|
||||
[
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.visual-console-item.is-editing.is-selected {
|
||||
border: 2px dashed #2b2b2b;
|
||||
}
|
||||
.visual-console-item.is-editing > .resize-draggable {
|
||||
float: right;
|
||||
position: absolute;
|
||||
|
|
@ -47,6 +50,76 @@
|
|||
cursor: se-resize;
|
||||
}
|
||||
|
||||
.visual-console-spinner,
|
||||
.visual-console-spinner :after {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.visual-console-spinner {
|
||||
background-color: transparent;
|
||||
margin: 0px auto;
|
||||
border-top: 5px solid rgb(82, 85, 87);
|
||||
border-right: 5px solid rgb(82, 85, 87);
|
||||
border-bottom: 5px solid rgb(82, 85, 87);
|
||||
border-left: 5px solid rgba(82, 85, 87, 0.2);
|
||||
|
||||
-webkit-animation-name: spinner-loading;
|
||||
|
||||
animation-name: spinner-loading;
|
||||
-webkit-animation-duration: 0.8s;
|
||||
animation-duration: 0.8s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@-webkit-keyframes spinner-loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
@keyframes spinner-loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
.div-visual-console-spinner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
opacity: 0.7;
|
||||
background: rgb(212, 215, 218);
|
||||
}
|
||||
|
||||
form.visual-console-item-edition > .input-groups {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
form.visual-console-item-edition > input[type="submit"] {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Alarm Clock;
|
||||
src: url(alarm-clock.ttf);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,0BAA0B;EAC1B,oDAA4C;UAA5C,4CAA4C;EAC5C,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,yCAAoC;EACpC,iBAAiB;AACnB;;ACjCA;EACE,wBAAwB;EACxB,0BAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,kBAAkB;AACpB;;AAEA;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n background-position: center;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: text;\n}\n\n.visual-console-item.is-editing {\n border: 2px dashed #b2b2b2;\n transform: translateX(-2px) translateY(-2px);\n cursor: move;\n user-select: none;\n}\n\n.visual-console-item.is-editing > .resize-draggable {\n float: right;\n position: absolute;\n right: 0;\n bottom: 0;\n width: 15px;\n height: 15px;\n background: url(./resize-handle.svg);\n cursor: se-resize;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock {\n text-align: center;\n}\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}
|
||||
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,0BAA0B;EAC1B,oDAA4C;UAA5C,4CAA4C;EAC5C,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,0BAA0B;AAC5B;AACA;EACE,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,yCAAoC;EACpC,iBAAiB;AACnB;;AAEA;;EAEE,cAAc;EACd,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,6BAA6B;EAC7B,gBAAgB;EAChB,qCAAqC;EACrC,uCAAuC;EACvC,wCAAwC;EACxC,4CAA4C;;EAE5C,uCAA+B;;UAA/B,+BAA+B;EAC/B,gCAAwB;UAAxB,wBAAwB;EACxB,2CAAmC;UAAnC,mCAAmC;EACnC,yCAAiC;UAAjC,iCAAiC;AACnC;AACA;EACE;IACE,+BAAuB;YAAvB,uBAAuB;EACzB;EACA;IACE,gCAAwB;YAAxB,wBAAwB;EAC1B;AACF;AAPA;EACE;IACE,+BAAuB;YAAvB,uBAAuB;EACzB;EACA;IACE,gCAAwB;YAAxB,wBAAwB;EAC1B;AACF;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,YAAY;EACZ,8BAA8B;AAChC;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;AACb;;ACrFA;EACE,wBAAwB;EACxB,0BAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,kBAAkB;AACpB;;AAEA;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n background-position: center;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: text;\n}\n\n.visual-console-item.is-editing {\n border: 2px dashed #b2b2b2;\n transform: translateX(-2px) translateY(-2px);\n cursor: move;\n user-select: none;\n}\n\n.visual-console-item.is-editing.is-selected {\n border: 2px dashed #2b2b2b;\n}\n.visual-console-item.is-editing > .resize-draggable {\n float: right;\n position: absolute;\n right: 0;\n bottom: 0;\n width: 15px;\n height: 15px;\n background: url(./resize-handle.svg);\n cursor: se-resize;\n}\n\n.visual-console-spinner,\n.visual-console-spinner :after {\n display: block;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n}\n.visual-console-spinner {\n background-color: transparent;\n margin: 0px auto;\n border-top: 5px solid rgb(82, 85, 87);\n border-right: 5px solid rgb(82, 85, 87);\n border-bottom: 5px solid rgb(82, 85, 87);\n border-left: 5px solid rgba(82, 85, 87, 0.2);\n\n animation-name: spinner-loading;\n animation-duration: 0.8s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n@keyframes spinner-loading {\n 0% {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(1turn);\n }\n}\n\n.div-visual-console-spinner {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n opacity: 0.7;\n background: rgb(212, 215, 218);\n}\n\nform.visual-console-item-edition > .input-groups {\n margin-bottom: 50px;\n}\n\nform.visual-console-item-edition > input[type=\"submit\"] {\n position: absolute;\n bottom: 5px;\n right: 15px;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock {\n text-align: center;\n}\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,6 @@
|
|||
import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
|
||||
import { AnyObject } from "./lib/types";
|
||||
import { t } from "./lib";
|
||||
|
||||
// TODO: Document
|
||||
export abstract class InputGroup<Data extends {} = {}> {
|
||||
|
|
@ -155,8 +156,11 @@ export class FormContainer {
|
|||
return this;
|
||||
}
|
||||
|
||||
public getFormElement(): HTMLFormElement {
|
||||
public getFormElement(
|
||||
type: "creation" | "update" = "update"
|
||||
): HTMLFormElement {
|
||||
const form = document.createElement("form");
|
||||
form.className = "visual-console-item-edition";
|
||||
form.addEventListener("submit", e => {
|
||||
e.preventDefault();
|
||||
this.submitEventManager.emit({
|
||||
|
|
@ -173,12 +177,24 @@ export class FormContainer {
|
|||
});
|
||||
});
|
||||
|
||||
const formContent = document.createElement("div");
|
||||
formContent.className = "input-groups";
|
||||
|
||||
this.enabledInputGroupNames.forEach(name => {
|
||||
if (this.inputGroupsByName[name]) {
|
||||
form.appendChild(this.inputGroupsByName[name].element);
|
||||
formContent.appendChild(this.inputGroupsByName[name].element);
|
||||
}
|
||||
});
|
||||
|
||||
// Add buttons.
|
||||
const submitBtn = document.createElement("input");
|
||||
submitBtn.className = "sub upd";
|
||||
submitBtn.type = "submit";
|
||||
submitBtn.value = type === "creation" ? t("Create") : t("Update");
|
||||
|
||||
form.appendChild(formContent);
|
||||
form.appendChild(submitBtn);
|
||||
|
||||
return form;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -280,6 +280,11 @@ export default class VisualConsole {
|
|||
this.clearRelations(e.data.id);
|
||||
};
|
||||
|
||||
// TODO: Document
|
||||
private handleContainerClick: (e: MouseEvent) => void = () => {
|
||||
this.unselectItems();
|
||||
};
|
||||
|
||||
public constructor(
|
||||
container: HTMLElement,
|
||||
props: AnyObject,
|
||||
|
|
@ -330,6 +335,8 @@ export default class VisualConsole {
|
|||
|
||||
// Create lines.
|
||||
this.buildRelations();
|
||||
|
||||
this.containerRef.addEventListener("click", this.handleContainerClick);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -74,3 +74,13 @@
|
|||
opacity: 0.7;
|
||||
background: rgb(212, 215, 218);
|
||||
}
|
||||
|
||||
form.visual-console-item-edition > .input-groups {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
form.visual-console-item-edition > input[type="submit"] {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 15px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue