xrazis
/
docs.swarmlab.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Add lab-rooms search

master
Haris Razis 4 years ago
parent
db9c2b764e
commit
2db1caebda
5 changed files with 115 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .gitignore
  2. 24
      web/locales/en.json
  3. 0
      web/public/javascripts/fetchLabs.js
  4. 11
      web/public/javascripts/labSearch.js
  5. 108
      web/views/index.ejs

4
.gitignore
View File

@ -1 +1,3 @@
node_modules/
web/node_modules/
web/config/

24
web/locales/en.json
View File

@ -12,7 +12,27 @@
"on_demand_text": "Create and share your ideas on our lab-room platform. Join tutors labs, learn more about your interests and broaden your horizon.",
"git": "Git",
"git_text": "The wolds leading, powerful collaboration tool at your disposal on our servers. Keep in touch with your workmates and make sharing simpler then ever.",
"available_swarmlab": "Available Swarmlab Labrooms",
"bug": "Found a bug? Help us fix it!"
"available_swarmlab": "Available Swarmlab Lab-rooms",
"bug": "Found a bug? Help us fix it!",
"more_info": "More Info",
"mpi_header": "MPI",
"mpi_text": "MPICH is a high performance and widely portable implementation of the Message Passing Interface (MPI) standard. ",
"jdk_header": "Open JDK",
"jdk_text": "OpenJDK (Open Java Development Kit) is a free and open-source implementation of the Java Platform, Standard Edition (Java SE) ",
"linux_header": "Linux Networking/Admin/Devel",
"linux_text1": "This is designed to help you with:",
"linux_text2": "Linux Networking",
"linux_text3": "Build network on top of OS",
"linux_text4": "Essentials of Linux System Administration",
"linux_text5": "Learn to orchestrate a lot of linux machines with ansible",
"r_header": "R Project for Statistical Computing",
"r_text": "One of the powerful choices for statistical analysis. R helps you to get big picture of your data by calculating statistical parameters like mean, standard deviation, correlation etc ",
"node_header": "Node.js",
"node_text1 ": "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. This Labroom is designed to help you devel:",
"node_text2": "Web Applications and APIs with express",
"node_text3": "WebSocket Client & Server Implementation for Node",
"node_text4": "Learn How to providing a bi-directional communication channel between a client and a server.",
"python_header": "Python, scipy",
"python_text": "This Labroom provides a Python-based ecosystem of open-source software for mathematics, science, engineering and Web development"
}
}

0
web/public/javascripts/fetchLabs.js
View File

11
web/public/javascripts/labSearch.js
View File

@ -0,0 +1,11 @@
$("#search").on("keyup", () => {
var searchValue = $("#search").val().toLowerCase();
$(".card .card-body .card-title").each(function () { // es6 arrow function wont work with 'this'
var title = $(this);
if (title.text().toLowerCase().includes(searchValue)) {
$(this).parent().parent().show();
} else {
$(this).parent().parent().hide();
}
});
});

108
web/views/index.ejs
View File

@ -98,54 +98,103 @@
</div>
</div>
</section>
<section class="testimonials text-center bg-light" id="lab-rooms">
<section class="testimonials bg-light" id="lab-rooms">
<div class="container">
<h2 class="mb-5"><%= t('available_swarmlab') %></h2>
<h2 class="mb-5 d-flex justify-content-center text-center"><%= t('available_swarmlab') %></h2>
<div class="d-flex justify-content-center">
<nav class="navbar navbar-light bg-light">
<input class="form-control mr-sm-2" type="text" placeholder="Search Lab-rooms" aria-label="Search"
id="search">
</nav>
</div>
<div class="row">
<div class="col">
<div class="card-group">
<div class="card" style="margin: 10px;">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p><a
class="btn btn-light btn-sm border-dark" role="button">More Info</a>
<h4 class="card-title"><%= t('python_header') %></h4>
<p class="card-text text-muted">
<%= t('python_text') %>
<ul>
<li class="text-muted">NumPy</li>
<li class="text-muted">SciPy library</li>
<li class="text-muted">Matplotlib</li>
<li class="text-muted">IPython</li>
<li class="text-muted">SymPy</li>
<li class="text-muted">pandas</li>
<li class="text-muted">Spyder scientific environment.</li>
</ul>
</p>
</div>
<div class="card-footer" style="background-color: white;">
<a class="btn btn-light btn-sm border-dark" role="button"><%= t('more_info') %></a>
</div>
</div>
<div class="card" style="margin: 10px;">
<div class="card-body">
<h4 class="card-title"><%= t('node_header') %></h4>
<p class="card-text text-muted">
<%= t('node_text1') %>
<ul>
<li class="text-muted"><%= t('node_text2') %></li>
<li class="text-muted"><%= t('node_text3') %></li>
<li class="text-muted"><%= t('node_text4') %></li>
</ul>
</p>
</div>
<div class="card-footer" style="background-color: white;">
<a class="btn btn-light btn-sm border-dark" role="button"><%= t('more_info') %></a>
</div>
</div>
<div class="card" style="margin: 10px;">
<div class="card-body">
<h4 class="card-title"><%= t('linux_header') %></h4>
<p class="card-text text-muted">
<%= t('linux_text1') %>
<ul>
<li class="text-muted"><%= t('linux_text2') %></li>
<li class="text-muted"><%= t('linux_text3') %></li>
<li class="text-muted"><%= t('linux_text4') %></li>
<li class="text-muted"><%= t('linux_text5') %></li>
</ul>
</p>
</div>
<div class="card-footer" style="background-color: white;">
<a class="btn btn-light btn-sm border-dark" role="button"><%= t('more_info') %></a>
</div>
</div>
</div>
<div class="card-group">
<div class="card" style="margin: 10px;">
<div class="card-body">
<h4 class="card-title"><%= t('mpi_header') %></h4>
<p class="card-text text-muted"><%= t('mpi_text') %></p>
</div>
<div class="card-footer" style="background-color: white;">
<a class="btn btn-light btn-sm border-dark" role="button"><%= t('more_info') %></a>
</div>
</div>
<div class="card" style="margin: 10px;">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p><a
class="btn btn-light border-dark" role="button">Button</a>
<h4 class="card-title"><%= t('r_header') %></h4>
<p class="card-text text-muted"><%= t('r_text') %></p>
</div>
<div class="card-footer" style="background-color: white;">
<a class="btn btn-light btn-sm border-dark" role="button"><%= t('more_info') %></a>
</div>
</div>
<div class="card" style="margin: 10px;">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p><a
class="btn btn-light border-dark" role="button">Button</a>
<h4 class="card-title"><%= t('jdk_header') %></h4>
<p class="card-text text-muted"><%= t('jdk_text') %></p>
</div>
<div class="card-footer" style="background-color: white;">
<a class="btn btn-light btn-sm border-dark" role="button"><%= t('more_info') %></a>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center justify-content-xl-center">
<nav class="d-flex justify-content-center" style="width: auto;margin-top: 25px;color: rgb(33,37,41);">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span
aria-hidden="true">«</span></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<section class="call-to-action text-white text-center"
@ -205,6 +254,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="/javascripts/bs-init.js"></script>
<script src="/javascripts/labSearch.js"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save