App.vue

<template>
  <loading v-if="loading" data-qa="tapestry-loading" style="height: 75vh;"></loading>
  <div v-else id="app">
    <!-- <div class="prompt-container" v-if="promptButtonClicked">
      <form @submit="submitUserInput">
        <button type="submit" class="prompt-submit-button">
        </button>
        <textarea class="prompt-text-field" v-model="userInput" rows="5" cols="40" placeholder="Enter a text prompt up to 1000 words to generate a Tapestry (e.g. Machine                          learning in the workplace). Do not use the ~ character in your text."></textarea>
      </form>
      <textarea class="lo-text-field" placeholder="Specify learning objectives (prompt) for the Tapestry"> </textarea>
    </div>
    <div>
      <form @submit="deleteNodes">
        <button type="submit" class="delete-submit-button"> 
          Delete All Nodes
        </button>
      </form>
    </div>
    <div id="loading" v-if="generatingTapestry">
      <img :src="LoadingGif" alt="Loading..."/>
    </div> -->
    <tapestry-app></tapestry-app>
    <!-- <div
      v-if="dropButtonClicked"
      class="dropzone"
      :class="{ 'dragging': dragging }"
      @dragover.prevent
      @dragenter="dragging = true"
      @dragleave="dragging = false"
      @drop="handleDrop"
    >
      Drag and drop a PDF file here or     
      <br>
      <div v-if="droppedFileName">Dropped file: {{ droppedFileName }}</div>
      <div>
        <input type="file" ref="fileInput" style="display: none" @change="handleFileSelect"/>
        <button class="select-pdf-button" @click="openFileInput">Select PDF File</button>
      </div>
    </div> -->
    <!-- <div class="white-box">
      A default connection between nodes is represented in <span class="navy-blue">navy blue</span><br>
      The color of the connection represents the strength of the relevancy between grandchild nodes. It represents a correlation number - note that this number is generated by ChatGPT-3.5 after comparing the similarity of texts between two nodes.
      <br>
      <span class="correlation-text">Lower correlation</span> <span class="lighter-blue">70-79</span> <span class="medium-blue">80-89</span> <span class="darker-blue">90-100</span> <span class="correlation-text">Highest correlation</span>
    </div> -->
    <router-view></router-view>
    <node-modal></node-modal>
    <link-modal></link-modal>
    <lightbox v-if="viewingNode" :node-id="nodeId"></lightbox>
    <sidebar v-if="!isEmpty"></sidebar>
    <tapestry-error></tapestry-error>
    <b-modal
      id="loggedOutModal"
      :visible="!loggedIn"
      title="Not Logged In"
      no-close-on-backdrop
    >                              
      You can either refresh and stay logged out or log in again.
      <template #modal-footer>
        <b-button @click="refresh">Refresh</b-button>
        <b-button @click="redirectToLogin">Log In</b-button>
      </template>
    </b-modal>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex"
import { names } from "@/config/routes"
import Lightbox from "@/components/Lightbox"
import LinkModal from "@/components/modals/LinkModal"
import NodeModal from "@/components/modals/NodeModal"
import TapestryApp from "@/components/TapestryApp"
import Sidebar from "@/components/Sidebar"
import TapestryError from "@/components/TapestryError"
import Loading from "@/components/common/Loading"
import client from "@/services/TapestryAPI"
import { isLoggedIn } from "./services/wp"
import axios from 'axios'
import "@/assets/styles/themes.css"

export default {
  name: "app",
  components: {
    Loading,
    Lightbox,
    NodeModal,
    LinkModal,
    TapestryApp,
    Sidebar,
    TapestryError,
  },
  data() {
    return {
      loading: true,
      loggedIn: true,
      userInput: "", // taking in user input data
      generatingTapestry: false,
      promptButtonClicked: false,
      dropButtonClicked: false,
      dragging: false,
      droppedFileName: '',
    }
  },
  computed: {
    ...mapState(["nodes", "rootId", "links", "highlightedLinks"]),
    ...mapGetters(["getTheme", "getNeighbouringLinks"]),
    isEmpty() {
      return Object.keys(this.nodes).length === 0
    },
    nodeId() {
      return this.$route.params.nodeId
    },
    viewingNode() {
      return (
        this.$route.name === names.LIGHTBOX || this.$route.query.from === "lightbox"
      )
    },
  },
  // watch: {
  //   loggedIn(isStillLoggedIn) {
  //     if (!isStillLoggedIn) {
  //       this.$bvModal.show("loggedOutModal")
  //     }
  //   },
  // },
  mounted() {
    // if (isLoggedIn()) {
    //   var that = this
    //   jQuery(function($) {
    //     wp.heartbeat.interval("fast")

    //     $(document).on("heartbeat-tick", function(event, data) {
    //       that.loggedIn = data["wp-auth-check"]
    //     })
    //   })
    // }
    window.addEventListener("click", this.recordAnalytics)

    const data = [
      client.getTapestry(),
      client.getLastSelectedNode(),
      client.getTheme(),
    ]
    Promise.all(data).then(([tapestryData, selectedNode, theme]) => {
      this.changeTheme(theme.data)
      if (this.getTheme == "system") {
        const isDarkMode =
          window.matchMedia &&
          window.matchMedia("(prefers-color-scheme: dark)").matches
        document.documentElement.setAttribute(
          "data-theme",
          isDarkMode ? "dark" : "light"
        )
        window
          .matchMedia("(prefers-color-scheme: dark)")
          .addEventListener("change", e => {
            document.documentElement.setAttribute(
              "data-theme",
              e.matches ? "dark" : "light"
            )
          })
      } else {
        document.documentElement.setAttribute("data-theme", this.getTheme)
      }

      this.init(tapestryData)
      this.loading = false
      if (!this.$route.params.nodeId && tapestryData.nodes.length > 0) {
        let path = `/nodes/${tapestryData.rootId}`
        if (selectedNode) {
          path = `/nodes/${selectedNode.nodeId}`
          if (selectedNode.rowId) {
            path = `${path}/view/${selectedNode.rowId}`
          }
        }
        this.$router.push({
          path,
          query: this.$route.query,
        })
      }
    })
  },
  beforeDestroy() {
    window.removeEventListener("click", this.recordAnalytics)
  },
  methods: {
    ...mapMutations(["init", "changeTheme"]),
    ...mapActions(["deleteNode", "deleteLink"]),
    refresh() {
      this.$router.go()
    },
    redirectToLogin() {
      window.location.href = `${window.location.origin}/wp-login.php?redirect_to=${window.location.href}`
    },
    recordAnalytics(evt) {
      const x = evt.clientX + window.pageXOffset
      const y = evt.clientY + window.pageYOffset
      client.recordAnalyticsEvent("user", "click", "screen", null, {
        x: x,
        y: y,
      })
    },
  }
}
</script>

<style lang="scss">
html {

  #loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  font-size: 100%;

  body.single-tapestry {
    background: var(--bg-color-primary);
    .site-title a:link,
    .site-title a:visited {
      color: var(--text-color-secondary);
    }
    a:link,
    a:visited {
      color: var(--highlight-color);
    }
  }

  #app {
    color: var(--text-color-primary);
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;

    li {
      line-height: initial;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      &::before {
        display: none;
      }
    }

    button:focus {
      outline: none;
    }

    .btn {
      &:disabled,
      &.disabled {
        * {
          opacity: 50%;
        }
      }
    }
  }

  // .white-box {
  //   height: 200px;
  //   width: 500px;
  //   border-radius: 10px;
  //   background-color: white;
  //   color: #77AEBF;
  //   justify-content: center;
  //   font-weight: lighter;
  //   top: 50%;
  //   margin-right: 10px;
  // }

  // .navy-blue {
  //   color:#006C92;
  //   font-weight: bold;
  // }

  // .lighter-blue {
  //   color: #77AEBF;
  //   font-size: 20px;
  //   font-weight: 1000;
  // }

  // .medium-blue {
  //   color: #1DADE1;
  //   font-size: 20px;
  //   font-weight: 1000;
  // }

  // .darker-blue {
  //   color: #006C92;
  //   font-size: 20px;
  //   font-weight: 1000;
  // }

  // .correlation-text {
  //   color: #59595B;
  //   font-size: 15px;
  // }
}
</style>
<style lang="scss" scoped>
  #loading {
    background-color: white;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>