Commit 44f9d834 authored by Racct's avatar Racct
Browse files

feat: aboutus page + wording changes

parent bddd268c
Pipeline #1392 canceled with stages
in 1 minute and 10 seconds
......@@ -59,6 +59,7 @@ generate('ccb', {
generateFontResets('ccb', {
h1: { ...fontReset(1, 0.1, 'Barlow'), fontWeight: 'bold', fontSize: '24px' },
h2: { ...fontReset(1, 0.1, 'Barlow'), fontWeight: 'bold', fontSize: '22px' },
h3: { ...fontReset(1, 0.1, 'Barlow'), fontWeight: 'bold', fontSize: '20px' },
h4: { ...fontReset(1, 0.1, 'Barlow'), fontWeight: 'bold', fontSize: '18px' },
......
......@@ -188,12 +188,12 @@ export class CCBContentsAdmin extends AdornisDBView<Content> {
`;
}
protected saveField(data: T, index: number) {
protected saveField(data: Content, index: number) {
return html`
<a-box ?secondary="${index % 2}" fullsize centered>
${data.whenChanging.pipe(
map(data =>
data.dirty
${data.dirty.pipe(
map(dirty =>
dirty
? html`
<mwc-icon-button
class="${this.css({ cursor: 'pointer', background: 'green', color: 'white' })}"
......
......@@ -18,17 +18,20 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
<a-stack size="md" class="${this.css({ flex: '1', minWidth: '300px' })}">
<ccb-text>Hi!</ccb-text>
<ccb-text>
Der Legal Chatbot gibt Ratsuchenden Antworten auf Ihre rechtlichen Fragen, die im Zuge der
Coronakrise entstanden sind.
Der Corona Legal Chatbot soll alle rechtlichen Fragen beantworten, die im Zusammenhang mit der
Corona-Krise entstanden sind.
</ccb-text>
<ccb-text
>Als Experte und Institution können Sie Ihre FAQs hier bereitstellen und diese regelmäßig
updaten. Über den Chatbot erhalten die Ratsuchenden Ihre Antworten</ccb-text
>Als Experte, Behörde oder Institution könnt ihr eure FAQs hier bereitstellen und diese
regelmäßig updaten.</ccb-text
>
</a-stack>
<a-stack size="md" class="${this.css({ flex: '1', justifyContent: 'center', minWidth: '400px' })}">
<a-link href="https://t.me/CoronaLegalChatBot" target="_blank"
><ccb-button>Zum Legal Chatbot für&nbsp;<b>Ratsuchende</b></ccb-button></a-link
<a-link
href="https://t.me/CoronaLegalChatBot"
target="_blank"
class="${this.css({ marginBottom: spacing.xl })}"
><ccb-button>Zum Legal Chatbot für&nbsp;<b>Fragende</b></ccb-button></a-link
>
<a-link href="/contentadmin">
<ccb-button secondary
......@@ -42,53 +45,63 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
</a-link>
</a-stack>
</a-inline>
<a-stack size="md" class="${this.css({ alignItems: 'center' })}">
<a-stack size="xl" class="${this.css({ alignItems: 'center' })}">
<ccb-h4>Unsere Partner:</ccb-h4>
<a-inline horizontal size="xl" class="${this.css({ opacity: '0.6', justifyContent: 'center' })}">
<img
src="https://www.ksb-intax.de/typo3conf/ext/ksb_site/Resources/Public/images/logo-ksb-intax-blue-trans.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
<img
src="https://media-exp1.licdn.com/dms/image/C4D1BAQH04Fs5dnPoiw/company-background_10000/0?e=2159024400&v=beta&t=3DphZgZb6oRh9WDQuSK6VNnKt8U2YRsIqnaD-4bDhqk"
class="${this.css({ display: 'block', height: '50px' })}"
/>
<img
src="https://fps-law.de/files/themes/fps/images/fps-logo-de.gif"
class="${this.css({ display: 'block', height: '50px' })}"
/>
<img
src="https://weblaw.ch/.imaging/default/dam/weblaw/events/107/1078/10782/Weblaw-4farbig/jcr:content.jpg"
class="${this.css({ display: 'block', height: '50px' })}"
/>
<img
src="https://www.steuernundrecht.berlin/wp-content/uploads/2016/11/Logo_Endt-Eckhardt.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
<img
src="/adornis_logo.png"
style=${{ transform: 'scale(1.8)', transformOrigin: 'center right', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
@click=${() => window.open('https://adornis.de')}
/>
<img
src="https://studycore.de/logo.svg"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
@click=${() => window.open('https://studycore.de')}
/>
<a-link href="https://www.ksb-intax.de/" target="_blank">
<img
src="https://www.ksb-intax.de/typo3conf/ext/ksb_site/Resources/Public/images/logo-ksb-intax-blue-trans.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://legaltechlab.de/" target="_blank">
<img
src="https://media-exp1.licdn.com/dms/image/C4D1BAQH04Fs5dnPoiw/company-background_10000/0?e=2159024400&v=beta&t=3DphZgZb6oRh9WDQuSK6VNnKt8U2YRsIqnaD-4bDhqk"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://fps-law.de/" target="_blank">
<img
src="https://fps-law.de/files/themes/fps/images/fps-logo-de.gif"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://weblaw.ch/" target="_blank">
<img
src="https://weblaw.ch/.imaging/default/dam/weblaw/events/107/1078/10782/Weblaw-4farbig/jcr:content.jpg"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://www.steuernundrecht.berlin/" target="_blank">
<img
src="https://www.steuernundrecht.berlin/wp-content/uploads/2016/11/Logo_Endt-Eckhardt.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://adornis.de/" target="_blank">
<img
src="/adornis_logo.png"
style=${{ transform: 'scale(1.8)', transformOrigin: 'center right', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://studycore.de/" target="_blank">
<img
src="https://studycore.de/logo.svg"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://legal-revolution.com/de/" target="_blank">
<img
src="/legalrevolution.png"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
</a-inline>
</a-stack>
<img
src="/wirvsviruslogo.png"
class="${this.css({
marginLeft: 'auto',
marginRight: 'auto',
height: '100px',
width: 'auto',
display: 'block',
})}"
/>
${this.wirvsvirusLogo()}
</a-stack>
`;
case 'institutes':
......@@ -99,18 +112,21 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
size="md"
class="${this.css({ flex: '1', minWidth: '300px', justifyContent: 'flex-start' })}"
>
<ccb-text
>Diese Institutionen und Expert*Innen stellen uns proaktiv Ihre Inhalte zur Verfügung.</ccb-text
>
<ccb-text>
Diese Institutionen und Expert*Innen stellen uns bereits ihre Inhalte zur Verfügung.
</ccb-text>
<ccb-text> Werdet auch Teil unseres Netzwerks! </ccb-text>
</a-stack>
<a-stack size="lg" class="${this.css({ flex: '2', minWidth: '300px', justifyContent: 'center' })}">
<a-stack size="md">
<ccb-button secondary big>Die&nbsp;<b>Institutionen</b></ccb-button>
<a-inline horizontal size="md"> <ccb-button small secondary>Platzhalter</ccb-button> </a-inline>
<a-inline horizontal size="md">
<ccb-button small secondary>Hier sollte eure Institution / Behörde stehen</ccb-button>
</a-inline>
</a-stack>
<a-stack size="md">
<ccb-button big secondary>Die&nbsp;<b>Experten</b></ccb-button>
<ccb-button big secondary>Eine Auswahl unserer&nbsp;<b>Experten</b></ccb-button>
<a-stack size="xxs">
<a-inline horizontal size="md">
<ccb-button small secondary class="${this.css({ flex: '1' })}">
......@@ -156,16 +172,27 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
</a-stack>
</a-stack>
</a-stack>
<img
src="/wirvsviruslogo.png"
class="${this.css({
marginLeft: 'auto',
marginRight: 'auto',
height: '100px',
width: 'auto',
display: 'block',
})}"
/>
${this.wirvsvirusLogo()}
</a-stack>
`;
case 'aboutus':
return html`
<a-stack size="lg" padding="xl">
<ccb-h1> Unser Team </ccb-h1>
<a-grid columns="3" gap="md" class="${this.css({ gridAutoFlow: 'row' })}">
<ccb-h2> Recht </ccb-h2>
<ccb-h2> Software </ccb-h2>
<ccb-h2> Stud. Initiativen </ccb-h2>
${this.aboutUsItem('Dr. Sebastian Seeger', 'OLG Frankfurt am Main', '/people/sebastian.png', '1')}
${this.aboutUsItem('Kai Brobeil', 'Adornis Ventures', '/people/kai.png', '2')}
${this.aboutUsItem('Lara Sophie Hucklenbroich', '', '/people/lara.png', '3')}
${this.aboutUsItem('RA Pierre Daniel Wittmann', 'Deloitte Legal', '/people/pierre.png', '1')}
${this.aboutUsItem('Elias Künstler', 'Adornis Ventures', '/adornis_logo.png', '2')}
${this.aboutUsItem('Onur Karademir', '', '/people/onur.png', '3')}
${this.aboutUsItem('Dr. Ina Draijer', 'FPS Rechtsanwälte Frankfurt', '/people/ina.png', '1')}
${this.aboutUsItem('Markus Heining', 'Adornis Ventures', '/adornis_logo.png', '2')}
${this.aboutUsItem('Marvin Fechner', 'FPS Rechtsanwälte Frankfurt', '/people/marvin.png', '1')}
</a-grid>
</a-stack>
`;
}
......@@ -173,4 +200,31 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
)}
`;
}
private aboutUsItem(name: string, company: string, image: string, column: string) {
return html`
<a-stack horizontal size="md" class="${this.css({ gridColumn: column, alignItems: 'center' })}">
<img src="${image}" class="${this.css({ height: '75px', display: 'block' })}" />
<a-stack size="sm">
<ccb-h4>${name}</ccb-h4>
<ccb-text>${company}</ccb-h4>
</a-stack>
</a-stack>
`;
}
private wirvsvirusLogo() {
return html`
<img
src="/wirvsviruslogo.png"
class="${this.css({
marginLeft: 'auto',
marginRight: 'auto',
height: '100px',
width: 'auto',
display: 'block',
})}"
/>
`;
}
}
import { element, html, rerender } from '@adornis/base';
import { AdornisDBView, AttributeField } from '@adornis/adornis-components/a-dbview';
import { Content, Country } from 'imports/db/contents';
import { BehaviorSubject, of, combineLatest } from 'rxjs';
import { ifDefined } from 'lit-html/directives/if-defined';
import { takeUntil, distinctUntilChanged, map, switchMap, startWith } from 'rxjs/operators';
import { RenderProps } from '@adornis/base/reactive-lit-element';
import { rxRepeat } from '@adornis/base/rx-repeat';
import { spacing } from '@adornis/design/generate-base/tokens';
const moment = require('moment');
import '@material/mwc-textfield';
import '@material/mwc-icon-button';
import '@adornis/forms/a-file-input';
import '@adornis/adornis-components/a-drop-wrapper';
import '@material/mwc-checkbox';
import { virtualize } from '@adornis/base/when-seen';
import { AdornisDialog } from 'imports/git_modules/adornis-components/a-dialog';
import { listenDevice, BreakPoint } from 'imports/git_modules/base/window-size';
import { repeat } from 'lit-html/directives/repeat';
import { CCBUser } from 'imports/db';
@element('ccb-users-admin')
export class CCBUsersAdmin extends AdornisDBView<CCBUser> {
constructor() {
super();
this.baseQLClass.next(CCBUser);
// AdornisUser.currentUser
// .pipe(takeUntil(this.disconnected))
// .subscribe(user => this.entities.next(Content.find({ createdBy: user?._id }).whenReady));
this.selectedFields
.pipe(
distinctUntilChanged((x, y) => x.length === y.length),
takeUntil(this.disconnected),
)
.subscribe(selectedFields => {
console.log('selectedFields: ', selectedFields);
this.selectedFields.next(selectedFields.filter(f => !['createdAt', 'createdBy'].includes(f)));
});
}
public render({ fields, selectedFields, entities, sorting }: RenderProps<CCBUsersAdmin>) {
return html`
<a-box padding="${listenDevice.pipe(map(device => (device < BreakPoint.laptop ? '' : 'xxl')))}">
<a-stack size="md" padding="lg">
${this.searchBar()} ${this.addNewEntry(fields)}
</a-stack>
<a-grid
class="${this.css({ margin: spacing.lg, overflowX: 'auto' })}"
columns="${selectedFields.length + 1}"
padding="sm"
>
${rxRepeat(entities, (entity, index) =>
this.attributeValueLineDisplay(fields, selectedFields, entity, index),
)}
</a-grid>
</a-box>
`;
}
protected saveField(data: CCBUser, index: number) {
return html`
<a-box ?secondary="${index % 2}" fullsize centered>
${data.dirty.pipe(
map(dirty =>
dirty
? html`
<mwc-icon-button
class="${this.css({ cursor: 'pointer', background: 'green', color: 'white' })}"
@click="${() => {
data.save();
}}"
icon="save"
label="Speichern"
></mwc-icon-button>
`
: '',
),
)}
</a-box>
`;
}
private getField(key: string) {
return this.fields.getValue().find(field => field.name === key);
}
protected attributeSelection() {
return html``;
}
protected fieldDisplays(field: AttributeField, data: CCBUser, index: number, disabled = false) {
switch (field.name) {
case 'Rechtsgebiet':
case 'Frage':
case 'Quelle':
case 'Ansprechpartner':
return html`
<mwc-textfield
style="width: 100%"
.label="${field.name}"
.value="${ifDefined(data[field.name])}"
@input="${e => {
const value = e.currentTarget.value;
if (data[field.name] === value) return;
data[field.name] = value;
}}"
></mwc-textfield>
`;
case 'Antwort':
return html`
<a-writer
class="${this.css({ border: '1px solid lightgrey', padding: spacing.sm })}"
placeholder="Antwort"
.enableEditing="${true}"
.useHTML="${true}"
.string="${ifDefined(data[field.name])}"
@string-changed="${e => {
const value = e.detail.value;
if (data[field.name] === value) return;
data[field.name] = value;
}}"
></a-writer>
`;
default:
return super.fieldDisplays(field, data, index);
}
}
private askForFile = (accept?: string): Promise<string> => {
return new Promise(resolve => {
const input = document.createElement('input');
input.type = 'file';
if (accept) input.accept = accept;
input.onchange = () => {
const fr = new FileReader();
fr.onload = e => resolve(fr.result);
fr.readAsText(
input.files![0],
navigator.platform.indexOf('Linux') !== -1 || navigator.platform.indexOf('Mac') !== -1
? 'UTF-8'
: 'ISO-8859-1',
);
};
input.click();
});
};
}
import { element, html } from '@adornis/base';
import { AdornisDialog } from '@adornis/adornis-components/a-dialog';
import '@adornis/adornis-components/a-email-button';
import { AdornisLayout } from '@adornis/adornis-components/a-layout';
import { AdornisRouter } from '@adornis/adornis-components/a-router';
import { Loader } from '@adornis/adornis-components/loader';
import { element, html } from '@adornis/base';
import { spacing } from '@adornis/design/generate-base/tokens';
import { AdornisRouter } from '@adornis/adornis-components/a-router';
import { map } from 'rxjs/operators';
import { AdornisDialog } from '@adornis/adornis-components/a-dialog';
import { combineLatest } from 'rxjs';
import { AdornisUser } from '@adornis/users/db';
import { RenderProps } from '@adornis/base/reactive-lit-element';
import './ccb-topbar';
import { BehaviorSubject, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import './ccb-admin';
import './ccb-botbar';
import './ccb-datenschutz';
import './ccb-chat';
import './ccb-admin';
import './ccb-content-view';
import './ccb-contents-admin';
import './ccb-datenschutz';
import './ccb-landing-page';
import './ccb-content-view';
import './ccb-topbar';
import './ccb-users-admin';
import { colors } from './globals';
/**
* Entry element which uses AdornisLayout to simply use sidebars and topbars.
......@@ -30,6 +31,15 @@ export class MainElement extends Loader(AdornisLayout) {
public topBar() {
return html`
${Meteor.absoluteUrl().includes('livelinks')
? html`
<div
style="position: absolute; top: 0; left: 0; width: 100%; background-color: red; color: white; font-weight: bold; height: 40px"
>
Hier nicht eintragen, Testumgebung
</div>
`
: ''}
<ccb-topbar @toggle-sidebar="${() => this.toggleLeftSidebar()}"></ccb-topbar>
`;
}
......@@ -49,12 +59,13 @@ export class MainElement extends Loader(AdornisLayout) {
<a-stack endjustified size="md">
<a-link class="${this.css({ cursor: 'pointer' })}" href="/"><ccb-h4>Startseite</ccb-h4></a-link>
<a-link class="${this.css({ cursor: 'pointer' })}" href="/institutes"
><ccb-h4>Institutionen</ccb-h4></a-link
>
<a-link class="${this.css({ cursor: 'pointer' })}" href="/contentadmin"
><ccb-h4>Inhalte hinzufügen</ccb-h4></a-link
>
<a-link class="${this.css({ cursor: 'pointer' })}" href="/aboutus"><ccb-h4>Über Uns</ccb-h4></a-link>
<a-link class="${this.css({ cursor: 'pointer' })}" href="/contentadmin">
<ccb-h4>Inhalte hinzufügen</ccb-h4>
</a-link>
<a-link class="${this.css({ cursor: 'pointer' })}" href="/useradmin">
<ccb-h4>Nutzerverwaltung</ccb-h4>
</a-link>
<ccb-h4 class="${this.css({ cursor: 'pointer' })}" href="/datenschutz">Datenschutz</ccb-h4>
<ccb-h4
class="${this.css({ cursor: 'pointer' })}"
......@@ -94,20 +105,12 @@ export class MainElement extends Loader(AdornisLayout) {
*/
public content() {
return html`
${Meteor.absoluteUrl().includes('livelinks')
? html`
<div
style="position: absolute; top: 0; left: 0; width: 100%; background-color: red; color: white; font-weight: bold;"
>
Hier nicht eintragen, Testumgebung
</div>
`
: ''}
${combineLatest(AdornisRouter.get('page'), AdornisUser.currentUser).pipe(
map(([page, user]) => {
switch (page) {
case '':
case 'institutes':
case 'aboutus':
return html`
<ccb-landing-page></ccb-landing-page>
`;
......@@ -121,6 +124,11 @@ export class MainElement extends Loader(AdornisLayout) {
return html`
<ccb-contents-admin></ccb-contents-admin>
`;
case 'useradmin':
if (!user) return this.login();
return html`
<ccb-users-admin></ccb-users-admin>
`;
case 'datenschutz':
return html`
<ccb-datenschutz></ccb-datenschutz>
......@@ -141,24 +149,55 @@ export class MainElement extends Loader(AdornisLayout) {
private login() {
let username = '';
let password = '';
let error = new BehaviorSubject('');
return html`
<a-stack centered class="${this.css({ width: '100%', height: '100%' })}" size="md">
<ccb-text>
Du kannst eine&nbsp;<b>
<a-link class="${this.css({ color: colors.primary })}" href="/200324_Vorlage_CLCB.xlsx" target="_blank"
>Excel-Datei</a-link
> </b
>&nbsp;runterladen, ausfüllen und per Mail an &nbsp;<b>
<a href="mailto:corona@adornis.de" class="${this.css({ textDecoration: 'none', color: colors.primary })}"
>corona@adornis.de</a
> </b
>&nbsp;senden
</ccb-text>
<ccb-text> ODER </ccb-text>
<ccb-text> dich hier mit deinem Nutzer anmelden </ccb-text>
${error.pipe(
map(errorStr =>
errorStr
? html`
<ccb-text class="${this.css({ color: colors.primary })}">${errorStr}</ccb-text>
`
: '',
),
)}
<mwc-textfield
placeholder="Dein Login-Name"
@change="${e => (username = e.currentTarget.value)}"
@keyup="${e => {
if (e.code === 'Enter') this.performLogin(username.toLowerCase());
if (e.code === 'Enter') this.performLogin(username.toLowerCase(), password, error);
}}"
></mwc-textfield>
<mwc-textfield
placeholder="Passwort"
@change="${e => (password = e.currentTarget.value)}"
@keyup="${e => {
if (e.code === 'Enter') this.performLogin(username.toLowerCase(), password, error);
}}"
></mwc-textfield>
<mwc-button @click="${() => this.performLogin(username.toLowerCase())}">Einloggen</mwc-button>
<mwc-button @click="${() => this.performLogin(username.toLowerCase(), password, error)}">Einloggen</mwc-button>
</a-stack>
`;
}
private performLogin(username: string) {
AdornisUser.requestLogin(username, 'demoAccountPassword').catch(async () => {
await AdornisUser.registerUser(username, 'demoAccountPassword');
AdornisUser.requestLogin(username, 'demoAccountPassword');
private performLogin(username: string, password: string, error: BehaviorSubject<string>) {
AdornisUser.requestLogin(username, password).catch(e => {
console.warn('login gone wrong: ', e);
error.next('Login ist fehlgeschlagen, versuche es erneut');
});
}
}
Subproject commit 093bcd032bfa9c79ccbc0d83eb2ee7d53d81acd6
Subproject commit 794798f260427cf09ea85a317a9686f1ea09074f
Subproject commit 764407ecb2585135e3f9216d3dd2108d086e66c1
Subproject commit 2aa992292f34db72fec830d265c4e28e3daccdd5