{"id":23442294,"url":"https://github.com/repronim/reproschema-ui","last_synced_at":"2025-04-09T21:48:53.754Z","repository":{"id":38992866,"uuid":"151881846","full_name":"ReproNim/reproschema-ui","owner":"ReproNim","description":"UI to render ReproSchema based protocols and assessments.","archived":false,"fork":false,"pushed_at":"2025-02-22T18:26:50.000Z","size":60422,"stargazers_count":3,"open_issues_count":49,"forks_count":19,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-09T21:48:43.855Z","etag":null,"topics":["form-ui","hacktoberfest","jsonld"],"latest_commit_sha":null,"homepage":"https://www.repronim.org/reproschema-ui/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ReproNim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-06T21:10:02.000Z","updated_at":"2025-02-22T18:25:59.000Z","dependencies_parsed_at":"2025-02-15T13:46:44.110Z","dependency_job_id":"6ae1079c-fced-40d2-9469-622a7e2ea228","html_url":"https://github.com/ReproNim/reproschema-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReproNim%2Freproschema-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReproNim%2Freproschema-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReproNim%2Freproschema-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReproNim%2Freproschema-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReproNim","download_url":"https://codeload.github.com/ReproNim/reproschema-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119404,"owners_count":21050754,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-ui","hacktoberfest","jsonld"],"created_at":"2024-12-23T17:29:18.092Z","updated_at":"2025-04-09T21:48:53.728Z","avatar_url":"https://github.com/ReproNim.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reproschema-ui\n\n![CI](https://github.com/ReproNim/reproschema-ui/workflows/CI/badge.svg)\n\nThis repository contains the code for the user-interface for the [ReproSchema](https://github.com/ReproNim/reproschema).\n\nSee it in action [HERE](https://www.repronim.org/reproschema-ui/)\n\n\u003c!-- TOC --\u003e\n\n- [reproschema-ui](#reproschema-ui)\n  - [List of supported input types](#list-of-supported-input-types)\n    - [Text inputs](#text-inputs)\n    - [Numerical values](#numerical-values)\n    - [Audio inputs](#audio-inputs)\n    - [Time and dates inputs](#time-and-dates-inputs)\n    - [Multiple options inputs](#multiple-options-inputs)\n    - [Others](#others)\n  - [Viewing an certain protocol or activity with the app](#viewing-an-certain-protocol-or-activity-with-the-app)\n  - [Reference material](#reference-material)\n    - [App architecture](#app-architecture)\n  - [Serve the app on your computer](#serve-the-app-on-your-computer)\n    - [Install the dependencies](#install-the-dependencies)\n    - [Serve the app locally](#serve-the-app-locally)\n    - [Build for production with minification](#build-for-production-with-minification)\n    - [Build for production and view the bundle analyzer report](#build-for-production-and-view-the-bundle-analyzer-report)\n    - [Run unit tests](#run-unit-tests)\n    - [Run e2e tests](#run-e2e-tests)\n    - [Run all tests](#run-all-tests)\n\n\u003c!-- /TOC --\u003e\n\n## List of supported input types\n\nThe `inputType` is checked by `src/components/InputSelector/InputSelector.vue`\nwhich then calls the appropriate component.\n\nMost of them are in the folder `src/components/Inputs/`\n\nOne exception is :\n-   sign: `src/components/StudySign.StudySign.vue`\n\n### Text inputs\n\n-   text: `WebTextInput/TextInput.vue`\n-   multitext: `MultiTextInput/MultiTextInput.vue`\n-   email: `EmailInput/EmailInput.vue`\n\n### Numerical values\n\n-   number: `WebIntegerInput/IntegerInput.vue`\n-   float:  `WebFloatInput/FloatInput.vue`\n\n### Audio inputs\n\n-   audioCheck: `AudioCheck/AudioCheck.vue`\n-   audioRecord: `WebAudioRecord/Audio.vue`\n-   audioPassageRecord: `WebAudioRecord/Audio.vue`\n-   audioImageRecord: `WebAudioRecord/Audio.vue`\n-   audioRecordNumberTask: `WebAudioRecord/Audio.vue`\n-   audioAutoRecord: `AudioCheckRecord/AudioCheckRecord.vue`\n\n### Time and dates inputs\n\n-   date: `YearInput/YearInput.vue`\n-   year: `YearInput/YearInput.vue`\n-   timeRange: `TimeRange/TimeRange.vue`\n\n### Multiple options inputs\n\n-   radio: `WebRadio/Radio.vue`\n-   select: `SelectInput/SelectInput.vue`\n-   selectLanguage: `SelectInput/SelectInput.vue`\n-   selectCountry: `SelectInput/SelectInput.vue`\n-   selectState: `SelectInput/SelectInput.vue`\n\n### Others\n\n-   slider: `SliderInput/SliderInput.vue`\n-   documentUpload: `DocumentUpload/DocumentUpload.vue`\n-   save: `SaveData/SaveData.vue`\n-   static: `Static/Static.vue`\n-   StaticReadOnly: `Static/Static.vue`\n\n\n## Viewing an certain protocol or activity with the app\n\nIf you just want to view a protocol using the `reproschema-ui` you can pass the\nURL of the protocol schema to the `url` query parameter like this:\n\n```https://www.repronim.org/reproschema-ui/#/?url=url-to-your-protocol_schema```\n\nIf you are hosting a schema on github, make sure that you are passing the URL of\nthe **raw** content of the protocol schema. For example, our demo protocol can be\naccessed at this URL:\n\n[https://github.com/ReproNim/demo-protocol/blob/master/VoicePilot/VoicePilot_schema](https://github.com/ReproNim/demo-protocol/blob/master/VoicePilot/VoicePilot_schema)\n\nBut to get access to the raw content of that file you must click on the `Raw`\nbutton that will open this URL:\n\n[https://raw.githubusercontent.com/ReproNim/demo-protocol/master/VoicePilot/VoicePilot_schema](https://raw.githubusercontent.com/ReproNim/demo-protocol/master/VoicePilot/VoicePilot_schema).\n\nSimilarly, to view a single activity you can simply do this:\n\n```https://www.repronim.org/reproschema-ui/#/activities/0?url=url-to-activity-schema```\n\nWhen you want to make a standalone app for your study / protocol, you should\nmodify the URL next to `githubSrc` in the file `src/config.js` to make it point\nto the URL of your schema. If you are using GitHub it should point to the raw\nGithub pointer.\n\nAlso make sure that assetsPublicPath and backendServer are pointing the correct things.\n\n```javascript\nmodule.exports = {\n  /* eslint-disable */\n  githubSrc: 'url-to-your-protocol_schema',\n  banner: 'This service is a demonstration for the ReproNim project.',\n  startButton: 'Join',\n  assetsPublicPath: '/reproschema-ui/',\n  backendServer: 'https://sig.mit.edu/vb/'\n};\n```\n\n\n## Reference material\n\nThis app use [Vue.js](https://vuejs.org/), a javascript framework.\n\nWorking on this will most likely require you to have some knowledge of HTML, CSS\nand javascript.\n\nFor some free introductory material to javascript you can check the [mozilla MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\nor the [W3 school](https://www.w3schools.com/js/default.asp).\n\nFor introductory material on Vue you can start by having a look at the [guide](https://vuejs.org/v2/guide/).\nFor a more detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/)\nand [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\nYou can also find many non-free courses for all of the above on [udemy](https://www.udemy.com/)\nor similar MOOC services.\n\n### App architecture\n\n![app architecture](docs/img/app_architecture.jpeg)\n\n## Serve the app on your computer\n\nIf you want help us improve the app and work on it on your computer, you will\nneed to [fork this repository](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)\nand [clone it](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository)\non your machine.\n\nIf you don't have node or are not familiar with it, the easiest option is to \nuse a Docker setup.\n\n```shell\ndocker run -it --rm -p 8080:8080 -v $(pwd):/src --entrypoint bash \\\n    --platform linux/amd64 node:23.1.0-bookworm-slim\n```\n\nIn the container terminal\n\n```shell\ncd /src\nnpm install\nnpm run serve\n```\n\nThis serves the app with hot reload at `localhost:8080`: in other words you will\nbe able to see the app run if you open a browser and go to this URL\n[localhost:8080](localhost:8080).\n\n### Build for production with minification\n``` bash\nnpm run build\n```\n\n### Build for production and view the bundle analyzer report\n``` bash\nnpm run build --report\n```\n\n### Run unit tests\n``` bash\nnpm run test:unit\n```\n\n### Run e2e tests\n``` bash\nnpm run test:e2e\n```\n\n### Run all tests\n``` bash\nnpm test\n```\n\n### Lints and fixes files\n``` bash\nnpm run lint\n```\n\n## To test protocols and schemas locally\n\nRun this cors server script in the root directory of your reproschema. For\nexample, if you clone the demo-protocol, run the script inside the cloned \ndirectory. This script will serve the tree locally.\n\n```python\n#!/usr/bin/env python3\n\n# It's python3 -m http.server PORT for a CORS world\n\nfrom http.server import HTTPServer, SimpleHTTPRequestHandler\nimport sys\n\nclass CORSRequestHandler(SimpleHTTPRequestHandler):\n\n    def end_headers(self):\n        self.send_header('Access-Control-Allow-Origin', '*')\n        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')\n        self.send_header('Access-Control-Allow-Headers', 'Content-Type, Authorization')\n        self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')\n        return super(CORSRequestHandler, self).end_headers()\n\n    def do_OPTIONS(self):\n        self.send_response(200)\n        self.send_header('Access-Control-Allow-Origin', '*')\n        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')\n        self.send_header('Access-Control-Allow-Headers', 'Content-Type, Authorization')\n        self.end_headers()\n\nhost = sys.argv[1] if len(sys.argv) \u003e 2 else '0.0.0.0'\nport = int(sys.argv[len(sys.argv)-1]) if len(sys.argv) \u003e 1 else 8000\n\nprint(\"Listening on {}:{}\".format(host, port))\nhttpd = HTTPServer((host, port), CORSRequestHandler)\nhttpd.serve_forever()\n```\n\nChange config.js in this ui repo to point to your local schema. For example,\nif you cloned the demo protocol it would look like this:\n\n```\n  githubSrc: 'http://localhost:8000/DemoProtocol/DemoProtocol_schema',\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepronim%2Freproschema-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frepronim%2Freproschema-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepronim%2Freproschema-ui/lists"}