You currently have no actions.
);
9 | return = ({ actions }) => {
7 | if(!actions || actions.length < 1) {
8 | const message = (You currently have no tasks.
);
9 | return
10 | };
11 |
12 | return (
13 | <>
14 |
15 | {
16 | actions.map((action : any) => {
17 | return ;
18 | })
19 | }
20 |
21 |
22 | );
23 |
24 | };
25 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Specifies intentionally untracked files to ignore when using Git
2 | # http://git-scm.com/docs/gitignore
3 |
4 | *~
5 | *.sw[mnpcod]
6 | *.log
7 | *.tmp
8 | *.tmp.*
9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | npm-debug.log*
13 |
14 | .idea/
15 | .ionic/
16 | .sourcemaps/
17 | .sass-cache/
18 | .tmp/
19 | .versions/
20 | coverage/
21 | www/
22 | node_modules/
23 | tmp/
24 | temp/
25 | platforms/
26 | plugins/
27 | plugins/android.json
28 | plugins/ios.json
29 | $RECYCLE.BIN/
30 |
31 | .DS_Store
32 | Thumbs.db
33 | UserInterfaceState.xcuserstate
34 | package-lock.json
35 | yarn.lock
36 |
37 | platform/client/ios/
38 | platform/client/android/
39 | platform/client/.gradle/
40 | testApp
41 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | {
8 | "type": "node",
9 | "request": "launch",
10 | "name": "Launch server",
11 | "args": ["${workspaceFolder}/server/src/index.ts"],
12 | "sourceMaps": true,
13 | "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
14 | "outFiles": ["${workspaceFolder}/server/dist/**/*.js"],
15 | "cwd": "${workspaceRoot}/server",
16 | "protocol": "inspector",
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/platform/server/integrations/keycloak/getToken.js:
--------------------------------------------------------------------------------
1 | const tokenRequester = require('keycloak-request-token')
2 |
3 | const username = process.argv[2]
4 | const password = process.argv[3]
5 |
6 | const baseUrl = 'http://localhost:8080/auth';
7 | const settings = {
8 | username: username || 'developer',
9 | password: password || 'developer',
10 | grant_type: 'password',
11 | client_id: 'open-volunteer-platform-public',
12 | realmName: 'open-volunteer-platform'
13 | }
14 |
15 | tokenRequester(baseUrl, settings)
16 | .then((token) => {
17 | const headers = {
18 | Authorization: `Bearer ${token}`
19 | }
20 | console.log(JSON.stringify(headers))
21 | }).catch((err) => {
22 | console.log('err', err)
23 | })
--------------------------------------------------------------------------------
/website/src/pages/styles.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * CSS files with the .module.css suffix will be treated as CSS modules
4 | * and scoped locally.
5 | */
6 |
7 | .heroBanner {
8 | padding: 4rem 0;
9 | text-align: center;
10 | position: relative;
11 | overflow: hidden;
12 | }
13 |
14 | @media screen and (max-width: 966px) {
15 | .heroBanner {
16 | padding: 2rem;
17 | }
18 | }
19 |
20 | .buttons {
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 | }
25 |
26 | .features {
27 | display: flex;
28 | align-items: center;
29 | padding: 2rem 0;
30 | width: 100%;
31 | }
32 |
33 | .featureImage {
34 | height: 200px;
35 | width: 200px;
36 | }
--------------------------------------------------------------------------------
/website/src/components/styles.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * CSS files with the .module.css suffix will be treated as CSS modules
4 | * and scoped locally.
5 | */
6 |
7 | .heroBanner {
8 | padding: 4rem 0;
9 | text-align: center;
10 | position: relative;
11 | overflow: hidden;
12 | }
13 |
14 | @media screen and (max-width: 966px) {
15 | .heroBanner {
16 | padding: 2rem;
17 | }
18 | }
19 |
20 | .buttons {
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 | }
25 |
26 | .features {
27 | display: flex;
28 | align-items: center;
29 | padding: 2rem 0;
30 | width: 100%;
31 | }
32 |
33 | .featureImage {
34 | height: 200px;
35 | width: 200px;
36 | }
--------------------------------------------------------------------------------
/docs/features.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: features
3 | title: Platform features
4 | sidebar_label: Features
5 | ---
6 |
7 | 
8 |
9 |
10 | ## Feature list
11 |
12 | - Open platform for rapid development of volunteer management systems
13 | - Out of the box, secure API exposing your data using role based authorization
14 | - Reference implementations to cover basic use cases
15 | - Out of the box components for forms, communication, and maps
16 | - Live updates and tracking thanks to GraphQL subscriptions
17 | - Optimization of volunteer assignments and various processes
18 | - Rule-based automatic scheduling and time management
19 | - Simplicity in producing reports and collecting feedback from the field
20 | - Offline support and conflict resolution
--------------------------------------------------------------------------------
/platform/client/src/theme/index.ts:
--------------------------------------------------------------------------------
1 | /* Core CSS required for Ionic components to work properly */
2 | import '@ionic/react/css/core.css';
3 |
4 | /* Basic CSS for apps built with Ionic */
5 | import '@ionic/react/css/normalize.css';
6 | import '@ionic/react/css/structure.css';
7 | import '@ionic/react/css/typography.css';
8 |
9 | /* Optional CSS utils that can be commented out */
10 | import '@ionic/react/css/padding.css';
11 | import '@ionic/react/css/float-elements.css';
12 | import '@ionic/react/css/text-alignment.css';
13 | import '@ionic/react/css/text-transformation.css';
14 | import '@ionic/react/css/flex-utils.css';
15 | import '@ionic/react/css/display.css';
16 |
17 | /* Theme variables */
18 | import './variables.css';
19 |
20 | import './styles.css';
21 |
--------------------------------------------------------------------------------
/platform/client/src/forms/distributionCentre.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const distributionCentre = new SimpleSchema({
5 | name: {
6 | type: String,
7 | max: 120
8 | },
9 | address1: {
10 | type: String,
11 | max: 400
12 | },
13 | address2: {
14 | type: String,
15 | required: false,
16 | max: 400
17 | },
18 | city: {
19 | type: String,
20 | required: false,
21 | max: 100
22 | },
23 | postcode: {
24 | type: Number,
25 | required: false,
26 | }
27 | } as any);
28 |
29 | export default new SimpleSchema2Bridge(distributionCentre);
30 |
--------------------------------------------------------------------------------
/platform/client-admin/src/theme/index.ts:
--------------------------------------------------------------------------------
1 | /* Core CSS required for Ionic components to work properly */
2 | import '@ionic/react/css/core.css';
3 |
4 | /* Basic CSS for apps built with Ionic */
5 | import '@ionic/react/css/normalize.css';
6 | import '@ionic/react/css/structure.css';
7 | import '@ionic/react/css/typography.css';
8 |
9 | /* Optional CSS utils that can be commented out */
10 | import '@ionic/react/css/padding.css';
11 | import '@ionic/react/css/float-elements.css';
12 | import '@ionic/react/css/text-alignment.css';
13 | import '@ionic/react/css/text-transformation.css';
14 | import '@ionic/react/css/flex-utils.css';
15 | import '@ionic/react/css/display.css';
16 |
17 | /* Theme variables */
18 | import './variables.css';
19 |
20 | import './styles.css';
21 |
--------------------------------------------------------------------------------
/website/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Layout from '@theme/Layout';
3 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
4 |
5 | import { Hero } from '../components/Hero';
6 | import { Features } from '../components/Features';
7 | import { Terminal } from '../components/Terminal';
8 | import { Video } from '../components/Video';
9 |
10 | function Home() {
11 | const context = useDocusaurusContext();
12 | const { siteConfig = {} } = context;
13 | return (
14 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export default Home;
26 |
--------------------------------------------------------------------------------
/docs/referencegs.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: gettingstartedref
3 | title: Getting Started
4 | sidebar_label: Getting Started
5 | ---
6 |
7 | # Getting Started
8 |
9 | Open Platform for Rapid Development of Volunteer Management Systems
10 |
11 | ## Client side application
12 |
13 | Client side application is dedicated to volunteers.
14 | Reference application affords volunteers 2 types of actions:
15 |
16 | - Delivery of goods
17 | - Phone calls to speak with people in need
18 |
19 | 
20 |
21 | ## Admin application
22 |
23 | Admin application is dedicated to the management of the volounteers and recipients.
24 | It provides insights, reports, and the ability to manage volunteers and the delivery goods.
25 |
26 | 
27 |
--------------------------------------------------------------------------------
/docs/architecture.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: architecture
3 | title: Architecture
4 | sidebar_label: Architecture
5 | ---
6 |
7 | Open Volunteer can be deployed to any cloud provider thanks to
8 | automation for building docker images
9 |
10 | ## Reference deployment
11 |
12 | Open Volunteer Platform is being tested and deployed
13 | to Red Hat Managed Integration
14 |
15 | 
16 |
17 | Organizations can base of simplicity of the deployment
18 | and management thanks to Red Hat Managed Integration managed services like:
19 |
20 | - Red Hat SSO (Keycloak Authentication)
21 | - Red Hat AMQ Online (MQTT protocol broker)
22 | - Red Hat Code Ready (Clound Native Development Environments)
23 | - Red Hat OpenShift Dedicated (base layer for running services)
24 | - MongoDB and Postgress data providers
25 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/ProductList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IonList } from '@ionic/react';
3 | import { Empty } from '../generic/Empty';
4 | import { ProductFieldsFragment } from '../../dataFacade';
5 | import { Product } from './Product';
6 |
7 | export const ProductList: React.FC<{ products: [ProductFieldsFragment] }> = ({ products }) => {
8 | if (!products || products.length < 1) {
9 | const message = (You currently have no products.
);
10 | return
11 | };
12 |
13 | return (
14 | <>
15 |
16 | {
17 | products.map((product: ProductFieldsFragment) => {
18 | return ;
19 | })
20 | }
21 |
22 |
23 | );
24 |
25 | };
26 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/VolunteerList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IonList } from '@ionic/react';
3 | import { Empty } from '../generic/Empty';
4 | import { Volunteer } from './Volunteer';
5 | import { VolunteerFieldsFragment } from '../../dataFacade';
6 |
7 | export const VolunteersList: React.FC<{ volunteers: [VolunteerFieldsFragment] }> = ({ volunteers }) => {
8 | if (!volunteers || volunteers.length < 1) {
9 | const message = (You currently have no volunteers.
);
10 | return
11 | };
12 |
13 | return (
14 | <>
15 |
16 | {
17 | volunteers.map((volunteer: any) => {
18 | return ;
19 | })
20 | }
21 |
22 |
23 | );
24 |
25 | };
26 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/RecipientList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IonList } from '@ionic/react';
3 | import { Empty } from '../generic/Empty';
4 | import { RecipientFieldsFragment } from '../../dataFacade';
5 | import { Recipient } from './Recipient';
6 |
7 | export const RecipientList: React.FC<{ recipients: [RecipientFieldsFragment] }> = ({ recipients }) => {
8 | if (!recipients || recipients.length < 1) {
9 | const message = (You currently have no recipients.
);
10 | return
11 | };
12 |
13 | return (
14 | <>
15 |
16 | {
17 | recipients.map((recipient: RecipientFieldsFragment) => {
18 | return ;
19 | })
20 | }
21 |
22 |
23 | );
24 |
25 | };
26 |
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/admin.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const adminForm = new SimpleSchema({
5 | firstName: {
6 | type: String,
7 | max: 120,
8 | uniforms: {
9 | readonly: true
10 | }
11 | },
12 | lastName: {
13 | type: String,
14 | max: 120,
15 | uniforms: {
16 | readonly: true
17 | }
18 | },
19 | email: {
20 | type: String,
21 | max: 220,
22 | uniforms: {
23 | readonly: true
24 | }
25 | },
26 | username: {
27 | type: String,
28 | max: 220,
29 | uniforms: {
30 | readonly: true
31 | }
32 | }
33 | } as any);
34 |
35 | export default new SimpleSchema2Bridge(adminForm);
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "OpenVolunteerPlatform-website",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "docusaurus start",
7 | "build": "docusaurus build",
8 | "swizzle": "docusaurus swizzle",
9 | "deploy": "docusaurus deploy"
10 | },
11 | "dependencies": {
12 | "@docusaurus/core": "2.0.0-alpha.64",
13 | "@docusaurus/preset-classic": "2.0.0-alpha.63",
14 | "classnames": "2.2.6",
15 | "react": "16.13.1",
16 | "react-dom": "16.13.1"
17 | },
18 | "browserslist": {
19 | "production": [
20 | ">0.2%",
21 | "not dead",
22 | "not op_mini all"
23 | ],
24 | "development": [
25 | "last 1 chrome version",
26 | "last 1 firefox version",
27 | "last 1 safari version"
28 | ]
29 | },
30 | "devDependencies": {
31 | "raw-loader": "4.0.1"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/cli/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const baseConfig = require("../../jest.config");
3 | const packageName = require("./package.json").name;
4 |
5 | module.exports = {
6 | ...baseConfig,
7 | rootDir: '../..',
8 | 'preset': 'ts-jest',
9 | moduleFileExtensions: [
10 | "ts",
11 | "js",
12 | "json",
13 | "jsx",
14 | "tsx",
15 | "node"
16 | ],
17 | roots: [
18 | `/packages/${packageName}`,
19 | ],
20 | collectCoverageFrom: [
21 | `/packages/${packageName}/src/**/*`,
22 | ],
23 | testRegex: '(/tests/.*)\\.(tsx?)$',
24 | testURL: 'http://localhost/',
25 | moduleDirectories: [
26 | 'node_modules',
27 | ],
28 | modulePaths: [
29 | `/packages/${packageName}/src/`,
30 | ],
31 | projects: [`/packages/${packageName}/jest.config.js`],
32 | name: packageName,
33 | displayName: packageName,
34 | rootDir: '../..'
35 | };
36 |
--------------------------------------------------------------------------------
/cli/src/commands/init.ts:
--------------------------------------------------------------------------------
1 | import { Argv } from 'yargs';
2 | import { init } from '../components/init'
3 |
4 | type Params = { name?: string, templateName?: string, templateUrl: string }
5 |
6 | export const command = 'init '
7 |
8 | export const desc = 'Create project from available templates'
9 |
10 | // tslint:disable-next-line: typedef
11 | export const builder = (args: Argv) => {
12 | args.positional('name', {
13 | describe: 'Project name',
14 | type: 'string',
15 | })
16 | args.option('templateName', {
17 | describe: 'Name of the predefined template',
18 | type: 'string'
19 | })
20 | args.option('templateUrl', {
21 | describe: 'GitHub URL of the template. For example (http://github.com/wtrocki/hapijs#master)',
22 | type: 'string'
23 | })
24 | }
25 |
26 | export async function handler({ name, templateName, templateUrl }: Params) {
27 | await init(name, templateName, templateUrl);
28 | }
--------------------------------------------------------------------------------
/platform/client/src/helpers/ConflictLogger.ts:
--------------------------------------------------------------------------------
1 | import { ConflictListener } from 'offix-client';
2 |
3 | export class ConflictLogger implements ConflictListener {
4 | conflictOccurred(operationName:any, resolvedData:any, server:any, client:any) {
5 | console.log("Conflict occurred with the following:")
6 | console.log(`
7 | data: ${JSON.stringify(resolvedData)},
8 | server: ${JSON.stringify(server)},
9 | client: ${JSON.stringify(client)},
10 | operation: ${JSON.stringify(operationName)}
11 | `);
12 | }
13 | mergeOccurred(operationName:any, resolvedData:any, server:any, client:any) {
14 | console.log("Merge occurred with the following:")
15 | console.log(`
16 | data: ${JSON.stringify(resolvedData)},
17 | server: ${JSON.stringify(server)},
18 | client: ${JSON.stringify(client)},
19 | operation: ${JSON.stringify(operationName)}
20 | `);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Node.js CI
5 |
6 | on:
7 | push:
8 | branches: [ master ]
9 | pull_request:
10 | branches: [ master ]
11 |
12 | jobs:
13 | build:
14 |
15 | runs-on: ubuntu-latest
16 |
17 | strategy:
18 | matrix:
19 | node-version: [14.x]
20 |
21 | steps:
22 | - uses: actions/checkout@v2
23 | - name: Use Node.js ${{ matrix.node-version }}
24 | uses: actions/setup-node@v1
25 | with:
26 | node-version: ${{ matrix.node-version }}
27 | - run: npm install -g yarn
28 | - run: cd platform && yarn
29 | - run: cd platform/server && yarn build
30 | - run: cd platform && yarn prepare:client
31 |
32 |
33 |
--------------------------------------------------------------------------------
/website/src/components/Hero/styles.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * CSS files with the .module.css suffix will be treated as CSS modules
4 | * and scoped locally.
5 | */
6 |
7 | .heroBanner {
8 | padding: 4rem 0;
9 | text-align: center;
10 | position: relative;
11 | overflow: hidden;
12 | }
13 |
14 | .heroImage {
15 | width: 60%;
16 | margin: 0 auto;
17 | }
18 |
19 | .heroGraphback {
20 | min-height: calc(100vh - 60px);
21 | background-color: #fff !important;
22 | color: #404040 !important;
23 | }
24 |
25 | @media screen and (max-width: 966px) {
26 | .heroBanner {
27 | padding: 2rem;
28 | }
29 | }
30 |
31 | .buttons {
32 | display: flex;
33 | align-items: center;
34 | justify-content: center;
35 | }
36 |
37 | .features {
38 | display: flex;
39 | align-items: center;
40 | padding: 2rem 0;
41 | width: 100%;
42 | }
43 |
44 | .featureImage {
45 | height: 200px;
46 | width: 200px;
47 | }
--------------------------------------------------------------------------------
/platform/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "declarationDir": "types",
5 | "lib": [
6 | "esnext",
7 | "esnext.asynciterable",
8 | "es2015",
9 | "es2018.promise",
10 | "dom",
11 | "es2016"
12 | ],
13 | "resolveJsonModule": true,
14 | "noImplicitAny": false,
15 | "preserveConstEnums": true,
16 | "strict": false,
17 | "strictNullChecks": true,
18 | "esModuleInterop": true,
19 | "target": "es6",
20 | "module": "commonjs",
21 | "moduleResolution": "node",
22 | "allowSyntheticDefaultImports": true,
23 | "importHelpers": true,
24 | "alwaysStrict": false,
25 | "sourceMap": true,
26 | "declaration": true,
27 | "noImplicitReturns": true,
28 | "noUnusedLocals": false,
29 | "noUnusedParameters": false,
30 | "noImplicitThis": false
31 | },
32 | "exclude": [
33 | "node_modules",
34 | "dist",
35 | "types"
36 | ]
37 | }
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/product.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | export default function createProductSchema(distributionCentres: string[], defaultDistributionCentre: string) {
5 | const productSchema = new SimpleSchema({
6 | label: {
7 | type: String,
8 | max: 50
9 | },
10 | description: {
11 | type: String,
12 | max: 500
13 | },
14 | distributionCentre: {
15 | type: String,
16 | max: 100,
17 | required: false,
18 | uniforms: {
19 | label: "Name of the Distribution Centre",
20 | readonly: false,
21 | defaultValue: defaultDistributionCentre,
22 | allowedValues: distributionCentres
23 | }
24 | },
25 | } as any);
26 |
27 | return new SimpleSchema2Bridge(productSchema)
28 | }
29 |
--------------------------------------------------------------------------------
/platform/client/README.adoc:
--------------------------------------------------------------------------------
1 | = OpenVolunteer React Client
2 |
3 | Example React Web application using AeroGear Open Volunteer Platform
4 |
5 | == Getting Started
6 |
7 | Requirements:
8 |
9 | - Node.js 12.x or above to run server
10 | - (optional) Keycloack server
11 |
12 | === Running the Client in dev mode
13 |
14 |
15 | . Install Ionic
16 | +
17 | ```shell
18 | npm install -g @ionic/cli
19 | ```
20 |
21 | . Install dependencies
22 | +
23 | ```shell
24 | npm install
25 | ```
26 |
27 | . Start the app
28 | +
29 | ```shell
30 | npm run dev
31 | ```
32 |
33 | === Adding keycloak integration to the client
34 |
35 | Rename the `keycloak.example.json` to `keycloak.json` and update the fields
36 | accordingly.
37 |
38 | [source,js]
39 | ----
40 | {
41 | "realm": "",
42 | "auth-server-url": "https://your-server/auth",
43 | "ssl-required": "none",
44 | "resource": "",
45 | "public-client": true,
46 | "use-resource-role-mappings": true,
47 | "confidential-port": 0
48 | }
49 | ----
50 |
51 |
--------------------------------------------------------------------------------
/platform/server/src/config/auth.ts:
--------------------------------------------------------------------------------
1 | import { CrudServicesAuthConfig } from "@graphback/keycloak-authz"
2 |
3 | export const authConfig: CrudServicesAuthConfig = {
4 | DistributionCentre: {
5 | create: { roles: ['admin'] },
6 | read: { roles: [] },
7 | update: { roles: ['admin'] },
8 | delete: { roles: ['admin'] },
9 | },
10 | Volunteer: {
11 | create: { roles: [] },
12 | read: { roles: [] },
13 | update: { roles: [] },
14 | delete: { roles: ['admin'] },
15 | },
16 | Recipient: {
17 | create: { roles: ['admin'] },
18 | read: { roles: [] },
19 | update: { roles: ['admin'] },
20 | delete: { roles: ['admin'] },
21 | },
22 | VolunteerAction: {
23 | create: { roles: ['admin'] },
24 | read: { roles: [] },
25 | update: {roles: [] },
26 | delete: { roles: ['admin'] },
27 | },
28 | VolunteerActionProduct: {
29 | create: { roles: ['admin'] },
30 | read: { roles: [] },
31 | update: { roles: ['admin'] },
32 | delete: { roles: ['admin'] },
33 | },
34 | }
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/distributionCentre.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const distributionCentre = new SimpleSchema({
5 | name: {
6 | type: String,
7 | max: 120
8 | },
9 | address1: {
10 | type: String,
11 | max: 400
12 | },
13 | address2: {
14 | type: String,
15 | max: 400
16 | },
17 | city: {
18 | type: String,
19 | required: false,
20 | max: 100
21 | },
22 | postcode: {
23 | type: Number,
24 | required: false,
25 | },
26 | lat: {
27 | type: Number,
28 | required: true,
29 | uniforms: {
30 | label: "Latitude"
31 | }
32 | },
33 | long: {
34 | type: Number,
35 | required: true,
36 | uniforms: {
37 | label: "Longitude"
38 | }
39 | }
40 | } as any);
41 |
42 | export default new SimpleSchema2Bridge(distributionCentre);
43 |
--------------------------------------------------------------------------------
/platform/client/src/forms/volunteerAction.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const volunteerActionForm = new SimpleSchema({
5 | title: {
6 | type: String,
7 | max: 120,
8 | uniforms: {
9 | readonly: true
10 | }
11 | },
12 | description: {
13 | type: String,
14 | max: 120,
15 | uniforms: {
16 | readonly: true
17 | }
18 | }/*,
19 | products: {
20 | type: String,
21 | max: 220,
22 | uniforms: {
23 | readonly: true
24 | }
25 | },*/,
26 | status: {
27 | type: String,
28 | max: 220,
29 | uniforms: {
30 | readonly: false,
31 | defaultValue: 'ASSIGNED',
32 | allowedValues: [
33 | 'ASSIGNED', 'COMPLETED'
34 | ]
35 | }
36 | },
37 |
38 | } as any);
39 |
40 | export default new SimpleSchema2Bridge(volunteerActionForm);
--------------------------------------------------------------------------------
/platform/server/src/CrudService.ts:
--------------------------------------------------------------------------------
1 |
2 | import { KeycloakCrudService, CrudServiceAuthConfig } from '@graphback/keycloak-authz'
3 | import { ModelDefinition, GraphbackDataProvider, GraphbackCRUDService } from 'graphback';
4 | import { createDataSyncCRUDService } from '@graphback/datasync';
5 | import { getPubSub } from './pubsub';
6 |
7 | /**
8 | * Creates Graphback service with following capabilities:
9 | *
10 | * - DataSync
11 | * - Keycloak
12 | * - AMQ custom topics
13 | *
14 | * @param authConfig
15 | */
16 | export function createKeycloakCRUDService(authConfig: CrudServiceAuthConfig) {
17 | const pubSub = getPubSub();
18 | return (model: ModelDefinition, dataProvider: GraphbackDataProvider): GraphbackCRUDService => {
19 | const service = createDataSyncCRUDService({
20 | pubSub
21 | })(model, dataProvider);
22 | const objConfig = authConfig[model.graphqlType.name];
23 | const authService = new KeycloakCrudService(model, { service, authConfig });
24 |
25 | return authService;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/dailyAction.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const dailyAction = new SimpleSchema({
5 | owner: {
6 | type: String,
7 | max: 120,
8 | uniforms: {
9 | readonly: true
10 | }
11 | },
12 | date: {
13 | type: String,
14 | max: 120,
15 | uniforms: {
16 | readonly: true
17 | }
18 | },
19 | numberOfCasesCreated: {
20 | type: Number,
21 | max: 220,
22 | uniforms: {
23 | readonly: true
24 | }
25 | },
26 | numberOfRecipients: {
27 | type: Number,
28 | max: 220,
29 | uniforms: {
30 | readonly: true
31 | }
32 | },
33 | numberOfVolunteersAssigned: {
34 | type: Number,
35 | max: 220,
36 | uniforms: {
37 | readonly: true
38 | }
39 | }
40 | } as any);
41 |
42 | export default new SimpleSchema2Bridge(dailyAction);
--------------------------------------------------------------------------------
/platform/client/src/forms/recipient.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const recipientSchema = new SimpleSchema({
5 | name: {
6 | type: String,
7 | max: 220,
8 | uniforms: {
9 | readonly: true
10 | }
11 | },
12 | phone: {
13 | type: String,
14 | max: 220,
15 | uniforms: {
16 | readonly: true
17 | }
18 | },
19 | address1: {
20 | type: String,
21 | max: 220,
22 | uniforms: {
23 | readonly: true
24 | }
25 | },
26 | address2: {
27 | type: String,
28 | max: 220,
29 | required: false,
30 | uniforms: {
31 | readonly: true
32 | }
33 | },
34 | prefferedProducts: {
35 | type: String,
36 | max: 220,
37 | uniforms: {
38 | readonly: true
39 | }
40 | }
41 | } as any);
42 |
43 | export default new SimpleSchema2Bridge(recipientSchema);
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/volunteerAction.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const volunteerActionForm = new SimpleSchema({
5 | title: {
6 | type: String,
7 | max: 120,
8 | uniforms: {
9 | readonly: false
10 | }
11 | },
12 | description: {
13 | type: String,
14 | max: 120,
15 | uniforms: {
16 | readonly: false
17 | }
18 | },
19 | products: {
20 | type: String,
21 | max: 220,
22 | required: false,
23 | uniforms: {
24 | readonly: true
25 | }
26 | },
27 | status: {
28 | type: String,
29 | max: 220,
30 | uniforms: {
31 | readonly: false,
32 | defaultValue: 'CREATED',
33 | allowedValues: [
34 | 'CREATED', 'ASSIGNED', 'COMPLETED'
35 | ]
36 | }
37 | },
38 |
39 | } as any);
40 |
41 | export default new SimpleSchema2Bridge(volunteerActionForm);
--------------------------------------------------------------------------------
/website/src/components/Terminal/styles.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * CSS files with the .module.css suffix will be treated as CSS modules
4 | * and scoped locally.
5 | */
6 |
7 | .terminalHeader {
8 | display: flex;
9 | justify-content: center;
10 | align-items: flex-end;
11 | width: 100%;
12 | height: 50vh;
13 | /* background: #e535ab; */
14 | color: #161e26;
15 | font-size: 2.5rem;
16 | font-weight: 300;
17 | }
18 |
19 | .terminal {
20 | height: 50vh;
21 | width: 100%;
22 | /* background: #161e26; */
23 | display: flex;
24 | justify-content: center;
25 | align-items: flex-start;
26 | /* color: #e535ab; */
27 | color: #161e26;
28 | font-size: 4rem;
29 | font-weight: 600;
30 | font-style: 'mono';
31 | }
32 |
33 | .underscore {
34 | display: inline-block;
35 | position: relative;
36 | }
37 |
38 | @media screen and (max-width: 966px) {
39 | .terminalHeader {
40 | height: 25vh;
41 | }
42 | .terminal {
43 | height: 25vh;
44 | font-size: 0.8rem;
45 | font-weight: 400;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/platform/client/src/components/Action.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonItem,
4 | IonButton,
5 | IonLabel,
6 | IonNote,
7 | IonBadge,
8 | IonIcon,
9 | IonButtons
10 | } from '@ionic/react';
11 | import { helpBuoy, open } from 'ionicons/icons';
12 | import { Link } from 'react-router-dom';
13 |
14 | export const Action: React.FC = ({ action }) => {
15 |
16 | return (
17 |
18 |
19 |
20 | {action.title}
21 |
22 | {action.description}
23 |
24 |
25 |
26 |
27 | {action.status}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | );
42 |
43 | };
44 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/Product.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonItem,
4 | IonButton,
5 | IonLabel,
6 | IonNote,
7 | IonIcon,
8 | IonButtons
9 | } from '@ionic/react';
10 | import { cartSharp, open } from 'ionicons/icons';
11 | import { Link } from 'react-router-dom';
12 | import { ProductFieldsFragment } from '../../dataFacade';
13 |
14 | export const Product: React.FC<{ product: ProductFieldsFragment }> = ({ product }) => {
15 | // TODO - link a product to volunteer action. See https://github.com/aerogear/OpenVolunteerPlatform/issues/69
16 |
17 | return (
18 |
19 |
20 |
21 |
22 | {product.label}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 |
37 | };
38 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/Action.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonItem,
4 | IonButton,
5 | IonLabel,
6 | IonNote,
7 | IonBadge,
8 | IonIcon,
9 | IonButtons
10 | } from '@ionic/react';
11 | import { codeWorking, open } from 'ionicons/icons';
12 | import { Link } from 'react-router-dom';
13 |
14 | export const Action: React.FC = ({ action }) => {
15 |
16 | return (
17 |
18 |
19 |
20 | {action.title}
21 |
22 | {action.description}
23 |
24 |
25 |
26 |
27 | {action.status}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | );
42 |
43 | };
44 |
--------------------------------------------------------------------------------
/platform/client/public/assets/shapes.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/platform/client-admin/public/assets/shapes.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/platform/client/src/context/AuthContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { KeycloakInstance, KeycloakProfile } from 'keycloak-js';
3 | import { VolunteerFieldsFragment } from '../dataFacade';
4 |
5 | type VolunteerType = VolunteerFieldsFragment | undefined;
6 |
7 | export interface IAuthContext {
8 | keycloak?: KeycloakInstance | undefined
9 | profile?: KeycloakProfile | undefined
10 | volunteer?: VolunteerType,
11 | setVolunteer: (volunteer: VolunteerType) => void
12 | }
13 |
14 | export const AuthContext = React.createContext({
15 | setVolunteer: () => {}
16 | });
17 |
18 | export const AuthContextProvider = (props: any) => {
19 | const setVolunteer = (volunteer: VolunteerType) => {
20 | setState({...state, volunteer: volunteer})
21 | }
22 |
23 | const authContextInitialState: IAuthContext = {
24 | setVolunteer: setVolunteer,
25 | volunteer: undefined,
26 | ...props.value
27 | }
28 |
29 | const [state, setState] = useState(authContextInitialState)
30 |
31 | return (
32 |
33 | {props.children}
34 |
35 | )
36 | }
--------------------------------------------------------------------------------
/platform/client-admin/src/components/Map.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Map as GoogleMap, GoogleApiWrapper, IMapProps } from 'google-maps-react';
3 |
4 | interface Location {
5 | lat: number
6 | lng: number
7 | }
8 |
9 | interface MapProps {
10 | center: Location,
11 | zoom?: number
12 | }
13 |
14 | class MapContainer extends Component & MapProps> {
15 | render() {
16 | return (
17 |
18 |
31 |
32 | {this.props.children}
33 |
34 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export const Map = GoogleApiWrapper({
41 | apiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY || ""
42 | })(MapContainer)
43 |
--------------------------------------------------------------------------------
/platform/server/src/db.ts:
--------------------------------------------------------------------------------
1 | import { Config } from './config/config';
2 | import e = require('express');
3 | import { resolve } from 'path';
4 |
5 | const MongoClient = require('mongodb').MongoClient;
6 |
7 | export async function connect(config: Config) {
8 | // TODO config
9 | let url: string;
10 |
11 | if (config.db.user && config.db.password) {
12 | url = `mongodb://${config.db.user}:${config.db.password}@${config.db.host}:${config.db.port}/${config.db.database}`;
13 | } else {
14 | url = `mongodb://${config.db.host}:${config.db.port}/${config.db.database}`
15 | }
16 |
17 | if (process.env.BACKUP_DEMO_DATA === 'true') {
18 | const backup = require('mongodb-backup');
19 | backup({
20 | uri: url,
21 | root: resolve(__dirname, '../mongodump')
22 | });
23 | }
24 |
25 | if (process.env.USE_DEMO_DATA === 'true') {
26 | const restore = require('mongodb-restore');
27 | restore({
28 | uri: url,
29 | root: resolve(__dirname, '../mongodump/showcase')
30 | });
31 | }
32 |
33 | // Use connect method to connect to the server
34 | const client = await MongoClient.connect(url, { useUnifiedTopology: true });
35 | const db = client.db(config.db.database);
36 | return db;
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/platform/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Open Volunteer
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/platform/server/src/pubsub.ts:
--------------------------------------------------------------------------------
1 | import mqtt from 'mqtt';
2 | import { PubSub } from 'apollo-server-express';
3 | import { MQTTPubSub } from '@aerogear/graphql-mqtt-subscriptions';
4 |
5 | export function getPubSub() {
6 | const mqttHost = process.env.MQTT_HOST
7 |
8 | if (mqttHost) {
9 | console.log('Using MQTT PubSub')
10 | const mqttOptions = {
11 | host: mqttHost,
12 | servername: mqttHost, // needed to work in OpenShift. Lookup SNI.
13 | username: process.env.MQTT_USERNAME || '',
14 | password: process.env.MQTT_PASSWORD || '',
15 | port: process.env.MQTT_PORT || '1883',
16 | protocol: process.env.MQTT_PROTOCOL || 'mqtt',
17 | rejectUnauthorized: false
18 | }
19 |
20 | // Types are broken
21 | const client = mqtt.connect(mqttHost, mqttOptions as any)
22 |
23 | console.log(`attempting to connect to messaging service ${mqttHost}`)
24 |
25 | client.on('connect', () => {
26 | console.log('connected to messaging service')
27 | })
28 |
29 | client.on('error', (error) => {
30 | console.log('error with mqtt connection')
31 | console.log(error)
32 | })
33 |
34 | return new MQTTPubSub({ client })
35 | }
36 | console.log('Using In Memory PubSub')
37 | return new PubSub()
38 | }
--------------------------------------------------------------------------------
/platform/client-admin/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AeroGear AeroGear OpenVolunteer
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/recipient.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const recipientSchema = new SimpleSchema({
5 | firstName: {
6 | type: String,
7 | max: 220
8 | },
9 | lastName: {
10 | type: String,
11 | max: 220
12 | },
13 | phone: {
14 | type: String,
15 | max: 220
16 | },
17 | address1: {
18 | type: String,
19 | max: 220
20 | },
21 | address2: {
22 | type: String,
23 | max: 220
24 | },
25 | city: {
26 | type: String,
27 | max: 220,
28 | required: false
29 | },
30 | postcode: {
31 | type: Number,
32 | required: false
33 | },
34 | prefferedProducts: {
35 | type: String,
36 | max: 220,
37 | required: false
38 | },
39 | lat: {
40 | type: Number,
41 | required: false,
42 | uniforms: {
43 | label: "Latitude"
44 | }
45 | },
46 | long: {
47 | type: Number,
48 | required: false,
49 | uniforms: {
50 | label: "Longitude"
51 | }
52 | }
53 | } as any);
54 |
55 | export default new SimpleSchema2Bridge(recipientSchema);
56 |
--------------------------------------------------------------------------------
/platform/server/src/index.ts:
--------------------------------------------------------------------------------
1 | import dotenv from 'dotenv';
2 | // Setup env variables
3 | dotenv.config()
4 |
5 | import cors from 'cors';
6 | import express from 'express';
7 | import http from 'http'
8 | import { config } from './config/config'
9 | import { createApolloServer } from './graphql';
10 |
11 | async function start() {
12 | const app = express();
13 |
14 | app.use(cors());
15 | app.use('/', express.static('website'))
16 | app.use('/admin', express.static('admin'))
17 | app.get('/health', (req, res) => res.sendStatus(200));
18 |
19 | const apolloServer = await createApolloServer(app, config);
20 | const httpServer = http.createServer(app)
21 | apolloServer.installSubscriptionHandlers(httpServer)
22 |
23 | httpServer.listen(config.port, () => {
24 | console.log(`\n ***********************************************************
25 | 🎮 Ionic PWA application available at http://localhost:${config.port}
26 | 🎮 Admin PWA application available at http://localhost:${config.port}/admin
27 | ***********************************************************`)
28 | })
29 | }
30 |
31 | start().catch((err) => {
32 | console.error(err);
33 | process.exit(1);
34 | })
35 |
36 |
37 | process.on('unhandledRejection', (error: any) => {
38 | console.error(error.message, error.stack)
39 | process.exit(1)
40 | })
41 |
--------------------------------------------------------------------------------
/platform/client/src/AppContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { clientConfig } from './config';
3 | import { Loading } from './components/Loading';
4 | import { IContainerProps } from './declarations';
5 | import { getKeycloakInstance } from './keycloakAuth';
6 | import { AuthContextProvider } from './context/AuthContext';
7 | import { ApolloClient, ApolloProvider } from '@apollo/client'
8 |
9 | let keycloak: any;
10 | const apolloClient = new ApolloClient(clientConfig);
11 |
12 | export const AppContainer: React.FC = ({ app: App }) => {
13 | const [keycloakInitialized, setKeycloakInitialized] = useState(false);
14 |
15 | // Initialize the client
16 | useEffect(() => {
17 | const init = async () => {
18 | keycloak = await getKeycloakInstance();
19 | if (keycloak) {
20 | await keycloak?.loadUserProfile();
21 | }
22 | setKeycloakInitialized(true);
23 | }
24 | init();
25 | }, []);
26 |
27 | if (!keycloakInitialized || !keycloak.profile) return ;
28 |
29 | // return container with keycloak provider
30 | return (
31 |
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/platform/client-admin/src/AppContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { ApolloProvider, ApolloClient } from '@apollo/client';
3 | import { clientConfig } from './config';
4 | import { Loading } from './components/generic/Loading';
5 | import { IContainerProps } from './declarations';
6 | import { getKeycloakInstance } from './keycloakAuth';
7 | import { AuthContext } from './context/AuthContext';
8 |
9 | let keycloak: any;
10 | const apolloClient = new ApolloClient(clientConfig);
11 |
12 | export const AppContainer: React.FC = ({ app: App }) => {
13 | const [keycloakInitialized, setKeycloakInitialized] = useState(false);
14 |
15 | // Initialize the client
16 | useEffect(() => {
17 | const init = async () => {
18 | keycloak = await getKeycloakInstance();
19 | if (keycloak) {
20 | await keycloak.loadUserProfile();
21 | }
22 | setKeycloakInitialized(true);
23 | }
24 | init();
25 | }, []);
26 |
27 | if (!keycloakInitialized || !keycloak.profile) return ;
28 |
29 | // return container with keycloak provider
30 | return (
31 |
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/createVolunteer.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const volunteerForm = new SimpleSchema({
5 | firstName: {
6 | type: String,
7 | max: 120
8 | },
9 | lastName: {
10 | type: String,
11 | max: 120
12 | },
13 | email: {
14 | type: String,
15 | max: 220,
16 | uniforms: {
17 | type: 'email'
18 | }
19 | },
20 | username: {
21 | type: String,
22 | max: 220
23 | },
24 | address1: {
25 | type: String,
26 | max: 400
27 | },
28 | address2: {
29 | type: String,
30 | max: 400
31 | },
32 | city: {
33 | type: String,
34 | required: false,
35 | max: 100
36 | },
37 | postcode: {
38 | type: Number,
39 | required: false,
40 | },
41 | dateOfBirth: {
42 | type: Date,
43 | required: false,
44 | uniforms: {
45 | label: "Date Of Birth"
46 | }
47 | },
48 | canDeliver: {
49 | type: Boolean,
50 | uniforms: {
51 | label: "Volunteer can do delivery to recipients",
52 | defaultValue: false
53 | }
54 | }
55 | } as any);
56 |
57 | export default new SimpleSchema2Bridge(volunteerForm);
58 |
--------------------------------------------------------------------------------
/platform/client/src/helpers/CapacitorNetworkStatus.ts:
--------------------------------------------------------------------------------
1 | import { NetworkStatus, NetworkStatusChangeCallback } from "offix-offline";
2 | import { Plugins } from '@capacitor/core';
3 | const { Network } = Plugins;
4 |
5 | /**
6 | * Web networks status implementation based on: Mozilla
7 | * See: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
8 | */
9 | export class CapacitorNetworkStatus implements NetworkStatus {
10 |
11 | listeners: NetworkStatusChangeCallback[] = [];
12 |
13 | constructor() {
14 | Network.addListener("networkStatusChange", this.handleNetworkStatusChange.bind(this));
15 | }
16 |
17 | public addListener(listener: NetworkStatusChangeCallback): void {
18 | this.listeners.push(listener);
19 | }
20 |
21 | public removeListener(listener: NetworkStatusChangeCallback): void {
22 | const index = this.listeners.indexOf(listener);
23 | if (index >= 0) {
24 | this.listeners.splice(index, 1);
25 | }
26 | }
27 |
28 | public isOffline(): Promise {
29 | return new Promise(async (resolve) => {
30 | let status = await Network.getStatus();
31 | // @ts-ignore
32 | resolve(!status.connected);
33 | });
34 | }
35 |
36 | private handleNetworkStatusChange(status: any) {
37 | const online = status.connected;
38 | this.listeners.forEach((listener) => {
39 | listener({ online });
40 | });
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { IonHeader, IonToolbar, IonButtons, IonTitle, IonButton, IonIcon } from '@ionic/react';
3 | import { person, exit } from 'ionicons/icons';
4 | import { AuthContext } from '../context/AuthContext';
5 | import { logout } from '../keycloakAuth';
6 | import { Link } from 'react-router-dom';
7 |
8 | export const Header: React.FC<{ title: string, match: any }> = ({ title, match }) => {
9 | const { url } = match;
10 |
11 | const { keycloak } = useContext(AuthContext);
12 |
13 | const handleLogout = async () => {
14 | await logout(keycloak );
15 | return;
16 | }
17 |
18 | // if keycloak is not configured, don't display logout and
19 | // profile icons. Only show login and profile icons on the home
20 | // screen
21 | const buttons = (!keycloak || url !== '/actions') ? <> : (
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | );
33 |
34 | return (
35 | <>
36 |
37 |
38 | {title}
39 | {buttons}
40 |
41 |
42 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/platform/client-admin/README.adoc:
--------------------------------------------------------------------------------
1 | = React Client
2 |
3 | React Web implementation for OpenVolunteer
4 |
5 | == Getting Started
6 |
7 | Requirements:
8 |
9 | - Node.js 12.x or above to run server
10 | - (optional) Keycloack server
11 |
12 | === Running the Client in dev mode
13 |
14 | . Install Ionic
15 | +
16 | ```shell
17 | npm install -g @ionic/cli
18 | ```
19 |
20 | . Install dependencies
21 | +
22 | ```shell
23 | npm install
24 | ```
25 |
26 | . Start the app
27 | +
28 | ```shell
29 | npm run dev
30 | ```
31 |
32 | === Adding keycloak integration to the client
33 |
34 | Rename the `keycloak.example.json` to `keycloak.json` and update the fields
35 | accordingly.
36 |
37 | [source,js]
38 | ----
39 | {
40 | "realm": "",
41 | "auth-server-url": "https://your-server/auth",
42 | "ssl-required": "none",
43 | "resource": "",
44 | "public-client": true,
45 | "use-resource-role-mappings": true,
46 | "confidential-port": 0
47 | }
48 | ----
49 |
50 |
51 | === Customizing the Action Reports Grid
52 |
53 | Column size can be customized via the `REACT_APP_REPORT_COLUMN_SIZE` environment variable. This value can be changed in `.env` file. The default value is `4`.
54 |
55 | === Customizing action report nearby distance
56 |
57 | Nearby distance to calculate actions reports depending on closeness of recipient location can be customized via `REACT_APP_NEARBY_MAX_DISTANCE` environment variable.
58 | This value can be changed in `.env` file. The default value is `100` km.
--------------------------------------------------------------------------------
/platform/server/src/config/config.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 |
4 | export class Config {
5 | public port: string | number
6 | public db: { database: string; user?: string; password?: string; host: string, port: number | string }
7 | public keycloakConfigPath: string
8 | public keycloakConfig: any
9 | public playgroundConfig: { tabs: { endpoint: string; variables: {}; query: string }[] }
10 |
11 | constructor() {
12 | this.port = process.env.PORT || 4000
13 |
14 | this.db = {
15 | database: process.env.MONGO_COLLECTION || 'showcase',
16 | host: process.env.MONGO_HOST || '127.0.0.1',
17 | user: process.env.MONGO_USER,
18 | password: process.env.MONGO_PASSWORD,
19 | port: process.env.MONGO_PORT || 27017
20 | }
21 |
22 | this.keycloakConfigPath = process.env.KEYCLOAK_CONFIG || path.resolve(__dirname, './keycloak.json')
23 | this.keycloakConfig = readConfig(this.keycloakConfigPath)
24 |
25 | this.playgroundConfig = {
26 | tabs: [
27 | {
28 | endpoint: `/graphql`,
29 | variables: {},
30 | query: fs.readFileSync(path.resolve(__dirname, './playground.gql'), 'utf8')
31 | }
32 | ]
33 | }
34 | }
35 | }
36 |
37 | function readConfig(path) {
38 | try {
39 | return JSON.parse(fs.readFileSync(path, 'utf8'))
40 | } catch (e) {
41 | console.error(`Warning: couldn't find keycloak config at ${path}`)
42 | }
43 | }
44 |
45 | export const config = new Config()
--------------------------------------------------------------------------------
/platform/client-admin/src/pages/ProductsPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonPage,
4 | IonFooter,
5 | IonLoading,
6 | IonContent,
7 | IonIcon,
8 | IonFab,
9 | IonFabButton,
10 | } from '@ionic/react';
11 | import { Header } from '../components';
12 | import { RouteComponentProps } from 'react-router';
13 | import { useFindProductsQuery } from '../dataFacade';
14 | import { ProductList } from '../components/model/ProductList';
15 | import { add } from 'ionicons/icons';
16 |
17 |
18 | export const ProductsPage: React.FC = ({ match }) => {
19 | let { data, loading, error } = useFindProductsQuery();
20 |
21 | if (error) {
22 | console.log(error);
23 | }
24 |
25 | if (loading) return ;
29 |
30 | const products = data?.findProducts?.items || [];
31 | const content =
32 |
33 | return (
34 |
35 |
36 |
37 | {content}
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | OpenVolunteer Platform
47 |
48 |
49 |
50 | );
51 |
52 | };
53 |
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/createVolunteerAction.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | export default function createVolunteerActionForm(recipients: string[], volunteers: string[], distributionCentres: string[], products: string[]) {
5 | const volunteerActionForm = new SimpleSchema({
6 | title: {
7 | type: String,
8 | max: 120
9 | },
10 | description: {
11 | type: String,
12 | max: 120
13 | },
14 | recipientName: {
15 | type: String,
16 | max: 220,
17 | uniforms: {
18 | allowedValues: recipients
19 | }
20 | },
21 | volunteerName: {
22 | type: String,
23 | max: 220,
24 | uniforms: {
25 | allowedValues: volunteers
26 | }
27 | },
28 | distributionCentreName: {
29 | type: String,
30 | max: 220,
31 | uniforms: {
32 | allowedValues: distributionCentres
33 | }
34 | },
35 | products: {
36 | type: Array,
37 | uniforms: {
38 | multiple: true,
39 | allowedValues: products
40 | }
41 | },
42 | "products.$": {
43 | type: String
44 | }
45 | } as any);
46 |
47 | return new SimpleSchema2Bridge(volunteerActionForm);
48 | }
49 |
--------------------------------------------------------------------------------
/platform/client/.graphqlrc.yml:
--------------------------------------------------------------------------------
1 | ## GraphQL Config Generated by Graphback
2 | ## Please review configuration and adjust it for your own project
3 | schema: ../server/src/schema/schema.graphql
4 | documents: ./src/graphql/**/*.graphql
5 | extensions:
6 | graphback:
7 | model: ../server/model/**/main.graphql
8 | crud:
9 | create: true
10 | update: true
11 | findOne: true
12 | find: true
13 | delete: false
14 | subCreate: false
15 | subUpdate: false
16 | subDelete: false
17 | plugins:
18 | graphback-schema:
19 | format: graphql
20 | outputPath: ../server/src/schema/schema.graphql
21 | graphback-client:
22 | format: 'graphql'
23 | outputFile: ./src/graphql/graphback.graphql
24 | ## fragmentOnly: true
25 | codegen:
26 | generates:
27 | ./src/dataFacade.tsx:
28 | config:
29 | withComponent: false
30 | withHOC: false
31 | withHooks: true
32 | skipDocumentsValidation: true
33 | scalars:
34 | GraphbackTime: string
35 | GraphbackDate: Date
36 | GraphbackDateTime: Date
37 | GraphbackTimestamp: number
38 | GraphbackObjectID: string
39 | GraphbackJSON: any
40 | GraphbackJSONObject: "{ [key: string]: any }"
41 | plugins:
42 | - add:
43 | content: '/* tslint:disable */'
44 | - typescript
45 | - typescript-operations
46 | - typescript-react-apollo
--------------------------------------------------------------------------------
/platform/client-admin/.graphqlrc.yml:
--------------------------------------------------------------------------------
1 | ## GraphQL Config Generated by Graphback
2 | ## Please review configuration and adjust it for your own project
3 | schema: ../server/src/schema/schema.graphql
4 | documents: ./src/graphql/**/*.graphql
5 | extensions:
6 | graphback:
7 | model: ../server/model/main.graphql
8 | crud:
9 | create: true
10 | update: true
11 | findOne: true
12 | find: true
13 | delete: false
14 | subCreate: false
15 | subUpdate: false
16 | subDelete: false
17 | plugins:
18 | graphback-schema:
19 | format: graphql
20 | outputPath: ../server/src/schema/schema.graphql
21 | graphback-client:
22 | format: 'graphql'
23 | outputFile: ./src/graphql/graphback.graphql
24 | ## fragmentOnly: true
25 | codegen:
26 | generates:
27 | ./src/dataFacade.tsx:
28 | config:
29 | withComponent: false
30 | withHOC: false
31 | withHooks: true
32 | skipDocumentsValidation: true
33 | scalars:
34 | GraphbackTime: string
35 | GraphbackDate: Date
36 | GraphbackDateTime: Date
37 | GraphbackTimestamp: number
38 | GraphbackObjectID: string
39 | GraphbackJSON: any
40 | GraphbackJSONObject: "{ [key: string]: any }"
41 | plugins:
42 | - add:
43 | content: '/* tslint:disable */'
44 | - typescript
45 | - typescript-operations
46 | - typescript-react-apollo
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/Recipient.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonItem,
4 | IonButton,
5 | IonLabel,
6 | IonIcon,
7 | IonButtons,
8 | IonBadge
9 | } from '@ionic/react';
10 | import { peopleCircleSharp, open, callOutline } from 'ionicons/icons';
11 | import { Link } from 'react-router-dom';
12 | import { RecipientFieldsFragment } from '../../dataFacade';
13 |
14 | export const Recipient: React.FC<{ recipient: RecipientFieldsFragment }> = ({ recipient }) => {
15 |
16 | return (
17 |
18 |
19 |
20 | {recipient.firstName} {recipient.lastName}
21 | Deliveries
22 |
23 | {recipient.deliveryDays}
24 |
25 |
26 | Actions Completed
27 |
28 | {recipient.actionsCompleted}
29 |
30 |
31 |
32 | : {recipient.phone}
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | );
45 |
46 | };
47 |
--------------------------------------------------------------------------------
/platform/.openshift/amq.yml:
--------------------------------------------------------------------------------
1 | apiVersion: v1
2 | kind: Template
3 | labels:
4 | template: amq-online-topic-creator
5 | metadata:
6 | name: amq-online-topic-creator
7 | objects:
8 | - apiVersion: enmasse.io/v1beta1
9 | kind: AddressSpace
10 | metadata:
11 | name: ovp
12 | spec:
13 | type: brokered
14 | plan: brokered-single-broker
15 | - apiVersion: enmasse.io/v1beta1
16 | kind: Address
17 | metadata:
18 | name: ovp.${AMQ_ADDRESS}
19 | spec:
20 | address: ${AMQ_ADDRESS}
21 | type: topic
22 | plan: brokered-topic
23 | - apiVersion: user.enmasse.io/v1beta1
24 | kind: MessagingUser
25 | metadata:
26 | name: ovp.${AMQ_USERNAME}
27 | spec:
28 | username: ${AMQ_USERNAME}
29 | authentication:
30 | type: password
31 | password: ${AMQ_USER_PASSWORD}
32 | authorization:
33 | - addresses: ["*"]
34 | operations: ["send", "recv"]
35 | parameters:
36 | - description: Messaging user created in AMQ Online. The showcase server will authenticate with AMQ as this user.
37 | displayName: AMQ Messaging User Name
38 | name: AMQ_USERNAME
39 | value: messaging-user
40 | - description: Create your own password with `$ echo | base64` - the default password is Password1
41 | displayName: AMQ Messaging User Password
42 | name: AMQ_USER_PASSWORD
43 | value: UGFzc3dvcmQx # (base64 encoded) Password1
44 | - description: Address
45 | displayName: AMQ Messaging Address
46 | name: AMQ_ADDRESS
47 | value: graphql
--------------------------------------------------------------------------------
/platform/.openshift/amq-topics.yml:
--------------------------------------------------------------------------------
1 | apiVersion: v1
2 | kind: Template
3 | labels:
4 | template: amq-online-topic-creator
5 | metadata:
6 | name: amq-online-topic-creator
7 | objects:
8 | - apiVersion: enmasse.io/v1beta1
9 | kind: AddressSpace
10 | metadata:
11 | name: datasync
12 | spec:
13 | type: brokered
14 | plan: brokered-single-broker
15 | - apiVersion: enmasse.io/v1beta1
16 | kind: Address
17 | metadata:
18 | name: datasync.${AMQ_ADDRESS}
19 | spec:
20 | address: ${AMQ_ADDRESS}
21 | type: topic
22 | plan: brokered-topic
23 | - apiVersion: user.enmasse.io/v1beta1
24 | kind: MessagingUser
25 | metadata:
26 | name: datasync.${AMQ_USERNAME}
27 | spec:
28 | username: ${AMQ_USERNAME}
29 | authentication:
30 | type: password
31 | password: ${AMQ_USER_PASSWORD}
32 | authorization:
33 | - addresses: ["*"]
34 | operations: ["send", "recv"]
35 | parameters:
36 | - description: Messaging user created in AMQ Online. The showcase server will authenticate with AMQ as this user.
37 | displayName: AMQ Messaging User Name
38 | name: AMQ_USERNAME
39 | value: messaging-user
40 | - description: Create your own password with `$ echo | base64` - the default password is Password1
41 | displayName: AMQ Messaging User Password
42 | name: AMQ_USER_PASSWORD
43 | value: UGFzc3dvcmQx # (base64 encoded) Password1
44 | - description: Address
45 | displayName: AMQ Messaging Address
46 | name: AMQ_ADDRESS
47 | value: graphql
48 |
--------------------------------------------------------------------------------
/platform/client-admin/src/forms/volunteer.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const volunteerForm = new SimpleSchema({
5 | firstName: {
6 | type: String,
7 | max: 120,
8 | uniforms: {
9 | readonly: true
10 | }
11 | },
12 | lastName: {
13 | type: String,
14 | max: 120,
15 | uniforms: {
16 | readonly: true
17 | }
18 | },
19 | email: {
20 | type: String,
21 | max: 220,
22 | uniforms: {
23 | readonly: true,
24 | type: 'email'
25 | }
26 | },
27 | username: {
28 | type: String,
29 | max: 220,
30 | uniforms: {
31 | readonly: true
32 | }
33 | },
34 | address1: {
35 | type: String,
36 | max: 400
37 | },
38 | address2: {
39 | type: String,
40 | max: 400
41 | },
42 | city: {
43 | type: String,
44 | required: false,
45 | max: 100
46 | },
47 | postcode: {
48 | type: Number,
49 | required: false,
50 | },
51 | dateOfBirth: {
52 | type: Date,
53 | required: false,
54 | uniforms: {
55 | label: "Date Of Birth"
56 | },
57 | },
58 | canDeliver: {
59 | type: Boolean,
60 | uniforms: {
61 | label: "Volunteer can do delivers to recipients"
62 | }
63 | }
64 | } as any);
65 |
66 | export default new SimpleSchema2Bridge(volunteerForm);
67 |
--------------------------------------------------------------------------------
/platform/client/samples.graphql:
--------------------------------------------------------------------------------
1 | # Write your query or mutation here
2 |
3 | query findAllVolunteers {
4 | findVolunteers {
5 | items {
6 | id,
7 | firstName,
8 | lastName,
9 | email,
10 | username,
11 | address1,
12 | address2,
13 | city,
14 | postcode,
15 | canDeliver,
16 | actions {
17 | id,
18 | products {
19 | id,
20 | product {
21 | id,
22 | label
23 | }
24 | }
25 | }
26 | }
27 | }
28 | }
29 |
30 |
31 | query findAllRecipients {
32 | findRecipients {
33 | items {
34 | id,
35 | lastName,
36 | firstName,
37 | phone,
38 | address1,
39 | address2,
40 | city,
41 | postcode,
42 | prefferedProducts
43 | }
44 | }
45 | }
46 |
47 | mutation createVolunteerAction {
48 | createVolunteerAction(
49 | input: {
50 | id: ""
51 | title: "Deliver to Mr Boris"
52 | description: "Phone Number: +473020323"
53 | products: "Bread, Pasta, ToiletPaper",
54 | recieverId: "5e8f3eda92787169c1e7cd87"
55 | volunteerId: "5e9782e94b8d743f02b84e79",
56 | status: ASSIGNED
57 | }
58 | ) {
59 | id
60 | title
61 | description
62 | }
63 | }
64 |
65 |
66 | mutation createDistributionCentre {
67 | createDistributionCentre(
68 | input: {
69 | name: "NY Plaza Charity Chain"
70 | address: "Plaza Key"
71 | address2: "Brooklyn"
72 | city: "New York"
73 | lat: "0"
74 | long: "0"
75 | }
76 | ) {
77 | id
78 | }
79 | }
80 |
81 |
--------------------------------------------------------------------------------
/platform/client/src/forms/volunteer.ts:
--------------------------------------------------------------------------------
1 | import SimpleSchema from '../config/SimpleSchema';
2 | import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
3 |
4 | const volunteerForm = new SimpleSchema({
5 | firstName: {
6 | type: String,
7 | max: 120,
8 | uniforms: {
9 | readonly: true
10 | }
11 | },
12 | lastName: {
13 | type: String,
14 | max: 120,
15 | uniforms: {
16 | readonly: true
17 | }
18 | },
19 | email: {
20 | type: String,
21 | max: 220,
22 | uniforms: {
23 | readonly: true,
24 | type: 'email'
25 | }
26 | },
27 | username: {
28 | type: String,
29 | max: 220,
30 | uniforms: {
31 | readonly: true
32 | }
33 | },
34 | address1: {
35 | type: String,
36 | max: 400
37 | },
38 | address2: {
39 | type: String,
40 | required: false,
41 | max: 400
42 | },
43 | city: {
44 | type: String,
45 | max: 100
46 | },
47 | postcode: {
48 | type: Number,
49 | required: false,
50 | },
51 | dateOfBirth: {
52 | type: Date,
53 | required: false,
54 | uniforms: {
55 | label: "Date Of Birth"
56 | },
57 | },
58 | canDeliver: {
59 | type: Boolean,
60 | uniforms: {
61 | label: "I volunteer to do delivery to recipients",
62 | defaultValue: false
63 | }
64 | }
65 | } as any);
66 |
67 | export default new SimpleSchema2Bridge(volunteerForm);
--------------------------------------------------------------------------------
/platform/client-admin/src/pages/VolunteersPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonPage,
4 | IonFooter,
5 | IonLoading,
6 | IonContent,
7 | IonIcon,
8 | IonFab,
9 | IonFabButton,
10 | } from '@ionic/react';
11 | import { Empty, Header } from '../components';
12 | import { RouteComponentProps } from 'react-router';
13 | import { useFindVolunteersQuery } from '../dataFacade';
14 | import { VolunteersList } from '../components/model/VolunteerList';
15 | import { add } from "ionicons/icons";
16 |
17 | export const VolunteersPage: React.FC = ({ match }) => {
18 | let { data, loading, error } = useFindVolunteersQuery()
19 | if (error) {
20 | console.log(error);
21 | }
22 |
23 | if (loading) return ;
27 |
28 | let content;
29 | if (data?.findVolunteers?.items.length !== 0) {
30 | content =
31 | } else {
32 | content = No data!} />;
33 | }
34 |
35 | return (
36 |
37 |
38 |
39 |
40 | {content}
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | OpenVolunteer Platform
50 |
51 |
52 |
53 | );
54 |
55 | };
56 |
--------------------------------------------------------------------------------
/platform/client-admin/src/pages/RecipientsPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonPage,
4 | IonFooter,
5 | IonLoading,
6 | IonContent,
7 | IonIcon,
8 | IonFab,
9 | IonFabButton,
10 | } from '@ionic/react';
11 | import { Empty, Header } from '../components';
12 | import { RouteComponentProps } from 'react-router';
13 | import { useFindRecipientsQuery } from '../dataFacade';
14 | import { RecipientList } from '../components/model/RecipientList';
15 | import { add } from 'ionicons/icons';
16 |
17 | export const RecipientsPage: React.FC = ({ match }) => {
18 | let { data, loading, error } = useFindRecipientsQuery();
19 |
20 | if (error) {
21 | console.log(error);
22 | }
23 |
24 | if (loading) return ;
28 |
29 | let content;
30 | if (data?.findRecipients?.items.length !== 0) {
31 | content =
32 | } else {
33 | content = No data!} />;
34 | }
35 |
36 |
37 | return (
38 |
39 |
40 |
41 |
42 | {content}
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | OpenVolunteer Platform
52 |
53 |
54 |
55 | );
56 |
57 | };
58 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/model/Volunteer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonItem,
4 | IonButton,
5 | IonLabel,
6 | IonBadge,
7 | IonIcon,
8 | IonButtons
9 | } from '@ionic/react';
10 | import { peopleOutline, open } from 'ionicons/icons';
11 | import { Link } from 'react-router-dom';
12 | import { VolunteerFieldsFragment } from '../../dataFacade';
13 |
14 | export const Volunteer: React.FC<{ volunteer: VolunteerFieldsFragment }> = ({ volunteer }) => {
15 |
16 | return (
17 |
18 |
19 |
20 | {volunteer.firstName} {volunteer.lastName}
21 |
22 | {volunteer.canDeliver &&
23 |
24 | Action Type
25 |
26 | Delivery
27 |
28 |
}
29 |
30 | Status
31 |
32 | {volunteer.active ? "Active" : "Inactive"}
33 |
34 |
35 |
36 | Actions Completed
37 |
38 | {volunteer.actionsCompleted}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | );
54 |
55 | };
56 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | jobs:
3 | build:
4 | working_directory: ~/aerogear
5 | docker:
6 | - image: circleci/node:lts
7 | steps:
8 | - checkout
9 | - restore_cache:
10 | key: dependency-cache-{{ checksum "client/package.json" }}-{{checksum "server/package.json"}}
11 | - run:
12 | name: install-dependencies
13 | command: yarn
14 | - run:
15 | name: install-package-dependencies
16 | command: yarn
17 | - save_cache:
18 | key: dependency-cache-{{ checksum "client/package.json" }}-{{checksum "server/package.json"}}
19 | paths:
20 | - ./node_modules
21 | - run:
22 | name: run build
23 | command: "yarn build"
24 |
25 | publish_container:
26 | docker:
27 | # image for building docker containers
28 | - image: circleci/node:lts
29 | steps:
30 | - checkout
31 | - run:
32 | name: install-dependencies
33 | command: yarn
34 | # special workaround to allow running docker in docker https://circleci.com/docs/2.0/building-docker-images/
35 | - setup_remote_docker:
36 | version: 17.05.0-ce
37 | - run: |
38 | yarn
39 | yarn prepare:client
40 | - run: |
41 | cd server
42 | TAG=$CIRCLE_TAG ../scripts/publish_container.sh
43 | workflows:
44 | version: 2
45 | build_and_release:
46 | jobs:
47 | - build:
48 | filters:
49 | tags:
50 | only: /.*/
51 | - publish_container:
52 | filters:
53 | tags:
54 | only: /.*/
55 | branches:
56 | only: ignored
57 |
58 |
59 |
--------------------------------------------------------------------------------
/platform/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "OVP-starter",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "Mono repository for OVP Starter",
6 | "main": "index.js",
7 | "devDependencies": {
8 | "del-cli": "3.0.1",
9 | "graphback-cli": "0.16.2",
10 | "graphql": "15.3.0"
11 | },
12 | "scripts": {
13 | "start:server": "cd server && yarn start",
14 | "start:client": "cd client && yarn start",
15 | "build:server": "cd server && yarn build",
16 | "build:client": "cd client && yarn build",
17 | "removeQueries": "del ./client/src/graphql ; del ./client-admin/src/graphql",
18 | "build:clientGeneric": "cd client/ && yarn build:generic",
19 | "build:adminGeneric": "cd client-admin/ && yarn build:generic",
20 | "prepare:client": "del ./client/build ./server/website ; yarn build:clientGeneric && mv ./client/build/ ./server/website",
21 | "prepare:admin": "del ./client-admin/build ./server/admin ; yarn build:adminGeneric && mv ./client-admin/build/ ./server/admin",
22 | "build": "yarn workspaces run build",
23 | "unlock": "yarn workspaces run del package-lock.json && del yarn.lock",
24 | "clean": "yarn workspaces run del ./dist && del ./types",
25 | "walkthrough": "./scripts/create_walkthrough.sh",
26 | "generate:client": "cd client && yarn graphback generate && yarn graphql codegen",
27 | "generate:admin": "cd client-admin && yarn graphback generate && yarn graphql codegen",
28 | "generate:all": "yarn generate:client && yarn generate:admin",
29 | "prepare:all": "yarn prepare:client && yarn prepare:admin"
30 | },
31 | "workspaces": [
32 | "client",
33 | "client-admin",
34 | "server"
35 | ],
36 | "resolutions": {
37 | "@types/react": "16.9.49"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/platform/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ovp-server-starter",
3 | "version": "1.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "ts-node src/index.ts",
7 | "startMQTT": "MQTT_HOST=127.0.0.1:1883 ts-node src/index.ts",
8 | "build": "tsc",
9 | "keycloak": "docker-compose -f ./integrations/keycloak/docker-compose.yml up",
10 | "keycloak:init": "node ./integrations/keycloak/initKeycloak.js",
11 | "mqtt": "docker-compose -f ./integrations/mqtt/docker-compose.yml up",
12 | "amq:config": "node ./integrations/mqtt/configureAMQ.js"
13 | },
14 | "license": "MIT",
15 | "devDependencies": {
16 | "@types/cors": "2.8.7",
17 | "@types/express": "4.17.0",
18 | "@types/node": "13.13.16",
19 | "keycloak-request-token": "0.1.0",
20 | "ts-node": "8.10.2",
21 | "ts-node-dev": "1.0.0-pre.62",
22 | "tslint": "6.1.3",
23 | "typescript": "3.9.7"
24 | },
25 | "dependencies": {
26 | "@aerogear/graphql-mqtt-subscriptions": "1.1.3",
27 | "@graphback/datasync": "0.16.2",
28 | "@graphback/keycloak-authz": "0.16.2",
29 | "@graphback/runtime-mongo": "0.16.2",
30 | "@graphql-tools/graphql-file-loader": "6.2.6",
31 | "@graphql-tools/load": "6.2.5",
32 | "@types/react": "16.9.49",
33 | "apollo-server-express": "2.17.0",
34 | "cors": "2.8.5",
35 | "dotenv": "8.2.0",
36 | "express": "4.17.1",
37 | "express-session": "1.17.1",
38 | "graphback": "0.16.2",
39 | "graphql": "15.3.0",
40 | "graphql-merge-resolvers": "1.1.16",
41 | "graphql-subscriptions": "1.1.0",
42 | "graphql-tag": "2.11.0",
43 | "keycloak-connect": "10.0.2",
44 | "keycloak-connect-graphql": "0.6.1",
45 | "mongo-seeding": "3.4.1",
46 | "mongodb": "3.6.1",
47 | "mongodb-backup": "1.6.9",
48 | "mongodb-restore": "1.6.2"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/platform/client-admin/src/pages/ActionPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | IonPage,
4 | IonFooter,
5 | IonLoading,
6 | IonContent,
7 | IonIcon,
8 | IonFab,
9 | IonFabButton
10 | } from '@ionic/react';
11 | import { Empty, ActionsList, Header } from '../components';
12 | import { RouteComponentProps } from 'react-router';
13 | import { useFindVolunteerActionsQuery } from '../dataFacade';
14 | import { add, filter } from 'ionicons/icons';
15 |
16 | export const ActionPage: React.FC = ({ match }) => {
17 | const { data, loading, error } = useFindVolunteerActionsQuery();
18 |
19 | if (error) {
20 | console.log(error);
21 | }
22 |
23 | if (loading) return ;
27 |
28 | let content;
29 | if (data?.findVolunteerActions?.items.length !== 0) {
30 | content =
31 | } else {
32 | content = No actions!} />;
33 | }
34 |
35 |
36 | return (
37 |
38 |
39 |
40 |
41 |
42 | {/* TODO add handling */}
43 |
44 |
45 |
46 |
47 | {content}
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | OpenVolunteer Platform
57 |
58 |
59 |
60 | );
61 |
62 | };
63 |
--------------------------------------------------------------------------------
/website/src/css/custom.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * Any CSS included here will be global. The classic template
4 | * bundles Infima by default. Infima is a CSS framework designed to
5 | * work well for content-centric websites.
6 | */
7 |
8 | /* You can override the default Infima variables here. */
9 | :root {
10 | --ifm-color-primary: #23246f;
11 | --ifm-color-primary-dark: #1e1f5e;
12 | --ifm-color-primary-darker: #202064;
13 | --ifm-color-primary-darkest: #23246f;
14 | --ifm-color-primary-light: #27287a;
15 | --ifm-color-primary-lighter: #282980;
16 | --ifm-color-primary-lightest: #2e2f90;
17 | --ifm-code-font-size: 95%;
18 | }
19 |
20 | #__docusaurus {
21 | position: relative;
22 | }
23 |
24 | .docusaurus-highlight-code-line {
25 | background-color: rgb(72, 77, 91);
26 | display: block;
27 | margin: 0 calc(-1 * var(--ifm-pre-padding));
28 | padding: 0 var(--ifm-pre-padding);
29 | }
30 |
31 | .navbar {
32 | box-shadow: none;
33 | }
34 |
35 | .button--rounded {
36 | border-radius: 2rem;
37 | }
38 |
39 | .hero .hero__title {
40 | text-align: center;
41 |
42 | line-height: 3rem;
43 | font-weight: 300;
44 |
45 | /* font-size: 5rem !important; */
46 | }
47 |
48 | .hero__subtitle {
49 | font-size: 3rem;
50 | font-weight: 600;
51 | /* font-size: 5rem !important; */
52 | }
53 |
54 | .hide-modal {
55 | opacity: 0 !important;
56 | visibility: hidden !important;
57 | }
58 |
59 | .hidden {
60 | visibility: hidden;
61 | }
62 |
63 | .card-anchor {
64 | color: #222;
65 | }
66 |
67 | .card-ancher:hover {
68 | text-decoration: none;
69 | }
70 |
71 | a.card-anchor:hover > .card-demo > .card {
72 | border: transparent;
73 | box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
74 | }
75 |
76 | .footer.footer--dark {
77 | background: #00003C !important;
78 | }
--------------------------------------------------------------------------------
/platform/client/src/theme/styles.css:
--------------------------------------------------------------------------------
1 | .list-md {
2 | padding: 0;
3 | }
4 |
5 | .task-item {
6 | padding-bottom: 0;
7 | }
8 |
9 | .item ion-label {
10 | overflow: visible;
11 | white-space: pre-wrap;
12 | }
13 |
14 | ion-note {
15 | padding: 10px;
16 | line-height: 21px;
17 | white-space: pre-wrap;
18 | }
19 |
20 | ion-badge {
21 | vertical-align: middle;
22 | white-space: pre-line;
23 | text-align: left;
24 | }
25 |
26 | ion-footer div {
27 | margin: 10px;
28 | }
29 |
30 | .create-button {
31 | margin-left:15px;
32 | z-index: 9999;
33 | }
34 |
35 | .trash-button {
36 | margin-left:5px;
37 | z-index: 9999;
38 | }
39 |
40 | .network-badge {
41 | float: right;
42 | height: calc(2.1em + 4px);
43 | font-size: 13px;
44 | text-transform: uppercase;
45 | vertical-align: middle;
46 | line-height: calc(2.1em + 4px);
47 | --padding-top: 0;
48 | --padding-bottom: 0;
49 | --padding-start: 0.9em;
50 | --padding-end: 0.9em;
51 | }
52 |
53 | .offline-queue-button {
54 | -webkit-margin-start: 0px;
55 | margin-inline-start: 0px;
56 | }
57 |
58 | .offline-queue-badge {
59 | margin-left: -7px;
60 | vertical-align: top;
61 | }
62 |
63 | .task-item {
64 | padding-bottom: 0;
65 | }
66 |
67 | .list-md {
68 | padding: 0;
69 | }
70 |
71 | .item .sc-ion-label-md-h {
72 | overflow: visible;
73 | white-space: pre-wrap;
74 | }
75 |
76 | ion-note {
77 | padding: 10px;
78 | line-height: 21px;
79 | white-space: pre-wrap;
80 | }
81 |
82 | ion-badge {
83 | vertical-align: middle;
84 | white-space: pre-line;
85 | text-align: left;
86 | }
87 |
88 | .queue-empty {
89 | height: 100%;
90 | display: flex;
91 | align-items: center;
92 | text-align: center;
93 | }
94 |
95 | .queue-empty p {
96 | line-height: 150%
97 | }
98 |
99 | .submit-btn {
100 | margin-top: 30px;
101 | }
--------------------------------------------------------------------------------
/platform/client-admin/src/theme/styles.css:
--------------------------------------------------------------------------------
1 | .list-md {
2 | padding: 0;
3 | }
4 |
5 | .task-item {
6 | padding-bottom: 0;
7 | }
8 |
9 | .item ion-label {
10 | overflow: visible;
11 | white-space: pre-wrap;
12 | }
13 |
14 | ion-note {
15 | padding: 10px;
16 | line-height: 21px;
17 | white-space: pre-wrap;
18 | }
19 |
20 | ion-badge {
21 | vertical-align: middle;
22 | white-space: pre-line;
23 | text-align: left;
24 | }
25 |
26 | ion-footer div {
27 | margin: 10px;
28 | }
29 |
30 | .create-button {
31 | margin-left:15px;
32 | z-index: 9999;
33 | }
34 |
35 | .trash-button {
36 | margin-left:5px;
37 | z-index: 9999;
38 | }
39 |
40 | .network-badge {
41 | float: right;
42 | height: calc(2.1em + 4px);
43 | font-size: 13px;
44 | text-transform: uppercase;
45 | vertical-align: middle;
46 | line-height: calc(2.1em + 4px);
47 | --padding-top: 0;
48 | --padding-bottom: 0;
49 | --padding-start: 0.9em;
50 | --padding-end: 0.9em;
51 | }
52 |
53 | .offline-queue-button {
54 | -webkit-margin-start: 0px;
55 | margin-inline-start: 0px;
56 | }
57 |
58 | .offline-queue-badge {
59 | margin-left: -7px;
60 | vertical-align: top;
61 | }
62 |
63 | .task-item {
64 | padding-bottom: 0;
65 | }
66 |
67 | .list-md {
68 | padding: 0;
69 | }
70 |
71 | .item .sc-ion-label-md-h {
72 | overflow: visible;
73 | white-space: pre-wrap;
74 | }
75 |
76 | ion-note {
77 | padding: 10px;
78 | line-height: 21px;
79 | white-space: pre-wrap;
80 | }
81 |
82 | ion-badge {
83 | vertical-align: middle;
84 | white-space: pre-line;
85 | text-align: left;
86 | }
87 |
88 | .queue-empty {
89 | height: 100%;
90 | display: flex;
91 | align-items: center;
92 | text-align: center;
93 | }
94 |
95 | .queue-empty p {
96 | line-height: 150%
97 | }
98 |
99 | .submit-btn {
100 | margin-top: 30px;
101 | }
--------------------------------------------------------------------------------
/website/src/components/Video/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import classnames from 'classnames';
3 | import useBaseUrl from '@docusaurus/useBaseUrl';
4 | import styles from './styles.module.css';
5 |
6 | function VideoModal({ open, close}) {
7 | console.log(open);
8 | return (
9 |
10 |
11 |
close
12 |
13 |
14 |
26 |
27 |
28 |
45 |
Open Volunteer Platform in 10 minutes
46 |
52 |
Admin user information
45 |
46 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | );
61 |
62 | };
63 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/Menu.css:
--------------------------------------------------------------------------------
1 | ion-menu ion-content {
2 | --padding-top: 20px;
3 | --padding-bottom: 20px;
4 |
5 | --background: var(--ion-item-background, var(--ion-background-color, #fff));
6 | }
7 |
8 | /* Remove background transitions for switching themes */
9 | ion-menu ion-item {
10 | --transition: none;
11 | }
12 |
13 | ion-item.selected {
14 | --color: var(--ion-color-primary);
15 | }
16 |
17 | /*
18 | * Material Design Menu
19 | */
20 | ion-menu.md ion-list {
21 | padding: 20px 0;
22 | }
23 |
24 | ion-menu.md ion-list-header {
25 | padding-left: 18px;
26 | padding-right: 18px;
27 |
28 | text-transform: uppercase;
29 | letter-spacing: .1em;
30 | font-weight: 450;
31 | }
32 |
33 | ion-menu.md ion-item {
34 | --padding-start: 18px;
35 |
36 | margin-right: 10px;
37 |
38 | border-radius: 0 50px 50px 0;
39 |
40 | font-weight: 500;
41 | }
42 |
43 | ion-menu.md ion-item.selected {
44 | --background: rgba(var(--ion-color-primary-rgb), 0.14);
45 | }
46 |
47 | ion-menu.md ion-item.selected ion-icon {
48 | color: var(--ion-color-primary);
49 | }
50 |
51 | ion-menu.md ion-list-header,
52 | ion-menu.md ion-item ion-icon {
53 | color: var(--ion-color-step-650, #5f6368);
54 | }
55 |
56 | ion-menu.md ion-list:not(:last-of-type) {
57 | border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
58 | }
59 |
60 |
61 | /*
62 | * iOS Menu
63 | */
64 | ion-menu.ios ion-list-header {
65 | padding-left: 16px;
66 | padding-right: 16px;
67 |
68 | margin-bottom: 8px;
69 | }
70 |
71 | ion-menu.ios ion-list {
72 | padding: 20px 0 0;
73 | }
74 |
75 | ion-menu.ios ion-item {
76 | --padding-start: 16px;
77 | --min-height: 50px;
78 | }
79 |
80 | ion-menu.ios ion-item ion-icon {
81 | font-size: 24px;
82 | color: #73849a;
83 | }
84 |
85 | ion-menu.ios ion-item.selected ion-icon {
86 | color: var(--ion-color-primary);
87 | }
88 |
89 | ion-col > div {
90 | background-color: #f7f7f7;
91 | border: solid 5px #ddd;
92 | padding: 60px;
93 | }
94 |
--------------------------------------------------------------------------------
/docs/clientref.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: clientref
3 | title: Mobile and Admin Apps
4 | ---
5 | # React Client
6 |
7 | React Web implementation for the Open Volunteer Platform
8 |
9 | ## Getting Started
10 |
11 | * [Running the Client in Developer Mode](#Running-the-Client-in-Developer-Mode)
12 | * [Adding Keycloak Integration to the Client](#Adding-Keycloak-Integration-to-the-Client)
13 | * [Customizing the Action Reports Grid](#Customizing-the-Action-Reports-Grid)
14 | * [Customizing Action Report Nearby Distance](#Customizing-Action-Report-Nearby-Distance)
15 |
16 | **Requirements:**
17 |
18 | * [Node.js 12.x](https://nodejs.org/en/download/current/) or later version
19 | * Keycloak server (_Optional_)
20 |
21 | ### Running the Client in Developer Mode
22 |
23 | 1. Install Ionic
24 |
25 | ```shell
26 | npm install -g @ionic/cli
27 | ```
28 |
29 | 2. Install dependencies
30 |
31 | ```shell
32 | npm install
33 | ```
34 |
35 | 3. Start the app
36 |
37 | ```shell
38 | npm run dev
39 | ```
40 |
41 | ### Adding Keycloak Integration to the Client
42 |
43 | Rename the `keycloak.example.json` to `keycloak.json` and update the fields accordingly.
44 |
45 |
46 | ```
47 | {
48 | "realm": "",
49 | "auth-server-url": "https://your-server/auth",
50 | "ssl-required": "none",
51 | "resource": "",
52 | "public-client": true,
53 | "use-resource-role-mappings": true,
54 | "confidential-port": 0
55 | }
56 | ```
57 |
58 | ### Customizing the Action Reports Grid
59 |
60 | * Column size can be customized by using the `REACT_APP_REPORT_COLUMN_SIZE` environment variable.
61 | * This value can be changed in the `.env` file.
62 | * The default value is `4`.
63 |
64 |
65 | ### Customizing Action Report Nearby Distance
66 |
67 | * Nearby distance to calculate actions reports depending on closeness of recipient location can be customized via `REACT_APP_NEARBY_MAX_DISTANCE` environment variable.
68 | * This value can be changed in `.env` file.
69 | * The default value is `100` km.*
70 |
--------------------------------------------------------------------------------
/website/src/components/Features/styles.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * CSS files with the .module.css suffix will be treated as CSS modules
4 | * and scoped locally.
5 | */
6 |
7 | .splitContainer {
8 | height: 450vh;
9 | width: 100%;
10 | display: block;
11 | }
12 |
13 | .leftSplit,
14 | .rightSplit {
15 | padding-left: var(--ifm-spacing-horizontal);
16 | padding-right: var(--ifm-spacing-horizontal);
17 | }
18 |
19 | .leftSplit {
20 | height: 100vh;
21 | width: 50%;
22 | float: left;
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | background-color: #1B1E59;
27 | color: #fff;
28 | /* padding: ; */
29 | }
30 |
31 | .featureSticky {
32 | position: sticky;
33 | top: 0;
34 | }
35 |
36 | .stickyContent {
37 | max-width: calc(var(--ifm-container-width)/3);
38 | margin-left: auto;
39 | margin-right: auto;
40 | }
41 |
42 | .rightSplit {
43 | float: right;
44 | width: 50%;
45 | /* background-image: linear-gradient(150deg, #686BA6, #1B1E59) */
46 | background-image: linear-gradient(150deg, #e535ab, #1B1E59)
47 | }
48 |
49 | .splitRow {
50 | height: 100vh;
51 | display: flex;
52 | justify-content: center;
53 | align-items: center;
54 | max-width: calc(var(--ifm-container-width)/3);
55 | margin-left: auto;
56 | margin-right: auto;
57 | color: #fff;
58 | }
59 |
60 | .splitRow.before,
61 | .splitRow.after {
62 | height: 75vh;
63 | }
64 |
65 | @media screen and (max-width: 966px) {
66 | .splitContainer {
67 | height: 100%;
68 | }
69 | .leftSplit, .rightSplit {
70 | width: 100%;
71 | }
72 |
73 | .leftSplit, .splitRow {
74 | height: 50vh;
75 | }
76 |
77 | .splitRow.before,
78 | .splitRow.after {
79 | display: none;
80 | height: 25vh;
81 | }
82 |
83 | }
84 |
85 | .featureImage {
86 | /* height: 200px; */
87 | width: 200px;
88 | margin-bottom: 1rem;
89 | }
90 |
91 | .featureTitle {
92 | font-size: 2rem;
93 | font-weight: 600;
94 | }
--------------------------------------------------------------------------------
/cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "openvp",
3 | "version": "0.5.1",
4 | "description": "Command line tool for Open Voluteer Platform",
5 | "main": "dist/index.js",
6 | "bin": {
7 | "openvp": "dist/index.js"
8 | },
9 | "types": "types/index.d.ts",
10 | "typescript": {
11 | "definition": "types/index.d.ts"
12 | },
13 | "author": "wtrocki@redhat.com",
14 | "scripts": {
15 | "clean": "rimraf coverage dist types",
16 | "build": "tsc",
17 | "cmdinit": "ts-node ./dist/index.js init test",
18 | "watch": "tsc -w",
19 | "lint": "eslint -t stylish --project \"tsconfig.json\"",
20 | "test": "jest"
21 | },
22 | "engines": {
23 | "node": "14.9.0"
24 | },
25 | "devDependencies": {
26 | "@types/chalk": "0.4.31",
27 | "@types/inquirer": "6.5.0",
28 | "@types/jest": "25.2.3",
29 | "@types/js-yaml": "3.12.5",
30 | "@types/node": "12.12.55",
31 | "@types/node-emoji": "1.8.1",
32 | "@types/through": "0.0.30",
33 | "@types/yargs": "15.0.5",
34 | "jest": "26.6.3",
35 | "lint-staged": "10.3.0",
36 | "ncp": "2.0.0",
37 | "rimraf": "3.0.2",
38 | "ts-jest": "25.5.1",
39 | "ts-node": "8.10.2",
40 | "tsutils": "3.17.1",
41 | "typescript": "3.9.7",
42 | "typescript-eslint-parser": "21.0.2"
43 | },
44 | "dependencies": {
45 | "chalk": "2.4.2",
46 | "chokidar": "3.4.2",
47 | "debounce": "1.2.0",
48 | "execa": "4.0.3",
49 | "figlet": "1.5.0",
50 | "glob": "7.1.6",
51 | "inquirer": "7.3.3",
52 | "node-emoji": "1.10.0",
53 | "ora": "3.4.0",
54 | "parse-github-url": "1.0.2",
55 | "request": "2.88.2",
56 | "tar": "6.0.5",
57 | "tmp": "0.2.1",
58 | "yargs": "15.4.1"
59 | },
60 | "jest": {
61 | "transform": {
62 | "^.+\\.tsx?$": "/node_modules/ts-jest/preprocessor.js"
63 | },
64 | "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
65 | "moduleFileExtensions": [
66 | "ts",
67 | "tsx",
68 | "js",
69 | "json",
70 | "jsx"
71 | ]
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/docs/gettingstarted.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: gettingstarted
3 | title: Introduction to OpenVolunteerPlatform
4 | sidebar_label: Overview
5 | ---
6 |
7 | Open Platform for Rapid Development of Volunteer Management Systems
8 |
9 | ## Motivation
10 |
11 | The OpenVolunteerPlatform allows you to automate and optimize volunteer work for your
12 | organization or charity so that volunteers can deliver help when needed.
13 |
14 | Platform helps connect people in need with volunteers who can provide support, while adhering to social-distancing measures. It keeps individuals safe and out of danger, while alleviating the pressure on public services, the healthcare infrastructure, and other services that provide essentials to those in need during crisis.
15 |
16 | Platform facilitates organizational flexibility by offering a ready to use reference implementation
17 | containing volunteer and admin applications, as well as tools to organize and schedule volunteer work.
18 | It eases the customization of reference implementations for your own use cases and integrations, by using an autogenerated and secure backend along with client-side components that wrap your data.
19 |
20 | By empowering communities to collaborate through software, our volunteers can easily organize the collection and delivery of goods while practicing effective social distancing.
21 |
22 | For more information watch our motivation video:
23 |
24 | [](https://www.youtube.com/watch?v=mu9Rnu6Q9_o)
25 |
26 | Open Volunteer in action:
27 |
28 | [](https://www.youtube.com/watch?v=_cn_ZoZLq5g)
29 |
30 |
31 | Are you interested in deploying OpenVolunteer for your organization
32 | feel free to reach out to us for free training sessions.
33 |
34 | ## Reference implementation
35 |
36 | 
37 |
38 | OpenVolunteerPlatform provides reference admin and volunteer applications that can be used to help on a national or regional scale.
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/platform/server/src/graphql.ts:
--------------------------------------------------------------------------------
1 | import { resolve } from 'path';
2 | import { connect } from './db';
3 | import { Config } from './config/config';
4 | import { ApolloServer, ApolloServerExpressConfig } from "apollo-server-express";
5 | import { Express } from "express";
6 | import customResolvers from './resolvers/custom-resolvers';
7 | import { buildKeycloakApolloConfig } from './auth';
8 | import { createKeycloakCRUDService } from './CrudService'
9 | import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader'
10 | import { loadSchemaSync } from '@graphql-tools/load'
11 | import { buildGraphbackAPI } from "graphback"
12 | import { createMongoDbProvider } from "@graphback/runtime-mongo"
13 | import { authConfig } from './config/auth';
14 | import GMR from 'graphql-merge-resolvers';
15 |
16 | /**
17 | * Creates Apollo server
18 | */
19 | export const createApolloServer = async function (app: Express, config: Config) {
20 | const db = await connect(config);
21 |
22 | const modelDefs = loadSchemaSync(resolve(__dirname, '../model/main.graphql'), {
23 | loaders: [
24 | new GraphQLFileLoader()
25 | ]
26 | })
27 |
28 | const { typeDefs, resolvers, contextCreator } = buildGraphbackAPI(modelDefs, {
29 | serviceCreator: createKeycloakCRUDService(authConfig),
30 | dataProviderCreator: createMongoDbProvider(db)
31 | });
32 | // TODO enable custom resolvers
33 | const mergedResolvers: any = GMR.merge([resolvers, customResolvers]);
34 | let apolloConfig: ApolloServerExpressConfig = {
35 | typeDefs: typeDefs,
36 | resolvers: mergedResolvers,
37 | playground: true,
38 | context: (context) => {
39 | return {
40 | ...contextCreator(context),
41 | db: db
42 | }
43 | }
44 | }
45 |
46 | if (config.keycloakConfig) {
47 | apolloConfig = buildKeycloakApolloConfig(app, apolloConfig)
48 | }
49 |
50 | const apolloServer = new ApolloServer(apolloConfig)
51 | apolloServer.applyMiddleware({ app });
52 |
53 | return apolloServer;
54 | }
55 |
--------------------------------------------------------------------------------
/platform/client/src/components/Router.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import {
3 | HashRouter as AppRouter,
4 | Switch,
5 | Redirect,
6 | Route,
7 | } from 'react-router-dom';
8 | import { IonApp } from '@ionic/react';
9 | import { ActionPage, ProfilePage } from '../pages';
10 | import { ViewActionPage } from '../pages/ViewActionPage';
11 | import { AuthContext, AuthContextProvider } from '../context/AuthContext';
12 | import { useFindActiveVolunteerLazyQuery, VolunteerFieldsFragment } from '../dataFacade';
13 | import { Loading } from './Loading';
14 | import { volunteerTransformer } from '../transformer/volunteerTransformer';
15 |
16 | export const Router: React.FC = () => {
17 | const { profile, keycloak } = useContext(AuthContext);
18 |
19 | let [findVolunteerQuery, { data, loading, error, called }] = useFindActiveVolunteerLazyQuery({
20 | fetchPolicy: "network-only"
21 | });
22 |
23 | if (loading) {
24 | return ;
25 | }
26 |
27 | if (error) {
28 | console.log(`Error when fetching user ${error}`)
29 | return (<>`Error`)
30 | }
31 |
32 | if (profile?.username && !called) {
33 | findVolunteerQuery({ variables: { username: profile?.username } });
34 | }
35 |
36 | let volunteer: VolunteerFieldsFragment | undefined;
37 |
38 |
39 | if (data?.findVolunteers?.items.length === 1 && data?.findVolunteers.items[0]) {
40 | volunteer = volunteerTransformer(data.findVolunteers.items[0]);
41 | }
42 |
43 | return (
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | volunteer ?
52 | :
53 | } />
54 |
55 |
56 |
57 |
58 | );
59 | }
--------------------------------------------------------------------------------
/platform/client-admin/src/keycloakAuth.ts:
--------------------------------------------------------------------------------
1 | import Keycloak, { KeycloakInstance } from 'keycloak-js';
2 |
3 | export let keycloak: KeycloakInstance | undefined;
4 |
5 | /**
6 | * Get keycloak instance
7 | *
8 | * @return an initiated keycloak instance or `undefined`
9 | * if keycloak isn't configured
10 | *
11 | */
12 | export const getKeycloakInstance = async () => {
13 | if (!keycloak) await init();
14 | return keycloak;
15 | }
16 |
17 | /**
18 | * Initiate keycloak instance.
19 | *
20 | * Set keycloak to undefined if
21 | * keycloak isn't configured
22 | *
23 | */
24 | export const init = async () => {
25 | try {
26 | keycloak = new (Keycloak as any )();
27 | if (keycloak) {
28 | await keycloak.init({
29 | onLoad: 'login-required'
30 | });
31 | }
32 | } catch {
33 | keycloak = undefined;
34 | console.warn('Auth: Unable to initialize keycloak. Client side will not be configured to use authentication');
35 | }
36 | }
37 |
38 |
39 | /**
40 | * This function keeps getting called by wslink
41 | * connection param function, so carry out
42 | * an early return if keycloak is not initialized
43 | * otherwise get the auth token
44 | *
45 | * @return authorization header or empty string
46 | *
47 | */
48 | export const getAuthHeader = async () => {
49 | if (!keycloak) return '';
50 | return {
51 | 'authorization': `Bearer ${await getKeyCloakToken()}`
52 | };
53 | };
54 |
55 |
56 | /**
57 | * Use keycloak update token function to retrieve
58 | * keycloak token
59 | *
60 | * @return keycloak token or empty string if keycloak
61 | * isn't configured
62 | *
63 | */
64 | const getKeyCloakToken = async () => {
65 | await keycloak?.updateToken(50);
66 | if (keycloak?.token) return keycloak.token;
67 | console.error('No keycloak token available');
68 | return '';
69 | }
70 |
71 | /**
72 | * logout of keycloak then redirect to keycloak login page
73 | *
74 | * @param keycloak the keycloak instance
75 | *
76 | */
77 | export const logout = async (keycloak: Keycloak.KeycloakInstance | undefined) => {
78 | if(keycloak) {
79 | await keycloak.logout();
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/website/src/components/Hero/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames';
3 | import components from '@theme/MDXComponents';
4 | import useBaseUrl from '@docusaurus/useBaseUrl';
5 | import Link from '@docusaurus/Link';
6 | import styles from './styles.module.css';
7 |
8 | export function Hero({ siteConfig }) {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
{siteConfig.tagline}
18 |
19 | - Open Platform for Rapid Development of Volunteer Management Systems
20 | - Reference implementation to cover most of the use cases
21 | - Out of the box, GraphQL Compliant API
22 | - Components for Dynamic Forms and Maps
23 | - Keycloak based security and Role Based Authentication
24 | - Live updates using GraphQL subscriptions
25 |
26 |
27 |
33 | Get Started
34 |
35 |
36 |
37 | {/*
38 |
39 |
40 |
41 | {
42 | `${require('!!raw-loader!../../schema/datamodel.gql').default}`
43 | }
44 |
45 |
46 |
47 |
*/}
48 |
49 |
62 | OpenVolunteer Platform
63 |
64 |
65 |
66 | );
67 |
68 | };
69 |
--------------------------------------------------------------------------------
/platform/.openshift/README.md:
--------------------------------------------------------------------------------
1 | ## OpenShift templates
2 |
3 | ### Starter App template
4 |
5 | Name: `datasync-app-template.yml`
6 |
7 | This template starts datasync container on top of the mongodb instances:
8 |
9 | #### Prerequisites
10 |
11 | 1. Running MongoDB instance
12 | 2. Connection details to MongoDB server
13 |
14 | #### Steps
15 |
16 | 1. Add template to your openshift
17 | 2. Provide MongoDB connection details
18 | 3. Wait for the pods to start
19 |
20 | # Deploying Server with AMQ
21 |
22 | Prerequisites
23 |
24 | * AMQ Online is installed in the cluster
25 |
26 |
27 | This section describes how to deploy the application in an OpenShift cluster by using the supplied `amq-topics.yml` template file.
28 | * The template is already prefilled with all of the necessary values that can be inspected
29 | * The only field you might want to change is `AMQ Messaging User Password`.
30 | * The default value is `Password1` in base64 encoding
31 | * The value *must* be base64 encoded
32 | * A custom value can be created in the terminal using `$ echo | base64`
33 | * Execute template on your openshift instance by `oc process -f amq-topics.yml | oc create -f -`
34 |
35 | The hostname for the AMQ Online Broker is only made available after the resources from the the template have been provisioned. One more step is needed to supply extra environment variables to running server.
36 |
37 | * From the terminal, ensure you have the correct namespace selected.
38 |
39 | ```
40 | oc project
41 | ```
42 |
43 | * Update the deployment to add the `MQTT_HOST` variable.
44 |
45 | ```
46 | oc get addressspace datasync -o jsonpath='{.status.endpointStatuses[?(@.name=="messaging")].serviceHost}'
47 | ```
48 |
49 | If you want to use service outside the OpenShift cluster please request external URL:
50 | ```
51 | oc get addressspace datasync -o jsonpath='{.status.endpointStatuses[?(@.name=="messaging")].externalHost}'
52 | ```
53 |
54 | Provide set of the environment variables required to connect to the running AMQ
55 |
56 | ```
57 | MQTT_HOST=messaging-nj2y0929dk-redhat-rhmi-amq-online.apps.youropenshift.io
58 | MQTT_PORT=443
59 | MQTT_PASSWORD=Password1
60 | MQTT_USERNAME=messaging-user
61 | MQTT_PROTOCOL=tls
62 | ```
63 |
64 | Check `../server/.env` file for all available variables
65 |
--------------------------------------------------------------------------------
/platform/client/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react';
2 | import { IonHeader, IonToolbar, IonButtons, IonTitle, IonToast, IonButton, IonIcon } from '@ionic/react';
3 | import { person, exit, arrowBack } from 'ionicons/icons';
4 | import { AuthContext } from '../context/AuthContext';
5 | import { logout } from '../keycloakAuth';
6 | import { Link } from 'react-router-dom';
7 | import { useApolloClient } from "@apollo/client"
8 |
9 | export const Header: React.FC<{ title: string, backHref?: string, match: any }> = ({ title, backHref, match }) => {
10 |
11 | const { url } = match;
12 | const client = useApolloClient();
13 | const { keycloak } = useContext(AuthContext);
14 | const [showToast, setShowToast] = useState(false);
15 |
16 | const handleLogout = async () => {
17 | await logout({ keycloak, client });
18 | }
19 |
20 | // if keycloak is not configured, don't display logout and
21 | // profile icons. Only show login and profile icons on the home
22 | // screen
23 | const buttons = (!keycloak || url !== '/actions') ? <> : (
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | );
35 |
36 | return (
37 | <>
38 |
39 |
40 | {
41 | url !== '/actions' &&
42 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | }
54 | {title}
55 | {buttons}
56 |
57 |
58 | setShowToast(false)}
61 | message="You are currently offline. Unable to logout."
62 | position="top"
63 | color="danger"
64 | duration={1000}
65 | />
66 |
67 | );
68 | };
69 |
--------------------------------------------------------------------------------
/platform/client/src/keycloakAuth.ts:
--------------------------------------------------------------------------------
1 | import Keycloak, { KeycloakInstance } from 'keycloak-js';
2 | import { ILogoutParams } from './declarations';
3 |
4 | export let keycloak: KeycloakInstance | undefined;
5 |
6 | /**
7 | * Get keycloak instance
8 | *
9 | * @return an initiated keycloak instance or `undefined`
10 | * if keycloak isn't configured
11 | *
12 | */
13 | export const getKeycloakInstance = async () => {
14 | if (!keycloak) await init();
15 | return keycloak;
16 | }
17 |
18 | /**
19 | * Initiate keycloak instance.
20 | *
21 | * Set keycloak to undefined if
22 | * keycloak isn't configured
23 | *
24 | */
25 | export const init = async () => {
26 | try {
27 | keycloak = new (Keycloak as any )();
28 | if (keycloak) {
29 | await keycloak.init({
30 | onLoad: 'login-required'
31 | });
32 | }
33 | } catch {
34 | keycloak = undefined;
35 | console.warn('Auth: Unable to initialize keycloak. Client side will not be configured to use authentication');
36 | }
37 | }
38 |
39 |
40 | /**
41 | * This function keeps getting called by wslink
42 | * connection param function, so carry out
43 | * an early return if keycloak is not initialized
44 | * otherwise get the auth token
45 | *
46 | * @return authorization header or empty string
47 | *
48 | */
49 | export const getAuthHeader = async () => {
50 | if (!keycloak) return '';
51 | return {
52 | 'authorization': `Bearer ${await getKeyCloakToken()}`
53 | };
54 | };
55 |
56 |
57 | /**
58 | * Use keycloak update token function to retrieve
59 | * keycloak token
60 | *
61 | * @return keycloak token or empty string if keycloak
62 | * isn't configured
63 | *
64 | */
65 | const getKeyCloakToken = async () => {
66 | await keycloak?.updateToken(50);
67 | if (keycloak?.token) return keycloak.token;
68 | console.error('No keycloak token available');
69 | return '';
70 | }
71 |
72 | /**
73 | * logout of keycloak, clear cache and offline store then redirect to
74 | * keycloak login page
75 | *
76 | * @param keycloak the keycloak instance
77 | * @param client offix client
78 | *
79 | */
80 | export const logout = async ({ keycloak, client: apolloClient } : ILogoutParams) => {
81 | if(keycloak) {
82 | await keycloak.logout();
83 | // clear offix client offline store
84 | await apolloClient.resetStore();
85 | // clear offix client cache
86 | await apolloClient.cache.reset();
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/platform/client-admin/src/pages/SchedulePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useFindDailyActionPlansQuery, useAssignVolunteersMutation } from '../dataFacade';
3 | import { IonLoading, IonPage, IonContent, IonFooter, IonItemDivider, IonCard, IonButton } from '@ionic/react';
4 | import { Header } from '../components';
5 | import dailyActionForm from '../forms/dailyAction'
6 | import { RouteComponentProps } from 'react-router-dom';
7 | import { AutoForm, AutoFields, ErrorsField } from 'uniforms-ionic';
8 |
9 | export const SchedulePage: React.FC = ({ match }) => {
10 | const { data, loading, error } = useFindDailyActionPlansQuery();
11 | const [dailyPlan, setDailyPlan] = useState({})
12 | const [assignVolunteer] = useAssignVolunteersMutation();
13 | if (error) {
14 | console.log(error);
15 | }
16 |
17 | let content = (No scheduler run today
)
18 | const submit = () => {
19 | assignVolunteer().then((result) => {
20 | setDailyPlan({...result.data?.assignVolunteers});
21 | }).catch((error) => {
22 | console.log("Failure", error);
23 | })
24 | }
25 | if (loading) return ;
26 | if (!Object.keys(dailyPlan).length && data?.findDailyActionPlans && data?.findDailyActionPlans.items && data?.findDailyActionPlans.items.length !== 0) {
27 | const items = data?.findDailyActionPlans.items
28 | setDailyPlan({...items[items.length - 1]});
29 | }
30 |
31 | if (Object.keys(dailyPlan)) {
32 | content = (
33 |
39 |
40 |
41 |
42 |
43 |
44 | )
45 | }
46 |
47 | return (
48 |
49 |
50 |
51 |
52 |
53 | Last scheduled daily assignments
54 |
55 |
56 | {content}
57 |
58 | submit()}>Schedule daily assignments
59 |
60 |
61 |
62 |
63 | OpenVolunteer Platform
64 |
65 |
66 |
67 | );
68 | };
69 |
--------------------------------------------------------------------------------
/docs/integrations_graphback_keycloak.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: keycloak-authz
3 | title: Out of the box Keycloak based authentication
4 | sidebar_label: Keycloak Auth
5 | ---
6 |
7 | ## Authorization using Keycloak
8 |
9 | Graphback Keycloak Authz enables [Keycloak](https://www.keycloak.org/) integration in [Graphback](https://graphback.dev) based applications. This enables you to declaratively add authorization capabilities like role based access on top of the CRUD model that is used within the Open Volunteer Platform.
10 |
11 |
12 | Under the hood, Open Volunteer authorization is designed to work with [`keycloak-connect`](https://www.npmjs.com/package/keycloak-connect) and [`keycloak-connect-graphql`](https://www.npmjs.com/package/keycloak-connect-graphql). `keycloak-connect` is the official Keycloak middleware for Express applications. `keycloak-connect-graphql` provides deeper Keycloak integration into GraphQL servers.
13 |
14 |
15 | ## Customization
16 |
17 |
18 | Open Volunteer Platform provides out of the box Keycloak integration.
19 |
20 | The authorization rules in place are defined in [`server/src/config/auth.ts`](../platform/server/src/config/auth.ts). The initial configurations looks like below:
21 |
22 | ```ts
23 | export const authConfig: CrudServicesAuthConfig = {
24 | DistributionCentre: {
25 | create: { roles: ['admin'] },
26 | read: { roles: [] },
27 | update: { roles: ['admin'] },
28 | delete: { roles: ['admin'] },
29 | },
30 | Volunteer: {
31 | create: { roles: ['admin'] },
32 | read: { roles: [] },
33 | update: { roles: [] },
34 | delete: { roles: ['admin'] },
35 | },
36 | Recipient: {
37 | create: { roles: ['admin'] },
38 | read: { roles: [] },
39 | update: { roles: ['admin'] },
40 | delete: { roles: ['admin'] },
41 | },
42 | VolunteerAction: {
43 | create: { roles: ['admin'] },
44 | read: { roles: [] },
45 | update: { roles: ['admin'] },
46 | delete: { roles: ['admin'] },
47 | },
48 | VolunteerActionProduct: {
49 | create: { roles: ['admin'] },
50 | read: { roles: [] },
51 | update: { roles: ['admin'] },
52 | delete: { roles: ['admin'] },
53 | },
54 | }
55 | ```
56 |
57 | With this configuration the following rules are in place.
58 |
59 | - Only Admin users can create, update and delete entities, and all users can read them.
60 |
61 |
62 | You modify this file to add additional rules when you new business models are added or if you need to modify custom existing rules.
63 |
64 |
--------------------------------------------------------------------------------
/platform/client-admin/src/components/Menu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useLocation } from 'react-router';
3 |
4 | import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle } from '@ionic/react';
5 |
6 | import { textOutline, informationCircleOutline, peopleCircleSharp, mapOutline, peopleOutline, optionsSharp, codeWorking, cart } from 'ionicons/icons';
7 |
8 | import './Menu.css'
9 |
10 | const routes = {
11 | operationPages: [
12 | { title: 'Actions', path: '/actions', icon: codeWorking },
13 | { title: 'Action Map', path: '/map', icon: mapOutline },
14 | { title: 'Scheduling', path: '/schedule', icon: optionsSharp },
15 | { title: 'Reports', path: '/reports', icon: textOutline },
16 | ],
17 | managementPages: [
18 | { title: 'Volunteers', path: '/volunteers', icon: peopleOutline },
19 | { title: 'Recipients', path: '/recipients', icon: peopleCircleSharp },
20 | { title: 'Products', path: '/products', icon: cart },
21 | { title: 'Distribution Centre', path: '/distributionCentre', icon: informationCircleOutline }
22 | ]
23 | };
24 |
25 | interface Pages {
26 | title: string,
27 | path: string,
28 | icon: string,
29 | routerDirection?: string
30 | }
31 | interface StateProps {
32 | darkMode?: boolean;
33 | isAuthenticated?: boolean;
34 | menuEnabled?: boolean;
35 | }
36 |
37 | interface MenuProps { }
38 |
39 | export const Menu: React.FC = () => {
40 | const location = useLocation();
41 |
42 | function renderlistItems(list: Pages[]) {
43 | return list
44 | .filter(route => !!route.path)
45 | .map(p => (
46 |
47 |
48 |
49 | {p.title}
50 |
51 |
52 | ));
53 | }
54 |
55 | return (
56 |
57 |
58 |
59 | Operations
60 | {renderlistItems(routes.operationPages)}
61 |
62 |
63 | Management
64 | {renderlistItems(routes.managementPages)}
65 |
66 |
67 |
68 | );
69 | };
70 |
71 |
--------------------------------------------------------------------------------
/platform/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "starter-client",
3 | "version": "0.0.1",
4 | "private": true,
5 | "dependencies": {
6 | "@capacitor/core": "2.4.5",
7 | "@ionic/react": "5.3.2",
8 | "@ionic/react-router": "5.3.2",
9 | "google-maps-react": "2.0.6",
10 | "graphql": "15.3.0",
11 | "graphql-tag": "2.11.0",
12 | "ionicons": "5.1.2",
13 | "keycloak-js": "9.0.3",
14 | "offix-cache": "0.15.5",
15 | "offix-client": "0.15.5",
16 | "@apollo/client": "3.2.0",
17 | "react": "16.13.1",
18 | "react-dom": "16.13.1",
19 | "react-offix-hooks": "0.15.5",
20 | "react-router": "5.2.0",
21 | "react-router-dom": "5.2.0",
22 | "simpl-schema": "1.10.0",
23 | "subscriptions-transport-ws": "0.9.18",
24 | "uniforms": "3.0.0-rc.3",
25 | "uniforms-bridge-simple-schema-2": "3.0.0-rc.3",
26 | "uniforms-ionic": "0.1.0"
27 | },
28 | "scripts": {
29 | "start": "yarn build && cap serve",
30 | "dev": "react-scripts start",
31 | "build": "react-scripts build",
32 | "build:generic": "REACT_APP_URI_FORMAT=RELATIVEURI react-scripts build",
33 | "run:android": "cap copy android && cap open android",
34 | "run:ios": "cap copy ios && cap open ios",
35 | "eject": "react-scripts eject"
36 | },
37 | "eslintConfig": {
38 | "extends": "react-app"
39 | },
40 | "browserslist": {
41 | "production": [
42 | ">0.2%",
43 | "not dead",
44 | "not op_mini all"
45 | ],
46 | "development": [
47 | "last 1 chrome version",
48 | "last 1 firefox version",
49 | "last 1 safari version"
50 | ]
51 | },
52 | "devDependencies": {
53 | "@capacitor/cli": "2.4.5",
54 | "@graphql-codegen/add": "2.0.1",
55 | "@graphql-codegen/typescript": "1.17.9",
56 | "@graphql-codegen/typescript-operations": "1.17.8",
57 | "@graphql-codegen/typescript-react-apollo": "2.0.6",
58 | "@test-graphql-cli/codegen": "4.0.1-beta.6",
59 | "@testing-library/jest-dom": "5.11.4",
60 | "@testing-library/react": "10.4.9",
61 | "@testing-library/user-event": "10.4.1",
62 | "@types/googlemaps": "3.39.13",
63 | "@types/jest": "25.2.3",
64 | "@types/node": "12.12.55",
65 | "@types/react": "16.9.49",
66 | "@types/react-dom": "16.9.8",
67 | "@types/react-router": "5.1.8",
68 | "@types/react-router-dom": "5.1.5",
69 | "@types/simpl-schema": "0.2.8",
70 | "graphql-cli": "4.0.1-beta.6",
71 | "react-scripts": "3.4.3",
72 | "typescript": "3.9.7"
73 | },
74 | "description": "An Ionic project"
75 | }
76 |
--------------------------------------------------------------------------------
/platform/client/src/config/clientConfig.ts:
--------------------------------------------------------------------------------
1 |
2 | import { WebSocketLink } from '@apollo/client/link/ws';
3 | import { setContext } from '@apollo/client/link/context'
4 | import { getMainDefinition } from 'apollo-utilities';
5 | import { getAuthHeader } from '../keycloakAuth';
6 | import { Capacitor } from '@capacitor/core';
7 | import { InMemoryCache, FetchPolicy, ApolloLink, HttpLink } from '@apollo/client';
8 |
9 | let httpUri = 'http://localhost:4000/graphql';
10 | let wsUri = 'ws://localhost:4000/graphql';
11 |
12 | if (Capacitor.isNative && Capacitor.platform === 'android') {
13 | httpUri = 'http://10.0.2.2:4000/graphql';
14 | wsUri = 'ws://10.0.2.2:4000/graphql';
15 | }
16 |
17 | if (process.env.REACT_APP_URI_FORMAT === 'RELATIVEURI') {
18 | httpUri = "/graphql";
19 | const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
20 | const port = window.location.port !== "" ? `:${window.location.port}` : "";
21 | wsUri = `${protocol}${window.location.hostname}${port}${httpUri}`
22 | }
23 |
24 | /**
25 | * Create websocket link and
26 | * define websocket link options
27 | */
28 | const wsLink = new WebSocketLink({
29 | uri: wsUri,
30 | options: {
31 | reconnect: true,
32 | lazy: true,
33 | // returns auth header or empty string
34 | connectionParams: async () => (await getAuthHeader())
35 | },
36 | });
37 |
38 | const httpLink = new HttpLink({
39 | uri: httpUri,
40 | });
41 |
42 | /**
43 | * add authorization headers for queries
44 | * to grapqhql backend
45 | *
46 | */
47 | const authLink = setContext(async (_, { headers }) => {
48 | return {
49 | headers: {
50 | ...headers,
51 | // returns auth header or empty string
52 | ...await getAuthHeader()
53 | }
54 | }
55 | });
56 |
57 | /**
58 | * split queries and subscriptions.
59 | * send subscriptions to websocket url &
60 | * queries to http url
61 | *
62 | */
63 | const splitLink = ApolloLink.split(
64 | ({ query }) => {
65 | const { kind, operation }: any = getMainDefinition(query);
66 | return kind === 'OperationDefinition' && operation === 'subscription';
67 | },
68 | wsLink,
69 | httpLink,
70 | );
71 |
72 | const noCache: FetchPolicy = 'no-cache';
73 |
74 | const defaultOptions = {
75 | watchQuery: {
76 | fetchPolicy: noCache,
77 | },
78 | query: {
79 | fetchPolicy: noCache,
80 | },
81 | mutate: {
82 | fetchPolicy: noCache
83 | }
84 | }
85 |
86 | export const clientConfig = {
87 | defaultOptions,
88 | cache: new InMemoryCache(),
89 | link: authLink.concat(splitLink)
90 | };
91 |
--------------------------------------------------------------------------------
/platform/server/src/auth.ts:
--------------------------------------------------------------------------------
1 | import { Express } from "express";
2 | import { config } from './config/config';
3 |
4 | import {
5 | KeycloakTypeDefs,
6 | KeycloakSchemaDirectives,
7 | KeycloakSubscriptionContext,
8 | KeycloakSubscriptionHandler,
9 | KeycloakContext
10 | } from 'keycloak-connect-graphql'
11 |
12 | const session = require('express-session')
13 | const Keycloak = require('keycloak-connect')
14 |
15 | export function buildKeycloakApolloConfig(app: Express, apolloConfig: any) {
16 | const graphqlPath = `/graphql`;
17 | console.log("Using keycloak configuration")
18 |
19 | const memoryStore = new session.MemoryStore()
20 | app.use(session({
21 | secret: process.env.SESSION_SECRET_STRING || 'this should be a long secret',
22 | resave: false,
23 | saveUninitialized: true,
24 | store: memoryStore
25 | }))
26 |
27 | const keycloak = new Keycloak({
28 | store: memoryStore
29 | }, config.keycloakConfig);
30 | const keycloakSubscriptionHandler = new KeycloakSubscriptionHandler({ keycloak })
31 |
32 | app.use(keycloak.middleware())
33 |
34 | // For production we want to protect /graphql endpoint
35 | // For development we want to test our queries using graphql playground
36 | if(process.env.NODE_ENV === 'production'){
37 | app.use(graphqlPath, keycloak.protect());
38 | }
39 |
40 | return {
41 | typeDefs: [KeycloakTypeDefs, apolloConfig.typeDefs], // 1. Add the Keycloak Type Defs
42 | schemaDirectives: KeycloakSchemaDirectives,
43 | resolvers: apolloConfig.resolvers,
44 | playground: apolloConfig.playground,
45 | path: graphqlPath,
46 | context: (context: any) => {
47 | return {
48 | ...apolloConfig.context(context),
49 | kauth: new KeycloakContext({ req: context.req }) // 3. add the KeycloakContext to `kauth`
50 | }
51 | },
52 | subscriptions: {
53 | onConnect: async (connectionParams, websocket, connectionContext) => {
54 | const token = await keycloakSubscriptionHandler.onSubscriptionConnect(connectionParams)
55 | if (!token) {
56 | throw new Error("Cannot build keycloak token. Connection will be terminated")
57 | }
58 | return {
59 | ...apolloConfig.context,
60 | kauth: new KeycloakSubscriptionContext(token)
61 | }
62 | }
63 | },
64 | }
65 | }
66 |
67 |
68 |
--------------------------------------------------------------------------------
/platform/client-admin/src/config/clientConfig.ts:
--------------------------------------------------------------------------------
1 |
2 | import { WebSocketLink } from '@apollo/client/link/ws';
3 | import { setContext } from '@apollo/client/link/context'
4 | import { getMainDefinition } from 'apollo-utilities';
5 | import { getAuthHeader } from '../keycloakAuth';
6 | import { Capacitor } from '@capacitor/core';
7 | import { InMemoryCache, FetchPolicy, ApolloLink, HttpLink } from '@apollo/client';
8 |
9 | let httpUri = 'http://localhost:4000/graphql';
10 | let wsUri = 'ws://localhost:4000/graphql';
11 |
12 | if (Capacitor.isNative && Capacitor.platform === 'android') {
13 | httpUri = 'http://10.0.2.2:4000/graphql';
14 | wsUri = 'ws://10.0.2.2:4000/graphql';
15 | }
16 |
17 | if (process.env.REACT_APP_URI_FORMAT === 'RELATIVEURI') {
18 | httpUri = "/graphql";
19 | const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
20 | const port = window.location.port !== "" ? `:${window.location.port}` : "";
21 | wsUri = `${protocol}${window.location.hostname}${port}${httpUri}`
22 | }
23 |
24 | /**
25 | * Create websocket link and
26 | * define websocket link options
27 | */
28 | const wsLink = new WebSocketLink({
29 | uri: wsUri,
30 | options: {
31 | reconnect: true,
32 | lazy: true,
33 | // returns auth header or empty string
34 | connectionParams: async () => (await getAuthHeader())
35 | },
36 | });
37 |
38 | const httpLink = new HttpLink({
39 | uri: httpUri,
40 | });
41 |
42 | /**
43 | * add authorization headers for queries
44 | * to grapqhql backend
45 | *
46 | */
47 | const authLink = setContext(async (_, { headers }) => {
48 | return {
49 | headers: {
50 | ...headers,
51 | // returns auth header or empty string
52 | ...await getAuthHeader()
53 | }
54 | }
55 | });
56 |
57 | /**
58 | * split queries and subscriptions.
59 | * send subscriptions to websocket url &
60 | * queries to http url
61 | *
62 | */
63 | const splitLink = ApolloLink.split(
64 | ({ query }) => {
65 | const { kind, operation }: any = getMainDefinition(query);
66 | return kind === 'OperationDefinition' && operation === 'subscription';
67 | },
68 | wsLink,
69 | httpLink,
70 | );
71 |
72 | const noCache: FetchPolicy = 'no-cache';
73 |
74 | const defaultOptions = {
75 | watchQuery: {
76 | fetchPolicy: noCache,
77 | },
78 | query: {
79 | fetchPolicy: noCache,
80 | },
81 | mutate: {
82 | fetchPolicy: noCache
83 | }
84 | }
85 |
86 | export const clientConfig = {
87 | defaultOptions,
88 | cache: new InMemoryCache(),
89 | link: authLink.concat(splitLink)
90 | };
91 |
--------------------------------------------------------------------------------
/website/src/components/Terminal/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import styles from './styles.module.css';
3 |
4 | function Underscore() {
5 |
6 | const underscoreFlash = () => {
7 | const underscore = document.getElementById('underscore');
8 | underscore.classList.toggle('hidden');
9 | };
10 |
11 | useEffect(() => {
12 | // subscribe
13 | const interval = setInterval(underscoreFlash, 400);
14 | // unsubscribe
15 | return () => clearInterval(interval);
16 | });
17 |
18 | return (
19 |
23 | _
24 |
25 | );
26 | }
27 |
28 | function TerminalText({ phrase }) {
29 | let lettercount = 1;
30 | let reverse = false;
31 | let wait = false;
32 |
33 | const typeEffect = async () => {
34 | const text = document.getElementById('text');
35 | text.innerHTML = phrase.substring(0, lettercount);
36 | const callable = !reverse ? typeOutWord : backspace;
37 | await handleReverse();
38 | if (!waiting()) callable();
39 | }
40 |
41 | const waiting = () => {
42 | return (
43 | wait
44 | || (lettercount === phrase.length + 1 && !reverse)
45 | || (lettercount === 0 && reverse)
46 | );
47 | }
48 |
49 | const typeOutWord = () => {
50 | if (lettercount < phrase.length + 1) lettercount++;
51 | };
52 |
53 | const backspace = () => {
54 | if (lettercount > 0) lettercount--;
55 | };
56 |
57 | const handleReverse = async () => {
58 | if (!reverse && lettercount === phrase.length + 1) await toggleReverse();
59 | if (reverse && lettercount === 0) await toggleReverse();
60 | };
61 |
62 | const toggleReverse = () => {
63 | reverse = !reverse;
64 | wait = true;
65 | return new Promise(resolve => {
66 | setTimeout(() => {
67 | wait = false;
68 | resolve();
69 | }, 3000);
70 | });
71 | };
72 |
73 | useEffect(() => {
74 | // subscribe
75 | const interval = setInterval(typeEffect, 120);
76 | // unsubscribe
77 | return () => clearInterval(interval);
78 | });
79 |
80 | return (
81 |
82 | );
83 | }
84 |
85 | export function Terminal() {
86 |
87 | return (
88 |
89 |
92 |
93 | >
94 |
95 |
96 |
97 |