Skip to content

Commit

Permalink
v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathanbataire
jonathanbataire committed May 30, 2024
1 parent 136998e commit c36c9c9
Show file tree
Hide file tree
Showing 57 changed files with 3,661 additions and 147 deletions.
2,117 changes: 2,086 additions & 31 deletions package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,26 @@
"chai-as-promised": "^7.1.1",
"chai-exclude": "^2.1.0",
"commander": "^12.0.0",
"concurrently": "^8.2.2",
"eslint": "^8.57.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.1.1",
"mocha": "^10.2.0",
"node-sass": "^9.0.0",
"rewire": "^7.0.0",
"sinon": "^17.0.1",
"ts-mocha": "^10.0.0",
"tsc-watch": "^6.0.4"
},
"scripts": {
"cp-package-json": "cp package.json ./src",
"scss-compile": "npx node-sass ./src/scss -o ./src/public/css --output-style compressed",
"watch-scss": "npx node-sass --watch ./src/scss -o ./src/public/css --output-style compressed",
"test": "npx ts-mocha test/{,**}/*.spec.ts",
"build": "npm run cp-package-json && npx tsc",
"build": "npm run cp-package-json && npx tsc && npm run scss-compile",
"lint": "npx eslint --color --cache .",
"start": "node dist/index.js",
"dev": "tsc-watch --onSuccess \"node dist/index.js\"",
"dev": "npx concurrently \"npm run watch-scss\" \"tsc-watch --onSuccess 'node dist/index.js'\"",
"publish": "node scripts/publish.js"
},
"repository": {
Expand Down
171 changes: 171 additions & 0 deletions src/css/custom-bootstrap.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
/*!
* Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
*/
/*!
* Bootstrap v3.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777777;
border-radius: 10px;
}
.badge:empty {
display: none;
}
.btn .badge {
position: relative;
top: -1px;
}
.btn-xs .badge,
.btn-group-xs > .btn .badge {
top: 0;
padding: 1px 5px;
}
a.badge:hover,
a.badge:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: #337ab7;
background-color: #ffffff;
}
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}

.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: inherit;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
line-break: auto;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
font-size: 12px;
filter: alpha(opacity=0);
opacity: 0;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: 0.9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
background-color: #000000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
9 changes: 7 additions & 2 deletions src/liquid/app/fragment_home.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<div class="tile is-child" hx-ext="sse" sse-connect="/events/connection">
<div id="places_parent" class="tile is-child">
<div hx-ext="sse" sse-connect="/events/connection">
<div id="places_parent">
{% capture totalCount %}{{directiveModel.totalCount}} {% endcapture %}
{%if totalCount > 0 %}
{% include "place/directive.html" %}
{% include "place/list_lazy.html" %}
{%else%}
{% include "place/directive_1_get_started.html" %}
{%endif%}
</div>
</div>
42 changes: 42 additions & 0 deletions src/liquid/app/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<nav class="navbar">
<div class="navbar-branding" id="logo">
<a href="/"><img src="{{ logo }}" /></a>
</div>
<div class="navbar-branding"><a>User Management</a></div>
<ul>
<li class="dropdown">
<div id="dropdown-btn">
<img src="/public/icons/cloud.svg" alt="dropdown-button">
<i>{{ session.authInfo.friendly }}</i>
</div>
<div class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</div>
<ul class="dropdown-menu" id="dd-menu">
<a href="/logout">
<li><img src="/public/icons/logout.svg">Logout</li>
</a>
<li><i>Logged in as {{ session.username }}</i></li>
</ul>
</li>
</ul>
</nav>

<script>
document.addEventListener('click', function () {
const dropDownMenu = document.getElementById('dd-menu');
if(dropDownMenu.classList.contains('active-dropdown')) {
document.querySelector('.dropdown-menu').classList.toggle('active-dropdown');
document.querySelector('.hamburger-icon').classList.toggle('open');
}
});

document.querySelector('.hamburger-icon')
.addEventListener('click', function(event){
event.stopPropagation();
document.querySelector('.dropdown-menu').classList.toggle('active-dropdown');
document.querySelector('.hamburger-icon').classList.toggle('open');
});
</script>
53 changes: 22 additions & 31 deletions src/liquid/app/view.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,34 @@
<!DOCTYPE html>
<html>

<head>
<title>CHT User Management Tool</title>
<script src="/public/htmx.min.js"></script>
<script src="/public/sse.js"></script>
<script src="/public/bulma-calendar.min.js"></script>

<link rel="stylesheet" href="/public/bulma.min.css" />
<link rel="stylesheet" href="/public/bulma-tooltip.min.css" />
<link rel="stylesheet" href="/public/bulma-calendar.min.css" />
<link rel="stylesheet" href="/public/material-symbols.css" />

<style>
.material-symbols-outlined {
margin-right: 5px;
};
</style>
<script src="/public/scripts/htmx.min.js"></script>
<script src="/public/scripts/sse.js"></script>
<script src="/public/scripts/bulma-calendar.min.js"></script>
<script src="/public/scripts/jquery-3.7.1.slim.min.js"></script>
<script src="/public/scripts/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/public/css/custom-bootstrap.min.css" />
<link rel="stylesheet" href="/public/css/styles.css" />
</head>

<body>
{% include "app/nav.html" %}

<div id="app" class="" style="min-height: 100vh">
<div id="workflow-content" class="container tile is-parent">
{% if view == "list" %}
{% include "app/fragment_home.html" %}
{% else %}
{% include "app/form_switch.html" %}
{% endif %}
<div class="container">
{% include "app/header.html" %}
<div class="content">
<div id="app">
<div id="workflow-content" class="container tile is-parent">
{% if view == "list" %}
{% include "app/fragment_home.html" %}
{% else %}
{% include "app/form_switch.html" %}
{% endif %}
</div>
</div>
</div>
</div>

<script type="text/javascript">
bulmaCalendar.attach('input[type="date"]', {
lang: 'en-US',
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(),
});
</script>
</div>
</body>

</html>
8 changes: 5 additions & 3 deletions src/liquid/components/list_cell.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<td
id="{{ include.propertyName }}"
{% if place.validationErrors[include.propertyName] %}
class="is-danger has-tooltip-arrow has-tooltipl-multiline"
data-tooltip="{{ place.validationErrors[include.propertyName] | escape }}"
class="error-bg"
{% endif %}
>
<div data-toggle="tooltip" data-placement="top"
title="{{ place.validationErrors[include.propertyName] | escape }}">
{% if include.values[include.property.property_name] != empty %}
{% if include.linkTo and include.linkTo != empty and include.linkTo.type == 'remote' %}
<a href="https://{{ session.authInfo.domain }}/#/contacts/{{ include.linkTo.id }}" target="_blank">
Expand All @@ -15,7 +16,8 @@
{% endif %}

{% if include.linkTo.type == 'local' %}
<span class="material-symbols-outlined">cloud_off</span>
<span>cloud_off</span>
{% endif %}
{% endif %}
</div>
</td>
40 changes: 40 additions & 0 deletions src/liquid/components/pagination.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<div class="pagination" id="pagination">
<button
{%assign prevPage = include.contactType.places.page | minus: 1 %}
{% if prevPage == 0 %} disabled {%endif%}
hx-trigger="click" hx-get="/app/list/{{prevPage}}/{{include.contactType.places.pageSize}}" hx-target="#place_list" hx-swap="outerHTML"
id="prevbtn">&laquo;</button>
<span id="pager">
{% for pageNumber in (1..contactType.places.totalPages) %}
{% assign collapseRightLimit = include.contactType.places.totalPages | minus: 3 %}
{%assign collapseLeft = include.contactType.places.page >= 6 and pageNumber == 6 %}
{%assign collapseRight = include.contactType.places.page < collapseRightLimit and pageNumber == collapseRightLimit %}
{% if collapseLeft or collapseRight %}
<a class="collapse">...</a>
{%endif%}
<a
{% if pageNumber == include.contactType.places.page %}
class = "active"
{%else%}
hx-trigger="click" hx-get="/app/list/{{pageNumber}}/{{include.contactType.places.pageSize}}" hx-target="#place_list" hx-swap="outerHTML"
{%endif%}
>{{pageNumber}}</a>
{%endfor%}
</span>
<button id="nextbtn_{{ contactType.name }}"
{%assign nextPage = include.contactType.places.page | plus: 1 %}
{% if nextPage > include.contactType.places.totalPages %} disabled {%endif%}
hx-trigger="click" hx-get="/app/list/{{nextPage}}/{{include.contactType.places.pageSize}}" hx-target="#place_list" hx-swap="outerHTML"
>&raquo;</button>
<div class="pager-control">
<span>Rows per page</span>
<select id="rows-per-page_{{ contactType.name }}"
hx-trigger="change" hx-target="#place_list" hx-swap="outerHTML"
>
<option hx-get="/app/list/1/10" value="10" {%if include.contactType.places.pageSize == 10 %}selected {%endif%}>10</option>
<option hx-get="/app/list/1/20" value="20" {%if include.contactType.places.pageSize == 20 %}selected {%endif%}>20</option>
<option hx-get="/app/list/1/50" value="50" {%if include.contactType.places.pageSize == 50 %}selected {%endif%}>50</option>
<option hx-get="/app/list/1/100" value="100" {%if include.contactType.places.pageSize == 100 %}selected {%endif%}>100</option>
</select>
</div>
</div>
Loading

0 comments on commit c36c9c9

Please sign in to comment.