Browse Source

UI: Menu and routing works with style reminiscent of aitestory

1.0 0.3.0
Gisle Aune 6 years ago
parent
commit
576e1df001
  1. 2444
      rpdata-ui/README.md
  2. 434
      rpdata-ui/package-lock.json
  3. 13
      rpdata-ui/package.json
  4. BIN
      rpdata-ui/public/assets/images/bg.png
  5. 3
      rpdata-ui/src/App.css
  6. 15
      rpdata-ui/src/App.js
  7. 13
      rpdata-ui/src/client.js
  8. 76
      rpdata-ui/src/colors.css
  9. 42
      rpdata-ui/src/common/Background.js
  10. 60
      rpdata-ui/src/common/Menu.js
  11. 22
      rpdata-ui/src/common/css/Background.css
  12. 64
      rpdata-ui/src/common/css/Menu.css
  13. 6
      rpdata-ui/src/index.css
  14. 25
      rpdata-ui/src/index.js
  15. 14
      rpdata-ui/src/routes/logs/LogsIndex.js
  16. 17
      rpdata-ui/src/routes/logs/LogsMenu.js
  17. 42
      rpdata-ui/src/routes/story/StoryMenu.js
  18. 31
      rpdata-ui/src/routes/story/StoryRoot.js
  19. 23
      rpdata-ui/src/routes/story/gql/StoryIndex.js

2444
rpdata-ui/README.md
File diff suppressed because it is too large
View File

434
rpdata-ui/package-lock.json

@ -46,6 +46,15 @@
"integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
"dev": true
},
"graphql": {
"version": "0.9.6",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
"integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
"dev": true,
"requires": {
"iterall": "^1.0.0"
}
},
"invariant": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
@ -69,6 +78,22 @@
}
}
},
"@types/async": {
"version": "2.0.49",
"resolved": "https://registry.npmjs.org/@types/async/-/async-2.0.49.tgz",
"integrity": "sha512-Benr3i5odUkvpFkOpzGqrltGdbSs+EVCkEBGXbuR7uT0VzhXKIkhem6PDzHdx5EonA+rfbB3QvP6aDOw5+zp5Q==",
"optional": true
},
"@types/graphql": {
"version": "0.12.6",
"resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.12.6.tgz",
"integrity": "sha512-wXAVyLfkG1UMkKOdMijVWFky39+OD/41KftzqfX1Oejd0Gm6dOIKjCihSVECg6X7PHjftxXmfOKA/d1H79ZfvQ=="
},
"@types/zen-observable": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.5.4.tgz",
"integrity": "sha512-sW6xN96wUak4tgc89d0tbTg7QDGYhGv5hvQIS6h4mRCd8h2btiZ80loPU8cyLwsBbA4ZeQt0FjvUhJ4rNhdsGg=="
},
"abab": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@ -139,14 +164,14 @@
"integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg=="
},
"ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz",
"integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==",
"requires": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-deep-equal": "^2.0.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.1"
}
},
"ajv-keywords": {
@ -293,6 +318,54 @@
}
}
},
"apollo-boost": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.1.10.tgz",
"integrity": "sha512-Bevaab5xqmOuxVmn8DV+7suoKP/ADX8NKzvfZhD3LgbP72MzpFXxulnP5/xSIBKn08mZvloeYGYdQkoxa7q3/Q==",
"requires": {
"apollo-cache": "^1.1.12",
"apollo-cache-inmemory": "^1.2.5",
"apollo-client": "^2.3.5",
"apollo-link": "^1.0.6",
"apollo-link-error": "^1.0.3",
"apollo-link-http": "^1.3.1",
"apollo-link-state": "^0.4.0",
"graphql-tag": "^2.4.2"
}
},
"apollo-cache": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.12.tgz",
"integrity": "sha512-D0BPiHvJ6vIrXRh6P4mwlxuUOvODGuJxJq+zIjP8fADIqwjYtH3U3d/PY8dQ2fn4bDbvIAWBUkADBuJLpLIIpg==",
"requires": {
"apollo-utilities": "^1.0.16"
}
},
"apollo-cache-inmemory": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.2.5.tgz",
"integrity": "sha512-D9KIT4bq7ORm0BVXjSIxU09SvTUunWKxM63Lvr81hR83I7B7RRM3uFBDUV9VG8rlIGkD+1obBNlW2ycerFV8wQ==",
"requires": {
"apollo-cache": "^1.1.12",
"apollo-utilities": "^1.0.16",
"graphql-anywhere": "^4.1.14"
}
},
"apollo-client": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.3.5.tgz",
"integrity": "sha512-FYg+Mj/HWSaO/ZllT5JnyHGUhkFhZ+UOdEvJd/DYKjxHNPal/d3jyXtG947r4IhUqPmmxXsAXNwvJGPieBKJGg==",
"requires": {
"@types/async": "2.0.49",
"@types/zen-observable": "^0.5.3",
"apollo-cache": "^1.1.12",
"apollo-link": "^1.0.0",
"apollo-link-dedup": "^1.0.0",
"apollo-utilities": "^1.0.16",
"symbol-observable": "^1.0.2",
"zen-observable": "^0.8.0"
}
},
"apollo-codegen": {
"version": "0.10.13",
"resolved": "https://registry.npmjs.org/apollo-codegen/-/apollo-codegen-0.10.13.tgz",
@ -308,6 +381,77 @@
"node-fetch": "^1.5.3",
"source-map-support": "^0.4.2",
"yargs": "^7.0.1"
},
"dependencies": {
"graphql": {
"version": "0.9.6",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
"integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
"dev": true,
"requires": {
"iterall": "^1.0.0"
}
}
}
},
"apollo-link": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.2.tgz",
"integrity": "sha512-Uk/BC09dm61DZRDSu52nGq0nFhq7mcBPTjy5EEH1eunJndtCaNXQhQz/BjkI2NdrfGI+B+i5he6YSoRBhYizdw==",
"requires": {
"@types/graphql": "0.12.6",
"apollo-utilities": "^1.0.0",
"zen-observable-ts": "^0.8.9"
}
},
"apollo-link-dedup": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/apollo-link-dedup/-/apollo-link-dedup-1.0.9.tgz",
"integrity": "sha512-RbuEKpmSHVMtoREMPh2wUFTeh65q+0XPVeqgaOP/rGEAfvLyOMvX0vT2nVaejMohoMxuUnfZwpldXaDFWnlVbg==",
"requires": {
"apollo-link": "^1.2.2"
}
},
"apollo-link-error": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.0.tgz",
"integrity": "sha512-4Vu/IUn6Kn6+Fthym4iuqypCKcLdwTg3MaCvtLdaLbt9X2hNCq3y8mv6vuWIlAY51X8wKhCgYghQSOs5R/embQ==",
"requires": {
"apollo-link": "^1.2.2"
}
},
"apollo-link-http": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.4.tgz",
"integrity": "sha512-e9Ng3HfnW00Mh3TI6DhNRfozmzQOtKgdi+qUAsHBOEcTP0PTAmb+9XpeyEEOueLyO0GXhB92HUCIhzrWMXgwyg==",
"requires": {
"apollo-link": "^1.2.2",
"apollo-link-http-common": "^0.2.4"
}
},
"apollo-link-http-common": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.4.tgz",
"integrity": "sha512-4j6o6WoXuSPen9xh4NBaX8/vL98X1xY2cYzUEK1F8SzvHe2oFONfxJBTekwU8hnvapcuq8Qh9Uct+gelu8T10g==",
"requires": {
"apollo-link": "^1.2.2"
}
},
"apollo-link-state": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/apollo-link-state/-/apollo-link-state-0.4.1.tgz",
"integrity": "sha512-69/til4ENfl/Fvf7br2xSsLSBcxcXPbOHVNkzLLejvUZickl93HLO4/fO+uvoBi4dCYRgN17Zr8FwI41ueRx0g==",
"requires": {
"apollo-utilities": "^1.0.8",
"graphql-anywhere": "^4.1.0-alpha.0"
}
},
"apollo-utilities": {
"version": "1.0.16",
"resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.16.tgz",
"integrity": "sha512-5oKnElKqkV920KRbitiyISLeG63tUGAyNdotg58bQSX9Omr+smoNDTIRMRLbyIdKOYLaw3LpDaRepOPqljj0NQ==",
"requires": {
"fast-json-stable-stringify": "^2.0.0"
}
},
"append-transform": {
@ -3203,6 +3347,17 @@
"text-table": "~0.2.0"
},
"dependencies": {
"ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"requires": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
}
},
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
@ -3231,6 +3386,11 @@
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
"integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
},
"js-yaml": {
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
@ -3240,6 +3400,11 @@
"esprima": "^4.0.0"
}
},
"json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
@ -3799,9 +3964,9 @@
"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
},
"fast-json-stable-stringify": {
"version": "2.0.0",
@ -4078,8 +4243,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@ -4114,8 +4278,7 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
@ -4123,8 +4286,7 @@
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@ -4227,8 +4389,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@ -4238,7 +4399,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -4350,8 +4510,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@ -4466,7 +4625,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -4484,7 +4642,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -4671,12 +4828,19 @@
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
},
"graphql": {
"version": "0.9.6",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
"integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
"dev": true,
"version": "0.13.2",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.13.2.tgz",
"integrity": "sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==",
"requires": {
"iterall": "^1.0.0"
"iterall": "^1.2.1"
}
},
"graphql-anywhere": {
"version": "4.1.14",
"resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-4.1.14.tgz",
"integrity": "sha512-Wy4h9FWwxgrDRP16wXApP/VmNKXXTvY8jZLDtgxwDuC8Z6LSVkeCDjQSCyNKdgktky104UCbIQ3x+et9bQupDA==",
"requires": {
"apollo-utilities": "^1.0.16"
}
},
"graphql-language-service-config": {
@ -4699,6 +4863,17 @@
"graphql-language-service-parser": "0.0.10",
"graphql-language-service-types": "0.0.16",
"graphql-language-service-utils": "0.0.10"
},
"dependencies": {
"graphql": {
"version": "0.9.6",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
"integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
"dev": true,
"requires": {
"iterall": "^1.0.0"
}
}
}
},
"graphql-language-service-parser": {
@ -4717,6 +4892,17 @@
"dev": true,
"requires": {
"graphql": "^0.9.6"
},
"dependencies": {
"graphql": {
"version": "0.9.6",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
"integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
"dev": true,
"requires": {
"iterall": "^1.0.0"
}
}
}
},
"graphql-language-service-utils": {
@ -4727,7 +4913,23 @@
"requires": {
"graphql": "^0.9.6",
"graphql-language-service-types": "0.0.16"
},
"dependencies": {
"graphql": {
"version": "0.9.6",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
"integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
"dev": true,
"requires": {
"iterall": "^1.0.0"
}
}
}
},
"graphql-tag": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.9.2.tgz",
"integrity": "sha512-qnNmof9pAqj/LUzs3lStP0Gw1qhdVCUS7Ab7+SUB6KD5aX1uqxWQRwMnOGTkhKuLvLNIs1TvNz+iS9kUGl1MhA=="
},
"growly": {
"version": "1.3.0",
@ -4816,6 +5018,29 @@
"requires": {
"ajv": "^5.1.0",
"har-schema": "^2.0.0"
},
"dependencies": {
"ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"requires": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
}
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
},
"json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
}
}
},
"has": {
@ -4901,6 +5126,28 @@
"upper-case": "^1.1.3"
}
},
"history": {
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
"requires": {
"invariant": "^2.2.1",
"loose-envify": "^1.2.0",
"resolve-pathname": "^2.2.0",
"value-equal": "^0.4.0",
"warning": "^3.0.0"
},
"dependencies": {
"warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
"requires": {
"loose-envify": "^1.0.0"
}
}
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -4911,6 +5158,11 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@ -5867,8 +6119,7 @@
"iterall": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz",
"integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==",
"dev": true
"integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA=="
},
"jest": {
"version": "20.0.4",
@ -6499,9 +6750,9 @@
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
},
"json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
},
"json-stable-stringify": {
"version": "1.0.1",
@ -9100,6 +9351,18 @@
"prop-types": "^15.6.0"
}
},
"react-apollo": {
"version": "2.1.9",
"resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.9.tgz",
"integrity": "sha512-o6otpfh/neSzNjaq2x1GL9+aFz13pxQ0si4h2XpE7ON1lXD24YwpdFF277s8h1KFSVRvZmpzLmrg9OyOU9mo+w==",
"requires": {
"fbjs": "^0.8.16",
"hoist-non-react-statics": "^2.5.0",
"invariant": "^2.2.2",
"lodash": "^4.17.10",
"prop-types": "^15.6.0"
}
},
"react-dev-utils": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz",
@ -9141,6 +9404,33 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
},
"react-router": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
"integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
"requires": {
"history": "^4.7.2",
"hoist-non-react-statics": "^2.5.0",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.1",
"warning": "^4.0.1"
}
},
"react-router-dom": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
"integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
"requires": {
"history": "^4.7.2",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.1",
"react-router": "^4.3.1",
"warning": "^4.0.1"
}
},
"react-scripts": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@ -9563,6 +9853,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
"integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
},
"resolve-pathname": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@ -9700,6 +9995,29 @@
"integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
"requires": {
"ajv": "^5.0.0"
},
"dependencies": {
"ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"requires": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
}
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
},
"json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
}
}
},
"select-hose": {
@ -10375,6 +10693,11 @@
"upper-case": "^1.1.1"
}
},
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
},
"symbol-tree": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
@ -10959,6 +11282,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@ -10995,6 +11323,14 @@
"makeerror": "1.0.x"
}
},
"warning": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
"integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watch": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
@ -11052,6 +11388,17 @@
"yargs": "^8.0.2"
},
"dependencies": {
"ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"requires": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
}
},
"ajv-keywords": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
@ -11084,6 +11431,11 @@
}
}
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
},
"has-flag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@ -11097,6 +11449,11 @@
"number-is-nan": "^1.0.0"
}
},
"json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
},
"load-json-file": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@ -11661,6 +12018,19 @@
"integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
}
}
},
"zen-observable": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.8.tgz",
"integrity": "sha512-HnhhyNnwTFzS48nihkCZIJGsWGFcYUz+XPDlPK5W84Ifji8SksC6m7sQWOf8zdCGhzQ4tDYuMYGu5B0N1dXTtg=="
},
"zen-observable-ts": {
"version": "0.8.9",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.9.tgz",
"integrity": "sha512-KJz2O8FxbAdAU5CSc8qZ1K2WYEJb1HxS6XDRF+hOJ1rOYcg6eTMmS9xYHCXzqZZzKw6BbXWyF4UpwSsBQnHJeA==",
"requires": {
"zen-observable": "^0.8.0"
}
}
}
}

13
rpdata-ui/package.json

@ -3,8 +3,16 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"ajv": "^6.5.2",
"apollo-boost": "^0.1.10",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.2",
"pluralize": "^7.0.0",
"react": "^16.4.1",
"react-apollo": "^2.1.9",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"
},
"scripts": {
@ -15,5 +23,10 @@
},
"devDependencies": {
"@playlyfe/gql": "^2.6.0"
},
"proxy": {
"/graphql": {
"target": "http://127.0.0.1:17000"
}
}
}

BIN
rpdata-ui/public/assets/images/bg.png

After

Width: 301  |  Height: 256  |  Size: 62 KiB

3
rpdata-ui/src/App.css

@ -1,3 +0,0 @@
.App {
}

15
rpdata-ui/src/App.js

@ -1,14 +1,23 @@
import React, { Component } from 'react';
import './App.css';
import React, { Component } from 'react'
import { Route, Router, Redirect, Switch } from "react-router-dom";
import StoryRoot from './routes/story/StoryRoot';
import LogsIndex from './routes/logs/LogsIndex';
class App extends Component {
render() {
return (
<div className="App">
<p>Hi</p>
<Switch>
<Redirect exact path="/" to="/story/" />
<Route path="/story/" component={StoryRoot}/>
<Route path="/logs/" component={LogsIndex}/>
</Switch>
</div>
);
}
}
export default App;
/* See ./common/Menu.js to change the top navbar */

13
rpdata-ui/src/client.js

@ -0,0 +1,13 @@
import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"
const client = new ApolloClient({
link: new HttpLink({
uri: "/graphql"
}),
cache: new InMemoryCache(),
})
export default client

76
rpdata-ui/src/colors.css

@ -0,0 +1,76 @@
/* /story/ */
.theme-story .color-menu {
color: #789;
}
.theme-story .MenuLink.selected {
background-color: rgba(34, 187, 255, 0.125);
}
.theme-story .MenuLink:hover, .theme-story .Menu > .head-menu > a:hover {
background-color: rgba(34, 187, 255, 0.25);
}
.theme-story .color-primary {
color: #1CF;
}
.theme-story .color-text {
color: #ABC;
}
/* /logs/ */
.theme-logs .color-menu {
color: #998;
}
.theme-logs .MenuLink.selected {
background-color: rgba(255, 187, 34, 0.125);
}
.theme-logs .MenuLink:hover, .theme-logs .Menu > .head-menu > a:hover {
background-color: rgba(255, 187, 34, 0.25);
}
.theme-logs .color-primary {
color: #FC1;
}
.theme-logs .color-text {
color: #CCB;
}
/* /data/ */
.theme-data .color-menu {
color: #898;
}
.theme-data .MenuLink.selected {
background-color: rgba(35, 255, 128, 0.125);
}
.theme-data .MenuLink:hover, .theme-data .Menu > .head-menu > a:hover {
background-color: rgba(35, 255, 128, 0.25);
}
.theme-data .color-primary {
color: #1F8;
}
.theme-data .color-text {
color: #ACB;
}
/* Tag colors */
.color-tag-event {
color: #B77;
}
.color-tag-location {
color: #7B7;
}
.color-tag-organization {
color: #B7B;
}
.color-tag-series {
color: #BB7;
}
.color-tag-character {
color: #37B;
}
/* Danger */
.color-danger {
color: #FA3;
}
.MenuLink:hover, .MenuLink:hover .text, .Menu > .head-menu > a:hover {
color: #EEE !important;
}

42
rpdata-ui/src/common/Background.js

@ -0,0 +1,42 @@
import React, { Component } from 'react';
import './css/Background.css';
/**
* Background renders a full-size image that detects whether the source is
* landscape or portrait. It's a react-ification of AiteStory's background.
*/
export default class Background extends Component {
/**
* @param {HTMLImageElement} img
*/
onRef(img) {
if (img == null) {
return
}
if (img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0) {
const width = img.clientWidth
const height = img.clientHeight
if(width > (height * 1.50)) {
img.className += ' landscape'
}
} else {
img.onload = function () {
const width = img.clientWidth
const height = img.clientHeight
if(width > (height * 1.50)) {
img.className += ' landscape'
}
}
}
}
render() {
const src = this.props.src || "/assets/images/bg.png"
const opacity = this.props.opacity || 0.25
return <img style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className="Background" src={src} />
}
}

60
rpdata-ui/src/common/Menu.js

@ -0,0 +1,60 @@
import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './css/Menu.css';
export default class Menu extends Component {
render() {
const { children } = this.props
return (
<nav className="Menu">
<h1 className="color-primary">Aite RP</h1>
<div className="head-menu">
<HeadMenuLink to="/story/">Story</HeadMenuLink>
<HeadMenuLink to="/logs/">Logs</HeadMenuLink>
</div>
<div className="content">
{ children }
</div>
</nav>
)
}
}
export function MenuLink({ icon, children, tagType, to, onClick }) {
const isSelected = window.location.pathname === to
const className = isSelected ? "selected" : "not-selected"
const textClass = isSelected ? "color-primary" : `color-tag-${tagType||"none"}`
const body = (
<div className={`MenuLink color-menu ${className}`} onClick={onClick}>
<div className="icon color-primary">{icon}</div>
<div className={`text ${textClass}`}>{children}</div>
</div>
)
if (to == null) {
return body
} else {
return <Link to={to}>{body}</Link>
}
}
export function MenuGap() {
return <div className="MenuGap"></div>
}
export function MenuHeader({children}) {
return <div className="MenuHeader color-menu">{children}</div>
}
export function HeadMenuLink({to, children}) {
const className = (window.location.pathname.startsWith(to) ? "color-primary" : "color-menu")
return <Link className={className} to={to}>{children}</Link>
}
export function MenuBlurb({children}) {
return <div className="MenuBlurb">{children}</div>
}

22
rpdata-ui/src/common/css/Background.css

@ -0,0 +1,22 @@
img.Background {
/* Set rules to fill background */
width: 100%;
/* Set up proportionate scaling */
min-height: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;
user-select: none;
-webkit-user-drag: none;
}
img.Background.landscape {
/* Set rules to fill background */
height: 100%;
/* Set up proportionate scaling */
min-width: 100%;
width: auto;
}

64
rpdata-ui/src/common/css/Menu.css

@ -0,0 +1,64 @@
.Menu {
position: sticky;
width: 28ch;
text-align: center;
}
.Menu > .head-menu {
padding: 0 2ch;
padding-bottom: 0.5em;
}
.Menu > .head-menu > a {
display: inline-block;
padding: 0.25em 1ch;
font-size: 0.75em;
}
.Menu > h1 {
padding: 1em 0 0em 0;
margin: 0;
font-size: 2.5em;
user-select: none;
}
.Menu > .content {
margin-top: 1em;
text-align: left;
}
.MenuLink {
width: 100%;
padding-left: 0.5ch;
font-size: 1.1em;
cursor: pointer;
}
.MenuLink .icon {
display: inline-block;
width: 3ch;
padding: 0.15em 0.125em;
text-align: center;
}
.MenuLink .text {
display: inline-block;
}
.MenuGap {
padding: 0.25em;
}
.MenuHeader {
opacity: 0.5;
user-select: none;
padding: 0.125em 1.5ch;
}
.MenuBlurb {
opacity: 0.5;
padding: 0.25em 1.5ch;
}

6
rpdata-ui/src/index.css

@ -2,4 +2,10 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: black;
color: white;
}
a {
text-decoration: none;
}

25
rpdata-ui/src/index.js

@ -1,8 +1,21 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom"
import { ApolloProvider } from "react-apollo";
import client from "./client";
import App from "./App"
import registerServiceWorker from "./registerServiceWorker"
import "./index.css"
import "./colors.css";
ReactDOM.render((
<ApolloProvider client={client}>
<BrowserRouter>
<App />
</BrowserRouter>
</ApolloProvider>
), document.getElementById('root'))
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

14
rpdata-ui/src/routes/logs/LogsIndex.js

@ -0,0 +1,14 @@
import React, { Component } from 'react';
import Background from '../../common/Background';
import LogsMenu from './LogsMenu';
export default class LogsIndex extends Component {
render() {
return (
<div className="StoryIndex theme-logs">
<Background src="https://wiki.aiterp.net/images/c/ce/Ehanis_Tioran_-_Portrait_-_Resized.png" />
<LogsMenu />
</div>
)
}
}

17
rpdata-ui/src/routes/logs/LogsMenu.js

@ -0,0 +1,17 @@
import React, { Component } from 'react';
import Menu, { MenuHeader, MenuLink, MenuGap } from '../../common/Menu';
export default class LogsMenu extends Component {
render() {
return (
<Menu>
<MenuHeader>Logs</MenuHeader>
<MenuLink to="/logs/" icon="R">Recent</MenuLink>
<MenuGap />
<MenuHeader>Options</MenuHeader>
<MenuLink icon="+">Create Log</MenuLink>
<MenuLink icon="I">Import Log</MenuLink>
</Menu>
)
}
}

42
rpdata-ui/src/routes/story/StoryMenu.js

@ -0,0 +1,42 @@
import React, { Component } from "react";
import Menu, { MenuHeader, MenuLink, MenuGap } from "../../common/Menu";
import pluralize from "pluralize"
export default class StoryMenu extends Component {
render() {
return (
<Menu>
<MenuHeader>Story</MenuHeader>
<MenuLink to="/story/" icon="A">All</MenuLink>
<MenuGap />
<MenuHeader>By Category</MenuHeader>
<CategoryLinks categories={this.props.categories} />
<MenuGap />
<MenuHeader>By Tag</MenuHeader>
<MenuLink to="/story/tag/Location/Miner's%20Respite" icon="L" tagType="location">Miner's Respite</MenuLink>
<MenuLink to="/story/tag/Chracter/Ilyna%20T'Rea" icon="C" tagType="character">Ilyna T'Rea</MenuLink>
<MenuLink to="/story/tag/Organization/Redrock%20Agency" icon="O" tagType="organization">Redrock Agency</MenuLink>
<MenuLink to="/story/tag/Series/Yellow%20Haze" icon="S" tagType="series">Yellow Haze</MenuLink>
<MenuLink to="/story/tag/Event/Surveying%20The%20Ice%20World" icon="E" tagType="event">Surveying the Ice World</MenuLink>
<MenuLink to="/story/tag/" icon="T">All Tags</MenuLink>
<MenuGap />
<MenuHeader>Your Content</MenuHeader>
<MenuLink to="/story/authored/" icon="A">Listed</MenuLink>
<MenuLink to="/story/open/" icon="O">Open</MenuLink>
<MenuLink to="/story/unlisted/" icon="U">Unlisted</MenuLink>
<MenuGap />
<MenuHeader>Options</MenuHeader>
<MenuLink icon="+">Create Story</MenuLink>
</Menu>
)
}
}
function CategoryLinks({categories}) {
return categories.map(category => {
const icon = category.charAt(0).toUpperCase()
const label = pluralize(category)
return <MenuLink to={`/story/category/${category}`} icon={icon}>{label}</MenuLink>
})
}

31
rpdata-ui/src/routes/story/StoryRoot.js

@ -0,0 +1,31 @@
import React, { Component } from 'react';
import { Query } from 'react-apollo';
import Background from '../../common/Background';
import StoryMenu from './StoryMenu';
import INDEX_QUERY from "./gql/StoryIndex";
export class StoryIndex extends Component {
render() {
const categories = this.props.categoryType.enumValues.map(ev => ev.name).sort()
return (
<div className="StoryIndex theme-story">
<Background />
<StoryMenu categories={categories} />
</div>
)
}
}
export default () => (
<Query query={INDEX_QUERY}>
{({ loading, error, data }) => {
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return <StoryIndex {...data} />
}}
</Query>
);

23
rpdata-ui/src/routes/story/gql/StoryIndex.js

@ -0,0 +1,23 @@
import gql from "graphql-tag"
export default gql`
query StoryIndex {
categoryType: __type(name: "StoryCategory") {
enumValues {
name
description
}
}
stories(input: {}) {
id
name
author
open
tags {
kind
name
}
}
}
`
Loading…
Cancel
Save