Skip to content
Snippets Groups Projects
Commit 916c22c6 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Merge branch 'dbp-location-select-has-wrong-name' into 'master'

Rename component to dbp-check-in-place-select (#34)

See merge request !5
parents 7f438c9c 0b0ad44e
No related branches found
No related tags found
1 merge request!5Rename component to dbp-check-in-place-select (#34)
Pipeline #14021 passed
Showing
with 111 additions and 25 deletions
{
"element": "dbp-location-select-demo-activity",
"module_src": "dbp-location-select-demo-activity.js",
"routing_name": "location-select",
"element": "dbp-check-in-place-select-demo-activity",
"module_src": "dbp-check-in-place-select-demo-activity.js",
"routing_name": "check-in-place-select",
"name": {
"de": "Ortauswahl",
"en": "Location select"
"en": "Check-in place select"
},
"short_name": {
"de": "Ortauswahl",
"en": "Location select"
"en": "Check-in place select"
},
"description": {
"de": "Ort Web Component",
"en": "location select web component"
"en": "Check-in place select web component"
}
}
......@@ -20,7 +20,7 @@
{"path": "notification.metadata.json"},
{"path": "data-table-view.metadata.json"},
{"path": "language-select.metadata.json"},
{"path": "location-select.metadata.json"},
{"path": "check-in-place-select.metadata.json"},
{"path": "matomo.metadata.json"},
{"path": "person-profile.metadata.json"},
{"path": "file-handling.metadata.json"}
......
# Location Select Web Component
# Check-in place select web component
[GitLab Repository](https://gitlab.tugraz.at/dbp/web-components/toolkit)
## Usage
```html
<dbp-location-select></dbp-location-select>
<dbp-check-in-place-select></dbp-check-in-place-select>
```
## Attributes
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-location-select lang="de"></dbp-location-select>`
- example `<dbp-check-in-place-select lang="de"></dbp-check-in-place-select>`
- `entry-point-url` (optional, default is the TU Graz entry point url): entry point url to access the api
- example `<dbp-location-select entry-point-url="http://127.0.0.1:8000"></dbp-location-select>`
- `value` (optional): api path of location to preload the selector with
- example `<dbp-location-select value="Besprechungsraum"></dbp-location-select>`
- the `value` will also be set automatically when a location is chosen in the selector
- `data-object` (read-only): when a location is selected the location object will be set as json string
- example `<dbp-location-select data-object="{"@id":"id", "@type":"http://schema.org/Place", "identifier":"id", "name":"Besprechungsraum", "maximumPhysicalAttendeeCapacity":"50"}"></dbp-location-select>`
- `show-capacity` (optional): also shows the capacity of the locations
- example `<dbp-location-select show-capacity></dbp-location-select>`
- example `<dbp-check-in-place-select entry-point-url="http://127.0.0.1:8000"></dbp-check-in-place-select>`
- `value` (optional): api path of place to preload the selector with
- example `<dbp-check-in-place-select value="Besprechungsraum"></dbp-check-in-place-select>`
- the `value` will also be set automatically when a place is chosen in the selector
- `data-object` (read-only): when a place is selected the place object will be set as json string
- example `<dbp-check-in-place-select data-object="{"@id":"id", "@type":"http://schema.org/Place", "identifier":"id", "name":"Besprechungsraum", "maximumPhysicalAttendeeCapacity":"50"}"></dbp-check-in-place-select>`
- `show-capacity` (optional): also shows the capacity of the places
- example `<dbp-check-in-place-select show-capacity></dbp-check-in-place-select>`
- `show-reload-button` (optional): if set a reload button will be viewed next to the select box
- the button triggers a `change` event on the web component
- the button is disabled if no location is selected
- example `<dbp-location-select show-reload-button></dbp-location-select>`
- the button is disabled if no place is selected
- example `<dbp-check-in-place-select show-reload-button></dbp-check-in-place-select>`
- `reload-button-title` (optional): sets a title text on the reload button
- example `<dbp-location-select show-reload-button reload-button-text="Reload result list"></dbp-location-select>`
- example `<dbp-check-in-place-select show-reload-button reload-button-text="Reload result list"></dbp-check-in-place-select>`
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
cd toolkit/packages/location-select
cd toolkit/packages/check-in-place-select
git submodule update --init
# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
......
......@@ -2,11 +2,11 @@
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-location-select-demo.js"></script>
<script type="module" src="dbp-check-in-place-select-demo.js"></script>
</head>
<body>
<dbp-location-select-demo lang="de"></dbp-location-select-demo>
<dbp-check-in-place-select-demo lang="de"></dbp-check-in-place-select-demo>
</body>
</html>
{
"name": "dbp-location-select",
"name": "dbp-check-in-place-select",
"version": "1.0.0",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
......
......@@ -15,7 +15,7 @@ console.log("build: " + build);
export default (async () => {
return {
input: (build != 'test') ? ['src/dbp-location-select.js', 'src/dbp-location-select-demo.js'] : glob.sync('test/**/*.js'),
input: (build != 'test') ? ['src/dbp-check-in-place-select.js', 'src/dbp-check-in-place-select-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
......
......@@ -14,7 +14,7 @@ import select2CSSPath from 'select2/dist/css/select2.min.css';
import * as errorUtils from "dbp-common/error";
const locationContext = {
const checkInPlaceContext = {
"@id": "@id",
"name": "http://schema.org/name",
"maximumPhysicalAttendeeCapacity": "http://schema.org/maximumPhysicalAttendeeCapacity"
......@@ -22,7 +22,7 @@ const locationContext = {
select2(window, $);
export class LocationSelect extends ScopedElementsMixin(LitElement) {
export class CheckInPlaceSelect extends ScopedElementsMixin(LitElement) {
constructor() {
super();
......@@ -32,7 +32,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
this.$select = null;
this.active = false;
// For some reason using the same ID on the whole page twice breaks select2 (regardless if they are in different custom elements)
this.selectId = 'location-select-' + commonUtils.makeId(24);
this.selectId = 'check-in-place-select-' + commonUtils.makeId(24);
this.value = '';
this.object = null;
this.ignoreValueUpdate = false;
......@@ -125,7 +125,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
return false;
}
// find the correct api url for a location
// find the correct api url for a checkInPlace
const apiUrl = this.jsonld.getApiUrlForIdentifier("http://schema.org/Place");
// const apiUrl = this.jsonld.getApiUrlForEntityName("CheckInPlace");
......@@ -144,8 +144,8 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
width: '100%',
language: this.lang === "de" ? select2LangDe() : select2LangEn(),
minimumInputLength: 2,
placeholder: i18n.t('location-select.placeholder'),
dropdownParent: this.$('#location-select-dropdown'),
placeholder: i18n.t('check-in-place-select.placeholder'),
dropdownParent: this.$('#check-in-place-select-dropdown'),
ajax: {
delay: 500,
url: apiUrl,
......@@ -161,7 +161,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
},
processResults: function (data) {
that.lastResult = data;
let transformed = that.jsonld.transformMembers(data, locationContext);
let transformed = that.jsonld.transformMembers(data, checkInPlaceContext);
const results = [];
transformed.forEach((place) => {
results.push({id: place["@id"], maximumPhysicalAttendeeCapacity: place["maximumPhysicalAttendeeCapacity"], text: that.generateOptionText(place)});
......@@ -228,7 +228,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
})
.then((place) => {
that.object = place;
const transformed = that.jsonld.compactMember(that.jsonld.expandMember(place), locationContext);
const transformed = that.jsonld.compactMember(that.jsonld.expandMember(place), checkInPlaceContext);
const identifier = transformed["@id"];
const maxCapacity = transformed["maximumPhysicalAttendeeCapacity"];
const room = place.identifier;
......@@ -259,7 +259,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
generateOptionText(place) {
let text = place["name"];
// add maximum capacity to location if present
// add maximum capacity to checkInPlace if present
if (this.showCapacity && (place["maximumPhysicalAttendeeCapacity"] !== undefined) && (place["maximumPhysicalAttendeeCapacity"] !== null)) {
let capacity = place["maximumPhysicalAttendeeCapacity"];
text += ` (${capacity})`;
......@@ -366,7 +366,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
<div class="field has-addons">
<div class="select2-control control">
<!-- https://select2.org-->
<select id="${this.selectId}" name="location" class="select" ?disabled=${!this.active}>${!this.active ? html`<option value="" disabled selected>${ i18n.t('location-select.login-required')}</option>` : ''}</select>
<select id="${this.selectId}" name="check-in-place" class="select" ?disabled=${!this.active}>${!this.active ? html`<option value="" disabled selected>${ i18n.t('check-in-place-select.login-required')}</option>` : ''}</select>
</div>
<a class="control button"
id="reload-button"
......@@ -377,7 +377,7 @@ export class LocationSelect extends ScopedElementsMixin(LitElement) {
<dbp-icon name="reload"></dbp-icon>
</a>
</div>
<div id="location-select-dropdown"></div>
<div id="check-in-place-select-dropdown"></div>
</div>
`;
}
......
import {i18n} from './i18n.js';
import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {LocationSelect} from './location-select.js';
import {CheckInPlaceSelect} from './check-in-place-select.js';
import {AuthKeycloak, LoginButton} from 'dbp-auth';
import * as commonUtils from 'dbp-common/utils';
import * as commonStyles from 'dbp-common/styles';
class LocationSelectDemo extends ScopedElementsMixin(LitElement) {
class CheckInPlaceSelectDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
......@@ -17,7 +17,7 @@ class LocationSelectDemo extends ScopedElementsMixin(LitElement) {
return {
'dbp-auth-keycloak': AuthKeycloak,
'dbp-login-button': LoginButton,
'dbp-location-select': LocationSelect,
'dbp-check-in-place-select': CheckInPlaceSelect,
};
}
......@@ -61,21 +61,21 @@ class LocationSelectDemo extends ScopedElementsMixin(LitElement) {
return html`
<section class="section">
<div class="container">
<h1 class="title">Location-Select-Demo</h1>
<h1 class="title">Check-In-Place-Select-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="container">
<form>
<div class="field">
<label class="label">Location 1</label>
<label class="label">Check-In-Place 1</label>
<div class="control">
<dbp-location-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}"></dbp-location-select>
<dbp-check-in-place-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}"></dbp-check-in-place-select>
</div>
</div>
<div class="field">
<label class="label">Location 2</label>
<label class="label">Check-In-Place 2</label>
<div class="control">
<dbp-location-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" show-reload-button reload-button-title="Click me"></dbp-location-select>
<dbp-check-in-place-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" show-reload-button reload-button-title="Click me"></dbp-check-in-place-select>
</div>
</div>
</form>
......@@ -85,4 +85,4 @@ class LocationSelectDemo extends ScopedElementsMixin(LitElement) {
}
}
commonUtils.defineCustomElement('dbp-location-select-demo', LocationSelectDemo);
commonUtils.defineCustomElement('dbp-check-in-place-select-demo', CheckInPlaceSelectDemo);
import * as commonUtils from 'dbp-common/utils';
import {CheckInPlaceSelect} from './check-in-place-select.js';
commonUtils.defineCustomElement('dbp-check-in-place-select', CheckInPlaceSelect);
import './dbp-check-in-place-select-demo.js';
{
"location-select": {
"check-in-place-select": {
"placeholder": "Bitte wählen Sie einen Ort aus",
"error-summary": "Ein Fehler ist aufgetreten",
"login-required": "Anmeldung erforderlich"
......
{
"location-select": {
"check-in-place-select": {
"placeholder": "Please select a location",
"error-summary": "An error occurred",
"login-required": "Login required"
......
import {CheckInPlaceSelect} from './check-in-place-select.js';
export {CheckInPlaceSelect};
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment