diff options
| -rw-r--r-- | application/components/app.vue | 80 | ||||
| -rw-r--r-- | application/components/modal.vue | 7 | ||||
| -rw-r--r-- | application/components/value-picker.vue | 2 | ||||
| -rw-r--r-- | application/github.js | 4 |
4 files changed, 65 insertions, 28 deletions
diff --git a/application/components/app.vue b/application/components/app.vue index 0fafb40..80a14d4 100644 --- a/application/components/app.vue +++ b/application/components/app.vue @@ -3,6 +3,7 @@ import keyBy from 'lodash/keyBy' import Keymap from './keymap.vue' import Loader from './loader.vue' +import Modal from './modal.vue' import * as config from '../config' import * as github from '../github' @@ -15,7 +16,8 @@ import { loadKeycodes } from '../keycodes' export default { components: { keymap: Keymap, - Loader + Loader, + Modal }, provide() { return { @@ -33,6 +35,7 @@ export default { indexedKeycodes: {}, behaviours: [], indexedBehaviours: {}, + tooManyRepos: false, keymap: {}, layout: [], layers: [], @@ -48,6 +51,10 @@ export default { methods: { async loadData() { await github.init() + if (config.enableGitHub && github.isGitHubAuthorized() && github.repositories.length > 1) { + this.tooManyRepos = true + return + } const loadKeyboardData = async () => { if (config.enableGitHub && github.isGitHubAuthorized()) { return github.fetchLayoutAndKeymap() @@ -105,6 +112,10 @@ export default { body: JSON.stringify(this.editingKeymap) }) }, + getInstallationUrl() { + console.log(github.installation, github.repositories, github) + return `https://github.com/settings/installations/${github.installation.id}` + }, async doReadyCheck() { await healthcheck() await this.loadData() @@ -115,30 +126,44 @@ export default { <template> <loader :load="doReadyCheck"> - <keymap :layout="layout" :keymap="editingKeymap.keyboard ? editingKeymap : keymap" @update="handleUpdateKeymap" /> - <div id="actions"> - <button - v-if="config.enableLocal" - v-text="`Save Local`" - id="compile" - :disabled="!this.editingKeymap.keyboard" - @click="handleCompile" - /> - <button - v-if="config.enableGitHub && !githubAuthorized" - v-text="`Authorize GitHub`" - @click="handleGithubAuthorize" - title="Install as a GitHub app to edit a zmk-config repository." - - /> - <button - v-if="config.enableGitHub && githubAuthorized" - v-text="`Commit Changes`" - @click="handleCommitChanges" - :disabled="!this.editingKeymap.keyboard" - title="Commit keymap changes to GitHub repository" - /> + <div v-if="tooManyRepos"> + <modal> + <div class="dialog"> + <h2>Hold up a second!</h2> + <p>The Keymap Editor app has been installed for more than one GitHub repository.</p> + <p> + I'm still working on things, including the ability to pick a specific + repo, but in the meantime you should go back to your <a :href="getInstallationUrl()">app configuration</a> + and select a single repository containing your keyboard's zmk-config. + </p> + </div> + </modal> </div> + <template v-else> + <keymap :layout="layout" :keymap="editingKeymap.keyboard ? editingKeymap : keymap" @update="handleUpdateKeymap" /> + <div id="actions"> + <button + v-if="config.enableLocal" + v-text="`Save Local`" + id="compile" + :disabled="!this.editingKeymap.keyboard" + @click="handleCompile" + /> + <button + v-if="config.enableGitHub && !githubAuthorized" + v-text="`Authorize GitHub`" + @click="handleGithubAuthorize" + title="Install as a GitHub app to edit a zmk-config repository." + /> + <button + v-if="config.enableGitHub && githubAuthorized" + v-text="`Commit Changes`" + @click="handleCommitChanges" + :disabled="!this.editingKeymap.keyboard" + title="Commit keymap changes to GitHub repository" + /> + </div> + </template> </loader> </template> @@ -160,4 +185,11 @@ button[disabled] { cursor: not-allowed; } +.dialog { + background-color: white; + padding: 40px; + margin: 40px; + max-width: 500px; +} + </style> diff --git a/application/components/modal.vue b/application/components/modal.vue index 96c106e..65d10f2 100644 --- a/application/components/modal.vue +++ b/application/components/modal.vue @@ -8,7 +8,9 @@ export default { <template> <teleport to="body"> <div class="wrapper"> - <slot /> + <div class="content"> + <slot /> + </div> </div> </teleport> </template> @@ -26,4 +28,7 @@ export default { justify-content: center; align-items: center; } +.content { + display: block; +} </style>
\ No newline at end of file diff --git a/application/components/value-picker.vue b/application/components/value-picker.vue index 44921d5..3769a39 100644 --- a/application/components/value-picker.vue +++ b/application/components/value-picker.vue @@ -180,7 +180,7 @@ export default { </div> </template> -<style> +<style scoped> .dialog { width: 300px; diff --git a/application/github.js b/application/github.js index 51dafea..5a06f54 100644 --- a/application/github.js +++ b/application/github.js @@ -1,8 +1,8 @@ import * as config from './config' let token -let installation -let repositories +export let installation +export let repositories function request (...args) { return fetch(...args).then(res => { |