You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/05/25 21:30:25 UTC
[incubator-streampipes-website] branch dev updated: Add filter
feature to pipeline element overview
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes-website.git
The following commit(s) were added to refs/heads/dev by this push:
new e553811 Add filter feature to pipeline element overview
new 3df1467 Merge branch 'dev' of github.com:apache/incubator-streampipes-website into dev
e553811 is described below
commit e55381107793d26fbd1844de9610206bc3f2fa59
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon May 25 23:30:01 2020 +0200
Add filter feature to pipeline element overview
---
website/css/custom.css | 28 +++++++++++++++
website/js/scripts.js | 2 +-
website/pipeline-elements.ejs | 81 +++++++++++++++++++++++++++++++++++++++++--
3 files changed, 108 insertions(+), 3 deletions(-)
diff --git a/website/css/custom.css b/website/css/custom.css
index 2dfa0bb..882698e 100644
--- a/website/css/custom.css
+++ b/website/css/custom.css
@@ -341,6 +341,34 @@ img {
content: '\201D';
}
+.form-group.position-relative input {
+ padding-right: 32px;
+}
+
+.form-clear {
+ align-items: center;
+ background: #cecece;
+ border-radius: 50%;
+ bottom: 8px;
+ color: rgba(0, 0, 0, .54);
+ cursor: pointer;
+ display: flex;
+ height: 24px;
+ justify-content: center;
+ position: absolute;
+ right: 0;
+ width: 24px;
+ z-index: 10;
+}
+
+.form-text+.form-clear {
+ bottom: calc(1rem + 18px);
+}
+
+.form-clear .material-icons {
+ font-size: 16px;
+ font-weight: 500;
+}
diff --git a/website/js/scripts.js b/website/js/scripts.js
index 2bb1218..53c2a70 100644
--- a/website/js/scripts.js
+++ b/website/js/scripts.js
@@ -35,4 +35,4 @@
}
});
-})(jQuery);
+})(jQuery);
\ No newline at end of file
diff --git a/website/pipeline-elements.ejs b/website/pipeline-elements.ejs
index 23d6e3f..42f3d43 100644
--- a/website/pipeline-elements.ejs
+++ b/website/pipeline-elements.ejs
@@ -14,8 +14,41 @@
<section class="elements-area section-padding-50">
<div class="container">
<div class="row">
+ <div class="col-12">
+ <p>The following adapters, data processors and data sinks are currently part of Apache StreamPipes.<br/>
+ You are missing a pipeline element? Let us know by writing to our <a href="/mailinglists.html">mailing lists</a>!</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-4">
+ <div class="custom-control custom-checkbox d-flex justify-content-center">
+ <input type="checkbox" checked class="custom-control-input" id="adapter-checkbox">
+ <label class="custom-control-label" for="adapter-checkbox">Adapters</label>
+ </div>
+ </div>
+ <div class="col-4">
+ <div class="custom-control custom-checkbox d-flex justify-content-center">
+ <input type="checkbox" checked class="custom-control-input" id="processor-checkbox">
+ <label class="custom-control-label" for="processor-checkbox">Data Processors</label>
+ </div>
+ </div>
+ <div class="col-4">
+ <div class="custom-control custom-checkbox d-flex justify-content-center">
+ <input type="checkbox" checked class="custom-control-input" id="sink-checkbox">
+ <label class="custom-control-label" for="sink-checkbox">Data Sinks</label>
+ </div>
+ </div>
+ </div>
+ <div class="row d-flex flex-row-reverse" style="margin-top:20px;">
+ <div class="col-6">
+ <div class="form-group position-relative">
+ <input type="text" class="form-control" id="find-element" placeholder="Find Element">
+ </div>
+ </div>
+ </div>
+ <div class="row">
<div class="col-12">
- <div class="pe-grid-container">
+ <div class="pe-grid-container" id="pe-overview">
<% for(var i=0; i < public._data.pipelineElements.length; i++) { %>
<% var type;
if (public._data.pipelineElements[i].type === "Data Processor") {
@@ -26,7 +59,7 @@
type = "adapter"
}
%>
- <div class="pe-container-item pe-container-item-<%- type %>">
+ <div id="<%= public._data.pipelineElements[i].appId %>" data-pe="pe" data-type="<%= type %>" data-name="<%= public._data.pipelineElements[i].name %>" class="pe-container-item pe-container-item-<%- type %>">
<div class="pe-container-item-header">
<div class="pe-container-item-icon pe-container-item-icon-<%- type %> pe-icon-<%- type %>">
<img class="pe-icon" src="/img/pipeline-elements/<%= public._data.pipelineElements[i].appId %>/icon.png">
@@ -65,6 +98,50 @@
<%- partial("partials/_footer.ejs") %>
+<script type="text/javascript">
+
+ var adapters = $('[data-type="adapter"]');
+ var processors = $('[data-type="processor"]');
+ var sinks = $('[data-type="sink"]');
+
+ $('#adapter-checkbox').click(function() {
+ applyFilter();
+ });
+
+ $('#processor-checkbox').click(function() {
+ applyFilter();
+ });
+
+ $('#sink-checkbox').click(function() {
+ applyFilter();
+ });
+
+ $('#find-element').on("input", function() {
+ applyFilter();
+ });
+
+ function applyFilter() {
+ var searchText = ($('#find-element').val());
+ updateProcessorSelection($('#processor-checkbox').prop('checked'));
+ updateSinkSelection($('#sink-checkbox').prop('checked'));
+ updateAdapterSelection($('#adapter-checkbox').prop('checked'));
+ if (searchText != "") {
+ $('[data-pe]').not('[data-name*=' +searchText +']').hide();
+ }
+ }
+
+ function updateProcessorSelection(visible) {
+ visible ? processors.show() : processors.hide();
+ }
+
+ function updateSinkSelection(visible) {
+ visible ? sinks.show() : sinks.hide();
+ }
+
+ function updateAdapterSelection(visible) {
+ visible ? adapters.show() : adapters.hide();
+ }
+</script>
</body>
</html>
\ No newline at end of file