Skip to content

Commit

Permalink
bugy#229: migrated main app to Vuejs
Browse files Browse the repository at this point in the history
  • Loading branch information
@bugy
bugy committed Aug 17, 2019
1 parent 03a29b9 commit 8c53a7a
Show file tree
Hide file tree
Showing 36 changed files with 2,632 additions and 1,952 deletions.
401 changes: 1 addition & 400 deletions web-src/css/index.css
View file

Large diffs are not rendered by default.

67 changes: 1 addition & 66 deletions web-src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,72 +19,7 @@
</head>

<body>
<div class="container-fluid" id="mainPanel">
<div id="scriptsPanel">
<div id="scriptsList">
<div id="listHeader">
<h3 class="header" id="serverHeader">Script server</h3>

<div id="searchPanel" class="collapsed">
<input type="search" id="searchField" name="searchField" autocomplete="off"
placeholder="Search script">
</div>
<input id="searchButton" type="image" src="images/search.png">

<div id="header-link">
<a class="teal-text" href="admin.html" id="adminLink" style="display: none">
<i class="material-icons">settings</i>
</a>
<a href="https://github.com/bugy/script-server" target="_blank" id="githubLink">
<img src="images/github.png">
</a>
</div>
</div>

<div id="scripts" class="collection"></div>

<div id="logoutPanel" style="display: none">
<span id="usernameField"></span>
<input id="logoutButton" type="image" src="images/logout.png">
</div>
</div>

<div id="content-panel">
<h2 id="script-header" class="header"></h2>
<div id="script-panel-container"></div>
<div id="error-panel"></div>
</div>

<div id="welcome-panel">
<img src="images/console.png" id="welcome-icon">
<div id="welcome-text">
Welcome to the Script Server. <br> To start, select one of the scripts
</div>
<div id="welcome-cookie-text">
or just take a cookie and enjoy!
</div>
</div>
</div>
</div>
<div id='index-page'></div>
</body>

<script type="text/template" id="menu-item-state-template">
<div class="menu-item-state">
<i class="material-icons check-icon">check</i>
<div class="preloader-wrapper active">
<div class="spinner-layer">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</script>

</html>
52 changes: 10 additions & 42 deletions web-src/js/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,32 +179,6 @@ export function destroyChildren(element) {
}
}

export function hide(element) {
var currentDisplay = window.getComputedStyle(element).display;
if (currentDisplay === 'none') {
return;
}

element.oldDisplay = currentDisplay;
element.style.display = 'none';
}

export function show(element, displayStyle) {
if (isNull(displayStyle) && (isNull(element.oldDisplay))) {
if (element.style.display === 'none') {
element.style.display = '';
}

var currentDisplay = window.getComputedStyle(element).display;
if (currentDisplay !== 'none') {
return;
}
}

displayStyle = displayStyle || element.oldDisplay || 'block';
element.style.display = displayStyle;
}

export function removeElement(array, element) {
var index = array.indexOf(element);
if (index >= 0) {
Expand Down Expand Up @@ -337,6 +311,10 @@ export function isWebsocketClosed(websocket) {
return ((websocket.readyState === 2) || (websocket.readyState === 3));
}

export function isWebsocketOpen(websocket) {
return !isNull(websocket) && (websocket.readyState === 1);
}

export function getUnparameterizedUrl() {
return [location.protocol, '//', location.host, location.pathname].join('');
}
Expand All @@ -355,22 +333,17 @@ export function forEachKeyValue(array, callback) {
}

export function toBoolean(value) {
if (typeof(value) === 'boolean') {
if (typeof (value) === 'boolean') {
return value;

} else if (typeof(value) === 'string') {
} else if (typeof (value) === 'string') {
return value.toLowerCase() === 'true';

} else {
return Boolean(value);
}
}

export function getLinesCount(text) {
var linesMatch = text.match(/\n/g);
return isNull(linesMatch) ? 0 : linesMatch.length;
}

export function arraysEqual(arr1, arr2) {
if (arr1 === arr2) {
return true;
Expand Down Expand Up @@ -430,15 +403,6 @@ export function toDict(array, fieldName) {
return result;
}

export function setButtonEnabled(button, enabled) {
button.disabled = !enabled;
if (!enabled) {
addClass(button, "disabled");
} else {
removeClass(button, "disabled");
}
}

function compareNulls(value1, value2) {
if (isNull(value1) && isNull(value2)) {
return 0;
Expand Down Expand Up @@ -550,4 +514,8 @@ export function toMap(elements, keyExtractor, valueExtractor) {
Object.assign(obj, {[keyExtractor(element)]: valueExtractor(element)})
, {}
);
}

export function deepCloneObject(obj) {
return JSON.parse(JSON.stringify(obj));
}
95 changes: 95 additions & 0 deletions web-src/js/components/AppLayout.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<div class="app-layout">
<div class="app-sidebar">
<slot name="sidebar"/>
</div>
<div class="app-content">
<div class="content-header" ref="contentHeader">
<slot name="header"/>
</div>
<div class="content-panel" ref="contentPanel">
<slot name="content"/>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'AppLayout',
mounted() {
const contentHeader = this.$refs.contentHeader;
const contentPanel = this.$refs.contentPanel;
this.$nextTick(function () {
let headerHeight = contentHeader.offsetHeight;
contentPanel.style.maxHeight = 'calc(100% - ' + headerHeight + 'px)';
if (headerHeight <= 5) {
let maxHeight = headerHeight;
const mutationObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
let headerHeight = contentHeader.offsetHeight;
if (headerHeight <= maxHeight) {
return;
}
contentPanel.style.maxHeight = 'calc(100% - ' + headerHeight + 'px)';
maxHeight = headerHeight;
});
});
mutationObserver.observe(contentHeader, {
childList: true,
subtree: true,
characterData: true
})
}
})
}
}
</script>

<style scoped>
.app-layout {
display: flex;
height: 100vh;
max-height: 100vh;
}
.app-sidebar {
width: 300px;
min-width: 300px;
border-right: 1px solid #C8C8C8;
box-shadow: 7px 0 8px -4px #888888;
-webkit-box-shadow: 7px 0 8px -4px #888888;
-moz-box-shadow: 7px 0 8px -4px #888888;
}
.app-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
@media (max-width: 992px) {
.app-content {
border-left: none;
}
}
.content-header {
flex: 0 0 auto;
border-bottom: 1px solid #C8C8C8;
}
.content-panel {
flex: 1 1 auto;
}
</style>
14 changes: 11 additions & 3 deletions web-src/js/connections/rxWebsocket.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {getWebsocketUrl, HttpUnauthorizedError, isWebsocketClosed, SocketClosedError} from '../common';
import {getWebsocketUrl, HttpUnauthorizedError, isWebsocketClosed, isWebsocketOpen, SocketClosedError} from '../common';

var i = 0;
let i = 0;

export function ReactiveWebSocket(path, observer) {
if (/^((https?)|(wss?)):\/\//.test(path)) {
Expand Down Expand Up @@ -48,7 +48,7 @@ export function ReactiveWebSocket(path, observer) {
});

this._websocket.addEventListener('message', function (rawMessage) {
self._observer.onNext(rawMessage);
self._observer.onNext(rawMessage.data);
});

this.close = function () {
Expand All @@ -63,5 +63,13 @@ export function ReactiveWebSocket(path, observer) {
}

self._websocket.send(data);
};

this.isClosed = function () {
return isWebsocketClosed(self._websocket) || self._finished;
};

this.isOpen = function () {
return isWebsocketOpen(self._websocket);
}
}
Loading

0 comments on commit 8c53a7a

Please sign in to comment.