{"id":23143636,"url":"https://github.com/digitalinteraction/thinkactive-web","last_synced_at":"2026-02-10T01:01:42.878Z","repository":{"id":141112758,"uuid":"169445555","full_name":"digitalinteraction/thinkactive-web","owner":"digitalinteraction","description":"Web component for ThinkActive project","archived":false,"fork":false,"pushed_at":"2019-02-06T17:47:54.000Z","size":9723,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-06T05:15:19.691Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digitalinteraction.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2019-02-06T17:23:01.000Z","updated_at":"2024-11-08T12:31:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ec0c084-9e17-42fb-a654-a0798ce6637f","html_url":"https://github.com/digitalinteraction/thinkactive-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/digitalinteraction/thinkactive-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fthinkactive-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fthinkactive-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fthinkactive-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fthinkactive-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitalinteraction","download_url":"https://codeload.github.com/digitalinteraction/thinkactive-web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fthinkactive-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267617643,"owners_count":24116208,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-17T15:13:52.746Z","updated_at":"2026-02-10T01:01:42.819Z","avatar_url":"https://github.com/digitalinteraction.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Think Active Web\n\nA web interface for creating, managing and running ThinkActive deployments. It is a [Vue](https://vuejs.org) webapp using [npm](https://www.npmjs.com/) packages, written using\n[JavaScript](https://developer.mozilla.org/bm/docs/Web/JavaScript),\n[Sass](https://sass-lang.com/) and [Pug](https://pugjs.org/api/getting-started.html),\nlinted with [ESLint](https://eslint.org/), built with\n[Webpack](https://webpack.js.org/) and deployed through\n[Docker](https://www.docker.com/).\n\n## Features\n\n* Setup and configure deployments\n* Manage devices on a deployment\n* Download files related to a deployment\n\n## Work In Progress\n\n* Tablet View – A view of a deployment to be shown on a tablet in-class\n* Present View – A view of a deployment to be present by an instructor/teacher\n* User Management – Add and manage users in organisations, then create deployments under them\n\n## Project Structure\n\n| Path | Info |\n| ---- | ---- |\n| `/build`  | The Webpack configuration and build scripts, generated using the [vue-cli](https://github.com/vuejs/vue-cli) |\n| `/config` | Configurations for different versions of the build i.e production vs dev |\n| `/src` | The actual source code for the webapp |\n| `/src/api` | Files for interacting with/mocking the Gabber API |\n| `/src/apps` | Wrappers for the different sub-apps, i.e web vs tablet vs present  |\n| `/src/assets` | Non-JavaScript assets to be compiled into the app, included in from vue components |\n| `/src/components` | Vue single file components (.vue), grouped by the type of thing they are |\n| `/src/events` | Vue [event busses](https://alligator.io/vuejs/global-event-bus/) |\n| `/src/layouts` | Vue components which solely layout content using `\u003cslot\u003e` elements |\n| `/src/mixins` | Vue [mixins](https://vuejs.org/v2/guide/mixins.html) |\n| `/src/pages` | Vue components that are directly routed to by the router |\n| `/src/router` | The [vue-router](https://router.vuejs.org/en/) and its routes |\n| `/src/store` | The [vue-store](https://vuex.vuejs.org/en/) and its modules |\n| `/src/constants.js` | Cross project constant values for easy `import '@/constants.js'` |\n| `/static` | Static assets that are served along side the compiled source |\n\nThe entrypoint to the app is `/src/main.js`, if you follow the dependancies from there you should work out structure of the app.\n\n## Api Integration\n\nThe app uses an [ApiInterface](/src/api/ApiInterface) to interact with a live/mock api so they can easily be switch out for testing.\nIt uses the `MOCK_API` and `API_URL` config variables to decide if it is using the mock version or not.\n\n### Master / Child Page Controllers\n\nEach main page of the app is split into separate master / children page controllers. Within the master page controller you should maintain current state of the Vuex Store via Api requests and within the child controller you should use the Vuewx getters and setters in order to maintain state and reduce API requests.\n\n#### Example\nAn example of this can be seen in `/src/pages/org/OrgRootPage.vue` which persists the state of the current organisation being accessed by the user. As the user navigates through the child routes (i.e. `/src/pages/org/OrgHomePage.vue`) the current active organisation, associated organisationMembers, organisationDevices are initially loaded by the `OrgRootPage.vue` and then added to the `/src/store/state.js`. Children then interact with the Vuex Store to add / remove / update the active data.\n\n## Creating Api endpoints\n\nThe app uses [Vuex Mutations](https://vuex.vuejs.org/guide/mutations.html) to manage the current state of currently viewed organisational data (such as active deployments, active devices etc). Updating this data is achieved through API requests (see Api Integration) which interact with the [thinkactive.io-api project](https://openlab.ncl.ac.uk/gitlab/thinkactive.io/thinkactive.io-api).\n\n\n**You must implement a mock interface and a live interface** which retrieves data from the API and then mutates the stored state in the Vuex controller.\n\nTo access the api interface use `this.$.api.functionName` in your master page controller to make the API request (see Master / Children Page Controllers). Once this data has been saved to the store, children components access the data via the Vuex store.\n\nCreating endpoints requires you to add the function to the `ApiInterface.js` and the subclasses of `MockApi.js` and `LiveApi.js`. It is recommended that you make use of the `Generator.js` and `mock.js` to create dummy data for the `MockApi.js` interface.\n\nImplementing endpoints in this app requires that you modify the following files:\n\n| Path | Info |\n| ---- | ---- |\n| `/src/api/ApiInterface.js` | Add your custom api function here (use `this.notImplemented()` to identify unimplemented endpoints) |\n| `/src/api/MockApi.js` | Add your mock function to retrieve mock data  |\n| `/src/api/LiveApi.js` | Add your REST request here using `this.endpoint(REQUEST_TYPE, ENDPOINT)` |\n| `/src/api/Generator.js` | Create a generator to create mock object responses for the API |\n| `/src/api/mock.js` | Create a function for retrieving multiple of the generator mock objects |\n\nImplementing Vuex getters and setters requires that you modify the following files:\n\n| Path | Info |\n| ---- | ---- |\n| `/src/constants.js` | Add your Vuex store constant here |\n| `/src/store/getters.js` | Add getter function here to retrieve constant |\n| `/src/store/mutations.js` | Add setter function here to update constant |\n| `/src/store/state.js` | Add your constant variable here |\n\n### Example creation of Api endpoint\nFor an example implementation view commit [7b74a094](https://openlab.ncl.ac.uk/gitlab/thinkactive.io/thinkactive.io-web-2/commit/7b74a094961e48a41b84ec922a7dcd1ea90cd7d3)\n\n## Deployment\n\nThe app uses Docker to deploy the app. When you set the version using `npm version ...`\nit will automatically build and push a new version of the app to the docker registry.\nTo do this is uses the [Dockerfile](/Dockerfile) to build the web assets and then runs [Nginx](https://www.nginx.com/) to server the generated files. To tag the docker image it uses the [REGISTRY](/REGISTRY) file and the [package.json](/package.json)'s version.\n\n## Dev commands\n\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm test\n```\n\n## Deployment Build\n\nThis repo uses a CI to build the web into a docker image, ready to be deployed.\nWhenever a commit is pushed with an git tag it builds an image for that commit.\nTo tag the commit, use the `npm version ...` command which updates the package\nversion and commits the `package.json` tagged with the new version.\n\n```bash\n# Update the npm version\n# \u003e Make sure to run without unstaged changes\nnpm version # patch | minor | major | prepatch | preminor | prerelease\n```\n\n**Extras**\n\n```bash\n# If using a dist-tag i.e. beta, use `npm prerelease` to increment subversions\nnpm version 1.0.0-beta.1  # 1.0.0-beta.1\nnpm version prerelease    # 1.0.0-beta.2\n\n# To experiment with npm version\nmkdir test_dir\ncd test_dir\nnpm init -y\nnpm version # ...\n```\n\n## Deployment Config\n\nTo configure the deployment, use the `CONFIG_KEYS` environment variable.\nWhich should be a csv of environment variables you want inserted,\nthe variables are inserted at `window.CONFIG.YOUR_VAR`.\n\nYou should use the [ConfigMixin](/src/mixins/ConfigMixin.js) to access variables which falls back to `process.env` (where webpack config is).\n\n```yml\nenvironment:\n  CONFIG_KEYS: MOCK_API,API_URL\n  API_URL: https://api.thinkactive.io\n  MOCK_API: true\n```\n\nFor more about the deployment see the [stack repo](https://openlab.ncl.ac.uk/gitlab/thinkactive.io/thinkactive.io-stack).\n\n---\n\nFor a detailed explanation on how the project was setup, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalinteraction%2Fthinkactive-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitalinteraction%2Fthinkactive-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalinteraction%2Fthinkactive-web/lists"}