npm - impeditmaiores - Versions diffs - 1.0.0 - Mend

impeditmaiores 1.0.0

Files changed (421) hide show

package/demos/vue/package.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "@esri/arcgis-rest-demo-vue-with-popup",
+  "description": "VueJS demo of @esri/arcgis-rest-* packages.",
+  "version": "2.22.0",
+  "author": "",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build:app": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "start": "npm run serve"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-auth": "^2.22.0",
+    "@esri/arcgis-rest-request": "^2.22.0",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0",
+    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-service": "^3.0.0",
+    "@vue/eslint-config-prettier": "^3.0.0",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

package/demos/vue/public/favicon.ico ADDED Viewed

Binary file

package/demos/vue/public/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>ArcGIS Rest JS Vue</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <style>
+      html, body {
+        width: 100%;
+        height: 100%;
+      }
+      .row {
+        margin-bottom: 25px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/demos/vue/src/assets/logo.svg ADDED Viewed

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 400 400"
+   height="400"
+   width="400"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,400)"
+     id="g10"><g
+       transform="translate(178.0626,235.0086)"
+       id="g12"><path
+         id="path14"
+         style="fill:#4dba87;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 0,0 -22.669,-39.264 -45.338,0 h -75.491 L -22.669,-170.017 75.491,0 Z" /></g><g
+       transform="translate(178.0626,235.0086)"
+       id="g16"><path
+         id="path18"
+         style="fill:#435466;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 0,0 -22.669,-39.264 -45.338,0 H -81.565 L -22.669,-102.01 36.227,0 Z" /></g></g></svg>

package/demos/vue/src/components/App.vue ADDED Viewed

@@ -0,0 +1,305 @@
+<template>
+  <div id="app-wrapper">
+    <div class="jumbotron">
+      <div class="container">
+        <div id="page-header" class="row">
+          <div id="logo-container" class="col-sm-3">
+            <img id="logo" src="../assets/logo.svg">
+          </div>
+          <div class="col-sm-9">
+            <h2>
+              ArcGIS Rest JS Vue Demo
+            </h2>
+            <p>
+              A simple vue application utilizing the arcgis-rest-js library.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12">
+          <!-- Hook the has-error class to the boolean clientIdError. -->
+          <div :class="{ 'has-error': clientIdError }" class="form-group">
+            <label class="control-label">ClientID</label>
+            <!-- Hook this input up to the clientId property. -->
+            <input
+              v-model="clientId"
+              type="text"
+              class="form-control"
+            >
+          </div>
+          <p class="help-block">
+            You can generate your own clientid by creating an application on the
+            <a target='_blank' href='https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/browser-based-user-logins/'>
+              ArcGIS for Developers
+            </a>
+            website. Be sure to add
+            <code>
+              {{ redirect_uri }}
+            </code>
+            as a redirect uri for your application.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6">
+          <!-- On click, this button will call the signInWithPopup function. -->
+          <button class="btn btn-primary btn-block" @click="signInWithPopup">Sign In (with popup)</button>
+        </div>
+        <div class="col-xs-6">
+          <!-- On click, this button will call the signInWithoutPopup function. -->
+          <button class="btn btn-primary btn-block" @click="signInWithInlineRedirect">Sign In (inline redirect)</button>
+        </div>
+      </div>
+      <!-- If there is a current session, render this bit. -->
+      <div v-if="session" class="row">
+        <div class="col-xs-12 text-center">
+          <p class="bg-success info-panel">
+            <!-- Display the current user's username. -->
+            Logged in as {{ session.username }}.
+          </p>
+        </div>
+      </div>
+      <!-- If there is not a current session, render this instead. -->
+      <div v-else class="row">
+        <div class="col-xs-12 text-center">
+          <p class="bg-info info-panel">
+            Log in using one of the methods above to load rest of the page.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-xs-offset-3 text-center">
+          <button class="btn btn-block btn-warning" @click="signout">Sign Out</button>
+        </div>
+      </div>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <div class="row" style="margin-bottom: 0px">
+            <div class="col-xs-4">
+              <!-- This button will call the search function. It's disabled if there is no current session. -->
+              <button @click="search" :disabled="!session" class="btn btn-success btn-block">
+                <span class="glyphicon glyphicon-search"></span>
+                Search Your Content
+              </button>
+            </div>
+            <div class="col-xs-8">
+              <div class="input-group">
+                <div class="input-group-addon">
+                  <span class="glyphicon glyphicon-filter"></span>
+                </div>
+                <!-- Hook up this input the the filter string property. It's disabled if there is no current session. -->
+                <input
+                  v-model="filterString"
+                  :disabled="!session"
+                  type="text"
+                  class="form-control"
+                  placeholder="Filter"
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Render this only if their is a current search pending. -->
+        <div v-if="searching" class="panel-body loading-table">
+          <loader
+            size='25'
+            label='Fetching Data...'
+            labelPosition='bottom'
+          ></loader>
+        </div>
+        <!-- Render if there are search results. -->
+        <table v-if="searchResults" class="table table-hover">
+          <thead>
+            <tr>
+              <th>Title:</th>
+              <th>ID:</th>
+            </tr>
+          </thead>
+          <!-- If there are any search results, render them. -->
+          <tbody v-if="searchResults.length > 0">
+            <!-- Iterate over the search results and render a table row for each. -->
+            <tr
+              v-for="(item, index) in searchResults"
+              :key="index"
+            >
+              <td>
+                {{ item.title }}
+              </td>
+              <td>
+                {{ item.id }}
+              </td>
+            </tr>
+          </tbody>
+          <!-- If no results were found, render this information. -->
+          <tbody v-else>
+            <tr class="danger">
+              <td>
+                No results found.
+              </td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// Import the arcgis-rest-auth bit.
+import { UserSession } from "@esri/arcgis-rest-auth";
+// Import the arcgis-rest-request bit.
+import { request } from "@esri/arcgis-rest-request";
+// Import a simple loading indicator.
+import Loader from "./Loader";
+export default {
+  name: "App",
+  components: { Loader },
+  data() {
+    return {
+      // Store these values on this instance.
+      clientId: process.env.VUE_APP_CLIENTID || "QVQNb3XfDzoboWS0",
+      clientIdError: false,
+      filterString: null,
+      searching: null,
+      searchResults: null
+    };
+  },
+  computed: {
+    // Simple computed property to access the current applications path to
+    // set it as the redirect_uri.
+    redirect_uri() {
+      return `${window.location.origin}${window.location.pathname}`;
+    },
+    session() {
+      return this.$store.state.session;
+    }
+  },
+  created() {
+    // Upon creation, check to see if the session prop exists. If it does,
+    // pre-populate the client id value.
+    if (this.$store.state.session) {
+      this.clientId = this.$store.state.session.clientId;
+    }
+  },
+  mounted() {},
+  watch: {
+    // Set a watcher on the client id to validate it when it changes.
+    clientId() {
+      if (this.clientId === "") this.clientIdError = true;
+      else this.clientIdError = false;
+    }
+  },
+  methods: {
+    // Function to validate that the client id exists.
+    requireClientId() {
+      if (this.clientIdError || !this.clientId) {
+        this.clientIdError = true;
+        return false;
+      }
+      return true;
+    },
+    // The signup with a popup workflow. When popup is true, the beginOAuth2 function
+    // returns a promise.
+    signInWithPopup() {
+      if (this.requireClientId()) {
+        UserSession.beginOAuth2({
+          clientId: this.clientId,
+          // Passing the clientid here is only a requirement of this demo where we allow
+          // dynamic clientids via input. Typically you would have this hard-coded on
+          // the authorization callback.
+          redirectUri: `${this.redirect_uri}#/authenticate?clientID=${
+            this.clientId
+          }`,
+          popup: true
+        })
+          .then(session => {
+            // Upon successful login, update the application's store with this new
+            // session.
+            this.$store.dispatch("updateSession", session);
+          })
+          .catch(error);
+      }
+    },
+    // The signup with an inline redirect workflow. In this case the user is just redirected to
+    // the authorization page.
+    signInWithInlineRedirect() {
+      if (this.requireClientId()) {
+        UserSession.beginOAuth2({
+          clientId: this.clientId,
+          redirectUri: `${this.redirect_uri}#/authenticate?clientID=${
+            this.clientId
+          }`,
+          popup: false
+        });
+      }
+    },
+    // Function to log the use out of the current session.
+    signout() {
+      this.$store.dispatch("updateSession", null);
+      this.searchResults = null;
+    },
+    // Function to call to search for a user's content.
+    search() {
+      // Update the properties for a new search.
+      this.searchResults = null;
+      this.searching = true;
+      // Timeout is for effect.
+      setTimeout(this.requestData, 300);
+    },
+    // Request data from AGOL.
+    requestData() {
+      // Construct a search query for only items the user owns. Add a filter if it exists.
+      const query = `owner: ${this.$store.state.session.username}${
+        this.filterString ? ` AND ${this.filterString}` : ""
+      }`;
+      // Construct the url for the endpoint with the session's portal and the constructed
+      // query.
+      const searchUrl = `${this.$store.state.session.portal}/search?q=${query}`;
+      // Make the request. Tack on the current authentication session.
+      request(searchUrl, { authentication: this.$store.state.session })
+        .then(response => {
+          this.searching = false;
+          this.searchResults = response.results;
+        })
+        .catch(error => {
+          this.searching = false;
+        });
+    }
+  }
+};
+</script>
+<style>
+.jumbotron {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+#logo-container {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+#logo {
+  width: 150px;
+  height: 150px;
+}
+.info-panel {
+  padding: 15px;
+}
+.loading-table {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+</style>

package/demos/vue/src/components/Authenticate.vue ADDED Viewed

@@ -0,0 +1,65 @@
+<template>
+  <div id="authenticate-wrapper">
+    <!-- Just a simple loading indicator -->
+    <loader
+      size='25'
+      label='Authenticating...'
+      labelPosition='bottom'
+    ></loader>
+  </div>
+</template>
+<script>
+// Import the arcgis-rest-auth bit.
+import { UserSession } from "@esri/arcgis-rest-auth";
+// Import a simple loading indicator.
+import Loader from "./Loader";
+export default {
+  name: "Authenticate",
+  components: { Loader },
+  props: [],
+  data() {
+    return {};
+  },
+  computed: {
+    // Simple computed property to make it easier to access the client id
+    // in the url. In a production app the clientid should be hardcoded.
+    clientId() {
+      return this.$route.query.clientID;
+    }
+  },
+  created() {},
+  mounted() {
+    // When this component is rendered, set a timeout to process the authentication.
+    // The timing is just for effect to show it's working.
+    setTimeout(this.processAuthentication, 500);
+  },
+  methods: {
+    processAuthentication() {
+      // Complete the OAuth2 process. If in a popup, the window will close before
+      // this finishes and will be handled by the beginOAuth2 function. If not in
+      // a popup, it will proceed to the next couple lines.
+      const session = UserSession.completeOAuth2({
+        // Required as it is a piece of the key in the popup method. If not using
+        // a popup, this shouldn't be required.
+        clientId: this.clientId
+      });
+      // Update the application store with the new session.
+      this.$store.dispatch("updateSession", session);
+      // The app is the rerouted to the main application.
+      this.$router.replace("/");
+    }
+  }
+};
+</script>
+<style>
+#authenticate-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+</style>

package/demos/vue/src/components/Loader.vue ADDED Viewed

@@ -0,0 +1,230 @@
+<template>
+  <div ref='loader-wrapper' id='loader-wrapper'>
+    <div v-if="label" ref="label">
+      {{ label }}
+    </div>
+    <div ref="spinner" class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Loader",
+  components: {},
+  props: ["size", "label", "labelPosition"],
+  data() {
+    return {};
+  },
+  watch: {
+    size() {
+      this.setSize();
+    },
+    labelPosition() {
+      this.setLabelPosition();
+    }
+  },
+  created() {},
+  mounted() {
+    this.setSize();
+    this.setLabelPosition();
+  },
+  methods: {
+    setSize() {
+      const marginPercentage = 0.2;
+      this.$refs.spinner.style.width = `${this.size || 40}px`;
+      this.$refs.spinner.style.height = `${this.size || 40}px`;
+      this.$refs.spinner.style.margin = `${this.size * marginPercentage ||
+        40 * marginPercentage}px`;
+    },
+    setLabelPosition() {
+      switch (this.labelPosition) {
+        case "top":
+          this.$refs["loader-wrapper"].style["flex-direction"] = "column";
+          break;
+        case "bottom":
+          this.$refs["loader-wrapper"].style["flex-direction"] =
+            "column-reverse";
+          break;
+        case "left":
+          this.$refs["loader-wrapper"].style["flex-direction"] = "row";
+          break;
+        case "right":
+          this.$refs["loader-wrapper"].style["flex-direction"] = "row-reverse";
+          break;
+        default:
+          this.$refs["loader-wrapper"].style["flex-direction"] =
+            "column-reverse";
+          break;
+      }
+    }
+  }
+};
+</script>
+<style>
+#loader-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sk-fading-circle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+</style>