Route

40-create-ghcred.sh

@@ -1,8 +1,24 @@
-#/bin/sh
-# create nginx config from evironment
-# *prevent envsubst from killing nginx vars with 'tr' and '@'* 
+#!/bin/sh
+
+# Set default value for VUE_APP_PUBLIC_PATH if not provided
+# Remove leading and trailing whitespace and slashes from VUE_APP_PUBLIC_PATH
+VUE_APP_PUBLIC_PATH=$(echo $VUE_APP_PUBLIC_PATH | sed 's/^\s*\///;s/\/\s*$//')
+
+# Add leading slash only if string is not empty
+if [ "$VUE_APP_PUBLIC_PATH" != "/" ] && [ "$VUE_APP_PUBLIC_PATH" != "" ]; then
+    VUE_APP_PUBLIC_PATH="/$VUE_APP_PUBLIC_PATH"
+fi
+
+# Link the Vue.js app to the public path
+ln -s /usr/share/nginx/html /usr/share/nginx/html/"$VUE_APP_PUBLIC_PATH"
+sed -i "s+/myAppPlaceholder+$VUE_APP_PUBLIC_PATH+g" /usr/share/nginx/html/index.html
+sed -i "s+/myAppPlaceholder+$VUE_APP_PUBLIC_PATH+g" /usr/share/nginx/html/js/app.*.js
+
+# Create NGINX configuration from environment variables
+# The @ character is used to prevent envsubst from interpreting NGINX variables
 cat <<EOT | envsubst | tr '@' '$' >/GH_OAUTH_CLIENT.conf
-set @CLIENT_ID $CLIENT_ID;
-set @CLIENT_SECRET $CLIENT_SECRET;
-set @CALL_BACK $CALL_BACK
-EOT
+# Handle CLIENT_ID, CLIENT_SECRET, and CALL_BACK - they can be empty
+set @CLIENT_ID "${CLIENT_ID:-}";
+set @CLIENT_SECRET "${CLIENT_SECRET:-}";
+set @CALL_BACK "${CALL_BACK:-}";
+EOT

Dockerfile

@@ -1,6 +1,5 @@
 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
@@ -10,9 +9,8 @@ RUN npm install --legacy-peer-deps --force && npm run build
 
 
 FROM nginx:alpine
-ARG VUE_APP_PUBLIC_PATH=""
-ENV VUE_APP_PUBLIC_PATH=$VUE_APP_PUBLIC_PATH
+ENV VUE_APP_PUBLIC_PATH="/"
 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/${VUE_APP_PUBLIC_PATH}
+COPY ngnix.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /usr/app/dist/ /usr/share/nginx/html

ngnix.conf

@@ -1,34 +1,44 @@
 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 "&";
+    # Load environment variables from a file created on container start (it might be empty)
+    include "/GH_OAUTH_CLIENT.conf";  # This file may be empty or missing values
+
+    # Default to empty strings if CLIENT_ID or CLIENT_SECRET are not set
+    set $client_id "";
+    set $client_secret "";
+
+    # Check if environment variables were set, otherwise default to empty
+    if ($CLIENT_ID) {
+        set $client_id "client_id=${CLIENT_ID}";
     }
-    # 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
+    if ($CLIENT_SECRET) {
+        set $client_secret "client_secret=${CLIENT_SECRET}";
+    }
+
+    # Reverse proxy to GitHub OAuth access token
     location = /auth {
-        set $args "${args}${token}client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}";
+        # Handle query arguments
+        set $token "";
+        if ($is_args) {
+            set $token "&";
+        }
+
+        # Concatenate the query arguments with client_id and client_secret, if set
+        set $args "${args}${token}${client_id}&${client_secret}";
+
+        # Proxy request to GitHub OAuth access token endpoint
         proxy_pass https://github.com/login/oauth/access_token$is_args$args;
-        proxy_set_header accept "application/json";
+        proxy_set_header Accept "application/json";
     }
 
-    # Serve Vue.js application from VUE_APP_PUBLIC_PATH
-
-  # default rule to access app
-  location / {
-    root   /usr/share/nginx/html;
-    index  index.html;
-    try_files $uri $uri/ /index.html;
-  }
-    # Redirect requests without trailing slash to include it
-    location ~ ^(.*)/$ {
-        return 301 $1;
+    # Serve Vue.js application and handle optional URL rewrites
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+
+        # Optional: Redirect requests that lack a trailing slash to add one
+        rewrite ^([^.]*[^/])$ $1/ permanent;
     }
 }
-s

src/components/OsdComponent.vue

@@ -182,18 +182,30 @@ 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) => {
+
+
+     // const { x, y, width, height } = annotation.shapes[0].geometry;
+
+      // Update the x and y coordinates of the rectangle
+      // const newX = x + width; // Example: Move the rectangle to the right of the selected area
+      // const newY = y + height; // Example: Move the rectangle below the selected area
+      console.log("this is x ",  annotation)
+      // console.log("this is y " + newX)
       // The users has created a new annotation
       const newId = 'z' + uuid()
       annotation.id = newId
       this.$store.dispatch('createZone', annotation)
       this.$store.dispatch('selectZone', null)
       this.anno.clearAnnotations()
       this.renderZones()
+      console.log("anno is clicked ", annotation.target.selector)  
+
+
+
     })
 
     this.anno.on('updateAnnotation', (annotation) => {

src/public-path.js

@@ -1,3 +1,3 @@
 /* global __webpack_public_path__:writable */
 /* exported __webpack_public_path__ */
-__webpack_public_path__ = window.PUBLIC_PATH,process.env.PUBLIC_PATH;
+//__webpack_public_path__ = '/myapp';

vue.config.js

@@ -1,6 +1,4 @@
 
 module.exports = {
-    publicPath: process.env.NODE_ENV === 'production'
-      ? process.env.VUE_APP_PUBLIC_PATH
-      : '/'
-  }
+    publicPath: "/myAppPlaceholder"
+  }