Deploy the app sub directory #7

#7 resolved
Edirom · Apr 9, 2024 · ab4af5e · peterstadler · Apr 10, 2024 · peterstadler
1 parent 1e77ba6
commit ab4af5e
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 44 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/dist
+dist
 .git
 
 
@@ -24,4 +24,4 @@ pnpm-debug.log*
 *.sw?
 
 #Electron-builder output
-/dist_electron
+dist_electron
diff --git a/.env b/.env
@@ -1,6 +1,6 @@
-CLIENT_ID=dc330d7fe9904f7dfcd8
-CLIENT_SECRET=838495f0bc343f514832b019f4610a5ecf32922b
+CLIENT_ID= ""
+CLIENT_SECRET=""
 VUE_APP_CLIENT_ID=$CLIENT_ID
 VUE_APP_CLIENT_SECRET=$CLIENT_SECRET
-CALL_BACK=http://localhost:8080/callback
-VUE_APP_CALL_BACK=$CALL_BACK
+CALL_BACK=""
+VUE_APP_CALL_BACK=$CALL_BACK
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,5 @@ pnpm-debug.log*
 *.sw?
 
 #Electron-builder output
-/dist_electron
+/dist_electron
+.env
diff --git a/Dockerfile b/Dockerfile
@@ -1,13 +1,17 @@
 FROM node:latest as builder
+ARG VUE_APP_PUBLIC_PATH=""
+ENV VUE_APP_PUBLIC_PATH=$VUE_APP_PUBLIC_PATH
 WORKDIR /usr/app
 COPY . .
-#RUN echo "VUE_APP_CLIENT_ID=$CLIENT_ID" >.env.development.local
-RUN npm i  --legacy-peer-deps && npm run build 
+RUN echo "VUE_APP_CLIENT_ID=$CLIENT_ID" >.env.development.local
+RUN echo "VUE_APP_CLIENT_SECRET=$CLIENT_SECRET" >.env.development.local
+RUN echo "VUE_APP_CALL_BACK=$CALL_BACK" >.env.development.local
+RUN npm install --legacy-peer-deps --force && npm run build
 
 
 FROM nginx:alpine
 
 WORKDIR /etc/nginx
 COPY 40-create-ghcred.sh /docker-entrypoint.d
 COPY ngnix.conf /etc/nginx/nginx.d/default.conf
-COPY --from=builder /usr/app/dist/ /usr/share/nginx/html/
+COPY --from=builder /usr/app/dist/ /usr/share/nginx/html/test/
diff --git a/ngnix.conf b/ngnix.conf
@@ -1,25 +1,31 @@
 server {
-  listen 80
-  # declare token is "" (empty str) for original request without args,because $is_args concat any var will be `?`
-  set $token "";
-  # if the request has args update token to "&"
-  # request without args doesn't make sense in this case
-  if ($is_args) {
-    set $token "&";
-  }
-  # file created on container start from env vars (40-create-ghcred.sh)
-  include "/GH_OAUTH_CLIENT.conf";
-  # reverse proxy to github access_token
-  # set rule to /auth explicitly
-  location = /auth {
-    set $args "${args}${token}client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}";
-    proxy_pass https://github.com/login/oauth/access_token$is_args$args;
-    proxy_set_header accept "application/json";
-  }
-  # default rule to access app
-  location / {
-    root   /usr/share/nginx/html;
-    index  index.html;
-    try_files $uri $uri/ /index.html;
-  }
+    listen 80;
+
+    # declare token is "" (empty str) for original request without args,because $is_args concat any var will be `?`
+    set $token "";
+    # if the request has args update token to "&"
+    # request without args doesn't make sense in this case
+    if ($is_args) {
+        set $token "&";
+    }
+    # file created on container start from env vars (40-create-ghcred.sh)
+    include "/GH_OAUTH_CLIENT.conf";
+    # reverse proxy to github access_token
+    # set rule to /auth explicitly
+    location = /auth {
+        set $args "${args}${token}client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}";
+        proxy_pass https://github.com/login/oauth/access_token$is_args$args;
+        proxy_set_header accept "application/json";
+    }
+
+    # Serve Vue.js application from VUE_APP_PUBLIC_PATH
+    location / {
+        alias /usr/share/nginx/html$VUE_APP_PUBLIC_PATH;
+        try_files $uri $uri/ $VUE_APP_PUBLIC_PATH/index.html;
+    }
+
+    # Redirect requests without trailing slash to include it
+    location ~ ^(.*)/$ {
+        return 301 $1;
+    }
 }
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "@recogito/annotorious-openseadragon": "^2.7.6",
     "@vue/vue3-jest": "^29.2.1",
     "core-js": "^3.6.5",
-    "dotenv": "^16.3.1",
     "js-base64": "^3.7.5",
     "octokit": "^2.0.14",
     "openseadragon": "^3.0.0",

diff --git a/public/index.html b/public/index.html
@@ -3,8 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <script type="text/javascript">window.PUBLIC_PATH;</script>
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/src/components/OsdComponent.vue b/src/components/OsdComponent.vue
@@ -27,13 +27,15 @@ export default {
     }
   },
   methods: {
+  
     renderZones: function () {
       this.viewer.clearOverlays()
       const annots = this.$store.getters.zonesOnCurrentPage
       annots.forEach(annot => {
         // console.log('trying to render zone based on: ')
         // console.log(annot)
         const rawDimensions = annot.target.selector.value.substr(11).split(',')
+        console.log("raw dimention is ", rawDimensions)
         const xywh = {
           x: Math.round(rawDimensions[0]),
           y: Math.round(rawDimensions[1]),
@@ -44,6 +46,9 @@ export default {
         const measureCssLink = annot.body.find(body => body.type === 'Dataset' && body.selector.value.startsWith('measure'))?.selector.value
         const mdivCssLink = annot.body.find(body => body.type === 'Dataset' && body.selector.value.startsWith('mdiv'))?.selector.value
         const mdivIndizes = annot.body.find(body => body.type === 'Dataset' && body.selector.value.startsWith('mov_'))?.selector.value
+        
+        console.log("this is xywh " , "", xywh.x,"", xywh.y, "", xywh.w, "", xywh.h)
+
 
         const overlay = document.createElement('div')
         overlay.id = zoneId
@@ -67,12 +72,16 @@ export default {
         overlay.appendChild(label)
         overlay.addEventListener('mouseout', (e) => {
          console.log('mouseout')
+         
           this.$store.dispatch('unhoverZone', zoneId)
           e.preventDefault()
           e.stopPropagation()
         })
         overlay.addEventListener('mouseenter', (e) => {
+          console.log("this is e " , "", e.x,"", e.y, "", xywh.w, "", xywh.h, "scree x", e.x)
+
           console.log('mousenter')
+          
           this.$store.dispatch('hoverZone', zoneId)
           e.preventDefault()
           e.stopPropagation()
@@ -173,6 +182,8 @@ export default {
       // The users has selected an existing annotation
       // console.log('selected annotation')
       // console.log(annotation)
+      console.log("anno is clicked")  
+
     })
 
     this.anno.on('createAnnotation', (annotation) => {

diff --git a/src/public-path.js b/src/public-path.js
@@ -0,0 +1,3 @@
+/* global __webpack_public_path__:writable */
+/* exported __webpack_public_path__ */
+__webpack_public_path__ = window.PUBLIC_PATH,process.env.PUBLIC_PATH;
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-
+import '../public-path.js'
 
 
 const routes = [
@@ -24,4 +24,4 @@ const router = createRouter({
   routes
 })
 
-export default router
+export default router
diff --git a/src/store/index.js b/src/store/index.js
@@ -435,7 +435,7 @@ export default createStore({
         redirect_uri: redirectUri,
         scope,
       });
-
+      console.log("this is authentication ")
       const url = `https://github.com/login/oauth/authorize?auth?code=${code}&${query}`
       fetch(url).then(resp => {
         console.log(resp.ok)

diff --git a/src/tools/meiMappings.js b/src/tools/meiMappings.js
@@ -159,6 +159,7 @@ export function generateMeasure () {
 
 // TODO: this needs to be more clever
 function incrementMeasureNum (num, diff) {
+  console.log("this is the returened value " +   diff)
   return parseInt(num) + diff
 }
 
@@ -189,6 +190,8 @@ export function insertMeasure (xmlDoc, measure, state, currentZone, pageIndex, t
   let relativeTo
   let relativeWhere
 
+  console.log("this is zone ", currentZone)
+
   const pbAlreadyStarted = pb !== undefined
   // console.log('pb started: ' + pbAlreadyStarted)
 
@@ -306,8 +309,8 @@ export function insertMeasure (xmlDoc, measure, state, currentZone, pageIndex, t
 
       // get position of new zone within system
       const newIndex = above.findIndex(zone => zone.new)
-
-      if (newIndex === 0) {
+      console.log("this is new index " + newIndex)
+      if (newIndex === 1) {
         // new zone is first within current system
         if (lastGroup.length === 0) {
           // must be the first measure on new page, so introduce new <pb/>
@@ -368,7 +371,7 @@ export function insertMeasure (xmlDoc, measure, state, currentZone, pageIndex, t
 
           const precedingZoneId = lastGroup[0].id
           const precedingMeasure = targetMdiv.querySelector('measure[facs~="#' + precedingZoneId + '"]')
-
+            
           newMeasure.setAttribute('n', incrementMeasureNum(precedingMeasure.getAttribute('n'), 1))
           precedingMeasure.after(newMeasure)
 
@@ -385,12 +388,27 @@ export function insertMeasure (xmlDoc, measure, state, currentZone, pageIndex, t
         precedingZone.after(newZone)
 
         const precedingZoneId = above[newIndex - 1].id
+        console.log("preceding zone id is " + precedingZoneId)
         const precedingMeasure = xmlDoc.querySelector('measure[facs~="#' + precedingZoneId + '"]')
+        console.log("thisis preceding measure " + precedingMeasure)
+        if(precedingMeasure == NULL){
+          precedingMeasure = 0
+          console.log("thisis preceding measure " + precedingMeasure)
+        }
+        let measureCount = 1
+        const multiRest = precedingMeasure.querySelector('multiRest')
+        if (multiRest !== null) {
+          measureCount = parseInt(multiRest.getAttribute('num'))
+          newMeasure.setAttribute('n', incrementMeasureNum(measureCount, 2))
+          console.log('new measure is ' , newMeasure)
 
-        console.log('\n\nzone:' + precedingZoneId)
-        console.log(precedingMeasure)
 
-        newMeasure.setAttribute('n', incrementMeasureNum(precedingMeasure.getAttribute('n'), 1))
+        }else{
+          newMeasure.setAttribute('n', incrementMeasureNum(precedingMeasure.getAttribute('n'), 1))
+        }
+
+
+        console.log('\n\nzone:' + precedingZoneId)
         precedingMeasure.after(newMeasure)
       }
 
@@ -470,6 +488,7 @@ export function addZoneToLastMeasure (xmlDoc, zoneId) {
   const oldFacs = measure.hasAttribute('facs') ? measure.getAttribute('facs') + ' ' : ''
   console.log(oldFacs)
   measure.setAttribute('facs', oldFacs + '#' + zoneId)
+  console.log("this is the last measure")
 }
 
 /* // this works, but isn't currently used

diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,6 @@
+
+module.exports = {
+    publicPath: process.env.NODE_ENV === 'production'
+      ? process.env.VUE_APP_PUBLIC_PATH
+      : '/'
+  }