Revert "Replace Mix with Vite"

.env.example

@@ -46,5 +46,5 @@ PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
-VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

.github/workflows/ci.yml

@@ -38,7 +38,7 @@ jobs:
           key: yarn-${{ hashFiles('yarn.lock') }}
 
       - name: Run yarn
-        run: yarn
+        run: yarn && yarn dev
 
       - name: Run ESLint
         run: yarn lint

package.json

@@ -1,9 +1,14 @@
 {
     "private": true,
     "scripts": {
-        "lint": "eslint 'resources/assets/js/*'",
-        "dev": "vite",
-        "build": "vite build"
+        "dev": "npm run development",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "prod": "npm run production",
+        "production": "mix --production",
+        "lint": "eslint 'resources/assets/js/*'"
     },
     "devDependencies": {
         "bootstrap-sass": "^3.4.3",
@@ -13,11 +18,10 @@
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-prettier": "^4.2.1",
         "jquery": "^3.6.3",
+        "laravel-mix": "^6.0.49",
         "prettier": "^2.8.1",
         "sass": "^1.56.1",
-        "sass-loader": "13.*",
-        "vite": "^3.0.2",
-        "laravel-vite-plugin": "^0.6.0"
+        "sass-loader": "13.*"
     },
     "dependencies": {
         "select2": "^4.0.13",

public/build/assets/app.7f9aa9fe.js

@@ -1 +0,0 @@
-$.when($.ready).then(()=>{const o=(document.querySelector("base")||{}).href,c=$("form[data-item-id]").data("item-id"),r="*****";if(c){const e=$('input[name="config[password]"]').first();e.length>0&&e.attr("value",r)}$(".message-container").length&&setTimeout(()=>{$(".message-container").fadeOut()},3500);function d(e){if(e.files&&e.files[0]){const t=new FileReader;t.onload=function(a){$("#appimage img").attr("src",a.target.result)},t.readAsDataURL(e.files[0])}}$("#upload").change(function(){d(this)});const l=document.getElementById("sortable");let s;l!==null&&(s=Sortable.create(l,{disabled:!0,animation:150,forceFallback:!(navigator.userAgent.toLowerCase().indexOf("firefox")>-1),draggable:".item-container",onEnd(){const e=s.toArray();$.post(`${o}order`,{order:e})}}),navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&(s.option("setData",e=>{e.setData("Text","")}),l.addEventListener("dragstart",e=>{const{target:t}=e;t.nodeName.toLowerCase()==="a"&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer.setData("Text",""))}))),$("#main").on("mouseenter","#sortable .item",function(){$(this).siblings(".tooltip").addClass("active"),$(".refresh",this).addClass("active")}).on("mouseleave",".item",function(){$(this).siblings(".tooltip").removeClass("active"),$(".refresh",this).removeClass("active")}),$("#config-buttons").on("mouseenter","a",function(){$(".tooltip",this).addClass("active")}).on("mouseleave","a",function(){$(".tooltip",this).removeClass("active")}),$(".searchform > form").on("submit",e=>{$("#search-container select[name=provider]").val()==="tiles"&&e.preventDefault()}),$("#search-container").on("input","input[name=q]",function(){const e=this.value,t=$("#sortable").children(".item-container");$("#search-container select[name=provider]").val()==="tiles"&&e.length>0?(t.hide(),t.filter(function(){return $(this).data("name").toLowerCase().includes(e.toLowerCase())}).show()):t.show()}).on("change","select[name=provider]",function(){const e=$("#sortable").children(".item-container");if($(this).val()==="tiles"){$("#search-container button").hide();const t=$("#search-container input[name=q]").val();t.length>0?(e.hide(),e.filter(function(){return $(this).data("name").toLowerCase().includes(t.toLowerCase())}).show()):e.show()}else $("#search-container button").show(),e.show()}),$("#app").on("click","#config-button",e=>{e.preventDefault();const t=$("#app"),a=t.hasClass("header");t.toggleClass("header"),a?($(".add-item").hide(),$(".item-edit").hide(),$("#app").removeClass("sidebar"),$("#sortable .tooltip").css("display",""),s!==void 0&&s.option("disabled",!0)):($("#sortable .tooltip").css("display","none"),s!==void 0&&s.option("disabled",!1),setTimeout(()=>{$(".add-item").fadeIn(),$(".item-edit").fadeIn()},350))}).on("click","#add-item, #pin-item",e=>{e.preventDefault(),$("#app").toggleClass("sidebar")}).on("click",".close-sidenav",e=>{e.preventDefault(),$("#app").removeClass("sidebar")}).on("click","#test_config",e=>{e.preventDefault();let t=$("#create input[name=url]").val();const a=$('#sapconfig input[name="config[override_url]"]').val();typeof a=="string"&&a!==""&&(t=a);const i={};i.url=t,$(".config-item").each(function(){const n=$(this).data("config");i[n]=$(this).val()}),i.id=$("form[data-item-id]").data("item-id"),i.password&&i.password===r&&(i.password=""),$.post(`${o}test_config`,{data:i}).done(n=>{alert(n)}).fail(n=>{alert(`Something went wrong: ${n.responseText.substring(0,100)}`)})}),$("#pinlist").on("click","a",function(e){e.preventDefault();const t=$(this),a=t.data("id"),i=t.data("tag");$.get(`${o}items/pintoggle/${a}/true/${i}`,n=>{const f=$(n).filter("#sortable").html();$("#sortable").html(f),t.toggleClass("active")})}),$("#itemform").on("submit",()=>{const e=$('input[name="config[password]"]').first();e.length>0&&e.attr("value")===r&&e.attr("value","")})});

public/build/assets/itemExport.6e7e40c3.js

@@ -1 +0,0 @@
-const r="HeimdallExport.json",i="api/item";function l(n,e){const t=document.createElement("a"),c=new Blob([e],{type:"text/plain"});t.href=URL.createObjectURL(c),t.download=r,t.click()}const a=n=>{n.preventDefault(),fetch(i).then(e=>(e.status!==200&&window.alert("An error occurred while exporting..."),e.json())).then(e=>{const t=JSON.stringify(e,null,2);l(r,t)})},o=document.querySelector("#item-export");o&&o.addEventListener("click",a);

public/build/assets/itemImport.45fd0bc9.js

@@ -1 +0,0 @@
-const l="api/item",p="appload",u=({item:e,errors:t})=>{console.log(e,t);let n;t.length===0?n=`<li class="success"><i class="fas fa-circle-check"></i> Imported: ${e.title} </li>`:n=`<li class="fail"><i class="fas fa-circle-xmark"></i> Failed: ${e.title} - ${t[0]} </li>`,document.querySelector(".import-status").innerHTML+=n};function d(){const e=document.querySelector(".import-status");e.innerHTML=""}const f=(e,t)=>fetch(l,{method:"POST",cache:"no-cache",redirect:"follow",headers:{"Content-Type":"application/json","X-CSRF-TOKEN":t},body:JSON.stringify(e)}),h=()=>{const e='input[name="_token"]';return document.querySelector(e).value},S=(e,t)=>({pinned:1,tags:[0],appid:e.appid,title:e.title,colour:e.colour,url:e.url,appdescription:e.appdescription?e.appdescription:t.description,website:t.website,icon:t.iconview,config:e.description?JSON.parse(e.description):null}),m=e=>e===null||e==="null"?Promise.resolve({}):fetch(p,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({app:e})}).then(t=>t.json()),y=e=>{e.forEach(t=>{const n=[];m(t.appid).catch(()=>n.push(new Error(`Failed to find app id: ${t.appid}`))).then(o=>{const r=S(t,o),c=h();return f(r,c)}).catch(()=>n.push(new Error(`Failed to create item: ${t.title}`))).finally(()=>{u({item:t,errors:n})})})},T=e=>new Promise((t,n)=>{try{const o=new FileReader;o.onload=r=>{const c=r.target.result;t(JSON.parse(c))},o.readAsText(e)}catch{n(new Error("Unable to read file"))}}),i=e=>(d(),T(e).catch(t=>{console.error(t)}).then(y)),s=document.querySelector("input[name='import']"),a=document.querySelectorAll(".import-button");s&&a&&(a.forEach(e=>{e.addEventListener("click",()=>{const t=s.files[0];!t||i(t)})}),s.addEventListener("change",i,!1));

public/build/assets/keyBindings.c470238b.js

@@ -1 +0,0 @@
-const o=e=>{const t=document.querySelector('input[name="q"]');t&&(e.preventDefault(),t.focus())},c=e=>{if(e.target!==document.querySelector('input[name="q"]')||document.querySelector("#search-container select[name=provider]").value!=="tiles")return;const n=document.querySelector('#sortable section.item-container:not([style="display: none;"]) a');"href"in n&&(e.preventDefault(),window.open(n.href))},r={"/":o,Enter:c};document.addEventListener("keydown",e=>{try{e.key in r&&r[e.key](e)}catch{}});

public/build/assets/liveStatRefresh.e7590628.js

@@ -1 +0,0 @@
-const c=".livestats-container";function E(){const t=[];let e=!1;function r(){if(t.length===0||e===!0)return;t.shift()()}return document.addEventListener("visibilitychange",()=>{e=document.hidden}),setInterval(r,1e3),t}function a(){return document.querySelectorAll(c)}function R(t,e){return t?3e4:e?5e3:3e4}function u(t,e){const r=t.getAttribute("data-id"),s=t.getAttribute("data-dataonly")==="1";return()=>fetch(`get_stats/${r}`).then(n=>{if(n.ok)return n.json();throw new Error(`Network response was not ok: ${n.status}`)}).then(n=>{t.innerHTML=n.html;const i=n.status==="active";e&&setTimeout(()=>{e.push(u(t,e))},R(s,i))}).catch(n=>{console.error(n)})}const o=a();if(o.length>0){const t=E();o.forEach(e=>{u(e,t)()})}

public/build/manifest.json

@@ -1,47 +0,0 @@
-{
-  "node_modules/sortablejs/Sortable.min.js?commonjs-entry": {
-    "file": "assets/Sortable.min.b80eb16a.js",
-    "src": "node_modules/sortablejs/Sortable.min.js?commonjs-entry",
-    "isEntry": true
-  },
-  "resources/assets/js/jquery-ui.min.js": {
-    "file": "assets/jquery-ui.min.27186ad4.js",
-    "src": "resources/assets/js/jquery-ui.min.js",
-    "isEntry": true
-  },
-  "resources/assets/js/huebee.js": {
-    "file": "assets/huebee.9481eb16.js",
-    "src": "resources/assets/js/huebee.js",
-    "isEntry": true
-  },
-  "resources/assets/js/app.js": {
-    "file": "assets/app.7f9aa9fe.js",
-    "src": "resources/assets/js/app.js",
-    "isEntry": true
-  },
-  "resources/assets/js/keyBindings.js": {
-    "file": "assets/keyBindings.c470238b.js",
-    "src": "resources/assets/js/keyBindings.js",
-    "isEntry": true
-  },
-  "resources/assets/js/itemExport.js": {
-    "file": "assets/itemExport.6e7e40c3.js",
-    "src": "resources/assets/js/itemExport.js",
-    "isEntry": true
-  },
-  "resources/assets/js/itemImport.js": {
-    "file": "assets/itemImport.45fd0bc9.js",
-    "src": "resources/assets/js/itemImport.js",
-    "isEntry": true
-  },
-  "resources/assets/js/liveStatRefresh.js": {
-    "file": "assets/liveStatRefresh.e7590628.js",
-    "src": "resources/assets/js/liveStatRefresh.js",
-    "isEntry": true
-  },
-  "resources/assets/sass/app.scss": {
-    "file": "assets/app.568d25ab.css",
-    "src": "resources/assets/sass/app.scss",
-    "isEntry": true
-  }
-}

public/phpinfo.php

@@ -1 +0,0 @@
-<?php phpinfo();

resources/assets/js/bootstrap.js

@@ -1,6 +1,5 @@
 
-import _ from 'lodash';
-window._ = _;
+window._ = require('lodash');
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
@@ -20,8 +19,7 @@ try {
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-import axios from 'axios';
-window.axios = axios;
+window.axios = require('axios');
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 

resources/assets/js/components/ExampleComponent.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <div class="panel panel-default">
+                    <div class="panel-heading">Example Component</div>
+
+                    <div class="panel-body">
+                        I'm an example component!
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

resources/assets/sass/_app.scss

@@ -111,7 +111,7 @@ body {
 	display: flex;
 	min-height: 100vh;
   	flex-direction: column;
-  	background-image: url('../../img/bg1.jpg');
+  	background-image: url('../img/bg1.jpg');
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: bottom center;

resources/views/layouts/app.blade.php

@@ -25,17 +25,7 @@
         <meta name="theme-color" content="#ffffff">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        @vite([
-            'resources/assets/sass/app.scss', 
-            'node_modules/sortablejs/Sortable.min.js?commonjs-entry',
-            'resources/assets/js/jquery-ui.min.js',
-            'resources/assets/js/huebee.js',
-            'resources/assets/js/app.js',
-            'resources/assets/js/keyBindings.js',
-            'resources/assets/js/itemExport.js',
-            'resources/assets/js/itemImport.js',
-            'resources/assets/js/liveStatRefresh.js',
-            ])
+        <link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}" type="text/css" />
         <link rel="stylesheet" href="{{ asset('css/all.min.css?v='.config('app.version')) }}" type="text/css" />
         <script src="{{ asset('js/fontawesome.js') }}"></script>
         @if(config('app.url') !== 'http://localhost')

resources/views/layouts/users.blade.php

@@ -25,17 +25,8 @@
         <meta name="theme-color" content="#ffffff">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        @vite([
-            'resources/assets/sass/app.scss', 
-            'node_modules/sortablejs/Sortable.min.js?commonjs-entry',
-            'resources/assets/js/jquery-ui.min.js',
-            'resources/assets/js/huebee.js',
-            'resources/assets/js/app.js',
-            'resources/assets/js/keyBindings.js',
-            'resources/assets/js/itemExport.js',
-            'resources/assets/js/itemImport.js',
-            'resources/assets/js/liveStatRefresh.js',
-            ])
+        <link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css" />
+
     </head>
     <body>
         <div id="app"{!! $alt_bg !!}>

vendor/laravel/ui/README.md

@@ -110,7 +110,7 @@ To use the component in your application, you may drop it into one of your HTML
 @endsection
 ```
 
-> Remember, you should run the `npm run dev` command each time you change a Vue component. Or, you may run the `npm run dev` command to monitor and automatically recompile your components each time they are modified.
+> Remember, you should run the `npm run dev` command each time you change a Vue component. Or, you may run the `npm run watch` command to monitor and automatically recompile your components each time they are modified.
 
 If you are interested in learning more about writing Vue components, you should read the [Vue documentation](https://vuejs.org/guide/), which provides a thorough, easy-to-read overview of the entire Vue framework.
 

vite.config.js

@@ -1,21 +0,0 @@
-import { defineConfig } from 'vite';
-import laravel from 'laravel-vite-plugin';
-
-export default defineConfig({
-    plugins: [
-        laravel({
-            input: [
-                'resources/assets/sass/app.scss',
-                "node_modules/sortablejs/Sortable.min.js",
-                "resources/assets/js/jquery-ui.min.js",
-                "resources/assets/js/huebee.js",
-                "resources/assets/js/app.js",
-                "resources/assets/js/keyBindings.js",
-                "resources/assets/js/itemExport.js",
-                "resources/assets/js/itemImport.js",
-                "resources/assets/js/liveStatRefresh.js",
-            ],
-            refresh: true,
-        }),
-    ],
-});

webpack.mix.js

@@ -0,0 +1,32 @@
+const mix = require("laravel-mix");
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+
+mix
+  .babel(
+    [
+      "node_modules/sortablejs/Sortable.min.js",
+      "resources/assets/js/jquery-ui.min.js",
+      "resources/assets/js/huebee.js",
+      "resources/assets/js/app.js",
+      "resources/assets/js/keyBindings.js",
+      "resources/assets/js/itemExport.js",
+      "resources/assets/js/itemImport.js",
+      "resources/assets/js/liveStatRefresh.js",
+    ],
+    "public/js/app.js"
+  )
+  .sass("resources/assets/sass/app.scss", "public/css")
+  .options({
+    processCssUrls: false,
+  })
+  .version();