steve
/
sunrise-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

linting with mega linter

deepsource-autofix-76c6eb20
Dan Gowans 2023-01-10 11:07:50 -05:00
parent 119c325cc3
commit a4f4b353fc
108 changed files with 13118 additions and 12169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -20,6 +20,7 @@
"plugin:@typescript-eslint/recommended" "plugin:@typescript-eslint/recommended"
], ],
"rules": { "rules": {
"@typescript-eslint/no-extra-semi": "off",
"node/no-missing-import": "off", "node/no-missing-import": "off",
"node/no-unpublished-import": "off", "node/no-unpublished-import": "off",
"unicorn/consistent-function-scoping": "warn", "unicorn/consistent-function-scoping": "warn",
@ -31,7 +32,6 @@
"ignore": ["DB", "URL"] "ignore": ["DB", "URL"]
} }
], ],
"unicorn/prefer-node-protocol": "off",
"unicorn/prevent-abbreviations": [ "unicorn/prevent-abbreviations": [
"error", "error",
{ {

7
.prettierrc.json
View File

@ -1,7 +1,6 @@
{ {
"trailingComma": "none", "trailingComma": "none",
"tabWidth": 4, "tabWidth": 2,
"semi": true, "semi": false,
"singleQuote": false, "singleQuote": true
"printWidth": 110
} }

153
app.js
View File

@ -1,44 +1,44 @@
import createError from "http-errors"; import createError from 'http-errors';
import express from "express"; import express from 'express';
import compression from "compression"; import compression from 'compression';
import path from "node:path"; import path from 'node:path';
import cookieParser from "cookie-parser"; import cookieParser from 'cookie-parser';
import csurf from "csurf"; import csurf from 'csurf';
import rateLimit from "express-rate-limit"; import rateLimit from 'express-rate-limit';
import session from "express-session"; import session from 'express-session';
import FileStore from "session-file-store"; import FileStore from 'session-file-store';
import * as permissionHandlers from "./handlers/permissions.js"; import * as permissionHandlers from './handlers/permissions.js';
import routerLogin from "./routes/login.js"; import routerLogin from './routes/login.js';
import routerDashboard from "./routes/dashboard.js"; import routerDashboard from './routes/dashboard.js';
import routerApi from "./routes/api.js"; import routerApi from './routes/api.js';
import routerPrint from "./routes/print.js"; import routerPrint from './routes/print.js';
import routerMaps from "./routes/maps.js"; import routerMaps from './routes/maps.js';
import routerLots from "./routes/lots.js"; import routerLots from './routes/lots.js';
import routerLotOccupancies from "./routes/lotOccupancies.js"; import routerLotOccupancies from './routes/lotOccupancies.js';
import routerWorkOrders from "./routes/workOrders.js"; import routerWorkOrders from './routes/workOrders.js';
import routerReports from "./routes/reports.js"; import routerReports from './routes/reports.js';
import routerAdmin from "./routes/admin.js"; import routerAdmin from './routes/admin.js';
import * as configFunctions from "./helpers/functions.config.js"; import * as configFunctions from './helpers/functions.config.js';
import * as printFunctions from "./helpers/functions.print.js"; import * as printFunctions from './helpers/functions.print.js';
import * as dateTimeFns from "@cityssm/expressjs-server-js/dateTimeFns.js"; import * as dateTimeFns from '@cityssm/expressjs-server-js/dateTimeFns.js';
import * as stringFns from "@cityssm/expressjs-server-js/stringFns.js"; import * as stringFns from '@cityssm/expressjs-server-js/stringFns.js';
import * as htmlFns from "@cityssm/expressjs-server-js/htmlFns.js"; import * as htmlFns from '@cityssm/expressjs-server-js/htmlFns.js';
import { version } from "./version.js"; import { version } from './version.js';
import * as databaseInitializer from "./helpers/initializer.database.js"; import * as databaseInitializer from './helpers/initializer.database.js';
import { apiGetHandler } from "./handlers/permissions.js"; import { apiGetHandler } from './handlers/permissions.js';
import { getSafeRedirectURL } from "./helpers/functions.authentication.js"; import { getSafeRedirectURL } from './helpers/functions.authentication.js';
import debug from "debug"; import debug from 'debug';
const debugApp = debug("lot-occupancy-system:app"); const debugApp = debug('lot-occupancy-system:app');
databaseInitializer.initializeDatabase(); databaseInitializer.initializeDatabase();
const __dirname = "."; const __dirname = '.';
export const app = express(); export const app = express();
app.disable("X-Powered-By"); app.disable('X-Powered-By');
if (!configFunctions.getProperty("reverseProxy.disableEtag")) { if (!configFunctions.getProperty('reverseProxy.disableEtag')) {
app.set("etag", false); app.set('etag', false);
} }
app.set("views", path.join(__dirname, "views")); app.set('views', path.join(__dirname, 'views'));
app.set("view engine", "ejs"); app.set('view engine', 'ejs');
if (!configFunctions.getProperty("reverseProxy.disableCompression")) { if (!configFunctions.getProperty('reverseProxy.disableCompression')) {
app.use(compression()); app.use(compression());
} }
app.use((request, _response, next) => { app.use((request, _response, next) => {
@ -53,38 +53,37 @@ app.use(cookieParser());
app.use(csurf({ app.use(csurf({
cookie: true cookie: true
})); }));
const limiter = rateLimit({ app.use(rateLimit({
windowMs: 1000, windowMs: 10000,
max: 25 * Math.max(3, configFunctions.getProperty("users.canLogin").length) max: 200
}); }));
app.use(limiter); const urlPrefix = configFunctions.getProperty('reverseProxy.urlPrefix');
const urlPrefix = configFunctions.getProperty("reverseProxy.urlPrefix"); if (urlPrefix !== '') {
if (urlPrefix !== "") { debugApp('urlPrefix = ' + urlPrefix);
debugApp("urlPrefix = " + urlPrefix);
} }
app.use(urlPrefix, express.static(path.join("public"))); app.use(urlPrefix, express.static(path.join('public')));
app.use(urlPrefix + "/lib/bulma-calendar", express.static(path.join("node_modules", "bulma-calendar", "dist"))); app.use(urlPrefix + '/lib/bulma-calendar', express.static(path.join('node_modules', 'bulma-calendar', 'dist')));
app.use(urlPrefix + "/lib/cityssm-bulma-js", express.static(path.join("node_modules", "@cityssm", "bulma-js", "dist"))); app.use(urlPrefix + '/lib/cityssm-bulma-js', express.static(path.join('node_modules', '@cityssm', 'bulma-js', 'dist')));
app.use(urlPrefix + "/lib/cityssm-bulma-webapp-js", express.static(path.join("node_modules", "@cityssm", "bulma-webapp-js"))); app.use(urlPrefix + '/lib/cityssm-bulma-webapp-js', express.static(path.join('node_modules', '@cityssm', 'bulma-webapp-js')));
app.use(urlPrefix + "/lib/fa", express.static(path.join("node_modules", "@fortawesome", "fontawesome-free"))); app.use(urlPrefix + '/lib/fa', express.static(path.join('node_modules', '@fortawesome', 'fontawesome-free')));
app.use(urlPrefix + "/lib/leaflet", express.static(path.join("node_modules", "leaflet", "dist"))); app.use(urlPrefix + '/lib/leaflet', express.static(path.join('node_modules', 'leaflet', 'dist')));
app.use(urlPrefix + "/lib/randomcolor", express.static(path.join("node_modules", "randomcolor"))); app.use(urlPrefix + '/lib/randomcolor', express.static(path.join('node_modules', 'randomcolor')));
const sessionCookieName = configFunctions.getProperty("session.cookieName"); const sessionCookieName = configFunctions.getProperty('session.cookieName');
const FileStoreSession = FileStore(session); const FileStoreSession = FileStore(session);
app.use(session({ app.use(session({
store: new FileStoreSession({ store: new FileStoreSession({
path: "./data/sessions", path: './data/sessions',
logFn: debug("lot-occupancy-system:session"), logFn: debug('lot-occupancy-system:session'),
retries: 20 retries: 20
}), }),
name: sessionCookieName, name: sessionCookieName,
secret: configFunctions.getProperty("session.secret"), secret: configFunctions.getProperty('session.secret'),
resave: true, resave: true,
saveUninitialized: false, saveUninitialized: false,
rolling: true, rolling: true,
cookie: { cookie: {
maxAge: configFunctions.getProperty("session.maxAgeMillis"), maxAge: configFunctions.getProperty('session.maxAgeMillis'),
sameSite: "strict" sameSite: 'strict'
} }
})); }));
app.use((request, response, next) => { app.use((request, response, next) => {
@ -109,38 +108,38 @@ app.use((request, response, next) => {
response.locals.dateTimeFunctions = dateTimeFns; response.locals.dateTimeFunctions = dateTimeFns;
response.locals.stringFunctions = stringFns; response.locals.stringFunctions = stringFns;
response.locals.htmlFunctions = htmlFns; response.locals.htmlFunctions = htmlFns;
response.locals.urlPrefix = configFunctions.getProperty("reverseProxy.urlPrefix"); response.locals.urlPrefix = configFunctions.getProperty('reverseProxy.urlPrefix');
next(); next();
}); });
app.get(urlPrefix + "/", sessionChecker, (_request, response) => { app.get(urlPrefix + '/', sessionChecker, (_request, response) => {
response.redirect(urlPrefix + "/dashboard"); response.redirect(urlPrefix + '/dashboard');
}); });
app.use(urlPrefix + "/dashboard", sessionChecker, routerDashboard); app.use(urlPrefix + '/dashboard', sessionChecker, routerDashboard);
app.use(urlPrefix + "/api/:apiKey", apiGetHandler, routerApi); app.use(urlPrefix + '/api/:apiKey', apiGetHandler, routerApi);
app.use(urlPrefix + "/print", sessionChecker, routerPrint); app.use(urlPrefix + '/print', sessionChecker, routerPrint);
app.use(urlPrefix + "/maps", sessionChecker, routerMaps); app.use(urlPrefix + '/maps', sessionChecker, routerMaps);
app.use(urlPrefix + "/lots", sessionChecker, routerLots); app.use(urlPrefix + '/lots', sessionChecker, routerLots);
app.use(urlPrefix + "/lotOccupancies", sessionChecker, routerLotOccupancies); app.use(urlPrefix + '/lotOccupancies', sessionChecker, routerLotOccupancies);
app.use(urlPrefix + "/workOrders", sessionChecker, routerWorkOrders); app.use(urlPrefix + '/workOrders', sessionChecker, routerWorkOrders);
app.use(urlPrefix + "/reports", sessionChecker, routerReports); app.use(urlPrefix + '/reports', sessionChecker, routerReports);
app.use(urlPrefix + "/admin", sessionChecker, permissionHandlers.adminGetHandler, routerAdmin); app.use(urlPrefix + '/admin', sessionChecker, permissionHandlers.adminGetHandler, routerAdmin);
app.all(urlPrefix + "/keepAlive", (_request, response) => { app.all(urlPrefix + '/keepAlive', (_request, response) => {
response.json(true); response.json(true);
}); });
app.use(urlPrefix + "/login", routerLogin); app.use(urlPrefix + '/login', routerLogin);
app.get(urlPrefix + "/logout", (request, response) => { app.get(urlPrefix + '/logout', (request, response) => {
if (request.session.user && request.cookies[sessionCookieName]) { if (request.session.user && request.cookies[sessionCookieName]) {
request.session.destroy(() => { request.session.destroy(() => {
response.clearCookie(sessionCookieName); response.clearCookie(sessionCookieName);
response.redirect(urlPrefix + "/"); response.redirect(urlPrefix + '/');
}); });
} }
else { else {
response.redirect(urlPrefix + "/login"); response.redirect(urlPrefix + '/login');
} }
}); });
app.use((request, _response, next) => { app.use((request, _response, next) => {
debugApp(request.url); debugApp(request.url);
next(createError(404, "File not found.")); next(createError(404, 'File not found.'));
}); });
export default app; export default app;

255
app.ts
View File

@ -1,189 +1,182 @@
import createError from "http-errors"; import createError from 'http-errors'
import express from "express"; import express from 'express'
import compression from "compression"; import compression from 'compression'
import path from "node:path"; import path from 'node:path'
import cookieParser from "cookie-parser"; import cookieParser from 'cookie-parser'
import csurf from "csurf"; import csurf from 'csurf'
import rateLimit from "express-rate-limit"; import rateLimit from 'express-rate-limit'
import session from "express-session"; import session from 'express-session'
import FileStore from "session-file-store"; import FileStore from 'session-file-store'
import * as permissionHandlers from "./handlers/permissions.js"; import * as permissionHandlers from './handlers/permissions.js'
import routerLogin from "./routes/login.js"; import routerLogin from './routes/login.js'
import routerDashboard from "./routes/dashboard.js"; import routerDashboard from './routes/dashboard.js'
import routerApi from "./routes/api.js"; import routerApi from './routes/api.js'
import routerPrint from "./routes/print.js"; import routerPrint from './routes/print.js'
import routerMaps from "./routes/maps.js"; import routerMaps from './routes/maps.js'
import routerLots from "./routes/lots.js"; import routerLots from './routes/lots.js'
import routerLotOccupancies from "./routes/lotOccupancies.js"; import routerLotOccupancies from './routes/lotOccupancies.js'
import routerWorkOrders from "./routes/workOrders.js"; import routerWorkOrders from './routes/workOrders.js'
import routerReports from "./routes/reports.js"; import routerReports from './routes/reports.js'
import routerAdmin from "./routes/admin.js"; import routerAdmin from './routes/admin.js'
import * as configFunctions from "./helpers/functions.config.js"; import * as configFunctions from './helpers/functions.config.js'
import * as printFunctions from "./helpers/functions.print.js"; import * as printFunctions from './helpers/functions.print.js'
import * as dateTimeFns from "@cityssm/expressjs-server-js/dateTimeFns.js"; import * as dateTimeFns from '@cityssm/expressjs-server-js/dateTimeFns.js'
import * as stringFns from "@cityssm/expressjs-server-js/stringFns.js"; import * as stringFns from '@cityssm/expressjs-server-js/stringFns.js'
import * as htmlFns from "@cityssm/expressjs-server-js/htmlFns.js"; import * as htmlFns from '@cityssm/expressjs-server-js/htmlFns.js'
import { version } from "./version.js"; import { version } from './version.js'
import * as databaseInitializer from "./helpers/initializer.database.js"; import * as databaseInitializer from './helpers/initializer.database.js'
import { apiGetHandler } from "./handlers/permissions.js"; import { apiGetHandler } from './handlers/permissions.js'
import { getSafeRedirectURL } from "./helpers/functions.authentication.js"; import { getSafeRedirectURL } from './helpers/functions.authentication.js'
import debug from "debug"; import debug from 'debug'
const debugApp = debug("lot-occupancy-system:app"); const debugApp = debug('lot-occupancy-system:app')
/* /*
* INITALIZE THE DATABASE * INITIALIZE THE DATABASE
*/ */
databaseInitializer.initializeDatabase(); databaseInitializer.initializeDatabase()
/* /*
* INITIALIZE APP * INITIALIZE APP
*/ */
const __dirname = "."; const __dirname = '.'
export const app = express(); export const app = express()
app.disable("X-Powered-By"); app.disable('X-Powered-By')
if (!configFunctions.getProperty("reverseProxy.disableEtag")) { if (!configFunctions.getProperty('reverseProxy.disableEtag')) {
app.set("etag", false); app.set('etag', false)
} }
// View engine setup // View engine setup
app.set("views", path.join(__dirname, "views")); app.set('views', path.join(__dirname, 'views'))
app.set("view engine", "ejs"); app.set('view engine', 'ejs')
if (!configFunctions.getProperty("reverseProxy.disableCompression")) { if (!configFunctions.getProperty('reverseProxy.disableCompression')) {
app.use(compression()); app.use(compression())
} }
app.use((request, _response, next) => { app.use((request, _response, next) => {
debugApp(`${request.method} ${request.url}`); debugApp(`${request.method} ${request.url}`)
next(); next()
}); })
app.use(express.json()); app.use(express.json())
app.use( app.use(
express.urlencoded({ express.urlencoded({
extended: false extended: false
}) })
); )
app.use(cookieParser()); app.use(cookieParser())
app.use( app.use(
csurf({ csurf({
cookie: true cookie: true
}) })
); )
/* /*
* Rate Limiter * Rate Limiter
*/ */
const limiter = rateLimit({ app.use(
windowMs: 1000, rateLimit({
max: 25 * Math.max(3, configFunctions.getProperty("users.canLogin").length) windowMs: 10_000,
}); max: 200
})
app.use(limiter); )
/* /*
* STATIC ROUTES * STATIC ROUTES
*/ */
const urlPrefix = configFunctions.getProperty("reverseProxy.urlPrefix"); const urlPrefix = configFunctions.getProperty('reverseProxy.urlPrefix')
if (urlPrefix !== "") { if (urlPrefix !== '') {
debugApp("urlPrefix = " + urlPrefix); debugApp('urlPrefix = ' + urlPrefix)
} }
app.use(urlPrefix, express.static(path.join("public"))); app.use(urlPrefix, express.static(path.join('public')))
app.use( app.use(
urlPrefix + "/lib/bulma-calendar", urlPrefix + '/lib/bulma-calendar',
express.static(path.join("node_modules", "bulma-calendar", "dist")) express.static(path.join('node_modules', 'bulma-calendar', 'dist'))
); )
app.use( app.use(
urlPrefix + "/lib/cityssm-bulma-js", urlPrefix + '/lib/cityssm-bulma-js',
express.static(path.join("node_modules", "@cityssm", "bulma-js", "dist")) express.static(path.join('node_modules', '@cityssm', 'bulma-js', 'dist'))
); )
app.use( app.use(
urlPrefix + "/lib/cityssm-bulma-webapp-js", urlPrefix + '/lib/cityssm-bulma-webapp-js',
express.static(path.join("node_modules", "@cityssm", "bulma-webapp-js")) express.static(path.join('node_modules', '@cityssm', 'bulma-webapp-js'))
); )
app.use( app.use(urlPrefix + '/lib/fa', express.static(path.join('node_modules', '@fortawesome', 'fontawesome-free')))
urlPrefix + "/lib/fa",
express.static(path.join("node_modules", "@fortawesome", "fontawesome-free"))
);
app.use(urlPrefix + "/lib/leaflet", express.static(path.join("node_modules", "leaflet", "dist"))); app.use(urlPrefix + '/lib/leaflet', express.static(path.join('node_modules', 'leaflet', 'dist')))
app.use(urlPrefix + "/lib/randomcolor", express.static(path.join("node_modules", "randomcolor"))); app.use(urlPrefix + '/lib/randomcolor', express.static(path.join('node_modules', 'randomcolor')))
/* /*
* SESSION MANAGEMENT * SESSION MANAGEMENT
*/ */
const sessionCookieName: string = configFunctions.getProperty("session.cookieName"); const sessionCookieName: string = configFunctions.getProperty('session.cookieName')
const FileStoreSession = FileStore(session); const FileStoreSession = FileStore(session)
// Initialize session // Initialize session
app.use( app.use(
session({ session({
store: new FileStoreSession({ store: new FileStoreSession({
path: "./data/sessions", path: './data/sessions',
logFn: debug("lot-occupancy-system:session"), logFn: debug('lot-occupancy-system:session'),
retries: 20 retries: 20
}), }),
name: sessionCookieName, name: sessionCookieName,
secret: configFunctions.getProperty("session.secret"), secret: configFunctions.getProperty('session.secret'),
resave: true, resave: true,
saveUninitialized: false, saveUninitialized: false,
rolling: true, rolling: true,
cookie: { cookie: {
maxAge: configFunctions.getProperty("session.maxAgeMillis"), maxAge: configFunctions.getProperty('session.maxAgeMillis'),
sameSite: "strict" sameSite: 'strict'
} }
}) })
); )
// Clear cookie if no corresponding session // Clear cookie if no corresponding session
app.use((request, response, next) => { app.use((request, response, next) => {
if (request.cookies[sessionCookieName] && !request.session.user) { if (request.cookies[sessionCookieName] && !request.session.user) {
response.clearCookie(sessionCookieName); response.clearCookie(sessionCookieName)
} }
next(); next()
}); })
// Redirect logged in users // Redirect logged in users
const sessionChecker = ( const sessionChecker = (request: express.Request, response: express.Response, next: express.NextFunction) => {
request: express.Request,
response: express.Response,
next: express.NextFunction
) => {
if (request.session.user && request.cookies[sessionCookieName]) { if (request.session.user && request.cookies[sessionCookieName]) {
return next(); return next()
} }
const redirectUrl = getSafeRedirectURL(request.originalUrl); const redirectUrl = getSafeRedirectURL(request.originalUrl)
return response.redirect(`${urlPrefix}/login?redirect=${encodeURIComponent(redirectUrl)}`); return response.redirect(`${urlPrefix}/login?redirect=${encodeURIComponent(redirectUrl)}`)
}; }
/* /*
* ROUTES * ROUTES
@ -192,60 +185,60 @@ const sessionChecker = (
// Make the user and config objects available to the templates // Make the user and config objects available to the templates
app.use((request, response, next) => { app.use((request, response, next) => {
response.locals.buildNumber = version; response.locals.buildNumber = version
response.locals.user = request.session.user; response.locals.user = request.session.user
response.locals.csrfToken = request.csrfToken(); response.locals.csrfToken = request.csrfToken()
response.locals.configFunctions = configFunctions; response.locals.configFunctions = configFunctions
response.locals.printFunctions = printFunctions; response.locals.printFunctions = printFunctions
response.locals.dateTimeFunctions = dateTimeFns; response.locals.dateTimeFunctions = dateTimeFns
response.locals.stringFunctions = stringFns; response.locals.stringFunctions = stringFns
response.locals.htmlFunctions = htmlFns; response.locals.htmlFunctions = htmlFns
response.locals.urlPrefix = configFunctions.getProperty("reverseProxy.urlPrefix"); response.locals.urlPrefix = configFunctions.getProperty('reverseProxy.urlPrefix')
next(); next()
}); })
app.get(urlPrefix + "/", sessionChecker, (_request, response) => { app.get(urlPrefix + '/', sessionChecker, (_request, response) => {
response.redirect(urlPrefix + "/dashboard"); response.redirect(urlPrefix + '/dashboard')
}); })
app.use(urlPrefix + "/dashboard", sessionChecker, routerDashboard); app.use(urlPrefix + '/dashboard', sessionChecker, routerDashboard)
app.use(urlPrefix + "/api/:apiKey", apiGetHandler, routerApi); app.use(urlPrefix + '/api/:apiKey', apiGetHandler, routerApi)
app.use(urlPrefix + "/print", sessionChecker, routerPrint); app.use(urlPrefix + '/print', sessionChecker, routerPrint)
app.use(urlPrefix + "/maps", sessionChecker, routerMaps); app.use(urlPrefix + '/maps', sessionChecker, routerMaps)
app.use(urlPrefix + "/lots", sessionChecker, routerLots); app.use(urlPrefix + '/lots', sessionChecker, routerLots)
app.use(urlPrefix + "/lotOccupancies", sessionChecker, routerLotOccupancies); app.use(urlPrefix + '/lotOccupancies', sessionChecker, routerLotOccupancies)
app.use(urlPrefix + "/workOrders", sessionChecker, routerWorkOrders); app.use(urlPrefix + '/workOrders', sessionChecker, routerWorkOrders)
app.use(urlPrefix + "/reports", sessionChecker, routerReports); app.use(urlPrefix + '/reports', sessionChecker, routerReports)
app.use(urlPrefix + "/admin", sessionChecker, permissionHandlers.adminGetHandler, routerAdmin); app.use(urlPrefix + '/admin', sessionChecker, permissionHandlers.adminGetHandler, routerAdmin)
app.all(urlPrefix + "/keepAlive", (_request, response) => { app.all(urlPrefix + '/keepAlive', (_request, response) => {
response.json(true); response.json(true)
}); })
app.use(urlPrefix + "/login", routerLogin); app.use(urlPrefix + '/login', routerLogin)
app.get(urlPrefix + "/logout", (request, response) => { app.get(urlPrefix + '/logout', (request, response) => {
if (request.session.user && request.cookies[sessionCookieName]) { if (request.session.user && request.cookies[sessionCookieName]) {
request.session.destroy(() => { request.session.destroy(() => {
response.clearCookie(sessionCookieName); response.clearCookie(sessionCookieName)
response.redirect(urlPrefix + "/"); response.redirect(urlPrefix + '/')
}); })
} else { } else {
response.redirect(urlPrefix + "/login"); response.redirect(urlPrefix + '/login')
} }
}); })
// Catch 404 and forward to error handler // Catch 404 and forward to error handler
app.use((request, _response, next) => { app.use((request, _response, next) => {
debugApp(request.url); debugApp(request.url)
next(createError(404, "File not found.")); next(createError(404, 'File not found.'))
}); })
export default app; export default app

8
cypress.config.js
View File

@ -1,9 +1,9 @@
import { defineConfig } from "cypress"; import { defineConfig } from 'cypress';
export default defineConfig({ export default defineConfig({
e2e: { e2e: {
baseUrl: "http://localhost:7000", baseUrl: 'http://localhost:7000',
specPattern: "cypress/e2e/**/*.cy.ts", specPattern: 'cypress/e2e/**/*.cy.ts',
supportFile: false, supportFile: false,
projectId: "xya1fn" projectId: 'xya1fn'
} }
}); });

10
cypress.config.ts
View File

@ -1,10 +1,10 @@
import { defineConfig } from "cypress"; import { defineConfig } from 'cypress'
export default defineConfig({ export default defineConfig({
e2e: { e2e: {
baseUrl: "http://localhost:7000", baseUrl: 'http://localhost:7000',
specPattern: "cypress/e2e/**/*.cy.ts", specPattern: 'cypress/e2e/**/*.cy.ts',
supportFile: false, supportFile: false,
projectId: "xya1fn" projectId: 'xya1fn'
} }
}); })

2
cypress/fixtures/fee.json
View File

@ -2,6 +2,6 @@
"feeCategory": "Cypress Test - Fee Category", "feeCategory": "Cypress Test - Fee Category",
"feeName": "Cypress Test - Fee Name", "feeName": "Cypress Test - Fee Name",
"feeDescription": "Test Description", "feeDescription": "Test Description",
"feeAmount": 10.50, "feeAmount": 10.5,
"quantityUnit": "units" "quantityUnit": "units"
} }

62
gulpfile.js
View File

@ -1,59 +1,59 @@
import gulp from "gulp"; import gulp from 'gulp';
import changed from "gulp-changed"; import changed from 'gulp-changed';
import minify from "gulp-minify"; import minify from 'gulp-minify';
import include from "gulp-include"; import include from 'gulp-include';
import dartSass from "sass"; import dartSass from 'sass';
import gulpSass from "gulp-sass"; import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass); const sass = gulpSass(dartSass);
const publicSCSSDestination = "public/stylesheets"; const publicSCSSDestination = 'public/stylesheets';
const publicSCSSFunction = () => { const publicSCSSFunction = () => {
return gulp return gulp
.src("public-scss/*.scss") .src('public-scss/*.scss')
.pipe(sass({ outputStyle: "compressed", includePaths: ["node_modules"] }).on("error", sass.logError)) .pipe(sass({ outputStyle: 'compressed', includePaths: ['node_modules'] }).on('error', sass.logError))
.pipe(gulp.dest(publicSCSSDestination)); .pipe(gulp.dest(publicSCSSDestination));
}; };
gulp.task("public-scss", publicSCSSFunction); gulp.task('public-scss', publicSCSSFunction);
const publicJavascriptsDestination = "public/javascripts"; const publicJavascriptsDestination = 'public/javascripts';
const publicJavascriptsMinFunction = () => { const publicJavascriptsMinFunction = () => {
return gulp return gulp
.src("public-typescript/*.js", { allowEmpty: true }) .src('public-typescript/*.js', { allowEmpty: true })
.pipe(changed(publicJavascriptsDestination, { .pipe(changed(publicJavascriptsDestination, {
extension: ".min.js" extension: '.min.js'
})) }))
.pipe(minify({ noSource: true, ext: { min: ".min.js" } })) .pipe(minify({ noSource: true, ext: { min: '.min.js' } }))
.pipe(gulp.dest(publicJavascriptsDestination)); .pipe(gulp.dest(publicJavascriptsDestination));
}; };
const publicJavascriptsAdminTablesFunction = () => { const publicJavascriptsAdminTablesFunction = () => {
return gulp return gulp
.src("public-typescript/adminTables/adminTables.js") .src('public-typescript/adminTables/adminTables.js')
.pipe(include()) .pipe(include())
.pipe(gulp.dest("public-typescript")); .pipe(gulp.dest('public-typescript'));
}; };
const publicJavascriptsLotOccupancyEditFunction = () => { const publicJavascriptsLotOccupancyEditFunction = () => {
return gulp return gulp
.src("public-typescript/lotOccupancyEdit/lotOccupancyEdit.js") .src('public-typescript/lotOccupancyEdit/lotOccupancyEdit.js')
.pipe(include()) .pipe(include())
.pipe(gulp.dest("public-typescript")); .pipe(gulp.dest('public-typescript'));
}; };
const publicJavascriptsWorkOrderEditFunction = () => { const publicJavascriptsWorkOrderEditFunction = () => {
return gulp return gulp
.src("public-typescript/workOrderEdit/workOrderEdit.js") .src('public-typescript/workOrderEdit/workOrderEdit.js')
.pipe(include()) .pipe(include())
.pipe(gulp.dest("public-typescript")); .pipe(gulp.dest('public-typescript'));
}; };
gulp.task("public-javascript-adminTables", publicJavascriptsAdminTablesFunction); gulp.task('public-javascript-adminTables', publicJavascriptsAdminTablesFunction);
gulp.task("public-javascript-lotOccupancyEdit", publicJavascriptsLotOccupancyEditFunction); gulp.task('public-javascript-lotOccupancyEdit', publicJavascriptsLotOccupancyEditFunction);
gulp.task("public-javascript-workOrderEdit", publicJavascriptsWorkOrderEditFunction); gulp.task('public-javascript-workOrderEdit', publicJavascriptsWorkOrderEditFunction);
gulp.task("public-javascript-min", publicJavascriptsMinFunction); gulp.task('public-javascript-min', publicJavascriptsMinFunction);
const watchFunction = () => { const watchFunction = () => {
gulp.watch("public-scss/*.scss", publicSCSSFunction); gulp.watch('public-scss/*.scss', publicSCSSFunction);
gulp.watch("public-typescript/adminTables/*.js", publicJavascriptsAdminTablesFunction); gulp.watch('public-typescript/adminTables/*.js', publicJavascriptsAdminTablesFunction);
gulp.watch("public-typescript/lotOccupancyEdit/*.js", publicJavascriptsLotOccupancyEditFunction); gulp.watch('public-typescript/lotOccupancyEdit/*.js', publicJavascriptsLotOccupancyEditFunction);
gulp.watch("public-typescript/workOrderEdit/*.js", publicJavascriptsWorkOrderEditFunction); gulp.watch('public-typescript/workOrderEdit/*.js', publicJavascriptsWorkOrderEditFunction);
gulp.watch("public-typescript/*.js", publicJavascriptsMinFunction); gulp.watch('public-typescript/*.js', publicJavascriptsMinFunction);
}; };
gulp.task("watch", watchFunction); gulp.task('watch', watchFunction);
gulp.task("default", () => { gulp.task('default', () => {
publicJavascriptsAdminTablesFunction(); publicJavascriptsAdminTablesFunction();
publicJavascriptsLotOccupancyEditFunction(); publicJavascriptsLotOccupancyEditFunction();
publicJavascriptsWorkOrderEditFunction(); publicJavascriptsWorkOrderEditFunction();

102
gulpfile.ts
View File

@ -1,110 +1,102 @@
/* eslint-disable node/no-unpublished-import */ /* eslint-disable node/no-unpublished-import */
import gulp from "gulp"; import gulp from 'gulp'
import changed from "gulp-changed"; import changed from 'gulp-changed'
import minify from "gulp-minify"; import minify from 'gulp-minify'
import include from "gulp-include"; import include from 'gulp-include'
import dartSass from "sass"; import dartSass from 'sass'
import gulpSass from "gulp-sass"; import gulpSass from 'gulp-sass'
const sass = gulpSass(dartSass); const sass = gulpSass(dartSass)
/* /*
* Compile SASS * Compile SASS
*/ */
const publicSCSSDestination = "public/stylesheets"; const publicSCSSDestination = 'public/stylesheets'
const publicSCSSFunction = () => { const publicSCSSFunction = () => {
return gulp return gulp
.src("public-scss/*.scss") .src('public-scss/*.scss')
.pipe( .pipe(sass({ outputStyle: 'compressed', includePaths: ['node_modules'] }).on('error', sass.logError))
sass({ outputStyle: "compressed", includePaths: ["node_modules"] }).on( .pipe(gulp.dest(publicSCSSDestination))
"error", }
sass.logError
)
)
.pipe(gulp.dest(publicSCSSDestination));
};
gulp.task("public-scss", publicSCSSFunction); gulp.task('public-scss', publicSCSSFunction)
/* /*
* Minify public/javascripts * Minify public/javascripts
*/ */
const publicJavascriptsDestination = "public/javascripts"; const publicJavascriptsDestination = 'public/javascripts'
const publicJavascriptsMinFunction = () => { const publicJavascriptsMinFunction = () => {
return gulp return gulp
.src("public-typescript/*.js", { allowEmpty: true }) .src('public-typescript/*.js', { allowEmpty: true })
.pipe( .pipe(
changed(publicJavascriptsDestination, { changed(publicJavascriptsDestination, {
extension: ".min.js" extension: '.min.js'
}) })
) )
.pipe(minify({ noSource: true, ext: { min: ".min.js" } })) .pipe(minify({ noSource: true, ext: { min: '.min.js' } }))
.pipe(gulp.dest(publicJavascriptsDestination)); .pipe(gulp.dest(publicJavascriptsDestination))
}; }
const publicJavascriptsAdminTablesFunction = () => { const publicJavascriptsAdminTablesFunction = () => {
return gulp return gulp
.src("public-typescript/adminTables/adminTables.js") .src('public-typescript/adminTables/adminTables.js')
.pipe(include()) .pipe(include())
.pipe(gulp.dest("public-typescript")); .pipe(gulp.dest('public-typescript'))
}; }
const publicJavascriptsLotOccupancyEditFunction = () => { const publicJavascriptsLotOccupancyEditFunction = () => {
return gulp return gulp
.src("public-typescript/lotOccupancyEdit/lotOccupancyEdit.js") .src('public-typescript/lotOccupancyEdit/lotOccupancyEdit.js')
.pipe(include()) .pipe(include())
.pipe(gulp.dest("public-typescript")); .pipe(gulp.dest('public-typescript'))
}; }
const publicJavascriptsWorkOrderEditFunction = () => { const publicJavascriptsWorkOrderEditFunction = () => {
return gulp return gulp
.src("public-typescript/workOrderEdit/workOrderEdit.js") .src('public-typescript/workOrderEdit/workOrderEdit.js')
.pipe(include()) .pipe(include())
.pipe(gulp.dest("public-typescript")); .pipe(gulp.dest('public-typescript'))
}; }
gulp.task("public-javascript-adminTables", publicJavascriptsAdminTablesFunction); gulp.task('public-javascript-adminTables', publicJavascriptsAdminTablesFunction)
gulp.task("public-javascript-lotOccupancyEdit", publicJavascriptsLotOccupancyEditFunction); gulp.task('public-javascript-lotOccupancyEdit', publicJavascriptsLotOccupancyEditFunction)
gulp.task("public-javascript-workOrderEdit", publicJavascriptsWorkOrderEditFunction); gulp.task('public-javascript-workOrderEdit', publicJavascriptsWorkOrderEditFunction)
gulp.task("public-javascript-min", publicJavascriptsMinFunction); gulp.task('public-javascript-min', publicJavascriptsMinFunction)
/* /*
* Watch * Watch
*/ */
const watchFunction = () => { const watchFunction = () => {
gulp.watch("public-scss/*.scss", publicSCSSFunction); gulp.watch('public-scss/*.scss', publicSCSSFunction)
gulp.watch("public-typescript/adminTables/*.js", publicJavascriptsAdminTablesFunction); gulp.watch('public-typescript/adminTables/*.js', publicJavascriptsAdminTablesFunction)
gulp.watch( gulp.watch('public-typescript/lotOccupancyEdit/*.js', publicJavascriptsLotOccupancyEditFunction)
"public-typescript/lotOccupancyEdit/*.js",
publicJavascriptsLotOccupancyEditFunction
);
gulp.watch("public-typescript/workOrderEdit/*.js", publicJavascriptsWorkOrderEditFunction); gulp.watch('public-typescript/workOrderEdit/*.js', publicJavascriptsWorkOrderEditFunction)
gulp.watch("public-typescript/*.js", publicJavascriptsMinFunction); gulp.watch('public-typescript/*.js', publicJavascriptsMinFunction)
}; }
gulp.task("watch", watchFunction); gulp.task('watch', watchFunction)
/* /*
* Initialize default * Initialize default
*/ */
gulp.task("default", () => { gulp.task('default', () => {
publicJavascriptsAdminTablesFunction(); publicJavascriptsAdminTablesFunction()
publicJavascriptsLotOccupancyEditFunction(); publicJavascriptsLotOccupancyEditFunction()
publicJavascriptsWorkOrderEditFunction(); publicJavascriptsWorkOrderEditFunction()
publicJavascriptsMinFunction(); publicJavascriptsMinFunction()
publicSCSSFunction(); publicSCSSFunction()
watchFunction(); watchFunction()
}); })

2
handlers/lots-post/doSearchLots.d.ts vendored
View File

@ -1,3 +1,3 @@
import type { RequestHandler } from "express"; import type { RequestHandler } from 'express';
export declare const handler: RequestHandler; export declare const handler: RequestHandler;
export default handler; export default handler;

2
handlers/lots-post/doSearchLots.js
View File

@ -1,4 +1,4 @@
import { getLots } from "../../helpers/lotOccupancyDB/getLots.js"; import { getLots } from '../../helpers/lotOccupancyDB/getLots.js';
export const handler = async (request, response) => { export const handler = async (request, response) => {
const result = getLots(request.body, { const result = getLots(request.body, {
limit: request.body.limit, limit: request.body.limit,

4
handlers/lots-post/doSearchLots.ts
View File

@ -1,6 +1,6 @@
import type { RequestHandler } from "express"; import type { RequestHandler } from 'express';
import { getLots } from "../../helpers/lotOccupancyDB/getLots.js"; import { getLots } from '../../helpers/lotOccupancyDB/getLots.js';
export const handler: RequestHandler = async (request, response) => { export const handler: RequestHandler = async (request, response) => {
const result = getLots(request.body, { const result = getLots(request.body, {

2
handlers/workOrders-post/doCompleteWorkOrderMilestone.js
View File

@ -1,4 +1,4 @@
import { completeWorkOrderMilestone } from "../../helpers/lotOccupancyDB/completeWorkOrderMiletstone.js"; import { completeWorkOrderMilestone } from "../../helpers/lotOccupancyDB/completeWorkOrderMilestone.js";
import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js"; import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
export const handler = async (request, response) => { export const handler = async (request, response) => {
const success = completeWorkOrderMilestone({ const success = completeWorkOrderMilestone({

2
handlers/workOrders-post/doCompleteWorkOrderMilestone.ts
View File

@ -1,6 +1,6 @@
import type { RequestHandler } from "express"; import type { RequestHandler } from "express";
import { completeWorkOrderMilestone } from "../../helpers/lotOccupancyDB/completeWorkOrderMiletstone.js"; import { completeWorkOrderMilestone } from "../../helpers/lotOccupancyDB/completeWorkOrderMilestone.js";
import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js"; import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";

0
helpers/lotOccupancyDB/completeWorkOrderMiletstone.d.ts → helpers/lotOccupancyDB/completeWorkOrderMilestone.d.ts vendored
View File

0
helpers/lotOccupancyDB/completeWorkOrderMiletstone.js → helpers/lotOccupancyDB/completeWorkOrderMilestone.js
View File

0
helpers/lotOccupancyDB/completeWorkOrderMiletstone.ts → helpers/lotOccupancyDB/completeWorkOrderMilestone.ts
View File

10
helpers/lotOccupancyDB/getLots.js
View File

@ -68,6 +68,7 @@ export function getLots(filters, options, connectedDatabase) {
let lots = []; let lots = [];
if (options.limit === -1 || count > 0) { if (options.limit === -1 || count > 0) {
database.function("userFn_lotNameSortName", configFunctions.getProperty("settings.lot.lotNameSortNameFunction")); database.function("userFn_lotNameSortName", configFunctions.getProperty("settings.lot.lotNameSortNameFunction"));
sqlParameters.unshift(currentDate, currentDate);
lots = database lots = database
.prepare("select l.lotId, l.lotName," + .prepare("select l.lotId, l.lotName," +
" t.lotType," + " t.lotType," +
@ -82,16 +83,13 @@ export function getLots(filters, options, connectedDatabase) {
"select lotId, count(lotOccupancyId) as lotOccupancyCount" + "select lotId, count(lotOccupancyId) as lotOccupancyCount" +
" from LotOccupancies" + " from LotOccupancies" +
" where recordDelete_timeMillis is null" + " where recordDelete_timeMillis is null" +
" and occupancyStartDate <= " + " and occupancyStartDate <= ?" +
currentDate + " and (occupancyEndDate is null or occupancyEndDate >= ?)" +
" and (occupancyEndDate is null or occupancyEndDate >= " +
currentDate +
")" +
" group by lotId" + " group by lotId" +
") o on l.lotId = o.lotId") + ") o on l.lotId = o.lotId") +
sqlWhereClause + sqlWhereClause +
" order by userFn_lotNameSortName(l.lotName), l.lotId" + " order by userFn_lotNameSortName(l.lotName), l.lotId" +
(options ? " limit " + options.limit + " offset " + options.offset : "")) (options ? ` limit ${options.limit} offset ${options.offset}` : ""))
.all(sqlParameters); .all(sqlParameters);
if (options.limit === -1) { if (options.limit === -1) {
count = lots.length; count = lots.length;

11
helpers/lotOccupancyDB/getLots.ts
View File

@ -119,6 +119,8 @@ export function getLots(
configFunctions.getProperty("settings.lot.lotNameSortNameFunction") configFunctions.getProperty("settings.lot.lotNameSortNameFunction")
); );
sqlParameters.unshift(currentDate, currentDate);
lots = database lots = database
.prepare( .prepare(
"select l.lotId, l.lotName," + "select l.lotId, l.lotName," +
@ -134,16 +136,13 @@ export function getLots(
"select lotId, count(lotOccupancyId) as lotOccupancyCount" + "select lotId, count(lotOccupancyId) as lotOccupancyCount" +
" from LotOccupancies" + " from LotOccupancies" +
" where recordDelete_timeMillis is null" + " where recordDelete_timeMillis is null" +
" and occupancyStartDate <= " + " and occupancyStartDate <= ?" +
currentDate + " and (occupancyEndDate is null or occupancyEndDate >= ?)" +
" and (occupancyEndDate is null or occupancyEndDate >= " +
currentDate +
")" +
" group by lotId" + " group by lotId" +
") o on l.lotId = o.lotId") + ") o on l.lotId = o.lotId") +
sqlWhereClause + sqlWhereClause +
" order by userFn_lotNameSortName(l.lotName), l.lotId" + " order by userFn_lotNameSortName(l.lotName), l.lotId" +
(options ? " limit " + options.limit + " offset " + options.offset : "") (options ? ` limit ${options.limit} offset ${options.offset}` : "")
) )
.all(sqlParameters); .all(sqlParameters);

4
helpers/lotOccupancyDB/getWorkOrders.js
View File

@ -90,9 +90,7 @@ export function getWorkOrders(filters, options, connectedDatabase) {
.all(sqlParameters); .all(sqlParameters);
} }
if (options && if (options &&
(options.includeComments || (options.includeComments || options.includeLotsAndLotOccupancies || options.includeMilestones)) {
options.includeLotsAndLotOccupancies ||
options.includeMilestones)) {
for (const workOrder of workOrders) { for (const workOrder of workOrders) {
if (options.includeComments) { if (options.includeComments) {
workOrder.workOrderComments = getWorkOrderComments(workOrder.workOrderId, database); workOrder.workOrderComments = getWorkOrderComments(workOrder.workOrderId, database);

14
helpers/lotOccupancyDB/getWorkOrders.ts
View File

@ -2,10 +2,7 @@ import sqlite from "better-sqlite3";
import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js"; import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
import { import { dateIntegerToString, dateStringToInteger } from "@cityssm/expressjs-server-js/dateTimeFns.js";
dateIntegerToString,
dateStringToInteger
} from "@cityssm/expressjs-server-js/dateTimeFns.js";
import { getWorkOrderComments } from "./getWorkOrderComments.js"; import { getWorkOrderComments } from "./getWorkOrderComments.js";
import { getLots } from "./getLots.js"; import { getLots } from "./getLots.js";
@ -143,16 +140,11 @@ export function getWorkOrders(
if ( if (
options && options &&
(options.includeComments || (options.includeComments || options.includeLotsAndLotOccupancies || options.includeMilestones)
options.includeLotsAndLotOccupancies ||
options.includeMilestones)
) { ) {
for (const workOrder of workOrders) { for (const workOrder of workOrders) {
if (options.includeComments) { if (options.includeComments) {
workOrder.workOrderComments = getWorkOrderComments( workOrder.workOrderComments = getWorkOrderComments(workOrder.workOrderId as number, database);
workOrder.workOrderId as number,
database
);
} }
if (options.includeLotsAndLotOccupancies) { if (options.includeLotsAndLotOccupancies) {

164
package-lock.json generated
View File

@ -67,8 +67,8 @@
"@types/randomcolor": "^0.5.7", "@types/randomcolor": "^0.5.7",
"@types/session-file-store": "^1.2.2", "@types/session-file-store": "^1.2.2",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^5.48.0", "@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^5.48.0", "@typescript-eslint/parser": "^5.48.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"bulma-divider": "^0.2.0", "bulma-divider": "^0.2.0",
"bulma-helpers": "^0.4.3", "bulma-helpers": "^0.4.3",
@ -1376,14 +1376,14 @@
} }
}, },
"node_modules/@typescript-eslint/eslint-plugin": { "node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz",
"integrity": "sha512-SVLafp0NXpoJY7ut6VFVUU9I+YeFsDzeQwtK0WZ+xbRN3mtxJ08je+6Oi2N89qDn087COdO0u3blKZNv9VetRQ==", "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/scope-manager": "5.48.0", "@typescript-eslint/scope-manager": "5.48.1",
"@typescript-eslint/type-utils": "5.48.0", "@typescript-eslint/type-utils": "5.48.1",
"@typescript-eslint/utils": "5.48.0", "@typescript-eslint/utils": "5.48.1",
"debug": "^4.3.4", "debug": "^4.3.4",
"ignore": "^5.2.0", "ignore": "^5.2.0",
"natural-compare-lite": "^1.4.0", "natural-compare-lite": "^1.4.0",
@ -1409,14 +1409,14 @@
} }
}, },
"node_modules/@typescript-eslint/parser": { "node_modules/@typescript-eslint/parser": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz",
"integrity": "sha512-1mxNA8qfgxX8kBvRDIHEzrRGrKHQfQlbW6iHyfHYS0Q4X1af+S6mkLNtgCOsGVl8+/LUPrqdHMssAemkrQ01qg==", "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/scope-manager": "5.48.0", "@typescript-eslint/scope-manager": "5.48.1",
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/typescript-estree": "5.48.0", "@typescript-eslint/typescript-estree": "5.48.1",
"debug": "^4.3.4" "debug": "^4.3.4"
}, },
"engines": { "engines": {
@ -1436,13 +1436,13 @@
} }
}, },
"node_modules/@typescript-eslint/scope-manager": { "node_modules/@typescript-eslint/scope-manager": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz",
"integrity": "sha512-0AA4LviDtVtZqlyUQnZMVHydDATpD9SAX/RC5qh6cBd3xmyWvmXYF+WT1oOmxkeMnWDlUVTwdODeucUnjz3gow==", "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/visitor-keys": "5.48.0" "@typescript-eslint/visitor-keys": "5.48.1"
}, },
"engines": { "engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -1453,13 +1453,13 @@
} }
}, },
"node_modules/@typescript-eslint/type-utils": { "node_modules/@typescript-eslint/type-utils": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz",
"integrity": "sha512-vbtPO5sJyFjtHkGlGK4Sthmta0Bbls4Onv0bEqOGm7hP9h8UpRsHJwsrCiWtCUndTRNQO/qe6Ijz9rnT/DB+7g==", "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/typescript-estree": "5.48.0", "@typescript-eslint/typescript-estree": "5.48.1",
"@typescript-eslint/utils": "5.48.0", "@typescript-eslint/utils": "5.48.1",
"debug": "^4.3.4", "debug": "^4.3.4",
"tsutils": "^3.21.0" "tsutils": "^3.21.0"
}, },
@ -1480,9 +1480,9 @@
} }
}, },
"node_modules/@typescript-eslint/types": { "node_modules/@typescript-eslint/types": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz",
"integrity": "sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==", "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -1493,13 +1493,13 @@
} }
}, },
"node_modules/@typescript-eslint/typescript-estree": { "node_modules/@typescript-eslint/typescript-estree": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz",
"integrity": "sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==", "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/visitor-keys": "5.48.0", "@typescript-eslint/visitor-keys": "5.48.1",
"debug": "^4.3.4", "debug": "^4.3.4",
"globby": "^11.1.0", "globby": "^11.1.0",
"is-glob": "^4.0.3", "is-glob": "^4.0.3",
@ -1520,16 +1520,16 @@
} }
}, },
"node_modules/@typescript-eslint/utils": { "node_modules/@typescript-eslint/utils": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz",
"integrity": "sha512-x2jrMcPaMfsHRRIkL+x96++xdzvrdBCnYRd5QiW5Wgo1OB4kDYPbC1XjWP/TNqlfK93K/lUL92erq5zPLgFScQ==", "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/json-schema": "^7.0.9", "@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12", "@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.48.0", "@typescript-eslint/scope-manager": "5.48.1",
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/typescript-estree": "5.48.0", "@typescript-eslint/typescript-estree": "5.48.1",
"eslint-scope": "^5.1.1", "eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0", "eslint-utils": "^3.0.0",
"semver": "^7.3.7" "semver": "^7.3.7"
@ -1546,12 +1546,12 @@
} }
}, },
"node_modules/@typescript-eslint/visitor-keys": { "node_modules/@typescript-eslint/visitor-keys": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz",
"integrity": "sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==", "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"eslint-visitor-keys": "^3.3.0" "eslint-visitor-keys": "^3.3.0"
}, },
"engines": { "engines": {
@ -13709,14 +13709,14 @@
} }
}, },
"@typescript-eslint/eslint-plugin": { "@typescript-eslint/eslint-plugin": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz",
"integrity": "sha512-SVLafp0NXpoJY7ut6VFVUU9I+YeFsDzeQwtK0WZ+xbRN3mtxJ08je+6Oi2N89qDn087COdO0u3blKZNv9VetRQ==", "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@typescript-eslint/scope-manager": "5.48.0", "@typescript-eslint/scope-manager": "5.48.1",
"@typescript-eslint/type-utils": "5.48.0", "@typescript-eslint/type-utils": "5.48.1",
"@typescript-eslint/utils": "5.48.0", "@typescript-eslint/utils": "5.48.1",
"debug": "^4.3.4", "debug": "^4.3.4",
"ignore": "^5.2.0", "ignore": "^5.2.0",
"natural-compare-lite": "^1.4.0", "natural-compare-lite": "^1.4.0",
@ -13726,53 +13726,53 @@
} }
}, },
"@typescript-eslint/parser": { "@typescript-eslint/parser": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz",
"integrity": "sha512-1mxNA8qfgxX8kBvRDIHEzrRGrKHQfQlbW6iHyfHYS0Q4X1af+S6mkLNtgCOsGVl8+/LUPrqdHMssAemkrQ01qg==", "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@typescript-eslint/scope-manager": "5.48.0", "@typescript-eslint/scope-manager": "5.48.1",
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/typescript-estree": "5.48.0", "@typescript-eslint/typescript-estree": "5.48.1",
"debug": "^4.3.4" "debug": "^4.3.4"
} }
}, },
"@typescript-eslint/scope-manager": { "@typescript-eslint/scope-manager": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz",
"integrity": "sha512-0AA4LviDtVtZqlyUQnZMVHydDATpD9SAX/RC5qh6cBd3xmyWvmXYF+WT1oOmxkeMnWDlUVTwdODeucUnjz3gow==", "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/visitor-keys": "5.48.0" "@typescript-eslint/visitor-keys": "5.48.1"
} }
}, },
"@typescript-eslint/type-utils": { "@typescript-eslint/type-utils": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz",
"integrity": "sha512-vbtPO5sJyFjtHkGlGK4Sthmta0Bbls4Onv0bEqOGm7hP9h8UpRsHJwsrCiWtCUndTRNQO/qe6Ijz9rnT/DB+7g==", "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@typescript-eslint/typescript-estree": "5.48.0", "@typescript-eslint/typescript-estree": "5.48.1",
"@typescript-eslint/utils": "5.48.0", "@typescript-eslint/utils": "5.48.1",
"debug": "^4.3.4", "debug": "^4.3.4",
"tsutils": "^3.21.0" "tsutils": "^3.21.0"
} }
}, },
"@typescript-eslint/types": { "@typescript-eslint/types": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz",
"integrity": "sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==", "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==",
"dev": true "dev": true
}, },
"@typescript-eslint/typescript-estree": { "@typescript-eslint/typescript-estree": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz",
"integrity": "sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==", "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/visitor-keys": "5.48.0", "@typescript-eslint/visitor-keys": "5.48.1",
"debug": "^4.3.4", "debug": "^4.3.4",
"globby": "^11.1.0", "globby": "^11.1.0",
"is-glob": "^4.0.3", "is-glob": "^4.0.3",
@ -13781,28 +13781,28 @@
} }
}, },
"@typescript-eslint/utils": { "@typescript-eslint/utils": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz",
"integrity": "sha512-x2jrMcPaMfsHRRIkL+x96++xdzvrdBCnYRd5QiW5Wgo1OB4kDYPbC1XjWP/TNqlfK93K/lUL92erq5zPLgFScQ==", "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/json-schema": "^7.0.9", "@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12", "@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.48.0", "@typescript-eslint/scope-manager": "5.48.1",
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"@typescript-eslint/typescript-estree": "5.48.0", "@typescript-eslint/typescript-estree": "5.48.1",
"eslint-scope": "^5.1.1", "eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0", "eslint-utils": "^3.0.0",
"semver": "^7.3.7" "semver": "^7.3.7"
} }
}, },
"@typescript-eslint/visitor-keys": { "@typescript-eslint/visitor-keys": {
"version": "5.48.0", "version": "5.48.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz",
"integrity": "sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==", "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@typescript-eslint/types": "5.48.0", "@typescript-eslint/types": "5.48.1",
"eslint-visitor-keys": "^3.3.0" "eslint-visitor-keys": "^3.3.0"
} }
}, },

4
package.json
View File

@ -91,8 +91,8 @@
"@types/randomcolor": "^0.5.7", "@types/randomcolor": "^0.5.7",
"@types/session-file-store": "^1.2.2", "@types/session-file-store": "^1.2.2",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^5.48.0", "@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^5.48.0", "@typescript-eslint/parser": "^5.48.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"bulma-divider": "^0.2.0", "bulma-divider": "^0.2.0",
"bulma-helpers": "^0.4.3", "bulma-helpers": "^0.4.3",

4
public-scss/style.scss
View File

@ -14,6 +14,10 @@ $black: #000;
width: 10px; width: 10px;
} }
.has-width-900 {
width: 900px;
}
.has-min-page-height { .has-min-page-height {
min-height: 100vh; min-height: 100vh;
} }

22
public-typescript/adminCleanup.js
View File

@ -4,30 +4,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const doCleanup = () => { const doCleanup = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doCleanupDatabase", {}, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doCleanupDatabase', {}, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
bulmaJS.alert({ bulmaJS.alert({
title: "Database Cleaned Up Successfully", title: 'Database Cleaned Up Successfully',
message: `${responseJSON.inactivedRecordCount} records inactivated, message: `${responseJSON.inactivedRecordCount} records inactivated,
${responseJSON.purgedRecordCount} permanently deleted.`, ${responseJSON.purgedRecordCount} permanently deleted.`,
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Cleaning Database", title: 'Error Cleaning Database',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
document.querySelector("#button--cleanupDatabase").addEventListener("click", () => { document
.querySelector('#button--cleanupDatabase')
.addEventListener('click', () => {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Cleanup Database", title: 'Cleanup Database',
message: "Are you sure you want to cleanup up the database?", message: 'Are you sure you want to cleanup up the database?',
okButton: { okButton: {
text: "Yes, Cleanup Database", text: 'Yes, Cleanup Database',
callbackFunction: doCleanup callbackFunction: doCleanup
} }
}); });

58
public-typescript/adminCleanup.ts
View File

@ -1,53 +1,55 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const doCleanup = () => { const doCleanup = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doCleanupDatabase", los.urlPrefix + '/admin/doCleanupDatabase',
{}, {},
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
inactivedRecordCount: number; inactivedRecordCount: number
purgedRecordCount: number; purgedRecordCount: number
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
bulmaJS.alert({ bulmaJS.alert({
title: "Database Cleaned Up Successfully", title: 'Database Cleaned Up Successfully',
message: `${responseJSON.inactivedRecordCount} records inactivated, message: `${responseJSON.inactivedRecordCount} records inactivated,
${responseJSON.purgedRecordCount} permanently deleted.`, ${responseJSON.purgedRecordCount} permanently deleted.`,
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Cleaning Database", title: 'Error Cleaning Database',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
document.querySelector("#button--cleanupDatabase")!.addEventListener("click", () => { document
.querySelector('#button--cleanupDatabase')!
.addEventListener('click', () => {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Cleanup Database", title: 'Cleanup Database',
message: "Are you sure you want to cleanup up the database?", message: 'Are you sure you want to cleanup up the database?',
okButton: { okButton: {
text: "Yes, Cleanup Database", text: 'Yes, Cleanup Database',
callbackFunction: doCleanup callbackFunction: doCleanup
} }
}); })
}); })
})(); })()

462
public-typescript/adminFees.js
View File

@ -3,7 +3,7 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const feeCategoriesContainerElement = document.querySelector("#container--feeCategories"); const feeCategoriesContainerElement = document.querySelector('#container--feeCategories');
let feeCategories = exports.feeCategories; let feeCategories = exports.feeCategories;
delete exports.feeCategories; delete exports.feeCategories;
function renderFeeCategories() { function renderFeeCategories() {
@ -13,152 +13,164 @@ Object.defineProperty(exports, "__esModule", { value: true });
</div>`; </div>`;
return; return;
} }
feeCategoriesContainerElement.innerHTML = ""; feeCategoriesContainerElement.innerHTML = '';
for (const feeCategory of feeCategories) { for (const feeCategory of feeCategories) {
const feeCategoryContainerElement = document.createElement("section"); const feeCategoryContainerElement = document.createElement('section');
feeCategoryContainerElement.className = "panel container--feeCategory"; feeCategoryContainerElement.className = 'panel container--feeCategory';
feeCategoryContainerElement.dataset.feeCategoryId = feeCategory.feeCategoryId.toString(); feeCategoryContainerElement.dataset.feeCategoryId =
feeCategory.feeCategoryId.toString();
feeCategoryContainerElement.innerHTML = feeCategoryContainerElement.innerHTML =
'<div class="panel-heading">' + '<div class="panel-heading">' +
'<div class="columns">' + '<div class="columns">' +
('<div class="column">' + ('<div class="column">' +
'<h2 class="title is-4">' + '<h2 class="title is-4">' +
cityssm.escapeHTML(feeCategory.feeCategory || "") + cityssm.escapeHTML(feeCategory.feeCategory || '') +
"</h2>" + '</h2>' +
"</div>") + '</div>') +
('<div class="column is-narrow">' + ('<div class="column is-narrow">' +
'<div class="field is-grouped is-justify-content-end">' + '<div class="field is-grouped is-justify-content-end">' +
(feeCategory.fees.length === 0 (feeCategory.fees.length === 0
? '<div class="control">' + ? '<div class="control">' +
'<button class="button is-small is-danger button--deleteFeeCategory" type="button">' + '<button class="button is-small is-danger button--deleteFeeCategory" type="button">' +
'<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' +
"<span>Delete Category</span>" + '<span>Delete Category</span>' +
"</button>" + '</button>' +
"</div>" '</div>'
: "") + : '') +
('<div class="control">' + ('<div class="control">' +
'<button class="button is-small is-primary button--editFeeCategory" type="button">' + '<button class="button is-small is-primary button--editFeeCategory" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
"<span>Edit Category</span>" + '<span>Edit Category</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="control">' + ('<div class="control">' +
'<button class="button is-small is-success button--addFee" data-cy="addFee" type="button">' + '<button class="button is-small is-success button--addFee" data-cy="addFee" type="button">' +
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
"<span>Add Fee</span>" + '<span>Add Fee</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="control">' + ('<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveFeeCategoryUp", "button--moveFeeCategoryDown") + los.getMoveUpDownButtonFieldHTML('button--moveFeeCategoryUp', 'button--moveFeeCategoryDown') +
"</div>") + '</div>') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
if (feeCategory.fees.length === 0) { if (feeCategory.fees.length === 0) {
feeCategoryContainerElement.insertAdjacentHTML("beforeend", `<div class="panel-block is-block"> feeCategoryContainerElement.insertAdjacentHTML('beforeend', `<div class="panel-block is-block">
<div class="message is-info"> <div class="message is-info">
<p class="message-body"> <p class="message-body">
There are no fees in the There are no fees in the
"${cityssm.escapeHTML(feeCategory.feeCategory || "")}" "${cityssm.escapeHTML(feeCategory.feeCategory || '')}"
category. category.
</p> </p>
</div> </div>
</div>`); </div>`);
feeCategoryContainerElement feeCategoryContainerElement
.querySelector(".button--deleteFeeCategory") .querySelector('.button--deleteFeeCategory')
.addEventListener("click", confirmDeleteFeeCategory); .addEventListener('click', confirmDeleteFeeCategory);
} }
else { else {
for (const fee of feeCategory.fees) { for (const fee of feeCategory.fees) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div');
panelBlockElement.className = "panel-block is-block container--fee"; panelBlockElement.className = 'panel-block is-block container--fee';
panelBlockElement.dataset.feeId = fee.feeId.toString(); panelBlockElement.dataset.feeId = fee.feeId.toString();
const hasTagsBlock = fee.isRequired || fee.occupancyTypeId || fee.lotTypeId; const hasTagsBlock = fee.isRequired || fee.occupancyTypeId || fee.lotTypeId;
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="columns">' + '<div class="columns">' +
('<div class="column is-half">' + ('<div class="column is-half">' +
"<p>" + '<p>' +
'<a class="has-text-weight-bold" href="#">' + '<a class="has-text-weight-bold" href="#">' +
cityssm.escapeHTML(fee.feeName || "") + cityssm.escapeHTML(fee.feeName || '') +
"</a><br />" + '</a><br />' +
"<small>" + '<small>' +
cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") + cityssm
"</small>" + .escapeHTML(fee.feeDescription || '')
"</p>" + .replace(/\n/g, '<br />') +
'</small>' +
'</p>' +
(hasTagsBlock (hasTagsBlock
? '<p class="tags">' + ? '<p class="tags">' +
(fee.isRequired ? '<span class="tag is-warning">Required</span>' : "") + (fee.isRequired
? '<span class="tag is-warning">Required</span>'
: '') +
(fee.occupancyTypeId (fee.occupancyTypeId
? ' <span class="tag has-tooltip-bottom" data-tooltip="' + ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
los.escapedAliases.Occupancy + los.escapedAliases.Occupancy +
' Type Filter">' + ' Type Filter">' +
cityssm.escapeHTML(fee.occupancyType || "") + cityssm.escapeHTML(fee.occupancyType || '') +
"</span>" '</span>'
: "") + : '') +
(fee.lotTypeId (fee.lotTypeId
? ' <span class="tag has-tooltip-bottom" data-tooltip="' + ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
' Type Filter">' + ' Type Filter">' +
cityssm.escapeHTML(fee.lotType || "") + cityssm.escapeHTML(fee.lotType || '') +
"</span>" '</span>'
: "") + : '') +
"</p>" '</p>'
: "") + : '') +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
'<div class="columns is-mobile">' + '<div class="columns is-mobile">' +
('<div class="column has-text-centered">' + ('<div class="column has-text-centered">' +
(fee.feeFunction (fee.feeFunction
? cityssm.escapeHTML(fee.feeFunction) + ? cityssm.escapeHTML(fee.feeFunction) +
"<br />" + '<br />' +
"<small>Fee Function</small>" '<small>Fee Function</small>'
: "$" + fee.feeAmount.toFixed(2) + "<br />" + "<small>Fee</small>") + : '$' +
"</div>") + fee.feeAmount.toFixed(2) +
'<br />' +
'<small>Fee</small>') +
'</div>') +
('<div class="column has-text-centered">' + ('<div class="column has-text-centered">' +
(fee.taxPercentage (fee.taxPercentage
? fee.taxPercentage + "%" ? fee.taxPercentage + '%'
: "$" + fee.taxAmount.toFixed(2)) + : '$' + fee.taxAmount.toFixed(2)) +
"<br /><small>Tax</small>" + '<br /><small>Tax</small>' +
"</div>") + '</div>') +
('<div class="column has-text-centered">' + ('<div class="column has-text-centered">' +
(fee.includeQuantity (fee.includeQuantity
? cityssm.escapeHTML(fee.quantityUnit || "") + ? cityssm.escapeHTML(fee.quantityUnit || '') +
"<br />" + '<br />' +
"<small>Quantity</small>" '<small>Quantity</small>'
: "") + : '') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="column is-narrow">' + ('<div class="column is-narrow">' +
los.getMoveUpDownButtonFieldHTML("button--moveFeeUp", "button--moveFeeDown") + los.getMoveUpDownButtonFieldHTML('button--moveFeeUp', 'button--moveFeeDown') +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</div>"; '</div>';
panelBlockElement.querySelector("a").addEventListener("click", openEditFee); panelBlockElement
panelBlockElement.querySelector(".button--moveFeeUp").addEventListener("click", moveFee); .querySelector('a')
panelBlockElement.querySelector(".button--moveFeeDown").addEventListener("click", moveFee); .addEventListener('click', openEditFee);
panelBlockElement.querySelector('.button--moveFeeUp').addEventListener('click', moveFee);
panelBlockElement.querySelector('.button--moveFeeDown').addEventListener('click', moveFee);
feeCategoryContainerElement.append(panelBlockElement); feeCategoryContainerElement.append(panelBlockElement);
} }
} }
feeCategoryContainerElement feeCategoryContainerElement
.querySelector(".button--editFeeCategory") .querySelector('.button--editFeeCategory')
.addEventListener("click", openEditFeeCategory); .addEventListener('click', openEditFeeCategory);
feeCategoryContainerElement feeCategoryContainerElement
.querySelector(".button--addFee") .querySelector('.button--addFee')
.addEventListener("click", openAddFee); .addEventListener('click', openAddFee);
feeCategoryContainerElement.querySelector(".button--moveFeeCategoryUp").addEventListener("click", moveFeeCategory); feeCategoryContainerElement.querySelector('.button--moveFeeCategoryUp').addEventListener('click', moveFeeCategory);
feeCategoryContainerElement.querySelector(".button--moveFeeCategoryDown").addEventListener("click", moveFeeCategory); feeCategoryContainerElement.querySelector('.button--moveFeeCategoryDown').addEventListener('click', moveFeeCategory);
feeCategoriesContainerElement.append(feeCategoryContainerElement); feeCategoriesContainerElement.append(feeCategoryContainerElement);
} }
} }
/* /*
* Fee Categories * Fee Categories
*/ */
document.querySelector("#button--addFeeCategory").addEventListener("click", () => { document
.querySelector('#button--addFeeCategory')
.addEventListener('click', () => {
let addCloseModalFunction; let addCloseModalFunction;
const doAddFeeCategory = (submitEvent) => { const doAddFeeCategory = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddFeeCategory", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddFeeCategory', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
addCloseModalFunction(); addCloseModalFunction();
@ -166,36 +178,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Creating Fee Category", title: 'Error Creating Fee Category',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("adminFees-addFeeCategory", { cityssm.openHtmlModal('adminFees-addFeeCategory', {
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
modalElement.querySelector("#feeCategoryAdd--feeCategory").focus(); modalElement.querySelector('#feeCategoryAdd--feeCategory').focus();
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("form").addEventListener("submit", doAddFeeCategory); modalElement
.querySelector('form')
.addEventListener('submit', doAddFeeCategory);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
document.querySelector("#button--addFeeCategory").focus(); document.querySelector('#button--addFeeCategory').focus();
} }
}); });
}); });
function openEditFeeCategory(clickEvent) { function openEditFeeCategory(clickEvent) {
const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest(".container--feeCategory") const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest('.container--feeCategory').dataset.feeCategoryId, 10);
.dataset.feeCategoryId, 10);
const feeCategory = feeCategories.find((currentFeeCategory) => { const feeCategory = feeCategories.find((currentFeeCategory) => {
return currentFeeCategory.feeCategoryId === feeCategoryId; return currentFeeCategory.feeCategoryId === feeCategoryId;
}); });
let editCloseModalFunction; let editCloseModalFunction;
function doUpdateFeeCategory(submitEvent) { function doUpdateFeeCategory(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateFeeCategory", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateFeeCategory', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
editCloseModalFunction(); editCloseModalFunction();
@ -203,25 +216,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Fee Category", title: 'Error Updating Fee Category',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
cityssm.openHtmlModal("adminFees-editFeeCategory", { cityssm.openHtmlModal('adminFees-editFeeCategory', {
onshow(modalElement) { onshow(modalElement) {
modalElement.querySelector("#feeCategoryEdit--feeCategoryId").value = ;
feeCategory.feeCategoryId.toString(); modalElement.querySelector('#feeCategoryEdit--feeCategoryId').value = feeCategory.feeCategoryId.toString();
modalElement.querySelector("#feeCategoryEdit--feeCategory").value = modalElement.querySelector('#feeCategoryEdit--feeCategory').value = feeCategory.feeCategory;
feeCategory.feeCategory;
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
modalElement.querySelector("form").addEventListener("submit", doUpdateFeeCategory); modalElement
modalElement.querySelector("#feeCategoryEdit--feeCategory").focus(); .querySelector('form')
.addEventListener('submit', doUpdateFeeCategory);
modalElement.querySelector('#feeCategoryEdit--feeCategory').focus();
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -229,10 +243,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function confirmDeleteFeeCategory(clickEvent) { function confirmDeleteFeeCategory(clickEvent) {
const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest(".container--feeCategory") const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest('.container--feeCategory').dataset.feeCategoryId, 10);
.dataset.feeCategoryId, 10);
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteFeeCategory", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteFeeCategory', {
feeCategoryId feeCategoryId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -241,32 +254,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Fee Category", title: 'Error Updating Fee Category',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Fee Category?", title: 'Delete Fee Category?',
message: "Are you sure you want to delete this fee category?", message: 'Are you sure you want to delete this fee category?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete the Fee Category", text: 'Yes, Delete the Fee Category',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
function moveFeeCategory(clickEvent) { function moveFeeCategory(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const feeCategoryId = buttonElement.closest(".container--feeCategory").dataset const feeCategoryId = buttonElement.closest('.container--feeCategory').dataset.feeCategoryId;
.feeCategoryId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveFeeCategoryUp" : "doMoveFeeCategoryDown"), { (buttonElement.dataset.direction === 'up'
? 'doMoveFeeCategoryUp'
: 'doMoveFeeCategoryDown'), {
feeCategoryId, feeCategoryId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
@ -274,9 +288,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Fee Category", title: 'Error Moving Fee Category',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -285,12 +299,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
* Fees * Fees
*/ */
function openAddFee(clickEvent) { function openAddFee(clickEvent) {
const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest(".container--feeCategory") const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest('.container--feeCategory').dataset.feeCategoryId, 10);
.dataset.feeCategoryId, 10);
let addCloseModalFunction; let addCloseModalFunction;
function doAddFee(submitEvent) { function doAddFee(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddFee", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddFee', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
addCloseModalFunction(); addCloseModalFunction();
@ -298,18 +311,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Fee", title: 'Error Adding Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
cityssm.openHtmlModal("adminFees-addFee", { cityssm.openHtmlModal('adminFees-addFee', {
onshow(modalElement) { onshow(modalElement) {
const feeCategoryElement = modalElement.querySelector("#feeAdd--feeCategoryId"); const feeCategoryElement = modalElement.querySelector('#feeAdd--feeCategoryId');
for (const feeCategory of feeCategories) { for (const feeCategory of feeCategories) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = feeCategory.feeCategoryId.toString(); optionElement.value = feeCategory.feeCategoryId.toString();
optionElement.textContent = feeCategory.feeCategory; optionElement.textContent = feeCategory.feeCategory;
if (feeCategory.feeCategoryId === feeCategoryId) { if (feeCategory.feeCategoryId === feeCategoryId) {
@ -317,60 +330,67 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
feeCategoryElement.append(optionElement); feeCategoryElement.append(optionElement);
} }
const occupancyTypeElement = modalElement.querySelector("#feeAdd--occupancyTypeId"); const occupancyTypeElement = modalElement.querySelector('#feeAdd--occupancyTypeId');
for (const occupancyType of exports.occupancyTypes) { for (const occupancyType of exports.occupancyTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = occupancyType.occupancyTypeId.toString(); optionElement.value = occupancyType.occupancyTypeId.toString();
optionElement.textContent = occupancyType.occupancyType; optionElement.textContent = occupancyType.occupancyType;
occupancyTypeElement.append(optionElement); occupancyTypeElement.append(optionElement);
} }
const lotTypeElement = modalElement.querySelector("#feeAdd--lotTypeId"); const lotTypeElement = modalElement.querySelector('#feeAdd--lotTypeId');
for (const lotType of exports.lotTypes) { for (const lotType of exports.lotTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotType.lotTypeId.toString(); optionElement.value = lotType.lotTypeId.toString();
optionElement.textContent = lotType.lotType; optionElement.textContent = lotType.lotType;
lotTypeElement.append(optionElement); lotTypeElement.append(optionElement);
} }
modalElement.querySelector("#feeAdd--taxPercentage").value = exports.taxPercentageDefault.toString(); ;
modalElement.querySelector('#feeAdd--taxPercentage').value = exports.taxPercentageDefault.toString();
los.populateAliases(modalElement); los.populateAliases(modalElement);
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("form").addEventListener("submit", doAddFee); modalElement.querySelector('form').addEventListener('submit', doAddFee);
modalElement.querySelector("#feeAdd--feeName").focus(); modalElement.querySelector('#feeAdd--feeName').focus();
modalElement.querySelector("#feeAdd--feeFunction").addEventListener("change", () => { modalElement.querySelector('#feeAdd--feeFunction').addEventListener('change', () => {
const feeAmountElement = modalElement.querySelector("#feeAdd--feeAmount"); const feeAmountElement = modalElement.querySelector('#feeAdd--feeAmount');
const feeFunctionElement = modalElement.querySelector("#feeAdd--feeFunction"); const feeFunctionElement = modalElement.querySelector('#feeAdd--feeFunction');
if (feeFunctionElement.value === "") { if (feeFunctionElement.value === '') {
feeFunctionElement.closest(".select").classList.remove("is-success"); feeFunctionElement
feeAmountElement.classList.add("is-success"); .closest('.select')
.classList.remove('is-success');
feeAmountElement.classList.add('is-success');
feeAmountElement.disabled = false; feeAmountElement.disabled = false;
} }
else { else {
feeFunctionElement.closest(".select").classList.add("is-success"); feeFunctionElement.closest('.select').classList.add('is-success');
feeAmountElement.classList.remove("is-success"); feeAmountElement.classList.remove('is-success');
feeAmountElement.disabled = true; feeAmountElement.disabled = true;
} }
}); });
modalElement.querySelector("#feeAdd--taxPercentage").addEventListener("keyup", () => { modalElement
const taxAmountElement = modalElement.querySelector("#feeAdd--taxAmount"); .querySelector('#feeAdd--taxPercentage')
const taxPercentageElement = modalElement.querySelector("#feeAdd--taxPercentage"); .addEventListener('keyup', () => {
if (taxPercentageElement.value === "") { const taxAmountElement = modalElement.querySelector('#feeAdd--taxAmount');
taxPercentageElement.classList.remove("is-success"); const taxPercentageElement = modalElement.querySelector('#feeAdd--taxPercentage');
taxAmountElement.classList.add("is-success"); if (taxPercentageElement.value === '') {
taxPercentageElement.classList.remove('is-success');
taxAmountElement.classList.add('is-success');
taxAmountElement.disabled = false; taxAmountElement.disabled = false;
} }
else { else {
taxPercentageElement.classList.add("is-success"); taxPercentageElement.classList.add('is-success');
taxAmountElement.classList.remove("is-success"); taxAmountElement.classList.remove('is-success');
taxAmountElement.disabled = true; taxAmountElement.disabled = true;
} }
}); });
modalElement.querySelector("#feeAdd--includeQuantity").addEventListener("change", () => { modalElement
modalElement.querySelector("#feeAdd--quantityUnit").disabled = .querySelector('#feeAdd--includeQuantity')
modalElement.querySelector("#feeAdd--includeQuantity") .addEventListener('change', () => {
.value === ""; ;
modalElement.querySelector('#feeAdd--quantityUnit').disabled =
modalElement.querySelector('#feeAdd--includeQuantity').value === '';
}); });
}, },
onremoved() { onremoved() {
@ -380,9 +400,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function openEditFee(clickEvent) { function openEditFee(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const feeContainerElement = clickEvent.currentTarget.closest(".container--fee"); const feeContainerElement = clickEvent.currentTarget.closest('.container--fee');
const feeId = Number.parseInt(feeContainerElement.dataset.feeId, 10); const feeId = Number.parseInt(feeContainerElement.dataset.feeId, 10);
const feeCategoryId = Number.parseInt(feeContainerElement.closest(".container--feeCategory").dataset.feeCategoryId); const feeCategoryId = Number.parseInt(feeContainerElement.closest('.container--feeCategory')
.dataset.feeCategoryId);
const feeCategory = feeCategories.find((currentFeeCategory) => { const feeCategory = feeCategories.find((currentFeeCategory) => {
return currentFeeCategory.feeCategoryId === feeCategoryId; return currentFeeCategory.feeCategoryId === feeCategoryId;
}); });
@ -393,7 +414,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
let editModalElement; let editModalElement;
function doUpdateFee(submitEvent) { function doUpdateFee(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateFee", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateFee', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
editCloseModalFunction(); editCloseModalFunction();
@ -401,9 +422,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Fee", title: 'Error Updating Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -411,7 +432,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
function confirmDeleteFee(clickEvent) { function confirmDeleteFee(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteFee", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteFee', {
feeId feeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -421,64 +442,62 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Fee", title: 'Error Deleting Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Fee?", title: 'Delete Fee?',
message: "Are you sure you want to delete this fee?", message: 'Are you sure you want to delete this fee?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete the Fee", text: 'Yes, Delete the Fee',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
function toggleFeeFields() { function toggleFeeFields() {
const feeAmountElement = editModalElement.querySelector("#feeEdit--feeAmount"); const feeAmountElement = editModalElement.querySelector('#feeEdit--feeAmount');
const feeFunctionElement = editModalElement.querySelector("#feeEdit--feeFunction"); const feeFunctionElement = editModalElement.querySelector('#feeEdit--feeFunction');
if (feeFunctionElement.value === "") { if (feeFunctionElement.value === '') {
feeFunctionElement.closest(".select").classList.remove("is-success"); feeFunctionElement.closest('.select').classList.remove('is-success');
feeAmountElement.classList.add("is-success"); feeAmountElement.classList.add('is-success');
feeAmountElement.disabled = false; feeAmountElement.disabled = false;
} }
else { else {
feeFunctionElement.closest(".select").classList.add("is-success"); feeFunctionElement.closest('.select').classList.add('is-success');
feeAmountElement.classList.remove("is-success"); feeAmountElement.classList.remove('is-success');
feeAmountElement.disabled = true; feeAmountElement.disabled = true;
} }
} }
function toggleTaxFields() { function toggleTaxFields() {
const taxAmountElement = editModalElement.querySelector("#feeEdit--taxAmount"); const taxAmountElement = editModalElement.querySelector('#feeEdit--taxAmount');
const taxPercentageElement = editModalElement.querySelector("#feeEdit--taxPercentage"); const taxPercentageElement = editModalElement.querySelector('#feeEdit--taxPercentage');
if (taxPercentageElement.value === "") { if (taxPercentageElement.value === '') {
taxPercentageElement.classList.remove("is-success"); taxPercentageElement.classList.remove('is-success');
taxAmountElement.classList.add("is-success"); taxAmountElement.classList.add('is-success');
taxAmountElement.disabled = false; taxAmountElement.disabled = false;
} }
else { else {
taxPercentageElement.classList.add("is-success"); taxPercentageElement.classList.add('is-success');
taxAmountElement.classList.remove("is-success"); taxAmountElement.classList.remove('is-success');
taxAmountElement.disabled = true; taxAmountElement.disabled = true;
} }
} }
function toggleQuantityFields() { function toggleQuantityFields() {
const includeQuanitityValue = editModalElement.querySelector("#feeEdit--includeQuantity").value; const includeQuanitityValue = editModalElement.querySelector('#feeEdit--includeQuantity').value;
editModalElement.querySelector("#feeEdit--quantityUnit").disabled = editModalElement.querySelector('#feeEdit--quantityUnit').disabled = includeQuanitityValue === '';
includeQuanitityValue === "";
} }
cityssm.openHtmlModal("adminFees-editFee", { cityssm.openHtmlModal('adminFees-editFee', {
onshow(modalElement) { onshow(modalElement) {
editModalElement = modalElement; editModalElement = modalElement;
modalElement.querySelector("#feeEdit--feeId").value = modalElement.querySelector('#feeEdit--feeId').value = fee.feeId.toString();
fee.feeId.toString(); const feeCategoryElement = modalElement.querySelector('#feeEdit--feeCategoryId');
const feeCategoryElement = modalElement.querySelector("#feeEdit--feeCategoryId");
for (const feeCategory of feeCategories) { for (const feeCategory of feeCategories) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = feeCategory.feeCategoryId.toString(); optionElement.value = feeCategory.feeCategoryId.toString();
optionElement.textContent = feeCategory.feeCategory; optionElement.textContent = feeCategory.feeCategory;
if (feeCategory.feeCategoryId === feeCategoryId) { if (feeCategory.feeCategoryId === feeCategoryId) {
@ -486,12 +505,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
feeCategoryElement.append(optionElement); feeCategoryElement.append(optionElement);
} }
modalElement.querySelector("#feeEdit--feeName").value = fee.feeName; ;
modalElement.querySelector("#feeEdit--feeDescription").value = modalElement.querySelector('#feeEdit--feeName').value = fee.feeName;
fee.feeDescription; modalElement.querySelector('#feeEdit--feeDescription').value = fee.feeDescription;
const occupancyTypeElement = modalElement.querySelector("#feeEdit--occupancyTypeId"); const occupancyTypeElement = modalElement.querySelector('#feeEdit--occupancyTypeId');
for (const occupancyType of exports.occupancyTypes) { for (const occupancyType of exports.occupancyTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = occupancyType.occupancyTypeId.toString(); optionElement.value = occupancyType.occupancyTypeId.toString();
optionElement.textContent = occupancyType.occupancyType; optionElement.textContent = occupancyType.occupancyType;
if (occupancyType.occupancyTypeId === fee.occupancyTypeId) { if (occupancyType.occupancyTypeId === fee.occupancyTypeId) {
@ -499,9 +518,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
occupancyTypeElement.append(optionElement); occupancyTypeElement.append(optionElement);
} }
const lotTypeElement = modalElement.querySelector("#feeEdit--lotTypeId"); const lotTypeElement = modalElement.querySelector('#feeEdit--lotTypeId');
for (const lotType of exports.lotTypes) { for (const lotType of exports.lotTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotType.lotTypeId.toString(); optionElement.value = lotType.lotTypeId.toString();
optionElement.textContent = lotType.lotType; optionElement.textContent = lotType.lotType;
if (lotType.lotTypeId === fee.lotTypeId) { if (lotType.lotTypeId === fee.lotTypeId) {
@ -509,39 +528,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
lotTypeElement.append(optionElement); lotTypeElement.append(optionElement);
} }
modalElement.querySelector("#feeEdit--feeAmount").value = fee.feeAmount ;
? fee.feeAmount.toFixed(2) modalElement.querySelector('#feeEdit--feeAmount').value = fee.feeAmount ? fee.feeAmount.toFixed(2) : '';
: "";
modalElement modalElement
.querySelector("#feeEdit--feeFunction") .querySelector('#feeEdit--feeFunction')
.addEventListener("change", toggleFeeFields); .addEventListener('change', toggleFeeFields);
toggleFeeFields(); toggleFeeFields();
modalElement.querySelector("#feeEdit--taxAmount").value = fee.taxAmount modalElement.querySelector('#feeEdit--taxAmount').value = fee.taxAmount ? fee.taxAmount.toFixed(2) : '';
? fee.taxAmount.toFixed(2) const taxPercentageElement = modalElement.querySelector('#feeEdit--taxPercentage');
: ""; taxPercentageElement.value = fee.taxPercentage
const taxPercentageElement = modalElement.querySelector("#feeEdit--taxPercentage"); ? fee.taxPercentage.toString()
taxPercentageElement.value = fee.taxPercentage ? fee.taxPercentage.toString() : ""; : '';
taxPercentageElement.addEventListener("keyup", toggleTaxFields); taxPercentageElement.addEventListener('keyup', toggleTaxFields);
toggleTaxFields(); toggleTaxFields();
const includeQuantityElement = modalElement.querySelector("#feeEdit--includeQuantity"); const includeQuantityElement = modalElement.querySelector('#feeEdit--includeQuantity');
if (fee.includeQuantity) { if (fee.includeQuantity) {
includeQuantityElement.value = "1"; includeQuantityElement.value = '1';
} }
includeQuantityElement.addEventListener("change", toggleQuantityFields); includeQuantityElement.addEventListener('change', toggleQuantityFields);
modalElement.querySelector("#feeEdit--quantityUnit").value = modalElement.querySelector('#feeEdit--quantityUnit').value = fee.quantityUnit || '';
fee.quantityUnit || "";
toggleQuantityFields(); toggleQuantityFields();
if (fee.isRequired) { if (fee.isRequired) {
modalElement.querySelector("#feeEdit--isRequired").value = "1"; ;
modalElement.querySelector('#feeEdit--isRequired').value = '1';
} }
los.populateAliases(modalElement); los.populateAliases(modalElement);
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
modalElement.querySelector("form").addEventListener("submit", doUpdateFee); modalElement
.querySelector('form')
.addEventListener('submit', doUpdateFee);
bulmaJS.init(modalElement); bulmaJS.init(modalElement);
modalElement.querySelector(".button--deleteFee").addEventListener("click", confirmDeleteFee); modalElement
.querySelector('.button--deleteFee')
.addEventListener('click', confirmDeleteFee);
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -550,13 +572,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function moveFee(clickEvent) { function moveFee(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const feeContainerElement = buttonElement.closest(".container--fee"); const feeContainerElement = buttonElement.closest('.container--fee');
const feeId = feeContainerElement.dataset.feeId; const feeId = feeContainerElement.dataset.feeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveFeeUp" : "doMoveFeeDown"), { (buttonElement.dataset.direction === 'up'
? 'doMoveFeeUp'
: 'doMoveFeeDown'), {
feeId, feeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
@ -564,9 +588,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Fee", title: 'Error Moving Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });

943
public-typescript/adminFees.ts
View File

File diff suppressed because it is too large Load Diff

249
public-typescript/adminLotTypes.js
View File

@ -3,13 +3,13 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const containerElement = document.querySelector("#container--lotTypes"); const containerElement = document.querySelector('#container--lotTypes');
let lotTypes = exports.lotTypes; let lotTypes = exports.lotTypes;
delete exports.lotTypes; delete exports.lotTypes;
const expandedLotTypes = new Set(); const expandedLotTypes = new Set();
function toggleLotTypeFields(clickEvent) { function toggleLotTypeFields(clickEvent) {
const toggleButtonElement = clickEvent.currentTarget; const toggleButtonElement = clickEvent.currentTarget;
const lotTypeElement = toggleButtonElement.closest(".container--lotType"); const lotTypeElement = toggleButtonElement.closest('.container--lotType');
const lotTypeId = Number.parseInt(lotTypeElement.dataset.lotTypeId, 10); const lotTypeId = Number.parseInt(lotTypeElement.dataset.lotTypeId, 10);
if (expandedLotTypes.has(lotTypeId)) { if (expandedLotTypes.has(lotTypeId)) {
expandedLotTypes.delete(lotTypeId); expandedLotTypes.delete(lotTypeId);
@ -20,9 +20,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
toggleButtonElement.innerHTML = expandedLotTypes.has(lotTypeId) toggleButtonElement.innerHTML = expandedLotTypes.has(lotTypeId)
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>' ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>'; : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>';
const panelBlockElements = lotTypeElement.querySelectorAll(".panel-block"); const panelBlockElements = lotTypeElement.querySelectorAll('.panel-block');
for (const panelBlockElement of panelBlockElements) { for (const panelBlockElement of panelBlockElements) {
panelBlockElement.classList.toggle("is-hidden"); panelBlockElement.classList.toggle('is-hidden');
} }
} }
function lotTypeResponseHandler(responseJSON) { function lotTypeResponseHandler(responseJSON) {
@ -33,23 +33,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Updating ${exports.aliases.lot} Type`, title: `Error Updating ${exports.aliases.lot} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
} }
function deleteLotType(clickEvent) { function deleteLotType(clickEvent) {
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--lotType').dataset.lotTypeId, 10);
.lotTypeId, 10);
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteLotType', {
lotTypeId lotTypeId
}, lotTypeResponseHandler); }, lotTypeResponseHandler);
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${exports.aliases.lot} Type`, title: `Delete ${exports.aliases.lot} Type`,
message: `Are you sure you want to delete this ${exports.aliases.lot.toLowerCase()} type?`, message: `Are you sure you want to delete this ${exports.aliases.lot.toLowerCase()} type?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${exports.aliases.lot} Type`, text: `Yes, Delete ${exports.aliases.lot} Type`,
callbackFunction: doDelete callbackFunction: doDelete
@ -57,33 +56,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function openEditLotType(clickEvent) { function openEditLotType(clickEvent) {
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--lotType').dataset.lotTypeId, 10);
.lotTypeId, 10);
const lotType = lotTypes.find((currentLotType) => { const lotType = lotTypes.find((currentLotType) => {
return lotTypeId === currentLotType.lotTypeId; return lotTypeId === currentLotType.lotTypeId;
}); });
let editCloseModalFunction; let editCloseModalFunction;
const doEdit = (submitEvent) => { const doEdit = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateLotType', submitEvent.currentTarget, (responseJSON) => {
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction();
} }
}); });
}; };
cityssm.openHtmlModal("adminLotTypes-editLotType", { cityssm.openHtmlModal('adminLotTypes-editLotType', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotTypeEdit--lotTypeId").value = modalElement.querySelector('#lotTypeEdit--lotTypeId').value = lotTypeId.toString();
lotTypeId.toString(); modalElement.querySelector('#lotTypeEdit--lotType').value = lotType.lotType;
modalElement.querySelector("#lotTypeEdit--lotType").value =
lotType.lotType;
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
modalElement.querySelector("#lotTypeEdit--lotType").focus(); modalElement.querySelector('#lotTypeEdit--lotType').focus();
modalElement.querySelector("form").addEventListener("submit", doEdit); modalElement.querySelector('form').addEventListener('submit', doEdit);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}, },
onremoved() { onremoved() {
@ -92,12 +88,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function openAddLotTypeField(clickEvent) { function openAddLotTypeField(clickEvent) {
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--lotType').dataset.lotTypeId, 10);
.lotTypeId, 10);
let addCloseModalFunction; let addCloseModalFunction;
const doAdd = (submitEvent) => { const doAdd = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotTypeField", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddLotTypeField', submitEvent.currentTarget, (responseJSON) => {
expandedLotTypes.add(lotTypeId); expandedLotTypes.add(lotTypeId);
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
@ -106,18 +101,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
}); });
}; };
cityssm.openHtmlModal("adminLotTypes-addLotTypeField", { cityssm.openHtmlModal('adminLotTypes-addLotTypeField', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
if (lotTypeId) { if (lotTypeId) {
modalElement.querySelector("#lotTypeFieldAdd--lotTypeId").value = ;
lotTypeId.toString(); modalElement.querySelector('#lotTypeFieldAdd--lotTypeId').value = lotTypeId.toString();
} }
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("#lotTypeFieldAdd--lotTypeField").focus(); modalElement.querySelector('#lotTypeFieldAdd--lotTypeField').focus();
modalElement.querySelector("form").addEventListener("submit", doAdd); modalElement.querySelector('form').addEventListener('submit', doAdd);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}, },
onremoved() { onremoved() {
@ -127,12 +122,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function moveLotType(clickEvent) { function moveLotType(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const lotTypeId = buttonElement.closest(".container--lotType").dataset.lotTypeId; const lotTypeId = buttonElement.closest('.container--lotType').dataset.lotTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveLotTypeUp" : "doMoveLotTypeDown"), { (buttonElement.dataset.direction === 'up'
? 'doMoveLotTypeUp'
: 'doMoveLotTypeDown'), {
lotTypeId, lotTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, lotTypeResponseHandler); }, lotTypeResponseHandler);
} }
function openEditLotTypeField(lotTypeId, lotTypeFieldId) { function openEditLotTypeField(lotTypeId, lotTypeFieldId) {
@ -151,7 +148,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
maximumLengthElement.min = minimumLengthElement.value; maximumLengthElement.min = minimumLengthElement.value;
} }
function toggleInputFields() { function toggleInputFields() {
if (lotTypeFieldValuesElement.value === "") { if (lotTypeFieldValuesElement.value === '') {
minimumLengthElement.disabled = false; minimumLengthElement.disabled = false;
maximumLengthElement.disabled = false; maximumLengthElement.disabled = false;
patternElement.disabled = false; patternElement.disabled = false;
@ -164,7 +161,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function doUpdate(submitEvent) { function doUpdate(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotTypeField", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateLotTypeField', submitEvent.currentTarget, (responseJSON) => {
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction();
@ -172,7 +169,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotTypeField", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteLotTypeField', {
lotTypeFieldId lotTypeFieldId
}, (responseJSON) => { }, (responseJSON) => {
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON);
@ -183,31 +180,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function confirmDoDelete() { function confirmDoDelete() {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Field", title: 'Delete Field',
message: "Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.", message: 'Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Field", text: 'Yes, Delete Field',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
cityssm.openHtmlModal("adminLotTypes-editLotTypeField", { cityssm.openHtmlModal('adminLotTypes-editLotTypeField', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotTypeFieldEdit--lotTypeFieldId").value = modalElement.querySelector('#lotTypeFieldEdit--lotTypeFieldId').value = lotTypeField.lotTypeFieldId.toString();
lotTypeField.lotTypeFieldId.toString(); modalElement.querySelector('#lotTypeFieldEdit--lotTypeField').value = lotTypeField.lotTypeField;
modalElement.querySelector("#lotTypeFieldEdit--lotTypeField").value = modalElement.querySelector('#lotTypeFieldEdit--isRequired').value = lotTypeField.isRequired ? '1' : '0';
lotTypeField.lotTypeField; minimumLengthElement = modalElement.querySelector('#lotTypeFieldEdit--minimumLength');
modalElement.querySelector("#lotTypeFieldEdit--isRequired").value =
lotTypeField.isRequired ? "1" : "0";
minimumLengthElement = modalElement.querySelector("#lotTypeFieldEdit--minimumLength");
minimumLengthElement.value = lotTypeField.minimumLength.toString(); minimumLengthElement.value = lotTypeField.minimumLength.toString();
maximumLengthElement = modalElement.querySelector("#lotTypeFieldEdit--maximumLength"); maximumLengthElement = modalElement.querySelector('#lotTypeFieldEdit--maximumLength');
maximumLengthElement.value = lotTypeField.maximumLength.toString(); maximumLengthElement.value = lotTypeField.maximumLength.toString();
patternElement = modalElement.querySelector("#lotTypeFieldEdit--pattern"); patternElement = modalElement.querySelector('#lotTypeFieldEdit--pattern');
patternElement.value = lotTypeField.pattern; patternElement.value = lotTypeField.pattern;
lotTypeFieldValuesElement = modalElement.querySelector("#lotTypeFieldEdit--lotTypeFieldValues"); lotTypeFieldValuesElement = modalElement.querySelector('#lotTypeFieldEdit--lotTypeFieldValues');
lotTypeFieldValuesElement.value = lotTypeField.lotTypeFieldValues; lotTypeFieldValuesElement.value = lotTypeField.lotTypeFieldValues;
toggleInputFields(); toggleInputFields();
}, },
@ -216,13 +210,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
bulmaJS.init(modalElement); bulmaJS.init(modalElement);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
cityssm.enableNavBlocker(); cityssm.enableNavBlocker();
modalElement.querySelector("form").addEventListener("submit", doUpdate); modalElement.querySelector('form').addEventListener('submit', doUpdate);
minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin); minimumLengthElement.addEventListener('keyup', updateMaximumLengthMin);
updateMaximumLengthMin(); updateMaximumLengthMin();
lotTypeFieldValuesElement.addEventListener("keyup", toggleInputFields); lotTypeFieldValuesElement.addEventListener('keyup', toggleInputFields);
modalElement modalElement
.querySelector("#button--deleteLotTypeField") .querySelector('#button--deleteLotTypeField')
.addEventListener("click", confirmDoDelete); .addEventListener('click', confirmDoDelete);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -232,78 +226,77 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function openEditLotTypeFieldByClick(clickEvent) { function openEditLotTypeFieldByClick(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const lotTypeFieldId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotTypeField") const lotTypeFieldId = Number.parseInt(clickEvent.currentTarget.closest('.container--lotTypeField').dataset.lotTypeFieldId, 10);
.dataset.lotTypeFieldId, 10); const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--lotType').dataset.lotTypeId, 10);
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset
.lotTypeId, 10);
openEditLotTypeField(lotTypeId, lotTypeFieldId); openEditLotTypeField(lotTypeId, lotTypeFieldId);
} }
function moveLotTypeField(clickEvent) { function moveLotTypeField(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const lotTypeFieldId = buttonElement.closest(".container--lotTypeField").dataset const lotTypeFieldId = buttonElement.closest('.container--lotTypeField').dataset.lotTypeFieldId;
.lotTypeFieldId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveLotTypeFieldUp" ? 'doMoveLotTypeFieldUp'
: "doMoveLotTypeFieldDown"), { : 'doMoveLotTypeFieldDown'), {
lotTypeFieldId, lotTypeFieldId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, lotTypeResponseHandler); }, lotTypeResponseHandler);
} }
function renderLotTypeFields(panelElement, lotTypeId, lotTypeFields) { function renderLotTypeFields(panelElement, lotTypeId, lotTypeFields) {
if (lotTypeFields.length === 0) { if (lotTypeFields.length === 0) {
panelElement.insertAdjacentHTML("beforeend", '<div class="panel-block is-block' + panelElement.insertAdjacentHTML('beforeend', '<div class="panel-block is-block' +
(expandedLotTypes.has(lotTypeId) ? "" : " is-hidden") + (expandedLotTypes.has(lotTypeId) ? '' : ' is-hidden') +
'">' + '">' +
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no additional fields.</p>' + '<p class="message-body">There are no additional fields.</p>' +
"</div>" + '</div>' +
"</div>"); '</div>');
} }
else { else {
for (const lotTypeField of lotTypeFields) { for (const lotTypeField of lotTypeFields) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div');
panelBlockElement.className = "panel-block is-block container--lotTypeField"; panelBlockElement.className =
'panel-block is-block container--lotTypeField';
if (!expandedLotTypes.has(lotTypeId)) { if (!expandedLotTypes.has(lotTypeId)) {
panelBlockElement.classList.add("is-hidden"); panelBlockElement.classList.add('is-hidden');
} }
panelBlockElement.dataset.lotTypeFieldId = lotTypeField.lotTypeFieldId.toString(); panelBlockElement.dataset.lotTypeFieldId =
lotTypeField.lotTypeFieldId.toString();
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="level is-mobile">' + '<div class="level is-mobile">' +
'<div class="level-left">' + '<div class="level-left">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<a class="has-text-weight-bold button--editLotTypeField" href="#">' + '<a class="has-text-weight-bold button--editLotTypeField" href="#">' +
cityssm.escapeHTML(lotTypeField.lotTypeField || "") + cityssm.escapeHTML(lotTypeField.lotTypeField || '') +
"</a>" + '</a>' +
"</div>") + '</div>') +
"</div>" + '</div>' +
'<div class="level-right">' + '<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotTypeFieldUp", "button--moveLotTypeFieldDown") + los.getMoveUpDownButtonFieldHTML('button--moveLotTypeFieldUp', 'button--moveLotTypeFieldDown') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
panelBlockElement panelBlockElement
.querySelector(".button--editLotTypeField") .querySelector('.button--editLotTypeField')
.addEventListener("click", openEditLotTypeFieldByClick); .addEventListener('click', openEditLotTypeFieldByClick);
panelBlockElement.querySelector(".button--moveLotTypeFieldUp").addEventListener("click", moveLotTypeField); panelBlockElement.querySelector('.button--moveLotTypeFieldUp').addEventListener('click', moveLotTypeField);
panelBlockElement.querySelector(".button--moveLotTypeFieldDown").addEventListener("click", moveLotTypeField); panelBlockElement.querySelector('.button--moveLotTypeFieldDown').addEventListener('click', moveLotTypeField);
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement);
} }
} }
} }
function renderLotTypes() { function renderLotTypes() {
containerElement.innerHTML = ""; containerElement.innerHTML = '';
if (lotTypes.length === 0) { if (lotTypes.length === 0) {
containerElement.insertAdjacentHTML("afterbegin", `<div class="message is-warning> containerElement.insertAdjacentHTML('afterbegin', `<div class="message is-warning>
<p class="message-body">There are no active ${los.escapedAliases.lot} types.</p> <p class="message-body">There are no active ${los.escapedAliases.lot} types.</p>
</div>`); </div>`);
return; return;
} }
for (const lotType of lotTypes) { for (const lotType of lotTypes) {
const lotTypeContainer = document.createElement("div"); const lotTypeContainer = document.createElement('div');
lotTypeContainer.className = "panel container--lotType"; lotTypeContainer.className = 'panel container--lotType';
lotTypeContainer.dataset.lotTypeId = lotType.lotTypeId.toString(); lotTypeContainer.dataset.lotTypeId = lotType.lotTypeId.toString();
lotTypeContainer.innerHTML = lotTypeContainer.innerHTML =
'<div class="panel-heading">' + '<div class="panel-heading">' +
@ -314,64 +307,66 @@ Object.defineProperty(exports, "__esModule", { value: true });
(expandedLotTypes.has(lotType.lotTypeId) (expandedLotTypes.has(lotType.lotTypeId)
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>' ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') + : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') +
"</button>" + '</button>' +
"</div>" + '</div>' +
'<div class="level-item">' + '<div class="level-item">' +
'<h2 class="title is-4">' + '<h2 class="title is-4">' +
cityssm.escapeHTML(lotType.lotType) + cityssm.escapeHTML(lotType.lotType) +
"</h2>" + '</h2>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-danger is-small button--deleteLotType" type="button">' + '<button class="button is-danger is-small button--deleteLotType" type="button">' +
'<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' +
"<span>Delete</span>" + '<span>Delete</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-primary is-small button--editLotType" type="button">' + '<button class="button is-primary is-small button--editLotType" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
"<span>Edit " + '<span>Edit ' +
exports.aliases.lot + exports.aliases.lot +
" Type</span>" + ' Type</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-success is-small button--addLotTypeField" type="button">' + '<button class="button is-success is-small button--addLotTypeField" type="button">' +
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
"<span>Add Field</span>" + '<span>Add Field</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotTypeUp", "button--moveLotTypeDown") + los.getMoveUpDownButtonFieldHTML('button--moveLotTypeUp', 'button--moveLotTypeDown') +
"</div>") + '</div>') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
renderLotTypeFields(lotTypeContainer, lotType.lotTypeId, lotType.lotTypeFields); renderLotTypeFields(lotTypeContainer, lotType.lotTypeId, lotType.lotTypeFields);
lotTypeContainer lotTypeContainer
.querySelector(".button--toggleLotTypeFields") .querySelector('.button--toggleLotTypeFields')
.addEventListener("click", toggleLotTypeFields); .addEventListener('click', toggleLotTypeFields);
lotTypeContainer lotTypeContainer
.querySelector(".button--deleteLotType") .querySelector('.button--deleteLotType')
.addEventListener("click", deleteLotType); .addEventListener('click', deleteLotType);
lotTypeContainer lotTypeContainer
.querySelector(".button--editLotType") .querySelector('.button--editLotType')
.addEventListener("click", openEditLotType); .addEventListener('click', openEditLotType);
lotTypeContainer lotTypeContainer
.querySelector(".button--addLotTypeField") .querySelector('.button--addLotTypeField')
.addEventListener("click", openAddLotTypeField); .addEventListener('click', openAddLotTypeField);
lotTypeContainer.querySelector(".button--moveLotTypeUp").addEventListener("click", moveLotType); lotTypeContainer.querySelector('.button--moveLotTypeUp').addEventListener('click', moveLotType);
lotTypeContainer.querySelector(".button--moveLotTypeDown").addEventListener("click", moveLotType); lotTypeContainer.querySelector('.button--moveLotTypeDown').addEventListener('click', moveLotType);
containerElement.append(lotTypeContainer); containerElement.append(lotTypeContainer);
} }
} }
document.querySelector("#button--addLotType").addEventListener("click", () => { document
.querySelector('#button--addLotType')
.addEventListener('click', () => {
let addCloseModalFunction; let addCloseModalFunction;
function doAdd(submitEvent) { function doAdd(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddLotType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
addCloseModalFunction(); addCloseModalFunction();
lotTypes = responseJSON.lotTypes; lotTypes = responseJSON.lotTypes;
@ -380,20 +375,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} Type`, title: `Error Adding ${los.escapedAliases.Lot} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
cityssm.openHtmlModal("adminLotTypes-addLotType", { cityssm.openHtmlModal('adminLotTypes-addLotType', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("#lotTypeAdd--lotType").focus(); modalElement.querySelector('#lotTypeAdd--lotType').focus();
modalElement.querySelector("form").addEventListener("submit", doAdd); modalElement.querySelector('form').addEventListener('submit', doAdd);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}, },
onremoved() { onremoved() {

628
public-typescript/adminLotTypes.ts
View File

@ -1,405 +1,457 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const containerElement = document.querySelector("#container--lotTypes") as HTMLElement; const containerElement = document.querySelector(
'#container--lotTypes'
) as HTMLElement
let lotTypes: recordTypes.LotType[] = exports.lotTypes; let lotTypes: recordTypes.LotType[] = exports.lotTypes
delete exports.lotTypes; delete exports.lotTypes
const expandedLotTypes = new Set<number>(); const expandedLotTypes = new Set<number>()
function toggleLotTypeFields(clickEvent: Event) { function toggleLotTypeFields(clickEvent: Event) {
const toggleButtonElement = clickEvent.currentTarget as HTMLButtonElement; const toggleButtonElement = clickEvent.currentTarget as HTMLButtonElement
const lotTypeElement = toggleButtonElement.closest(".container--lotType") as HTMLElement; const lotTypeElement = toggleButtonElement.closest(
'.container--lotType'
) as HTMLElement
const lotTypeId = Number.parseInt(lotTypeElement.dataset.lotTypeId!, 10); const lotTypeId = Number.parseInt(lotTypeElement.dataset.lotTypeId!, 10)
if (expandedLotTypes.has(lotTypeId)) { if (expandedLotTypes.has(lotTypeId)) {
expandedLotTypes.delete(lotTypeId); expandedLotTypes.delete(lotTypeId)
} else { } else {
expandedLotTypes.add(lotTypeId); expandedLotTypes.add(lotTypeId)
} }
toggleButtonElement.innerHTML = expandedLotTypes.has(lotTypeId) toggleButtonElement.innerHTML = expandedLotTypes.has(lotTypeId)
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>' ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>'; : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>'
const panelBlockElements = lotTypeElement.querySelectorAll(".panel-block"); const panelBlockElements = lotTypeElement.querySelectorAll('.panel-block')
for (const panelBlockElement of panelBlockElements) { for (const panelBlockElement of panelBlockElements) {
panelBlockElement.classList.toggle("is-hidden"); panelBlockElement.classList.toggle('is-hidden')
} }
} }
function lotTypeResponseHandler(responseJSON: { function lotTypeResponseHandler(responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotTypes?: recordTypes.LotType[]; lotTypes?: recordTypes.LotType[]
}) { }) {
if (responseJSON.success) { if (responseJSON.success) {
lotTypes = responseJSON.lotTypes!; lotTypes = responseJSON.lotTypes!
renderLotTypes(); renderLotTypes()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Updating ${exports.aliases.lot} Type`, title: `Error Updating ${exports.aliases.lot} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
function deleteLotType(clickEvent: Event) { function deleteLotType(clickEvent: Event) {
const lotTypeId = Number.parseInt( const lotTypeId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--lotType") as HTMLElement).dataset (
.lotTypeId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--lotType'
) as HTMLElement
).dataset.lotTypeId!,
10 10
); )
function doDelete() { function doDelete() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteLotType", los.urlPrefix + '/admin/doDeleteLotType',
{ {
lotTypeId lotTypeId
}, },
lotTypeResponseHandler lotTypeResponseHandler
); )
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${exports.aliases.lot} Type`, title: `Delete ${exports.aliases.lot} Type`,
message: `Are you sure you want to delete this ${exports.aliases.lot.toLowerCase()} type?`, message: `Are you sure you want to delete this ${exports.aliases.lot.toLowerCase()} type?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${exports.aliases.lot} Type`, text: `Yes, Delete ${exports.aliases.lot} Type`,
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
} }
function openEditLotType(clickEvent: Event) { function openEditLotType(clickEvent: Event) {
const lotTypeId = Number.parseInt( const lotTypeId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--lotType") as HTMLElement).dataset (
.lotTypeId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--lotType'
) as HTMLElement
).dataset.lotTypeId!,
10 10
); )
const lotType = lotTypes.find((currentLotType) => { const lotType = lotTypes.find((currentLotType) => {
return lotTypeId === currentLotType.lotTypeId; return lotTypeId === currentLotType.lotTypeId
})!; })!
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
const doEdit = (submitEvent: SubmitEvent) => { const doEdit = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateLotType", los.urlPrefix + '/admin/doUpdateLotType',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
occupancyTypes?: recordTypes.OccupancyType[]; occupancyTypes?: recordTypes.OccupancyType[]
}) => { }) => {
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON)
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction()
} }
} }
); )
}; }
cityssm.openHtmlModal("adminLotTypes-editLotType", { cityssm.openHtmlModal('adminLotTypes-editLotType', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement)
(modalElement.querySelector("#lotTypeEdit--lotTypeId") as HTMLInputElement).value = ;(
lotTypeId.toString(); modalElement.querySelector(
'#lotTypeEdit--lotTypeId'
) as HTMLInputElement
).value = lotTypeId.toString()
(modalElement.querySelector("#lotTypeEdit--lotType") as HTMLInputElement).value = ;(
lotType.lotType; modalElement.querySelector(
'#lotTypeEdit--lotType'
) as HTMLInputElement
).value = lotType.lotType
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
(modalElement.querySelector("#lotTypeEdit--lotType") as HTMLInputElement).focus(); ;(
modalElement.querySelector(
'#lotTypeEdit--lotType'
) as HTMLInputElement
).focus()
modalElement.querySelector("form")!.addEventListener("submit", doEdit); modalElement.querySelector('form')!.addEventListener('submit', doEdit)
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
} }
function openAddLotTypeField(clickEvent: Event) { function openAddLotTypeField(clickEvent: Event) {
const lotTypeId = Number.parseInt( const lotTypeId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--lotType") as HTMLElement).dataset (
.lotTypeId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--lotType'
) as HTMLElement
).dataset.lotTypeId!,
10 10
); )
let addCloseModalFunction: () => void; let addCloseModalFunction: () => void
const doAdd = (submitEvent: SubmitEvent) => { const doAdd = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doAddLotTypeField", los.urlPrefix + '/admin/doAddLotTypeField',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotTypes?: recordTypes.LotType[]; lotTypes?: recordTypes.LotType[]
lotTypeFieldId?: number; lotTypeFieldId?: number
}) => { }) => {
expandedLotTypes.add(lotTypeId); expandedLotTypes.add(lotTypeId)
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON)
if (responseJSON.success) { if (responseJSON.success) {
addCloseModalFunction(); addCloseModalFunction()
openEditLotTypeField(lotTypeId, responseJSON.lotTypeFieldId!); openEditLotTypeField(lotTypeId, responseJSON.lotTypeFieldId!)
} }
} }
); )
}; }
cityssm.openHtmlModal("adminLotTypes-addLotTypeField", { cityssm.openHtmlModal('adminLotTypes-addLotTypeField', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement)
if (lotTypeId) { if (lotTypeId) {
(modalElement.querySelector("#lotTypeFieldAdd--lotTypeId") as HTMLInputElement).value = ;(
lotTypeId.toString(); modalElement.querySelector(
'#lotTypeFieldAdd--lotTypeId'
) as HTMLInputElement
).value = lotTypeId.toString()
} }
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction
(modalElement.querySelector("#lotTypeFieldAdd--lotTypeField") as HTMLInputElement).focus(); ;(
modalElement.querySelector(
'#lotTypeFieldAdd--lotTypeField'
) as HTMLInputElement
).focus()
modalElement.querySelector("form")!.addEventListener("submit", doAdd); modalElement.querySelector('form')!.addEventListener('submit', doAdd)
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
} }
function moveLotType(clickEvent: MouseEvent) { function moveLotType(clickEvent: MouseEvent) {
const buttonElement = clickEvent.currentTarget as HTMLButtonElement; const buttonElement = clickEvent.currentTarget as HTMLButtonElement
const lotTypeId = (buttonElement.closest(".container--lotType") as HTMLElement).dataset.lotTypeId; const lotTypeId = (
buttonElement.closest('.container--lotType') as HTMLElement
).dataset.lotTypeId
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveLotTypeUp" : "doMoveLotTypeDown"), (buttonElement.dataset.direction === 'up'
? 'doMoveLotTypeUp'
: 'doMoveLotTypeDown'),
{ {
lotTypeId, lotTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, },
lotTypeResponseHandler lotTypeResponseHandler
); )
} }
function openEditLotTypeField(lotTypeId: number, lotTypeFieldId: number) { function openEditLotTypeField(lotTypeId: number, lotTypeFieldId: number) {
const lotType = lotTypes.find((currentLotType) => { const lotType = lotTypes.find((currentLotType) => {
return currentLotType.lotTypeId === lotTypeId; return currentLotType.lotTypeId === lotTypeId
})!; })!
const lotTypeField = lotType.lotTypeFields!.find((currentLotTypeField) => { const lotTypeField = lotType.lotTypeFields!.find((currentLotTypeField) => {
return currentLotTypeField.lotTypeFieldId === lotTypeFieldId; return currentLotTypeField.lotTypeFieldId === lotTypeFieldId
})!; })!
let minimumLengthElement: HTMLInputElement; let minimumLengthElement: HTMLInputElement
let maximumLengthElement: HTMLInputElement; let maximumLengthElement: HTMLInputElement
let patternElement: HTMLInputElement; let patternElement: HTMLInputElement
let lotTypeFieldValuesElement: HTMLTextAreaElement; let lotTypeFieldValuesElement: HTMLTextAreaElement
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
function updateMaximumLengthMin() { function updateMaximumLengthMin() {
maximumLengthElement.min = minimumLengthElement.value; maximumLengthElement.min = minimumLengthElement.value
} }
function toggleInputFields() { function toggleInputFields() {
if (lotTypeFieldValuesElement.value === "") { if (lotTypeFieldValuesElement.value === '') {
minimumLengthElement.disabled = false; minimumLengthElement.disabled = false
maximumLengthElement.disabled = false; maximumLengthElement.disabled = false
patternElement.disabled = false; patternElement.disabled = false
} else { } else {
minimumLengthElement.disabled = true; minimumLengthElement.disabled = true
maximumLengthElement.disabled = true; maximumLengthElement.disabled = true
patternElement.disabled = true; patternElement.disabled = true
} }
} }
function doUpdate(submitEvent: SubmitEvent) { function doUpdate(submitEvent: SubmitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateLotTypeField", los.urlPrefix + '/admin/doUpdateLotTypeField',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
occupancyTypes?: recordTypes.OccupancyType[]; occupancyTypes?: recordTypes.OccupancyType[]
}) => { }) => {
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON)
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction()
} }
} }
); )
} }
function doDelete() { function doDelete() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteLotTypeField", los.urlPrefix + '/admin/doDeleteLotTypeField',
{ {
lotTypeFieldId lotTypeFieldId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotTypes?: recordTypes.LotType[]; lotTypes?: recordTypes.LotType[]
}) => { }) => {
lotTypeResponseHandler(responseJSON); lotTypeResponseHandler(responseJSON)
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction()
} }
} }
); )
} }
function confirmDoDelete() { function confirmDoDelete() {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Field", title: 'Delete Field',
message: message:
"Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.", 'Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Field", text: 'Yes, Delete Field',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
} }
cityssm.openHtmlModal("adminLotTypes-editLotTypeField", { cityssm.openHtmlModal('adminLotTypes-editLotTypeField', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement)
(modalElement.querySelector("#lotTypeFieldEdit--lotTypeFieldId") as HTMLInputElement).value = ;(
lotTypeField.lotTypeFieldId.toString(); modalElement.querySelector(
'#lotTypeFieldEdit--lotTypeFieldId'
) as HTMLInputElement
).value = lotTypeField.lotTypeFieldId.toString()
(modalElement.querySelector("#lotTypeFieldEdit--lotTypeField") as HTMLInputElement).value = ;(
lotTypeField.lotTypeField!; modalElement.querySelector(
'#lotTypeFieldEdit--lotTypeField'
) as HTMLInputElement
).value = lotTypeField.lotTypeField!
(modalElement.querySelector("#lotTypeFieldEdit--isRequired") as HTMLSelectElement).value = ;(
lotTypeField.isRequired ? "1" : "0"; modalElement.querySelector(
'#lotTypeFieldEdit--isRequired'
) as HTMLSelectElement
).value = lotTypeField.isRequired ? '1' : '0'
minimumLengthElement = modalElement.querySelector( minimumLengthElement = modalElement.querySelector(
"#lotTypeFieldEdit--minimumLength" '#lotTypeFieldEdit--minimumLength'
) as HTMLInputElement; ) as HTMLInputElement
minimumLengthElement.value = lotTypeField.minimumLength!.toString(); minimumLengthElement.value = lotTypeField.minimumLength!.toString()
maximumLengthElement = modalElement.querySelector( maximumLengthElement = modalElement.querySelector(
"#lotTypeFieldEdit--maximumLength" '#lotTypeFieldEdit--maximumLength'
) as HTMLInputElement; ) as HTMLInputElement
maximumLengthElement.value = lotTypeField.maximumLength!.toString(); maximumLengthElement.value = lotTypeField.maximumLength!.toString()
patternElement = modalElement.querySelector("#lotTypeFieldEdit--pattern") as HTMLInputElement; patternElement = modalElement.querySelector(
'#lotTypeFieldEdit--pattern'
) as HTMLInputElement
patternElement.value = lotTypeField.pattern!; patternElement.value = lotTypeField.pattern!
lotTypeFieldValuesElement = modalElement.querySelector( lotTypeFieldValuesElement = modalElement.querySelector(
"#lotTypeFieldEdit--lotTypeFieldValues" '#lotTypeFieldEdit--lotTypeFieldValues'
) as HTMLTextAreaElement; ) as HTMLTextAreaElement
lotTypeFieldValuesElement.value = lotTypeField.lotTypeFieldValues!; lotTypeFieldValuesElement.value = lotTypeField.lotTypeFieldValues!
toggleInputFields(); toggleInputFields()
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
bulmaJS.init(modalElement); bulmaJS.init(modalElement)
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
cityssm.enableNavBlocker(); cityssm.enableNavBlocker()
modalElement.querySelector("form")!.addEventListener("submit", doUpdate); modalElement.querySelector('form')!.addEventListener('submit', doUpdate)
minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin); minimumLengthElement.addEventListener('keyup', updateMaximumLengthMin)
updateMaximumLengthMin(); updateMaximumLengthMin()
lotTypeFieldValuesElement.addEventListener("keyup", toggleInputFields); lotTypeFieldValuesElement.addEventListener('keyup', toggleInputFields)
modalElement modalElement
.querySelector("#button--deleteLotTypeField")! .querySelector('#button--deleteLotTypeField')!
.addEventListener("click", confirmDoDelete); .addEventListener('click', confirmDoDelete)
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
} }
}); })
} }
function openEditLotTypeFieldByClick(clickEvent: Event) { function openEditLotTypeFieldByClick(clickEvent: Event) {
clickEvent.preventDefault(); clickEvent.preventDefault()
const lotTypeFieldId = Number.parseInt( const lotTypeFieldId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--lotTypeField") as HTMLElement) (
.dataset.lotTypeFieldId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--lotTypeField'
) as HTMLElement
).dataset.lotTypeFieldId!,
10 10
); )
const lotTypeId = Number.parseInt( const lotTypeId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--lotType") as HTMLElement).dataset (
.lotTypeId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--lotType'
) as HTMLElement
).dataset.lotTypeId!,
10 10
); )
openEditLotTypeField(lotTypeId, lotTypeFieldId); openEditLotTypeField(lotTypeId, lotTypeFieldId)
} }
function moveLotTypeField(clickEvent: MouseEvent) { function moveLotTypeField(clickEvent: MouseEvent) {
const buttonElement = clickEvent.currentTarget as HTMLButtonElement; const buttonElement = clickEvent.currentTarget as HTMLButtonElement
const lotTypeFieldId = (buttonElement.closest(".container--lotTypeField") as HTMLElement).dataset const lotTypeFieldId = (
.lotTypeFieldId; buttonElement.closest('.container--lotTypeField') as HTMLElement
).dataset.lotTypeFieldId
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveLotTypeFieldUp" ? 'doMoveLotTypeFieldUp'
: "doMoveLotTypeFieldDown"), : 'doMoveLotTypeFieldDown'),
{ {
lotTypeFieldId, lotTypeFieldId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, },
lotTypeResponseHandler lotTypeResponseHandler
); )
} }
function renderLotTypeFields( function renderLotTypeFields(
@ -409,82 +461,88 @@ declare const bulmaJS: BulmaJS;
) { ) {
if (lotTypeFields.length === 0) { if (lotTypeFields.length === 0) {
panelElement.insertAdjacentHTML( panelElement.insertAdjacentHTML(
"beforeend", 'beforeend',
'<div class="panel-block is-block' + '<div class="panel-block is-block' +
(expandedLotTypes.has(lotTypeId) ? "" : " is-hidden") + (expandedLotTypes.has(lotTypeId) ? '' : ' is-hidden') +
'">' + '">' +
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no additional fields.</p>' + '<p class="message-body">There are no additional fields.</p>' +
"</div>" + '</div>' +
"</div>" '</div>'
); )
} else { } else {
for (const lotTypeField of lotTypeFields) { for (const lotTypeField of lotTypeFields) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div')
panelBlockElement.className = "panel-block is-block container--lotTypeField"; panelBlockElement.className =
'panel-block is-block container--lotTypeField'
if (!expandedLotTypes.has(lotTypeId)) { if (!expandedLotTypes.has(lotTypeId)) {
panelBlockElement.classList.add("is-hidden"); panelBlockElement.classList.add('is-hidden')
} }
panelBlockElement.dataset.lotTypeFieldId = lotTypeField.lotTypeFieldId.toString(); panelBlockElement.dataset.lotTypeFieldId =
lotTypeField.lotTypeFieldId.toString()
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="level is-mobile">' + '<div class="level is-mobile">' +
'<div class="level-left">' + '<div class="level-left">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<a class="has-text-weight-bold button--editLotTypeField" href="#">' + '<a class="has-text-weight-bold button--editLotTypeField" href="#">' +
cityssm.escapeHTML(lotTypeField.lotTypeField || "") + cityssm.escapeHTML(lotTypeField.lotTypeField || '') +
"</a>" + '</a>' +
"</div>") + '</div>') +
"</div>" + '</div>' +
'<div class="level-right">' + '<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML( los.getMoveUpDownButtonFieldHTML(
"button--moveLotTypeFieldUp", 'button--moveLotTypeFieldUp',
"button--moveLotTypeFieldDown" 'button--moveLotTypeFieldDown'
) + ) +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>'
panelBlockElement panelBlockElement
.querySelector(".button--editLotTypeField")! .querySelector('.button--editLotTypeField')!
.addEventListener("click", openEditLotTypeFieldByClick); .addEventListener('click', openEditLotTypeFieldByClick)
( ;(
panelBlockElement.querySelector(".button--moveLotTypeFieldUp") as HTMLButtonElement panelBlockElement.querySelector(
).addEventListener("click", moveLotTypeField); '.button--moveLotTypeFieldUp'
) as HTMLButtonElement
).addEventListener('click', moveLotTypeField)
( ;(
panelBlockElement.querySelector(".button--moveLotTypeFieldDown") as HTMLButtonElement panelBlockElement.querySelector(
).addEventListener("click", moveLotTypeField); '.button--moveLotTypeFieldDown'
) as HTMLButtonElement
).addEventListener('click', moveLotTypeField)
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement)
} }
} }
} }
function renderLotTypes() { function renderLotTypes() {
containerElement.innerHTML = ""; containerElement.innerHTML = ''
if (lotTypes.length === 0) { if (lotTypes.length === 0) {
containerElement.insertAdjacentHTML( containerElement.insertAdjacentHTML(
"afterbegin", 'afterbegin',
`<div class="message is-warning> `<div class="message is-warning>
<p class="message-body">There are no active ${los.escapedAliases.lot} types.</p> <p class="message-body">There are no active ${los.escapedAliases.lot} types.</p>
</div>` </div>`
); )
return; return
} }
for (const lotType of lotTypes) { for (const lotType of lotTypes) {
const lotTypeContainer = document.createElement("div"); const lotTypeContainer = document.createElement('div')
lotTypeContainer.className = "panel container--lotType"; lotTypeContainer.className = 'panel container--lotType'
lotTypeContainer.dataset.lotTypeId = lotType.lotTypeId.toString(); lotTypeContainer.dataset.lotTypeId = lotType.lotTypeId.toString()
lotTypeContainer.innerHTML = lotTypeContainer.innerHTML =
'<div class="panel-heading">' + '<div class="panel-heading">' +
@ -495,120 +553,136 @@ declare const bulmaJS: BulmaJS;
(expandedLotTypes.has(lotType.lotTypeId) (expandedLotTypes.has(lotType.lotTypeId)
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>' ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') + : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') +
"</button>" + '</button>' +
"</div>" + '</div>' +
'<div class="level-item">' + '<div class="level-item">' +
'<h2 class="title is-4">' + '<h2 class="title is-4">' +
cityssm.escapeHTML(lotType.lotType) + cityssm.escapeHTML(lotType.lotType) +
"</h2>" + '</h2>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-danger is-small button--deleteLotType" type="button">' + '<button class="button is-danger is-small button--deleteLotType" type="button">' +
'<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' +
"<span>Delete</span>" + '<span>Delete</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-primary is-small button--editLotType" type="button">' + '<button class="button is-primary is-small button--editLotType" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
"<span>Edit " + '<span>Edit ' +
exports.aliases.lot + exports.aliases.lot +
" Type</span>" + ' Type</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-success is-small button--addLotTypeField" type="button">' + '<button class="button is-success is-small button--addLotTypeField" type="button">' +
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
"<span>Add Field</span>" + '<span>Add Field</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotTypeUp", "button--moveLotTypeDown") + los.getMoveUpDownButtonFieldHTML(
"</div>") + 'button--moveLotTypeUp',
"</div>") + 'button--moveLotTypeDown'
"</div>" + ) +
"</div>"; '</div>') +
'</div>') +
'</div>' +
'</div>'
renderLotTypeFields(lotTypeContainer, lotType.lotTypeId, lotType.lotTypeFields!); renderLotTypeFields(
lotTypeContainer,
lotType.lotTypeId,
lotType.lotTypeFields!
)
lotTypeContainer lotTypeContainer
.querySelector(".button--toggleLotTypeFields")! .querySelector('.button--toggleLotTypeFields')!
.addEventListener("click", toggleLotTypeFields); .addEventListener('click', toggleLotTypeFields)
lotTypeContainer lotTypeContainer
.querySelector(".button--deleteLotType")! .querySelector('.button--deleteLotType')!
.addEventListener("click", deleteLotType); .addEventListener('click', deleteLotType)
lotTypeContainer lotTypeContainer
.querySelector(".button--editLotType")! .querySelector('.button--editLotType')!
.addEventListener("click", openEditLotType); .addEventListener('click', openEditLotType)
lotTypeContainer lotTypeContainer
.querySelector(".button--addLotTypeField")! .querySelector('.button--addLotTypeField')!
.addEventListener("click", openAddLotTypeField); .addEventListener('click', openAddLotTypeField)
(lotTypeContainer.querySelector(".button--moveLotTypeUp") as HTMLButtonElement).addEventListener( ;(
"click", lotTypeContainer.querySelector(
moveLotType '.button--moveLotTypeUp'
); ) as HTMLButtonElement
).addEventListener('click', moveLotType)
( ;(
lotTypeContainer.querySelector(".button--moveLotTypeDown") as HTMLButtonElement lotTypeContainer.querySelector(
).addEventListener("click", moveLotType); '.button--moveLotTypeDown'
) as HTMLButtonElement
).addEventListener('click', moveLotType)
containerElement.append(lotTypeContainer); containerElement.append(lotTypeContainer)
} }
} }
document.querySelector("#button--addLotType")!.addEventListener("click", () => { document
let addCloseModalFunction: () => void; .querySelector('#button--addLotType')!
.addEventListener('click', () => {
let addCloseModalFunction: () => void
function doAdd(submitEvent: SubmitEvent): void { function doAdd(submitEvent: SubmitEvent): void {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doAddLotType", los.urlPrefix + '/admin/doAddLotType',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotTypes?: recordTypes.LotType[]; lotTypes?: recordTypes.LotType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
addCloseModalFunction(); addCloseModalFunction()
lotTypes = responseJSON.lotTypes!; lotTypes = responseJSON.lotTypes!
renderLotTypes(); renderLotTypes()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} Type`, title: `Error Adding ${los.escapedAliases.Lot} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
cityssm.openHtmlModal("adminLotTypes-addLotType", { cityssm.openHtmlModal('adminLotTypes-addLotType', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement)
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction
(modalElement.querySelector("#lotTypeAdd--lotType") as HTMLInputElement).focus(); ;(
modalElement.querySelector(
'#lotTypeAdd--lotType'
) as HTMLInputElement
).focus()
modalElement.querySelector("form")!.addEventListener("submit", doAdd); modalElement.querySelector('form')!.addEventListener('submit', doAdd)
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
renderLotTypes(); renderLotTypes()
})(); })()

403
public-typescript/adminOccupancyTypes.js
View File

@ -3,8 +3,8 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const occupancyTypesContainerElement = document.querySelector("#container--occupancyTypes"); const occupancyTypesContainerElement = document.querySelector('#container--occupancyTypes');
const occupancyTypePrintsContainerElement = document.querySelector("#container--occupancyTypePrints"); const occupancyTypePrintsContainerElement = document.querySelector('#container--occupancyTypePrints');
let occupancyTypes = exports.occupancyTypes; let occupancyTypes = exports.occupancyTypes;
delete exports.occupancyTypes; delete exports.occupancyTypes;
let allOccupancyTypeFields = exports.allOccupancyTypeFields; let allOccupancyTypeFields = exports.allOccupancyTypeFields;
@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
const expandedOccupancyTypes = new Set(); const expandedOccupancyTypes = new Set();
function toggleOccupancyTypeFields(clickEvent) { function toggleOccupancyTypeFields(clickEvent) {
const toggleButtonElement = clickEvent.currentTarget; const toggleButtonElement = clickEvent.currentTarget;
const occupancyTypeElement = toggleButtonElement.closest(".container--occupancyType"); const occupancyTypeElement = toggleButtonElement.closest('.container--occupancyType');
const occupancyTypeId = Number.parseInt(occupancyTypeElement.dataset.occupancyTypeId, 10); const occupancyTypeId = Number.parseInt(occupancyTypeElement.dataset.occupancyTypeId, 10);
if (expandedOccupancyTypes.has(occupancyTypeId)) { if (expandedOccupancyTypes.has(occupancyTypeId)) {
expandedOccupancyTypes.delete(occupancyTypeId); expandedOccupancyTypes.delete(occupancyTypeId);
@ -23,9 +23,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
toggleButtonElement.innerHTML = expandedOccupancyTypes.has(occupancyTypeId) toggleButtonElement.innerHTML = expandedOccupancyTypes.has(occupancyTypeId)
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>' ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>'; : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>';
const panelBlockElements = occupancyTypeElement.querySelectorAll(".panel-block"); const panelBlockElements = occupancyTypeElement.querySelectorAll('.panel-block');
for (const panelBlockElement of panelBlockElements) { for (const panelBlockElement of panelBlockElements) {
panelBlockElement.classList.toggle("is-hidden"); panelBlockElement.classList.toggle('is-hidden');
} }
} }
function occupancyTypeResponseHandler(responseJSON) { function occupancyTypeResponseHandler(responseJSON) {
@ -36,23 +36,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.occupancy + " Type", title: 'Error Updating ' + exports.aliases.occupancy + ' Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
} }
function deleteOccupancyType(clickEvent) { function deleteOccupancyType(clickEvent) {
const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId, 10); const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--occupancyType').dataset.occupancyTypeId, 10);
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteOccupancyType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteOccupancyType', {
occupancyTypeId occupancyTypeId
}, occupancyTypeResponseHandler); }, occupancyTypeResponseHandler);
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${exports.aliases.occupancy} Type`, title: `Delete ${exports.aliases.occupancy} Type`,
message: `Are you sure you want to delete this ${exports.aliases.occupancy.toLowerCase()} type?`, message: `Are you sure you want to delete this ${exports.aliases.occupancy.toLowerCase()} type?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${exports.aliases.occupancy} Type`, text: `Yes, Delete ${exports.aliases.occupancy} Type`,
callbackFunction: doDelete callbackFunction: doDelete
@ -60,30 +60,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function openEditOccupancyType(clickEvent) { function openEditOccupancyType(clickEvent) {
const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId, 10); const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--occupancyType').dataset.occupancyTypeId, 10);
const occupancyType = occupancyTypes.find((currentOccupancyType) => { const occupancyType = occupancyTypes.find((currentOccupancyType) => {
return occupancyTypeId === currentOccupancyType.occupancyTypeId; return occupancyTypeId === currentOccupancyType.occupancyTypeId;
}); });
let editCloseModalFunction; let editCloseModalFunction;
function doEdit(submitEvent) { function doEdit(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateOccupancyType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateOccupancyType', submitEvent.currentTarget, (responseJSON) => {
occupancyTypeResponseHandler(responseJSON); occupancyTypeResponseHandler(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction();
} }
}); });
} }
cityssm.openHtmlModal("adminOccupancyTypes-editOccupancyType", { cityssm.openHtmlModal('adminOccupancyTypes-editOccupancyType', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#occupancyTypeEdit--occupancyTypeId").value = occupancyTypeId.toString(); modalElement.querySelector('#occupancyTypeEdit--occupancyTypeId').value = occupancyTypeId.toString();
modalElement.querySelector("#occupancyTypeEdit--occupancyType").value = occupancyType.occupancyType; modalElement.querySelector('#occupancyTypeEdit--occupancyType').value = occupancyType.occupancyType;
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
modalElement.querySelector("#occupancyTypeEdit--occupancyType").focus(); modalElement.querySelector('#occupancyTypeEdit--occupancyType').focus();
modalElement.querySelector("form").addEventListener("submit", doEdit); modalElement.querySelector('form').addEventListener('submit', doEdit);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}, },
onremoved() { onremoved() {
@ -92,11 +92,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function openAddOccupancyTypeField(clickEvent) { function openAddOccupancyTypeField(clickEvent) {
const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId, 10); const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--occupancyType').dataset.occupancyTypeId, 10);
let addCloseModalFunction; let addCloseModalFunction;
function doAdd(submitEvent) { function doAdd(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddOccupancyTypeField", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddOccupancyTypeField', submitEvent.currentTarget, (responseJSON) => {
expandedOccupancyTypes.add(occupancyTypeId); expandedOccupancyTypes.add(occupancyTypeId);
occupancyTypeResponseHandler(responseJSON); occupancyTypeResponseHandler(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
@ -105,17 +105,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
}); });
} }
cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyTypeField", { cityssm.openHtmlModal('adminOccupancyTypes-addOccupancyTypeField', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
if (occupancyTypeId) { if (occupancyTypeId) {
modalElement.querySelector("#occupancyTypeFieldAdd--occupancyTypeId").value = occupancyTypeId.toString(); ;
modalElement.querySelector('#occupancyTypeFieldAdd--occupancyTypeId').value = occupancyTypeId.toString();
} }
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("#occupancyTypeFieldAdd--occupancyTypeField").focus(); modalElement.querySelector('#occupancyTypeFieldAdd--occupancyTypeField').focus();
modalElement.querySelector("form").addEventListener("submit", doAdd); modalElement.querySelector('form').addEventListener('submit', doAdd);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}, },
onremoved() { onremoved() {
@ -125,14 +126,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function moveOccupancyType(clickEvent) { function moveOccupancyType(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const occupancyTypeId = clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId; const occupancyTypeId = clickEvent.currentTarget.closest('.container--occupancyType').dataset.occupancyTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveOccupancyTypeUp" ? 'doMoveOccupancyTypeUp'
: "doMoveOccupancyTypeDown"), { : 'doMoveOccupancyTypeDown'), {
occupancyTypeId, occupancyTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, occupancyTypeResponseHandler); }, occupancyTypeResponseHandler);
} }
function openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId) { function openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId) {
@ -142,8 +143,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
return currentOccupancyType.occupancyTypeId === occupancyTypeId; return currentOccupancyType.occupancyTypeId === occupancyTypeId;
}); });
} }
const occupancyTypeField = (occupancyType ? occupancyType.occupancyTypeFields : allOccupancyTypeFields).find((currentOccupancyTypeField) => { const occupancyTypeField = (occupancyType
return currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId; ? occupancyType.occupancyTypeFields
: allOccupancyTypeFields).find((currentOccupancyTypeField) => {
return (currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId);
}); });
let minimumLengthElement; let minimumLengthElement;
let maximumLengthElement; let maximumLengthElement;
@ -154,7 +157,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
maximumLengthElement.min = minimumLengthElement.value; maximumLengthElement.min = minimumLengthElement.value;
} }
function toggleInputFields() { function toggleInputFields() {
if (occupancyTypeFieldValuesElement.value === "") { if (occupancyTypeFieldValuesElement.value === '') {
minimumLengthElement.disabled = false; minimumLengthElement.disabled = false;
maximumLengthElement.disabled = false; maximumLengthElement.disabled = false;
patternElement.disabled = false; patternElement.disabled = false;
@ -167,7 +170,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function doUpdate(submitEvent) { function doUpdate(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateOccupancyTypeField", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateOccupancyTypeField', submitEvent.currentTarget, (responseJSON) => {
occupancyTypeResponseHandler(responseJSON); occupancyTypeResponseHandler(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction();
@ -175,7 +178,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteOccupancyTypeField", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteOccupancyTypeField', {
occupancyTypeFieldId occupancyTypeFieldId
}, (responseJSON) => { }, (responseJSON) => {
occupancyTypeResponseHandler(responseJSON); occupancyTypeResponseHandler(responseJSON);
@ -186,28 +189,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function confirmDoDelete() { function confirmDoDelete() {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Field", title: 'Delete Field',
message: "Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.", message: 'Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Field", text: 'Yes, Delete Field',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
cityssm.openHtmlModal("adminOccupancyTypes-editOccupancyTypeField", { cityssm.openHtmlModal('adminOccupancyTypes-editOccupancyTypeField', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#occupancyTypeFieldEdit--occupancyTypeFieldId").value = occupancyTypeField.occupancyTypeFieldId.toString(); modalElement.querySelector('#occupancyTypeFieldEdit--occupancyTypeFieldId').value = occupancyTypeField.occupancyTypeFieldId.toString();
modalElement.querySelector("#occupancyTypeFieldEdit--occupancyTypeField").value = occupancyTypeField.occupancyTypeField; modalElement.querySelector('#occupancyTypeFieldEdit--occupancyTypeField').value = occupancyTypeField.occupancyTypeField;
modalElement.querySelector("#occupancyTypeFieldEdit--isRequired").value = occupancyTypeField.isRequired ? "1" : "0"; modalElement.querySelector('#occupancyTypeFieldEdit--isRequired').value = occupancyTypeField.isRequired ? '1' : '0';
minimumLengthElement = modalElement.querySelector("#occupancyTypeFieldEdit--minimumLength"); minimumLengthElement = modalElement.querySelector('#occupancyTypeFieldEdit--minimumLength');
minimumLengthElement.value = occupancyTypeField.minimumLength.toString(); minimumLengthElement.value =
maximumLengthElement = modalElement.querySelector("#occupancyTypeFieldEdit--maximumLength"); occupancyTypeField.minimumLength.toString();
maximumLengthElement.value = occupancyTypeField.maximumLength.toString(); maximumLengthElement = modalElement.querySelector('#occupancyTypeFieldEdit--maximumLength');
patternElement = modalElement.querySelector("#occupancyTypeFieldEdit--pattern"); maximumLengthElement.value =
occupancyTypeField.maximumLength.toString();
patternElement = modalElement.querySelector('#occupancyTypeFieldEdit--pattern');
patternElement.value = occupancyTypeField.pattern; patternElement.value = occupancyTypeField.pattern;
occupancyTypeFieldValuesElement = modalElement.querySelector("#occupancyTypeFieldEdit--occupancyTypeFieldValues"); occupancyTypeFieldValuesElement = modalElement.querySelector('#occupancyTypeFieldEdit--occupancyTypeFieldValues');
occupancyTypeFieldValuesElement.value = occupancyTypeFieldValuesElement.value =
occupancyTypeField.occupancyTypeFieldValues; occupancyTypeField.occupancyTypeFieldValues;
toggleInputFields(); toggleInputFields();
@ -217,13 +222,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
bulmaJS.init(modalElement); bulmaJS.init(modalElement);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
cityssm.enableNavBlocker(); cityssm.enableNavBlocker();
modalElement.querySelector("form").addEventListener("submit", doUpdate); modalElement.querySelector('form').addEventListener('submit', doUpdate);
minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin); minimumLengthElement.addEventListener('keyup', updateMaximumLengthMin);
updateMaximumLengthMin(); updateMaximumLengthMin();
occupancyTypeFieldValuesElement.addEventListener("keyup", toggleInputFields); occupancyTypeFieldValuesElement.addEventListener('keyup', toggleInputFields);
modalElement modalElement
.querySelector("#button--deleteOccupancyTypeField") .querySelector('#button--deleteOccupancyTypeField')
.addEventListener("click", confirmDoDelete); .addEventListener('click', confirmDoDelete);
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -233,40 +238,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
function openEditOccupancyTypeFieldByClick(clickEvent) { function openEditOccupancyTypeFieldByClick(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const occupancyTypeFieldId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyTypeField").dataset.occupancyTypeFieldId, 10); const occupancyTypeFieldId = Number.parseInt(clickEvent.currentTarget.closest('.container--occupancyTypeField').dataset.occupancyTypeFieldId, 10);
const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId, 10); const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest('.container--occupancyType').dataset.occupancyTypeId, 10);
openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId); openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId);
} }
function moveOccupancyTypeField(clickEvent) { function moveOccupancyTypeField(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const occupancyTypeFieldId = clickEvent.currentTarget.closest(".container--occupancyTypeField").dataset.occupancyTypeFieldId; const occupancyTypeFieldId = clickEvent.currentTarget.closest('.container--occupancyTypeField').dataset.occupancyTypeFieldId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveOccupancyTypeFieldUp" ? 'doMoveOccupancyTypeFieldUp'
: "doMoveOccupancyTypeFieldDown"), { : 'doMoveOccupancyTypeFieldDown'), {
occupancyTypeFieldId, occupancyTypeFieldId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, occupancyTypeResponseHandler); }, occupancyTypeResponseHandler);
} }
function renderOccupancyTypeFields(panelElement, occupancyTypeId, occupancyTypeFields) { function renderOccupancyTypeFields(panelElement, occupancyTypeId, occupancyTypeFields) {
if (occupancyTypeFields.length === 0) { if (occupancyTypeFields.length === 0) {
panelElement.insertAdjacentHTML("beforeend", '<div class="panel-block is-block' + panelElement.insertAdjacentHTML('beforeend', '<div class="panel-block is-block' +
(!occupancyTypeId || expandedOccupancyTypes.has(occupancyTypeId) (!occupancyTypeId || expandedOccupancyTypes.has(occupancyTypeId)
? "" ? ''
: " is-hidden") + : ' is-hidden') +
'">' + '">' +
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no additional fields.</p>' + '<p class="message-body">There are no additional fields.</p>' +
"</div>" + '</div>' +
"</div>"); '</div>');
} }
else { else {
for (const occupancyTypeField of occupancyTypeFields) { for (const occupancyTypeField of occupancyTypeFields) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div');
panelBlockElement.className = "panel-block is-block container--occupancyTypeField"; panelBlockElement.className =
'panel-block is-block container--occupancyTypeField';
if (occupancyTypeId && !expandedOccupancyTypes.has(occupancyTypeId)) { if (occupancyTypeId && !expandedOccupancyTypes.has(occupancyTypeId)) {
panelBlockElement.classList.add("is-hidden"); panelBlockElement.classList.add('is-hidden');
} }
panelBlockElement.dataset.occupancyTypeFieldId = panelBlockElement.dataset.occupancyTypeFieldId =
occupancyTypeField.occupancyTypeFieldId.toString(); occupancyTypeField.occupancyTypeFieldId.toString();
@ -275,44 +281,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
'<div class="level-left">' + '<div class="level-left">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' + '<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' +
cityssm.escapeHTML(occupancyTypeField.occupancyTypeField || "") + cityssm.escapeHTML(occupancyTypeField.occupancyTypeField || '') +
"</a>" + '</a>' +
"</div>") + '</div>') +
"</div>" + '</div>' +
'<div class="level-right">' + '<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML("button--moveOccupancyTypeFieldUp", "button--moveOccupancyTypeFieldDown") + los.getMoveUpDownButtonFieldHTML('button--moveOccupancyTypeFieldUp', 'button--moveOccupancyTypeFieldDown') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
panelBlockElement panelBlockElement
.querySelector(".button--editOccupancyTypeField") .querySelector('.button--editOccupancyTypeField')
.addEventListener("click", openEditOccupancyTypeFieldByClick); .addEventListener('click', openEditOccupancyTypeFieldByClick);
panelBlockElement.querySelector(".button--moveOccupancyTypeFieldUp").addEventListener("click", moveOccupancyTypeField); panelBlockElement.querySelector('.button--moveOccupancyTypeFieldUp').addEventListener('click', moveOccupancyTypeField);
panelBlockElement.querySelector(".button--moveOccupancyTypeFieldDown").addEventListener("click", moveOccupancyTypeField); panelBlockElement.querySelector('.button--moveOccupancyTypeFieldDown').addEventListener('click', moveOccupancyTypeField);
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement);
} }
} }
} }
function openAddOccupancyTypePrint(clickEvent) { function openAddOccupancyTypePrint(clickEvent) {
const occupancyTypeId = clickEvent.currentTarget.closest(".container--occupancyTypePrintList").dataset.occupancyTypeId; const occupancyTypeId = clickEvent.currentTarget.closest('.container--occupancyTypePrintList').dataset.occupancyTypeId;
let closeAddModalFunction; let closeAddModalFunction;
function doAdd(formEvent) { function doAdd(formEvent) {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddOccupancyTypePrint", formEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddOccupancyTypePrint', formEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
closeAddModalFunction(); closeAddModalFunction();
} }
occupancyTypeResponseHandler(responseJSON); occupancyTypeResponseHandler(responseJSON);
}); });
} }
cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyTypePrint", { cityssm.openHtmlModal('adminOccupancyTypes-addOccupancyTypePrint', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#occupancyTypePrintAdd--occupancyTypeId").value = occupancyTypeId; modalElement.querySelector('#occupancyTypePrintAdd--occupancyTypeId').value = occupancyTypeId;
const printSelectElement = modalElement.querySelector("#occupancyTypePrintAdd--printEJS"); const printSelectElement = modalElement.querySelector('#occupancyTypePrintAdd--printEJS');
for (const [printEJS, printTitle] of Object.entries(exports.occupancyTypePrintTitles)) { for (const [printEJS, printTitle] of Object.entries(exports.occupancyTypePrintTitles)) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = printEJS; optionElement.value = printEJS;
optionElement.textContent = printTitle; optionElement.textContent = printTitle;
printSelectElement.append(optionElement); printSelectElement.append(optionElement);
@ -321,48 +327,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
var _a; var _a;
closeAddModalFunction = closeModalFunction; closeAddModalFunction = closeModalFunction;
(_a = modalElement.querySelector("form")) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", doAdd); (_a = modalElement.querySelector('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', doAdd);
} }
}); });
} }
function moveOccupancyTypePrint(clickEvent) { function moveOccupancyTypePrint(clickEvent) {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const printEJS = buttonElement.closest(".container--occupancyTypePrint") const printEJS = buttonElement.closest('.container--occupancyTypePrint').dataset.printEJS;
.dataset.printEJS; const occupancyTypeId = buttonElement.closest('.container--occupancyTypePrintList').dataset.occupancyTypeId;
const occupancyTypeId = buttonElement.closest(".container--occupancyTypePrintList").dataset.occupancyTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveOccupancyTypePrintUp" ? 'doMoveOccupancyTypePrintUp'
: "doMoveOccupancyTypePrintDown"), { : 'doMoveOccupancyTypePrintDown'), {
occupancyTypeId, occupancyTypeId,
printEJS, printEJS,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, occupancyTypeResponseHandler); }, occupancyTypeResponseHandler);
} }
function deleteOccupancyTypePrint(clickEvent) { function deleteOccupancyTypePrint(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const printEJS = clickEvent.currentTarget.closest(".container--occupancyTypePrint").dataset.printEJS; const printEJS = clickEvent.currentTarget.closest('.container--occupancyTypePrint').dataset.printEJS;
const occupancyTypeId = clickEvent.currentTarget.closest(".container--occupancyTypePrintList").dataset.occupancyTypeId; const occupancyTypeId = clickEvent.currentTarget.closest('.container--occupancyTypePrintList').dataset.occupancyTypeId;
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteOccupancyTypePrint", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteOccupancyTypePrint', {
occupancyTypeId, occupancyTypeId,
printEJS printEJS
}, occupancyTypeResponseHandler); }, occupancyTypeResponseHandler);
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Print", title: 'Delete Print',
message: "Are you sure you want to remove this print option?", message: 'Are you sure you want to remove this print option?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Remove Print", text: 'Yes, Remove Print',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
function renderOccupancyTypePrints(panelElement, occupancyTypeId, occupancyTypePrints) { function renderOccupancyTypePrints(panelElement, occupancyTypeId, occupancyTypePrints) {
if (occupancyTypePrints.length === 0) { if (occupancyTypePrints.length === 0) {
panelElement.insertAdjacentHTML("beforeend", `<div class="panel-block is-block"> panelElement.insertAdjacentHTML('beforeend', `<div class="panel-block is-block">
<div class="message is-info"> <div class="message is-info">
<p class="message-body">There are no prints associated with this record.</p> <p class="message-body">There are no prints associated with this record.</p>
</div> </div>
@ -370,18 +375,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
for (const printEJS of occupancyTypePrints) { for (const printEJS of occupancyTypePrints) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div');
panelBlockElement.className = "panel-block is-block container--occupancyTypePrint"; panelBlockElement.className =
'panel-block is-block container--occupancyTypePrint';
panelBlockElement.dataset.printEJS = printEJS; panelBlockElement.dataset.printEJS = printEJS;
const printTitle = printEJS === "*" const printTitle = printEJS === '*'
? "(All Available Prints)" ? '(All Available Prints)'
: exports.occupancyTypePrintTitles[printEJS]; : exports.occupancyTypePrintTitles[printEJS];
let printIconClass = "fa-star"; let printIconClass = 'fa-star';
if (printEJS.startsWith("pdf/")) { if (printEJS.startsWith('pdf/')) {
printIconClass = "fa-file-pdf"; printIconClass = 'fa-file-pdf';
} }
else if (printEJS.startsWith("screen/")) { else if (printEJS.startsWith('screen/')) {
printIconClass = "fa-file"; printIconClass = 'fa-file';
} }
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="level is-mobile">' + '<div class="level is-mobile">' +
@ -390,28 +396,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
'<i class="fas fa-fw ' + '<i class="fas fa-fw ' +
printIconClass + printIconClass +
'" aria-hidden="true"></i>' + '" aria-hidden="true"></i>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
cityssm.escapeHTML(printTitle || printEJS) + cityssm.escapeHTML(printTitle || printEJS) +
"</div>") + '</div>') +
"</div>" + '</div>' +
'<div class="level-right">' + '<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML("button--moveOccupancyTypePrintUp", "button--moveOccupancyTypePrintDown") + los.getMoveUpDownButtonFieldHTML('button--moveOccupancyTypePrintUp', 'button--moveOccupancyTypePrintDown') +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-small is-danger button--deleteOccupancyTypePrint" data-tooltip="Delete" type="button" aria-label="Delete Print">' + '<button class="button is-small is-danger button--deleteOccupancyTypePrint" data-tooltip="Delete" type="button" aria-label="Delete Print">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
panelBlockElement.querySelector(".button--moveOccupancyTypePrintUp").addEventListener("click", moveOccupancyTypePrint); panelBlockElement.querySelector('.button--moveOccupancyTypePrintUp').addEventListener('click', moveOccupancyTypePrint);
panelBlockElement.querySelector(".button--moveOccupancyTypePrintDown").addEventListener("click", moveOccupancyTypePrint); panelBlockElement.querySelector('.button--moveOccupancyTypePrintDown').addEventListener('click', moveOccupancyTypePrint);
panelBlockElement panelBlockElement
.querySelector(".button--deleteOccupancyTypePrint") .querySelector('.button--deleteOccupancyTypePrint')
.addEventListener("click", deleteOccupancyTypePrint); .addEventListener('click', deleteOccupancyTypePrint);
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement);
} }
} }
@ -425,30 +431,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
'<div class="level-item">' + '<div class="level-item">' +
('<h2 class="title is-4">(All ' + ('<h2 class="title is-4">(All ' +
cityssm.escapeHTML(exports.aliases.occupancy) + cityssm.escapeHTML(exports.aliases.occupancy) +
" Types)</h2>") + ' Types)</h2>') +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-success is-small button--addOccupancyTypeField" type="button">' + '<button class="button is-success is-small button--addOccupancyTypeField" type="button">' +
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
"<span>Add Field</span>" + '<span>Add Field</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
"</div>") + '</div>') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
occupancyTypePrintsContainerElement.innerHTML = ""; occupancyTypePrintsContainerElement.innerHTML = '';
renderOccupancyTypeFields(occupancyTypesContainerElement.querySelector("#container--allOccupancyTypeFields"), undefined, allOccupancyTypeFields); renderOccupancyTypeFields(occupancyTypesContainerElement.querySelector('#container--allOccupancyTypeFields'), undefined, allOccupancyTypeFields);
occupancyTypesContainerElement occupancyTypesContainerElement
.querySelector(".button--addOccupancyTypeField") .querySelector('.button--addOccupancyTypeField')
.addEventListener("click", openAddOccupancyTypeField); .addEventListener('click', openAddOccupancyTypeField);
if (occupancyTypes.length === 0) { if (occupancyTypes.length === 0) {
occupancyTypesContainerElement.insertAdjacentHTML("afterbegin", `<div class="message is-warning> occupancyTypesContainerElement.insertAdjacentHTML('afterbegin', `<div class="message is-warning>
<p class="message-body">There are no active ${los.escapedAliases.occupancy} types.</p> <p class="message-body">There are no active ${los.escapedAliases.occupancy} types.</p>
</div>`); </div>`);
occupancyTypePrintsContainerElement.insertAdjacentHTML("afterbegin", `<div class="message is-warning> occupancyTypePrintsContainerElement.insertAdjacentHTML('afterbegin', `<div class="message is-warning>
<p class="message-body">There are no active ${los.escapedAliases.occupancy} types.</p> <p class="message-body">There are no active ${los.escapedAliases.occupancy} types.</p>
</div>`); </div>`);
return; return;
@ -456,8 +462,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
for (const occupancyType of occupancyTypes) { for (const occupancyType of occupancyTypes) {
// Types and Fields // Types and Fields
{ {
const occupancyTypeContainer = document.createElement("div"); const occupancyTypeContainer = document.createElement('div');
occupancyTypeContainer.className = "panel container--occupancyType"; occupancyTypeContainer.className = 'panel container--occupancyType';
occupancyTypeContainer.dataset.occupancyTypeId = occupancyTypeContainer.dataset.occupancyTypeId =
occupancyType.occupancyTypeId.toString(); occupancyType.occupancyTypeId.toString();
occupancyTypeContainer.innerHTML = occupancyTypeContainer.innerHTML =
@ -469,62 +475,63 @@ Object.defineProperty(exports, "__esModule", { value: true });
(expandedOccupancyTypes.has(occupancyType.occupancyTypeId) (expandedOccupancyTypes.has(occupancyType.occupancyTypeId)
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>' ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') + : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') +
"</button>" + '</button>' +
"</div>" + '</div>' +
'<div class="level-item">' + '<div class="level-item">' +
'<h2 class="title is-4">' + '<h2 class="title is-4">' +
cityssm.escapeHTML(occupancyType.occupancyType) + cityssm.escapeHTML(occupancyType.occupancyType) +
"</h2>" + '</h2>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-danger is-small button--deleteOccupancyType" type="button">' + '<button class="button is-danger is-small button--deleteOccupancyType" type="button">' +
'<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' +
"<span>Delete</span>" + '<span>Delete</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-primary is-small button--editOccupancyType" type="button">' + '<button class="button is-primary is-small button--editOccupancyType" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
"<span>Edit " + '<span>Edit ' +
exports.aliases.occupancy + exports.aliases.occupancy +
" Type</span>" + ' Type</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-success is-small button--addOccupancyTypeField" type="button">' + '<button class="button is-success is-small button--addOccupancyTypeField" type="button">' +
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
"<span>Add Field</span>" + '<span>Add Field</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="level-item">' + ('<div class="level-item">' +
los.getMoveUpDownButtonFieldHTML("button--moveOccupancyTypeUp", "button--moveOccupancyTypeDown") + los.getMoveUpDownButtonFieldHTML('button--moveOccupancyTypeUp', 'button--moveOccupancyTypeDown') +
"</div>") + '</div>') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
renderOccupancyTypeFields(occupancyTypeContainer, occupancyType.occupancyTypeId, occupancyType.occupancyTypeFields); renderOccupancyTypeFields(occupancyTypeContainer, occupancyType.occupancyTypeId, occupancyType.occupancyTypeFields);
occupancyTypeContainer occupancyTypeContainer
.querySelector(".button--toggleOccupancyTypeFields") .querySelector('.button--toggleOccupancyTypeFields')
.addEventListener("click", toggleOccupancyTypeFields); .addEventListener('click', toggleOccupancyTypeFields);
occupancyTypeContainer occupancyTypeContainer
.querySelector(".button--deleteOccupancyType") .querySelector('.button--deleteOccupancyType')
.addEventListener("click", deleteOccupancyType); .addEventListener('click', deleteOccupancyType);
occupancyTypeContainer occupancyTypeContainer
.querySelector(".button--editOccupancyType") .querySelector('.button--editOccupancyType')
.addEventListener("click", openEditOccupancyType); .addEventListener('click', openEditOccupancyType);
occupancyTypeContainer occupancyTypeContainer
.querySelector(".button--addOccupancyTypeField") .querySelector('.button--addOccupancyTypeField')
.addEventListener("click", openAddOccupancyTypeField); .addEventListener('click', openAddOccupancyTypeField);
occupancyTypeContainer.querySelector(".button--moveOccupancyTypeUp").addEventListener("click", moveOccupancyType); occupancyTypeContainer.querySelector('.button--moveOccupancyTypeUp').addEventListener('click', moveOccupancyType);
occupancyTypeContainer.querySelector(".button--moveOccupancyTypeDown").addEventListener("click", moveOccupancyType); occupancyTypeContainer.querySelector('.button--moveOccupancyTypeDown').addEventListener('click', moveOccupancyType);
occupancyTypesContainerElement.append(occupancyTypeContainer); occupancyTypesContainerElement.append(occupancyTypeContainer);
} }
// Prints // Prints
{ {
const occupancyTypePrintContainer = document.createElement("div"); const occupancyTypePrintContainer = document.createElement('div');
occupancyTypePrintContainer.className = "panel container--occupancyTypePrintList"; occupancyTypePrintContainer.className =
'panel container--occupancyTypePrintList';
occupancyTypePrintContainer.dataset.occupancyTypeId = occupancyTypePrintContainer.dataset.occupancyTypeId =
occupancyType.occupancyTypeId.toString(); occupancyType.occupancyTypeId.toString();
occupancyTypePrintContainer.innerHTML = occupancyTypePrintContainer.innerHTML =
@ -534,32 +541,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
'<div class="level-item">' + '<div class="level-item">' +
'<h2 class="title is-4">' + '<h2 class="title is-4">' +
cityssm.escapeHTML(occupancyType.occupancyType) + cityssm.escapeHTML(occupancyType.occupancyType) +
"</h2>" + '</h2>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
('<div class="level-item">' + ('<div class="level-item">' +
'<button class="button is-success is-small button--addOccupancyTypePrint" type="button">' + '<button class="button is-success is-small button--addOccupancyTypePrint" type="button">' +
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
"<span>Add Print</span>" + '<span>Add Print</span>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>"; '</div>';
renderOccupancyTypePrints(occupancyTypePrintContainer, occupancyType.occupancyTypeId, occupancyType.occupancyTypePrints); renderOccupancyTypePrints(occupancyTypePrintContainer, occupancyType.occupancyTypeId, occupancyType.occupancyTypePrints);
occupancyTypePrintContainer occupancyTypePrintContainer
.querySelector(".button--addOccupancyTypePrint") .querySelector('.button--addOccupancyTypePrint')
.addEventListener("click", openAddOccupancyTypePrint); .addEventListener('click', openAddOccupancyTypePrint);
occupancyTypePrintsContainerElement.append(occupancyTypePrintContainer); occupancyTypePrintsContainerElement.append(occupancyTypePrintContainer);
} }
} }
} }
document.querySelector("#button--addOccupancyType").addEventListener("click", () => { document
.querySelector('#button--addOccupancyType')
.addEventListener('click', () => {
let addCloseModalFunction; let addCloseModalFunction;
const doAdd = (submitEvent) => { const doAdd = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doAddOccupancyType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddOccupancyType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
addCloseModalFunction(); addCloseModalFunction();
occupancyTypes = responseJSON.occupancyTypes; occupancyTypes = responseJSON.occupancyTypes;
@ -567,21 +576,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding " + exports.aliases.occupancy + " Type", title: 'Error Adding ' + exports.aliases.occupancy + ' Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyType", { cityssm.openHtmlModal('adminOccupancyTypes-addOccupancyType', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("#occupancyTypeAdd--occupancyType").focus(); modalElement.querySelector('#occupancyTypeAdd--occupancyType').focus();
modalElement.querySelector("form").addEventListener("submit", doAdd); modalElement.querySelector('form').addEventListener('submit', doAdd);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}, },
onremoved: () => { onremoved: () => {

857
public-typescript/adminOccupancyTypes.ts
View File

File diff suppressed because it is too large Load Diff

412
public-typescript/adminTables.js
View File

@ -9,8 +9,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
const inputElement = changeEvent.currentTarget; const inputElement = changeEvent.currentTarget;
const fontAwesomeIconClass = inputElement.value; const fontAwesomeIconClass = inputElement.value;
inputElement inputElement
.closest(".field") .closest('.field')
.querySelectorAll(".button.is-static")[1].innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`; .querySelectorAll('.button.is-static')[1].innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`;
} }
"use strict"; "use strict";
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
@ -19,28 +19,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
delete exports.workOrderTypes; delete exports.workOrderTypes;
const updateWorkOrderType = (submitEvent) => { const updateWorkOrderType = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateWorkOrderType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateWorkOrderType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes; workOrderTypes = responseJSON.workOrderTypes;
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Type Updated Successfully", message: 'Work Order Type Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order Type", title: 'Error Updating Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteWorkOrderType = (clickEvent) => { const deleteWorkOrderType = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const workOrderTypeId = tableRowElement.dataset.workOrderTypeId; const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteWorkOrderType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteWorkOrderType', {
workOrderTypeId workOrderTypeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -52,40 +52,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
tableRowElement.remove(); tableRowElement.remove();
} }
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Type Deleted Successfully", message: 'Work Order Type Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order Type", title: 'Error Deleting Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order Type", title: 'Delete Work Order Type',
message: `Are you sure you want to delete this work order type?<br /> message: `Are you sure you want to delete this work order type?<br />
Note that no work orders will be removed.`, Note that no work orders will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order Type", text: 'Yes, Delete Work Order Type',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}; };
const moveWorkOrderType = (clickEvent) => { const moveWorkOrderType = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const workOrderTypeId = tableRowElement.dataset.workOrderTypeId; const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveWorkOrderTypeUp" : "doMoveWorkOrderTypeDown"), { (buttonElement.dataset.direction === 'up' ? 'doMoveWorkOrderTypeUp' : 'doMoveWorkOrderTypeDown'), {
workOrderTypeId, workOrderTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes; workOrderTypes = responseJSON.workOrderTypes;
@ -93,79 +93,79 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Work Order Type", title: 'Error Moving Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderWorkOrderTypes = () => { const renderWorkOrderTypes = () => {
const containerElement = document.querySelector("#container--workOrderTypes"); const containerElement = document.querySelector('#container--workOrderTypes');
if (workOrderTypes.length === 0) { if (workOrderTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active work order types.</p></div> <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const workOrderType of workOrderTypes) { for (const workOrderType of workOrderTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.workOrderTypeId = workOrderType.workOrderTypeId.toString(); tableRowElement.dataset.workOrderTypeId = workOrderType.workOrderTypeId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="workOrderTypeId" type="hidden" value="' + '<input name="workOrderTypeId" type="hidden" value="' +
workOrderType.workOrderTypeId.toString() + workOrderType.workOrderTypeId.toString() +
'" />' + '" />' +
('<div class="field has-addons">' + ('<div class="field has-addons">' +
'<div class="control">' + '<div class="control">' +
'<input class="input" name="workOrderType" type="text" value="' + '<input class="input" name="workOrderType" type="text" value="' +
cityssm.escapeHTML(workOrderType.workOrderType || "") + cityssm.escapeHTML(workOrderType.workOrderType || '') +
'" maxlength="100" aria-label="Work Order Type" required />' + '" maxlength="100" aria-label="Work Order Type" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveWorkOrderTypeUp", "button--moveWorkOrderTypeDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveWorkOrderTypeUp', 'button--moveWorkOrderTypeDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">' + '<button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
tableRowElement.querySelector("form").addEventListener("submit", updateWorkOrderType); tableRowElement.querySelector('form').addEventListener('submit', updateWorkOrderType);
tableRowElement.querySelector(".button--moveWorkOrderTypeUp").addEventListener("click", moveWorkOrderType); tableRowElement.querySelector('.button--moveWorkOrderTypeUp').addEventListener('click', moveWorkOrderType);
tableRowElement.querySelector(".button--moveWorkOrderTypeDown").addEventListener("click", moveWorkOrderType); tableRowElement.querySelector('.button--moveWorkOrderTypeDown').addEventListener('click', moveWorkOrderType);
tableRowElement tableRowElement
.querySelector(".button--deleteWorkOrderType") .querySelector('.button--deleteWorkOrderType')
.addEventListener("click", deleteWorkOrderType); .addEventListener('click', deleteWorkOrderType);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addWorkOrderType").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addWorkOrderType').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddWorkOrderType", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddWorkOrderType', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes; workOrderTypes = responseJSON.workOrderTypes;
renderWorkOrderTypes(); renderWorkOrderTypes();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Work Order Type", title: 'Error Adding Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -179,28 +179,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
delete exports.workOrderMilestoneTypes; delete exports.workOrderMilestoneTypes;
const updateWorkOrderMilestoneType = (submitEvent) => { const updateWorkOrderMilestoneType = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateWorkOrderMilestoneType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateWorkOrderMilestoneType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Milestone Type Updated Successfully", message: 'Work Order Milestone Type Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order Milestone Type", title: 'Error Updating Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteWorkOrderMilestoneType = (clickEvent) => { const deleteWorkOrderMilestoneType = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId; const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteWorkOrderMilestoneType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteWorkOrderMilestoneType', {
workOrderMilestoneTypeId workOrderMilestoneTypeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -212,42 +212,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
tableRowElement.remove(); tableRowElement.remove();
} }
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Milestone Type Deleted Successfully", message: 'Work Order Milestone Type Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order Milestone Type", title: 'Error Deleting Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order Milestone Type", title: 'Delete Work Order Milestone Type',
message: `Are you sure you want to delete this work order milestone type?<br /> message: `Are you sure you want to delete this work order milestone type?<br />
Note that no work orders will be removed.`, Note that no work orders will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order Milestone Type", text: 'Yes, Delete Work Order Milestone Type',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}; };
const moveWorkOrderMilestoneType = (clickEvent) => { const moveWorkOrderMilestoneType = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId; const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveWorkOrderMilestoneTypeUp" ? 'doMoveWorkOrderMilestoneTypeUp'
: "doMoveWorkOrderMilestoneTypeDown"), { : 'doMoveWorkOrderMilestoneTypeDown'), {
workOrderMilestoneTypeId, workOrderMilestoneTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
@ -255,29 +255,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Work Order Milestone Type", title: 'Error Moving Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderWorkOrderMilestoneTypes = () => { const renderWorkOrderMilestoneTypes = () => {
const containerElement = document.querySelector("#container--workOrderMilestoneTypes"); const containerElement = document.querySelector('#container--workOrderMilestoneTypes');
if (workOrderMilestoneTypes.length === 0) { if (workOrderMilestoneTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active work order milestone types.</p></div> <div class="message is-warning"><p class="message-body">There are no active work order milestone types.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const workOrderMilestoneType of workOrderMilestoneTypes) { for (const workOrderMilestoneType of workOrderMilestoneTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId =
workOrderMilestoneType.workOrderMilestoneTypeId.toString(); workOrderMilestoneType.workOrderMilestoneTypeId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="workOrderMilestoneTypeId" type="hidden" value="' + '<input name="workOrderMilestoneTypeId" type="hidden" value="' +
workOrderMilestoneType.workOrderMilestoneTypeId.toString() + workOrderMilestoneType.workOrderMilestoneTypeId.toString() +
'" />' + '" />' +
@ -286,49 +286,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
'<input class="input" name="workOrderMilestoneType" type="text" value="' + '<input class="input" name="workOrderMilestoneType" type="text" value="' +
cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType) + cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType) +
'" maxlength="100" aria-label="Work Order Milestone Type" required />' + '" maxlength="100" aria-label="Work Order Milestone Type" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveWorkOrderMilestoneTypeUp", "button--moveWorkOrderMilestoneTypeDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveWorkOrderMilestoneTypeUp', 'button--moveWorkOrderMilestoneTypeDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Mielstone Type" type="button" aria-label="Delete Milestone Type">' + '<button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Mielstone Type" type="button" aria-label="Delete Milestone Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
tableRowElement.querySelector("form").addEventListener("submit", updateWorkOrderMilestoneType); tableRowElement.querySelector('form').addEventListener('submit', updateWorkOrderMilestoneType);
tableRowElement.querySelector(".button--moveWorkOrderMilestoneTypeUp").addEventListener("click", moveWorkOrderMilestoneType); tableRowElement.querySelector('.button--moveWorkOrderMilestoneTypeUp').addEventListener('click', moveWorkOrderMilestoneType);
tableRowElement.querySelector(".button--moveWorkOrderMilestoneTypeDown").addEventListener("click", moveWorkOrderMilestoneType); tableRowElement.querySelector('.button--moveWorkOrderMilestoneTypeDown').addEventListener('click', moveWorkOrderMilestoneType);
tableRowElement tableRowElement
.querySelector(".button--deleteWorkOrderMilestoneType") .querySelector('.button--deleteWorkOrderMilestoneType')
.addEventListener("click", deleteWorkOrderMilestoneType); .addEventListener('click', deleteWorkOrderMilestoneType);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addWorkOrderMilestoneType").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addWorkOrderMilestoneType').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddWorkOrderMilestoneType", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddWorkOrderMilestoneType', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
renderWorkOrderMilestoneTypes(); renderWorkOrderMilestoneTypes();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Work Order Milestone Type", title: 'Error Adding Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -342,28 +342,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
delete exports.lotStatuses; delete exports.lotStatuses;
const updateLotStatus = (submitEvent) => { const updateLotStatus = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotStatus", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateLotStatus', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses; lotStatuses = responseJSON.lotStatuses;
bulmaJS.alert({ bulmaJS.alert({
message: los.escapedAliases.Lot + " Status Updated Successfully", message: los.escapedAliases.Lot + ' Status Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + los.escapedAliases.Lot + " Status", title: 'Error Updating ' + los.escapedAliases.Lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteLotStatus = (clickEvent) => { const deleteLotStatus = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const lotStatusId = tableRowElement.dataset.lotStatusId; const lotStatusId = tableRowElement.dataset.lotStatusId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotStatus", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteLotStatus', {
lotStatusId lotStatusId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -375,15 +375,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
tableRowElement.remove(); tableRowElement.remove();
} }
bulmaJS.alert({ bulmaJS.alert({
message: los.escapedAliases.Lot + " Status Deleted Successfully", message: los.escapedAliases.Lot + ' Status Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting " + los.escapedAliases.Lot + " Status", title: 'Error Deleting ' + los.escapedAliases.Lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -393,22 +393,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
message: `Are you sure you want to delete this status?<br /> message: `Are you sure you want to delete this status?<br />
Note that no ${los.escapedAliases.lot} will be removed.`, Note that no ${los.escapedAliases.lot} will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Status", text: 'Yes, Delete Status',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}; };
const moveLotStatus = (clickEvent) => { const moveLotStatus = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const lotStatusId = tableRowElement.dataset.lotStatusId; const lotStatusId = tableRowElement.dataset.lotStatusId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveLotStatusUp" : "doMoveLotStatusDown"), { (buttonElement.dataset.direction === 'up' ? 'doMoveLotStatusUp' : 'doMoveLotStatusDown'), {
lotStatusId, lotStatusId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses; lotStatuses = responseJSON.lotStatuses;
@ -416,28 +416,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving " + exports.aliases.lot + " Status", title: 'Error Moving ' + exports.aliases.lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderLotStatuses = () => { const renderLotStatuses = () => {
const containerElement = document.querySelector("#container--lotStatuses"); const containerElement = document.querySelector('#container--lotStatuses');
if (lotStatuses.length === 0) { if (lotStatuses.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} statuses.</p></div> <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} statuses.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const lotStatus of lotStatuses) { for (const lotStatus of lotStatuses) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotStatusId = lotStatus.lotStatusId.toString(); tableRowElement.dataset.lotStatusId = lotStatus.lotStatusId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="lotStatusId" type="hidden" value="' + '<input name="lotStatusId" type="hidden" value="' +
lotStatus.lotStatusId.toString() + lotStatus.lotStatusId.toString() +
'" />' + '" />' +
@ -447,47 +447,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
(' value="' + cityssm.escapeHTML(lotStatus.lotStatus) + '"') + (' value="' + cityssm.escapeHTML(lotStatus.lotStatus) + '"') +
(' aria-label="' + cityssm.escapeHTML(exports.aliases.lot) + ' Status"') + (' aria-label="' + cityssm.escapeHTML(exports.aliases.lot) + ' Status"') +
' maxlength="100" required />' + ' maxlength="100" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotStatusUp", "button--moveLotStatusDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveLotStatusUp', 'button--moveLotStatusDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteLotStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">' + '<button class="button is-danger is-light button--deleteLotStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
tableRowElement.querySelector("form").addEventListener("submit", updateLotStatus); tableRowElement.querySelector('form').addEventListener('submit', updateLotStatus);
tableRowElement.querySelector(".button--moveLotStatusUp").addEventListener("click", moveLotStatus); tableRowElement.querySelector('.button--moveLotStatusUp').addEventListener('click', moveLotStatus);
tableRowElement.querySelector(".button--moveLotStatusDown").addEventListener("click", moveLotStatus); tableRowElement.querySelector('.button--moveLotStatusDown').addEventListener('click', moveLotStatus);
tableRowElement.querySelector(".button--deleteLotStatus").addEventListener("click", deleteLotStatus); tableRowElement.querySelector('.button--deleteLotStatus').addEventListener('click', deleteLotStatus);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addLotStatus").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addLotStatus').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotStatus", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddLotStatus', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses; lotStatuses = responseJSON.lotStatuses;
renderLotStatuses(); renderLotStatuses();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} Status`, title: `Error Adding ${los.escapedAliases.Lot} Status`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -501,28 +501,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
delete exports.lotOccupantTypes; delete exports.lotOccupantTypes;
const updateLotOccupantType = (submitEvent) => { const updateLotOccupantType = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotOccupantType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateLotOccupantType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes; lotOccupantTypes = responseJSON.lotOccupantTypes;
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`, message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteLotOccupantType = (clickEvent) => { const deleteLotOccupantType = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId; const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotOccupantType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteLotOccupantType', {
lotOccupantTypeId lotOccupantTypeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -535,14 +535,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`, message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -552,7 +552,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br /> message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br />
Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`, Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
callbackFunction: doDelete callbackFunction: doDelete
@ -561,15 +561,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
}; };
const moveLotOccupantType = (clickEvent) => { const moveLotOccupantType = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId; const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up' ? 'doMoveLotOccupantTypeUp' : 'doMoveLotOccupantTypeDown'), {
? "doMoveLotOccupantTypeUp"
: "doMoveLotOccupantTypeDown"), {
lotOccupantTypeId, lotOccupantTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes; lotOccupantTypes = responseJSON.lotOccupantTypes;
@ -578,40 +576,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderLotOccupantTypes = () => { const renderLotOccupantTypes = () => {
const containerElement = document.querySelector("#container--lotOccupantTypes"); const containerElement = document.querySelector('#container--lotOccupantTypes');
if (lotOccupantTypes.length === 0) { if (lotOccupantTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="3"> containerElement.innerHTML = `<tr><td colspan="3">
<div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div> <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const lotOccupantType of lotOccupantTypes) { for (const lotOccupantType of lotOccupantTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotOccupantTypeId = lotOccupantType.lotOccupantTypeId.toString(); tableRowElement.dataset.lotOccupantTypeId = lotOccupantType.lotOccupantTypeId.toString();
const formId = "form--lotOccupantType-" + lotOccupantType.lotOccupantTypeId; const formId = 'form--lotOccupantType-' + lotOccupantType.lotOccupantTypeId;
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
('<div class="field">' + ('<div class="field">' +
'<div class="control">' + '<div class="control">' +
'<input class="input" name="lotOccupantType" type="text"' + '<input class="input" name="lotOccupantType" type="text"' +
(' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') + (' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') +
(' form="' + formId + '"') + (' form="' + formId + '"') +
(' aria-label="' + (' aria-label="' +
cityssm.escapeHTML(exports.aliases.lot + " " + exports.aliases.occupant) + cityssm.escapeHTML(exports.aliases.lot + ' ' + exports.aliases.occupant) +
' Type"') + ' Type"') +
' maxlength="100" required />' + ' maxlength="100" required />' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</td>" + '</td>' +
"<td>" + '<td>' +
('<div class="field has-addons">' + ('<div class="field has-addons">' +
'<div class="control"><span class="button is-static">fa-</span></div>' + '<div class="control"><span class="button is-static">fa-</span></div>' +
'<div class="control">' + '<div class="control">' +
@ -621,70 +619,70 @@ Object.defineProperty(exports, "__esModule", { value: true });
' list="datalist--fontAwesomeIconClass"' + ' list="datalist--fontAwesomeIconClass"' +
' aria-label="Icon Name"' + ' aria-label="Icon Name"' +
' maxlength="50" />' + ' maxlength="50" />' +
"</div>" + '</div>' +
'<div class="control"><span class="button is-static">' + '<div class="control"><span class="button is-static">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) + cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) +
'"></i></span></div>' + '"></i></span></div>' +
"</div>") + '</div>') +
"</td>" + '</td>' +
("<td>" + ('<td>' +
('<form id="' + formId + '">') + ('<form id="' + formId + '">') +
'<input name="lotOccupantTypeId" type="hidden"' + '<input name="lotOccupantTypeId" type="hidden"' +
(' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') + (' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') +
" />" + ' />' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</form>" + '</form>' +
"</td>") + '</td>') +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotOccupantTypeUp", "button--moveLotOccupantTypeDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveLotOccupantTypeUp', 'button--moveLotOccupantTypeDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteLotOccupantType"' + '<button class="button is-danger is-light button--deleteLotOccupantType"' +
' data-tooltip="Delete ' + ' data-tooltip="Delete ' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
" " + ' ' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
' Type" type="button"' + ' Type" type="button"' +
' aria-label="Delete ' + ' aria-label="Delete ' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
" " + ' ' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
' Type">' + ' Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
const fontAwesomeInputElement = tableRowElement.querySelector("input[name='fontAwesomeIconClass']"); const fontAwesomeInputElement = tableRowElement.querySelector("input[name='fontAwesomeIconClass']");
fontAwesomeInputElement.addEventListener("keyup", refreshFontAwesomeIcon); fontAwesomeInputElement.addEventListener('keyup', refreshFontAwesomeIcon);
fontAwesomeInputElement.addEventListener("change", refreshFontAwesomeIcon); fontAwesomeInputElement.addEventListener('change', refreshFontAwesomeIcon);
tableRowElement.querySelector("form").addEventListener("submit", updateLotOccupantType); tableRowElement.querySelector('form').addEventListener('submit', updateLotOccupantType);
tableRowElement.querySelector(".button--moveLotOccupantTypeUp").addEventListener("click", moveLotOccupantType); tableRowElement.querySelector('.button--moveLotOccupantTypeUp').addEventListener('click', moveLotOccupantType);
tableRowElement.querySelector(".button--moveLotOccupantTypeDown").addEventListener("click", moveLotOccupantType); tableRowElement.querySelector('.button--moveLotOccupantTypeDown').addEventListener('click', moveLotOccupantType);
tableRowElement tableRowElement
.querySelector(".button--deleteLotOccupantType") .querySelector('.button--deleteLotOccupantType')
.addEventListener("click", deleteLotOccupantType); .addEventListener('click', deleteLotOccupantType);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addLotOccupantType").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addLotOccupantType').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotOccupantType", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddLotOccupantType', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes; lotOccupantTypes = responseJSON.lotOccupantTypes;
renderLotOccupantTypes(); renderLotOccupantTypes();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });

4
public-typescript/adminTables/adminTables.js
View File

@ -9,8 +9,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
const inputElement = changeEvent.currentTarget; const inputElement = changeEvent.currentTarget;
const fontAwesomeIconClass = inputElement.value; const fontAwesomeIconClass = inputElement.value;
inputElement inputElement
.closest(".field") .closest('.field')
.querySelectorAll(".button.is-static")[1].innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`; .querySelectorAll('.button.is-static')[1].innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`;
} }
//=include adminTablesWorkOrderTypes.js //=include adminTablesWorkOrderTypes.js
//=include adminTablesWorkOrderMilestoneTypes.js //=include adminTablesWorkOrderMilestoneTypes.js

18
public-typescript/adminTables/adminTables.ts
View File

@ -1,26 +1,26 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
(() => { ;(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
function refreshFontAwesomeIcon(changeEvent: Event) { function refreshFontAwesomeIcon(changeEvent: Event) {
const inputElement = changeEvent.currentTarget as HTMLInputElement; const inputElement = changeEvent.currentTarget as HTMLInputElement
const fontAwesomeIconClass = inputElement.value; const fontAwesomeIconClass = inputElement.value
inputElement inputElement
.closest(".field")! .closest('.field')!
.querySelectorAll( .querySelectorAll(
".button.is-static" '.button.is-static'
)[1].innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`; )[1].innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`
} }
//=include adminTablesWorkOrderTypes.js //=include adminTablesWorkOrderTypes.js
//=include adminTablesWorkOrderMilestoneTypes.js //=include adminTablesWorkOrderMilestoneTypes.js
//=include adminTablesLotStatuses.js //=include adminTablesLotStatuses.js
//=include adminTablesLotOccupantTypes.js //=include adminTablesLotOccupantTypes.js
})(); })()

108
public-typescript/adminTables/adminTablesLotOccupantTypes.js
View File

@ -5,28 +5,28 @@ let lotOccupantTypes = exports.lotOccupantTypes;
delete exports.lotOccupantTypes; delete exports.lotOccupantTypes;
const updateLotOccupantType = (submitEvent) => { const updateLotOccupantType = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotOccupantType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateLotOccupantType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes; lotOccupantTypes = responseJSON.lotOccupantTypes;
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`, message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteLotOccupantType = (clickEvent) => { const deleteLotOccupantType = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId; const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotOccupantType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteLotOccupantType', {
lotOccupantTypeId lotOccupantTypeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -39,14 +39,14 @@ const deleteLotOccupantType = (clickEvent) => {
} }
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`, message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -56,7 +56,7 @@ const deleteLotOccupantType = (clickEvent) => {
message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br /> message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br />
Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`, Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
callbackFunction: doDelete callbackFunction: doDelete
@ -65,15 +65,13 @@ const deleteLotOccupantType = (clickEvent) => {
}; };
const moveLotOccupantType = (clickEvent) => { const moveLotOccupantType = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId; const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up' ? 'doMoveLotOccupantTypeUp' : 'doMoveLotOccupantTypeDown'), {
? "doMoveLotOccupantTypeUp"
: "doMoveLotOccupantTypeDown"), {
lotOccupantTypeId, lotOccupantTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes; lotOccupantTypes = responseJSON.lotOccupantTypes;
@ -82,40 +80,40 @@ const moveLotOccupantType = (clickEvent) => {
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderLotOccupantTypes = () => { const renderLotOccupantTypes = () => {
const containerElement = document.querySelector("#container--lotOccupantTypes"); const containerElement = document.querySelector('#container--lotOccupantTypes');
if (lotOccupantTypes.length === 0) { if (lotOccupantTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="3"> containerElement.innerHTML = `<tr><td colspan="3">
<div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div> <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const lotOccupantType of lotOccupantTypes) { for (const lotOccupantType of lotOccupantTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotOccupantTypeId = lotOccupantType.lotOccupantTypeId.toString(); tableRowElement.dataset.lotOccupantTypeId = lotOccupantType.lotOccupantTypeId.toString();
const formId = "form--lotOccupantType-" + lotOccupantType.lotOccupantTypeId; const formId = 'form--lotOccupantType-' + lotOccupantType.lotOccupantTypeId;
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
('<div class="field">' + ('<div class="field">' +
'<div class="control">' + '<div class="control">' +
'<input class="input" name="lotOccupantType" type="text"' + '<input class="input" name="lotOccupantType" type="text"' +
(' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') + (' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') +
(' form="' + formId + '"') + (' form="' + formId + '"') +
(' aria-label="' + (' aria-label="' +
cityssm.escapeHTML(exports.aliases.lot + " " + exports.aliases.occupant) + cityssm.escapeHTML(exports.aliases.lot + ' ' + exports.aliases.occupant) +
' Type"') + ' Type"') +
' maxlength="100" required />' + ' maxlength="100" required />' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</td>" + '</td>' +
"<td>" + '<td>' +
('<div class="field has-addons">' + ('<div class="field has-addons">' +
'<div class="control"><span class="button is-static">fa-</span></div>' + '<div class="control"><span class="button is-static">fa-</span></div>' +
'<div class="control">' + '<div class="control">' +
@ -125,70 +123,70 @@ const renderLotOccupantTypes = () => {
' list="datalist--fontAwesomeIconClass"' + ' list="datalist--fontAwesomeIconClass"' +
' aria-label="Icon Name"' + ' aria-label="Icon Name"' +
' maxlength="50" />' + ' maxlength="50" />' +
"</div>" + '</div>' +
'<div class="control"><span class="button is-static">' + '<div class="control"><span class="button is-static">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) + cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) +
'"></i></span></div>' + '"></i></span></div>' +
"</div>") + '</div>') +
"</td>" + '</td>' +
("<td>" + ('<td>' +
('<form id="' + formId + '">') + ('<form id="' + formId + '">') +
'<input name="lotOccupantTypeId" type="hidden"' + '<input name="lotOccupantTypeId" type="hidden"' +
(' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') + (' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') +
" />" + ' />' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</form>" + '</form>' +
"</td>") + '</td>') +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotOccupantTypeUp", "button--moveLotOccupantTypeDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveLotOccupantTypeUp', 'button--moveLotOccupantTypeDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteLotOccupantType"' + '<button class="button is-danger is-light button--deleteLotOccupantType"' +
' data-tooltip="Delete ' + ' data-tooltip="Delete ' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
" " + ' ' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
' Type" type="button"' + ' Type" type="button"' +
' aria-label="Delete ' + ' aria-label="Delete ' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
" " + ' ' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
' Type">' + ' Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
const fontAwesomeInputElement = tableRowElement.querySelector("input[name='fontAwesomeIconClass']"); const fontAwesomeInputElement = tableRowElement.querySelector("input[name='fontAwesomeIconClass']");
fontAwesomeInputElement.addEventListener("keyup", refreshFontAwesomeIcon); fontAwesomeInputElement.addEventListener('keyup', refreshFontAwesomeIcon);
fontAwesomeInputElement.addEventListener("change", refreshFontAwesomeIcon); fontAwesomeInputElement.addEventListener('change', refreshFontAwesomeIcon);
tableRowElement.querySelector("form").addEventListener("submit", updateLotOccupantType); tableRowElement.querySelector('form').addEventListener('submit', updateLotOccupantType);
tableRowElement.querySelector(".button--moveLotOccupantTypeUp").addEventListener("click", moveLotOccupantType); tableRowElement.querySelector('.button--moveLotOccupantTypeUp').addEventListener('click', moveLotOccupantType);
tableRowElement.querySelector(".button--moveLotOccupantTypeDown").addEventListener("click", moveLotOccupantType); tableRowElement.querySelector('.button--moveLotOccupantTypeDown').addEventListener('click', moveLotOccupantType);
tableRowElement tableRowElement
.querySelector(".button--deleteLotOccupantType") .querySelector('.button--deleteLotOccupantType')
.addEventListener("click", deleteLotOccupantType); .addEventListener('click', deleteLotOccupantType);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addLotOccupantType").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addLotOccupantType').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotOccupantType", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddLotOccupantType', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes; lotOccupantTypes = responseJSON.lotOccupantTypes;
renderLotOccupantTypes(); renderLotOccupantTypes();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });

243
public-typescript/adminTables/adminTablesLotOccupantTypes.ts
View File

@ -1,176 +1,172 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
declare const refreshFontAwesomeIcon: (changeEvent: Event) => void; declare const refreshFontAwesomeIcon: (changeEvent: Event) => void
let lotOccupantTypes: recordTypes.LotOccupantType[] = exports.lotOccupantTypes; let lotOccupantTypes: recordTypes.LotOccupantType[] = exports.lotOccupantTypes
delete exports.lotOccupantTypes; delete exports.lotOccupantTypes
const updateLotOccupantType = (submitEvent: SubmitEvent) => { const updateLotOccupantType = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateLotOccupantType", los.urlPrefix + '/admin/doUpdateLotOccupantType',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupantTypes?: recordTypes.LotOccupantType[]; lotOccupantTypes?: recordTypes.LotOccupantType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes!; lotOccupantTypes = responseJSON.lotOccupantTypes!
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`, message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const deleteLotOccupantType = (clickEvent: Event) => { const deleteLotOccupantType = (clickEvent: Event) => {
const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest("tr")!; const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest('tr')!
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId; const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteLotOccupantType", los.urlPrefix + '/admin/doDeleteLotOccupantType',
{ {
lotOccupantTypeId lotOccupantTypeId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupantTypes?: recordTypes.LotOccupantType[]; lotOccupantTypes?: recordTypes.LotOccupantType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes!; lotOccupantTypes = responseJSON.lotOccupantTypes!
if (lotOccupantTypes.length === 0) { if (lotOccupantTypes.length === 0) {
renderLotOccupantTypes(); renderLotOccupantTypes()
} else { } else {
tableRowElement.remove(); tableRowElement.remove()
} }
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`, message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br /> message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br />
Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`, Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}; }
const moveLotOccupantType = (clickEvent: MouseEvent) => { const moveLotOccupantType = (clickEvent: MouseEvent) => {
const buttonElement = clickEvent.currentTarget as HTMLButtonElement; const buttonElement = clickEvent.currentTarget as HTMLButtonElement
const tableRowElement = buttonElement.closest("tr")!; const tableRowElement = buttonElement.closest('tr')!
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId; const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up' ? 'doMoveLotOccupantTypeUp' : 'doMoveLotOccupantTypeDown'),
? "doMoveLotOccupantTypeUp"
: "doMoveLotOccupantTypeDown"),
{ {
lotOccupantTypeId, lotOccupantTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupantTypes?: recordTypes.LotOccupantType[]; lotOccupantTypes?: recordTypes.LotOccupantType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes!; lotOccupantTypes = responseJSON.lotOccupantTypes!
renderLotOccupantTypes(); renderLotOccupantTypes()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const renderLotOccupantTypes = () => { const renderLotOccupantTypes = () => {
const containerElement = document.querySelector( const containerElement = document.querySelector('#container--lotOccupantTypes') as HTMLTableSectionElement
"#container--lotOccupantTypes"
) as HTMLTableSectionElement;
if (lotOccupantTypes.length === 0) { if (lotOccupantTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="3"> containerElement.innerHTML = `<tr><td colspan="3">
<div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div> <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div>
</td></tr>`; </td></tr>`
return; return
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
for (const lotOccupantType of lotOccupantTypes) { for (const lotOccupantType of lotOccupantTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.lotOccupantTypeId = lotOccupantType.lotOccupantTypeId.toString(); tableRowElement.dataset.lotOccupantTypeId = lotOccupantType.lotOccupantTypeId.toString()
const formId = "form--lotOccupantType-" + lotOccupantType.lotOccupantTypeId; const formId = 'form--lotOccupantType-' + lotOccupantType.lotOccupantTypeId
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
('<div class="field">' + ('<div class="field">' +
'<div class="control">' + '<div class="control">' +
'<input class="input" name="lotOccupantType" type="text"' + '<input class="input" name="lotOccupantType" type="text"' +
(' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') + (' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') +
(' form="' + formId + '"') + (' form="' + formId + '"') +
(' aria-label="' + (' aria-label="' +
cityssm.escapeHTML(exports.aliases.lot + " " + exports.aliases.occupant) + cityssm.escapeHTML(exports.aliases.lot + ' ' + exports.aliases.occupant) +
' Type"') + ' Type"') +
' maxlength="100" required />' + ' maxlength="100" required />' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</td>" + '</td>' +
"<td>" + '<td>' +
('<div class="field has-addons">' + ('<div class="field has-addons">' +
'<div class="control"><span class="button is-static">fa-</span></div>' + '<div class="control"><span class="button is-static">fa-</span></div>' +
'<div class="control">' + '<div class="control">' +
@ -180,101 +176,102 @@ const renderLotOccupantTypes = () => {
' list="datalist--fontAwesomeIconClass"' + ' list="datalist--fontAwesomeIconClass"' +
' aria-label="Icon Name"' + ' aria-label="Icon Name"' +
' maxlength="50" />' + ' maxlength="50" />' +
"</div>" + '</div>' +
'<div class="control"><span class="button is-static">' + '<div class="control"><span class="button is-static">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) + cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) +
'"></i></span></div>' + '"></i></span></div>' +
"</div>") + '</div>') +
"</td>" + '</td>' +
("<td>" + ('<td>' +
('<form id="' + formId + '">') + ('<form id="' + formId + '">') +
'<input name="lotOccupantTypeId" type="hidden"' + '<input name="lotOccupantTypeId" type="hidden"' +
(' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') + (' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') +
" />" + ' />' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</form>" + '</form>' +
"</td>") + '</td>') +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML( los.getMoveUpDownButtonFieldHTML(
"button--moveLotOccupantTypeUp", 'button--moveLotOccupantTypeUp',
"button--moveLotOccupantTypeDown", 'button--moveLotOccupantTypeDown',
false false
) + ) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteLotOccupantType"' + '<button class="button is-danger is-light button--deleteLotOccupantType"' +
' data-tooltip="Delete ' + ' data-tooltip="Delete ' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
" " + ' ' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
' Type" type="button"' + ' Type" type="button"' +
' aria-label="Delete ' + ' aria-label="Delete ' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
" " + ' ' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
' Type">' + ' Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>'
const fontAwesomeInputElement = tableRowElement.querySelector("input[name='fontAwesomeIconClass']")!; const fontAwesomeInputElement = tableRowElement.querySelector("input[name='fontAwesomeIconClass']")!
fontAwesomeInputElement.addEventListener("keyup", refreshFontAwesomeIcon); fontAwesomeInputElement.addEventListener('keyup', refreshFontAwesomeIcon)
fontAwesomeInputElement.addEventListener("change", refreshFontAwesomeIcon); fontAwesomeInputElement.addEventListener('change', refreshFontAwesomeIcon)
tableRowElement.querySelector("form")!.addEventListener("submit", updateLotOccupantType); tableRowElement.querySelector('form')!.addEventListener('submit', updateLotOccupantType)
( ;(tableRowElement.querySelector('.button--moveLotOccupantTypeUp') as HTMLButtonElement).addEventListener(
tableRowElement.querySelector(".button--moveLotOccupantTypeUp") as HTMLButtonElement 'click',
).addEventListener("click", moveLotOccupantType); moveLotOccupantType
)
( ;(
tableRowElement.querySelector(".button--moveLotOccupantTypeDown") as HTMLButtonElement tableRowElement.querySelector('.button--moveLotOccupantTypeDown') as HTMLButtonElement
).addEventListener("click", moveLotOccupantType); ).addEventListener('click', moveLotOccupantType)
tableRowElement tableRowElement
.querySelector(".button--deleteLotOccupantType")! .querySelector('.button--deleteLotOccupantType')!
.addEventListener("click", deleteLotOccupantType); .addEventListener('click', deleteLotOccupantType)
containerElement.append(tableRowElement); containerElement.append(tableRowElement)
}
} }
};
(document.querySelector("#form--addLotOccupantType") as HTMLFormElement).addEventListener( ;(document.querySelector('#form--addLotOccupantType') as HTMLFormElement).addEventListener(
"submit", 'submit',
(submitEvent: SubmitEvent) => { (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
const formElement = submitEvent.currentTarget as HTMLFormElement; const formElement = submitEvent.currentTarget as HTMLFormElement
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doAddLotOccupantType", los.urlPrefix + '/admin/doAddLotOccupantType',
formElement, formElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupantTypes?: recordTypes.LotOccupantType[]; lotOccupantTypes?: recordTypes.LotOccupantType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupantTypes = responseJSON.lotOccupantTypes!; lotOccupantTypes = responseJSON.lotOccupantTypes!
renderLotOccupantTypes(); renderLotOccupantTypes()
formElement.reset(); formElement.reset()
formElement.querySelector("input")!.focus(); formElement.querySelector('input')!.focus()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`, title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
); )
renderLotOccupantTypes(); renderLotOccupantTypes()

94
public-typescript/adminTables/adminTablesLotStatuses.js
View File

@ -5,28 +5,28 @@ let lotStatuses = exports.lotStatuses;
delete exports.lotStatuses; delete exports.lotStatuses;
const updateLotStatus = (submitEvent) => { const updateLotStatus = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotStatus", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateLotStatus', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses; lotStatuses = responseJSON.lotStatuses;
bulmaJS.alert({ bulmaJS.alert({
message: los.escapedAliases.Lot + " Status Updated Successfully", message: los.escapedAliases.Lot + ' Status Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + los.escapedAliases.Lot + " Status", title: 'Error Updating ' + los.escapedAliases.Lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteLotStatus = (clickEvent) => { const deleteLotStatus = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const lotStatusId = tableRowElement.dataset.lotStatusId; const lotStatusId = tableRowElement.dataset.lotStatusId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotStatus", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteLotStatus', {
lotStatusId lotStatusId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -38,15 +38,15 @@ const deleteLotStatus = (clickEvent) => {
tableRowElement.remove(); tableRowElement.remove();
} }
bulmaJS.alert({ bulmaJS.alert({
message: los.escapedAliases.Lot + " Status Deleted Successfully", message: los.escapedAliases.Lot + ' Status Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting " + los.escapedAliases.Lot + " Status", title: 'Error Deleting ' + los.escapedAliases.Lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -56,22 +56,22 @@ const deleteLotStatus = (clickEvent) => {
message: `Are you sure you want to delete this status?<br /> message: `Are you sure you want to delete this status?<br />
Note that no ${los.escapedAliases.lot} will be removed.`, Note that no ${los.escapedAliases.lot} will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Status", text: 'Yes, Delete Status',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}; };
const moveLotStatus = (clickEvent) => { const moveLotStatus = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const lotStatusId = tableRowElement.dataset.lotStatusId; const lotStatusId = tableRowElement.dataset.lotStatusId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveLotStatusUp" : "doMoveLotStatusDown"), { (buttonElement.dataset.direction === 'up' ? 'doMoveLotStatusUp' : 'doMoveLotStatusDown'), {
lotStatusId, lotStatusId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses; lotStatuses = responseJSON.lotStatuses;
@ -79,28 +79,28 @@ const moveLotStatus = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving " + exports.aliases.lot + " Status", title: 'Error Moving ' + exports.aliases.lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderLotStatuses = () => { const renderLotStatuses = () => {
const containerElement = document.querySelector("#container--lotStatuses"); const containerElement = document.querySelector('#container--lotStatuses');
if (lotStatuses.length === 0) { if (lotStatuses.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} statuses.</p></div> <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} statuses.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const lotStatus of lotStatuses) { for (const lotStatus of lotStatuses) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotStatusId = lotStatus.lotStatusId.toString(); tableRowElement.dataset.lotStatusId = lotStatus.lotStatusId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="lotStatusId" type="hidden" value="' + '<input name="lotStatusId" type="hidden" value="' +
lotStatus.lotStatusId.toString() + lotStatus.lotStatusId.toString() +
'" />' + '" />' +
@ -110,47 +110,47 @@ const renderLotStatuses = () => {
(' value="' + cityssm.escapeHTML(lotStatus.lotStatus) + '"') + (' value="' + cityssm.escapeHTML(lotStatus.lotStatus) + '"') +
(' aria-label="' + cityssm.escapeHTML(exports.aliases.lot) + ' Status"') + (' aria-label="' + cityssm.escapeHTML(exports.aliases.lot) + ' Status"') +
' maxlength="100" required />' + ' maxlength="100" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotStatusUp", "button--moveLotStatusDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveLotStatusUp', 'button--moveLotStatusDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteLotStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">' + '<button class="button is-danger is-light button--deleteLotStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
tableRowElement.querySelector("form").addEventListener("submit", updateLotStatus); tableRowElement.querySelector('form').addEventListener('submit', updateLotStatus);
tableRowElement.querySelector(".button--moveLotStatusUp").addEventListener("click", moveLotStatus); tableRowElement.querySelector('.button--moveLotStatusUp').addEventListener('click', moveLotStatus);
tableRowElement.querySelector(".button--moveLotStatusDown").addEventListener("click", moveLotStatus); tableRowElement.querySelector('.button--moveLotStatusDown').addEventListener('click', moveLotStatus);
tableRowElement.querySelector(".button--deleteLotStatus").addEventListener("click", deleteLotStatus); tableRowElement.querySelector('.button--deleteLotStatus').addEventListener('click', deleteLotStatus);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addLotStatus").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addLotStatus').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotStatus", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddLotStatus', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses; lotStatuses = responseJSON.lotStatuses;
renderLotStatuses(); renderLotStatuses();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} Status`, title: `Error Adding ${los.escapedAliases.Lot} Status`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });

220
public-typescript/adminTables/adminTablesLotStatuses.ts
View File

@ -1,157 +1,145 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
let lotStatuses: recordTypes.LotStatus[] = exports.lotStatuses; let lotStatuses: recordTypes.LotStatus[] = exports.lotStatuses
delete exports.lotStatuses; delete exports.lotStatuses
const updateLotStatus = (submitEvent: SubmitEvent) => { const updateLotStatus = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateLotStatus", los.urlPrefix + '/admin/doUpdateLotStatus',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: { success: boolean; errorMessage?: string; lotStatuses?: recordTypes.LotStatus[] }) => {
success: boolean;
errorMessage?: string;
lotStatuses?: recordTypes.LotStatus[];
}) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses!; lotStatuses = responseJSON.lotStatuses!
bulmaJS.alert({ bulmaJS.alert({
message: los.escapedAliases.Lot + " Status Updated Successfully", message: los.escapedAliases.Lot + ' Status Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + los.escapedAliases.Lot + " Status", title: 'Error Updating ' + los.escapedAliases.Lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const deleteLotStatus = (clickEvent: Event) => { const deleteLotStatus = (clickEvent: Event) => {
const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest("tr")!; const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest('tr')!
const lotStatusId = tableRowElement.dataset.lotStatusId; const lotStatusId = tableRowElement.dataset.lotStatusId
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteLotStatus", los.urlPrefix + '/admin/doDeleteLotStatus',
{ {
lotStatusId lotStatusId
}, },
(responseJSON: { (responseJSON: { success: boolean; errorMessage?: string; lotStatuses?: recordTypes.LotStatus[] }) => {
success: boolean;
errorMessage?: string;
lotStatuses?: recordTypes.LotStatus[];
}) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses!; lotStatuses = responseJSON.lotStatuses!
if (lotStatuses.length === 0) { if (lotStatuses.length === 0) {
renderLotStatuses(); renderLotStatuses()
} else { } else {
tableRowElement.remove(); tableRowElement.remove()
} }
bulmaJS.alert({ bulmaJS.alert({
message: los.escapedAliases.Lot + " Status Deleted Successfully", message: los.escapedAliases.Lot + ' Status Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting " + los.escapedAliases.Lot + " Status", title: 'Error Deleting ' + los.escapedAliases.Lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${los.escapedAliases.Lot} Status`, title: `Delete ${los.escapedAliases.Lot} Status`,
message: `Are you sure you want to delete this status?<br /> message: `Are you sure you want to delete this status?<br />
Note that no ${los.escapedAliases.lot} will be removed.`, Note that no ${los.escapedAliases.lot} will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Status", text: 'Yes, Delete Status',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}; }
const moveLotStatus = (clickEvent: MouseEvent) => { const moveLotStatus = (clickEvent: MouseEvent) => {
const buttonElement = clickEvent.currentTarget as HTMLButtonElement; const buttonElement = clickEvent.currentTarget as HTMLButtonElement
const tableRowElement = buttonElement.closest("tr")!; const tableRowElement = buttonElement.closest('tr')!
const lotStatusId = tableRowElement.dataset.lotStatusId; const lotStatusId = tableRowElement.dataset.lotStatusId
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveLotStatusUp" : "doMoveLotStatusDown"), (buttonElement.dataset.direction === 'up' ? 'doMoveLotStatusUp' : 'doMoveLotStatusDown'),
{ {
lotStatusId, lotStatusId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, },
(responseJSON: { (responseJSON: { success: boolean; errorMessage?: string; lotStatuses?: recordTypes.LotStatus[] }) => {
success: boolean;
errorMessage?: string;
lotStatuses?: recordTypes.LotStatus[];
}) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses!; lotStatuses = responseJSON.lotStatuses!
renderLotStatuses(); renderLotStatuses()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving " + exports.aliases.lot + " Status", title: 'Error Moving ' + exports.aliases.lot + ' Status',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const renderLotStatuses = () => { const renderLotStatuses = () => {
const containerElement = document.querySelector("#container--lotStatuses") as HTMLTableSectionElement; const containerElement = document.querySelector('#container--lotStatuses') as HTMLTableSectionElement
if (lotStatuses.length === 0) { if (lotStatuses.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} statuses.</p></div> <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} statuses.</p></div>
</td></tr>`; </td></tr>`
return; return
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
for (const lotStatus of lotStatuses) { for (const lotStatus of lotStatuses) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.lotStatusId = lotStatus.lotStatusId.toString(); tableRowElement.dataset.lotStatusId = lotStatus.lotStatusId.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="lotStatusId" type="hidden" value="' + '<input name="lotStatusId" type="hidden" value="' +
lotStatus.lotStatusId.toString() + lotStatus.lotStatusId.toString() +
'" />' + '" />' +
@ -161,74 +149,70 @@ const renderLotStatuses = () => {
(' value="' + cityssm.escapeHTML(lotStatus.lotStatus) + '"') + (' value="' + cityssm.escapeHTML(lotStatus.lotStatus) + '"') +
(' aria-label="' + cityssm.escapeHTML(exports.aliases.lot) + ' Status"') + (' aria-label="' + cityssm.escapeHTML(exports.aliases.lot) + ' Status"') +
' maxlength="100" required />' + ' maxlength="100" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveLotStatusUp", "button--moveLotStatusDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveLotStatusUp', 'button--moveLotStatusDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteLotStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">' + '<button class="button is-danger is-light button--deleteLotStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>'
tableRowElement.querySelector("form")!.addEventListener("submit", updateLotStatus); tableRowElement.querySelector('form')!.addEventListener('submit', updateLotStatus)
(tableRowElement.querySelector(".button--moveLotStatusUp") as HTMLButtonElement).addEventListener( ;(tableRowElement.querySelector('.button--moveLotStatusUp') as HTMLButtonElement).addEventListener(
"click", 'click',
moveLotStatus moveLotStatus
); )
(tableRowElement.querySelector(".button--moveLotStatusDown") as HTMLButtonElement).addEventListener( ;(tableRowElement.querySelector('.button--moveLotStatusDown') as HTMLButtonElement).addEventListener(
"click", 'click',
moveLotStatus moveLotStatus
); )
tableRowElement.querySelector(".button--deleteLotStatus")!.addEventListener("click", deleteLotStatus); tableRowElement.querySelector('.button--deleteLotStatus')!.addEventListener('click', deleteLotStatus)
containerElement.append(tableRowElement); containerElement.append(tableRowElement)
}
} }
};
(document.querySelector("#form--addLotStatus") as HTMLFormElement).addEventListener( ;(document.querySelector('#form--addLotStatus') as HTMLFormElement).addEventListener(
"submit", 'submit',
(submitEvent: SubmitEvent) => { (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
const formElement = submitEvent.currentTarget as HTMLFormElement; const formElement = submitEvent.currentTarget as HTMLFormElement
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doAddLotStatus", los.urlPrefix + '/admin/doAddLotStatus',
formElement, formElement,
(responseJSON: { (responseJSON: { success: boolean; errorMessage?: string; lotStatuses?: recordTypes.LotStatus[] }) => {
success: boolean;
errorMessage?: string;
lotStatuses?: recordTypes.LotStatus[];
}) => {
if (responseJSON.success) { if (responseJSON.success) {
lotStatuses = responseJSON.lotStatuses!; lotStatuses = responseJSON.lotStatuses!
renderLotStatuses(); renderLotStatuses()
formElement.reset(); formElement.reset()
formElement.querySelector("input")!.focus(); formElement.querySelector('input')!.focus()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Adding ${los.escapedAliases.Lot} Status`, title: `Error Adding ${los.escapedAliases.Lot} Status`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
); )
renderLotStatuses(); renderLotStatuses()

104
public-typescript/adminTables/adminTablesWorkOrderMilestoneTypes.js
View File

@ -5,28 +5,28 @@ let workOrderMilestoneTypes = exports.workOrderMilestoneTypes;
delete exports.workOrderMilestoneTypes; delete exports.workOrderMilestoneTypes;
const updateWorkOrderMilestoneType = (submitEvent) => { const updateWorkOrderMilestoneType = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateWorkOrderMilestoneType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateWorkOrderMilestoneType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Milestone Type Updated Successfully", message: 'Work Order Milestone Type Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order Milestone Type", title: 'Error Updating Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteWorkOrderMilestoneType = (clickEvent) => { const deleteWorkOrderMilestoneType = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId; const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteWorkOrderMilestoneType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteWorkOrderMilestoneType', {
workOrderMilestoneTypeId workOrderMilestoneTypeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -38,42 +38,42 @@ const deleteWorkOrderMilestoneType = (clickEvent) => {
tableRowElement.remove(); tableRowElement.remove();
} }
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Milestone Type Deleted Successfully", message: 'Work Order Milestone Type Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order Milestone Type", title: 'Error Deleting Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order Milestone Type", title: 'Delete Work Order Milestone Type',
message: `Are you sure you want to delete this work order milestone type?<br /> message: `Are you sure you want to delete this work order milestone type?<br />
Note that no work orders will be removed.`, Note that no work orders will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order Milestone Type", text: 'Yes, Delete Work Order Milestone Type',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}; };
const moveWorkOrderMilestoneType = (clickEvent) => { const moveWorkOrderMilestoneType = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId; const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveWorkOrderMilestoneTypeUp" ? 'doMoveWorkOrderMilestoneTypeUp'
: "doMoveWorkOrderMilestoneTypeDown"), { : 'doMoveWorkOrderMilestoneTypeDown'), {
workOrderMilestoneTypeId, workOrderMilestoneTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
@ -81,29 +81,29 @@ const moveWorkOrderMilestoneType = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Work Order Milestone Type", title: 'Error Moving Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderWorkOrderMilestoneTypes = () => { const renderWorkOrderMilestoneTypes = () => {
const containerElement = document.querySelector("#container--workOrderMilestoneTypes"); const containerElement = document.querySelector('#container--workOrderMilestoneTypes');
if (workOrderMilestoneTypes.length === 0) { if (workOrderMilestoneTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active work order milestone types.</p></div> <div class="message is-warning"><p class="message-body">There are no active work order milestone types.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const workOrderMilestoneType of workOrderMilestoneTypes) { for (const workOrderMilestoneType of workOrderMilestoneTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId =
workOrderMilestoneType.workOrderMilestoneTypeId.toString(); workOrderMilestoneType.workOrderMilestoneTypeId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="workOrderMilestoneTypeId" type="hidden" value="' + '<input name="workOrderMilestoneTypeId" type="hidden" value="' +
workOrderMilestoneType.workOrderMilestoneTypeId.toString() + workOrderMilestoneType.workOrderMilestoneTypeId.toString() +
'" />' + '" />' +
@ -112,49 +112,49 @@ const renderWorkOrderMilestoneTypes = () => {
'<input class="input" name="workOrderMilestoneType" type="text" value="' + '<input class="input" name="workOrderMilestoneType" type="text" value="' +
cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType) + cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType) +
'" maxlength="100" aria-label="Work Order Milestone Type" required />' + '" maxlength="100" aria-label="Work Order Milestone Type" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveWorkOrderMilestoneTypeUp", "button--moveWorkOrderMilestoneTypeDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveWorkOrderMilestoneTypeUp', 'button--moveWorkOrderMilestoneTypeDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Mielstone Type" type="button" aria-label="Delete Milestone Type">' + '<button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Mielstone Type" type="button" aria-label="Delete Milestone Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
tableRowElement.querySelector("form").addEventListener("submit", updateWorkOrderMilestoneType); tableRowElement.querySelector('form').addEventListener('submit', updateWorkOrderMilestoneType);
tableRowElement.querySelector(".button--moveWorkOrderMilestoneTypeUp").addEventListener("click", moveWorkOrderMilestoneType); tableRowElement.querySelector('.button--moveWorkOrderMilestoneTypeUp').addEventListener('click', moveWorkOrderMilestoneType);
tableRowElement.querySelector(".button--moveWorkOrderMilestoneTypeDown").addEventListener("click", moveWorkOrderMilestoneType); tableRowElement.querySelector('.button--moveWorkOrderMilestoneTypeDown').addEventListener('click', moveWorkOrderMilestoneType);
tableRowElement tableRowElement
.querySelector(".button--deleteWorkOrderMilestoneType") .querySelector('.button--deleteWorkOrderMilestoneType')
.addEventListener("click", deleteWorkOrderMilestoneType); .addEventListener('click', deleteWorkOrderMilestoneType);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addWorkOrderMilestoneType").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addWorkOrderMilestoneType').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddWorkOrderMilestoneType", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddWorkOrderMilestoneType', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
renderWorkOrderMilestoneTypes(); renderWorkOrderMilestoneTypes();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Work Order Milestone Type", title: 'Error Adding Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });

234
public-typescript/adminTables/adminTablesWorkOrderMilestoneTypes.ts
View File

@ -1,162 +1,162 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
let workOrderMilestoneTypes: recordTypes.WorkOrderMilestoneType[] = exports.workOrderMilestoneTypes; let workOrderMilestoneTypes: recordTypes.WorkOrderMilestoneType[] = exports.workOrderMilestoneTypes
delete exports.workOrderMilestoneTypes; delete exports.workOrderMilestoneTypes
const updateWorkOrderMilestoneType = (submitEvent: SubmitEvent) => { const updateWorkOrderMilestoneType = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateWorkOrderMilestoneType", los.urlPrefix + '/admin/doUpdateWorkOrderMilestoneType',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]; workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Milestone Type Updated Successfully", message: 'Work Order Milestone Type Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order Milestone Type", title: 'Error Updating Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const deleteWorkOrderMilestoneType = (clickEvent: Event) => { const deleteWorkOrderMilestoneType = (clickEvent: Event) => {
const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest("tr")!; const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest('tr')!
const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId; const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteWorkOrderMilestoneType", los.urlPrefix + '/admin/doDeleteWorkOrderMilestoneType',
{ {
workOrderMilestoneTypeId workOrderMilestoneTypeId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]; workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!
if (workOrderMilestoneTypes.length === 0) { if (workOrderMilestoneTypes.length === 0) {
renderWorkOrderMilestoneTypes(); renderWorkOrderMilestoneTypes()
} else { } else {
tableRowElement.remove(); tableRowElement.remove()
} }
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Milestone Type Deleted Successfully", message: 'Work Order Milestone Type Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order Milestone Type", title: 'Error Deleting Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order Milestone Type", title: 'Delete Work Order Milestone Type',
message: `Are you sure you want to delete this work order milestone type?<br /> message: `Are you sure you want to delete this work order milestone type?<br />
Note that no work orders will be removed.`, Note that no work orders will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order Milestone Type", text: 'Yes, Delete Work Order Milestone Type',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}; }
const moveWorkOrderMilestoneType = (clickEvent: MouseEvent) => { const moveWorkOrderMilestoneType = (clickEvent: MouseEvent) => {
const buttonElement = clickEvent.currentTarget as HTMLButtonElement; const buttonElement = clickEvent.currentTarget as HTMLButtonElement
const tableRowElement = buttonElement.closest("tr")!; const tableRowElement = buttonElement.closest('tr')!
const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId; const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" (buttonElement.dataset.direction === 'up'
? "doMoveWorkOrderMilestoneTypeUp" ? 'doMoveWorkOrderMilestoneTypeUp'
: "doMoveWorkOrderMilestoneTypeDown"), : 'doMoveWorkOrderMilestoneTypeDown'),
{ {
workOrderMilestoneTypeId, workOrderMilestoneTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]; workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!
renderWorkOrderMilestoneTypes(); renderWorkOrderMilestoneTypes()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Work Order Milestone Type", title: 'Error Moving Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const renderWorkOrderMilestoneTypes = () => { const renderWorkOrderMilestoneTypes = () => {
const containerElement = document.querySelector( const containerElement = document.querySelector(
"#container--workOrderMilestoneTypes" '#container--workOrderMilestoneTypes'
) as HTMLTableSectionElement; ) as HTMLTableSectionElement
if (workOrderMilestoneTypes.length === 0) { if (workOrderMilestoneTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active work order milestone types.</p></div> <div class="message is-warning"><p class="message-body">There are no active work order milestone types.</p></div>
</td></tr>`; </td></tr>`
return; return
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
for (const workOrderMilestoneType of workOrderMilestoneTypes) { for (const workOrderMilestoneType of workOrderMilestoneTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId =
workOrderMilestoneType.workOrderMilestoneTypeId.toString(); workOrderMilestoneType.workOrderMilestoneTypeId.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="workOrderMilestoneTypeId" type="hidden" value="' + '<input name="workOrderMilestoneTypeId" type="hidden" value="' +
workOrderMilestoneType.workOrderMilestoneTypeId.toString() + workOrderMilestoneType.workOrderMilestoneTypeId.toString() +
'" />' + '" />' +
@ -165,78 +165,78 @@ const renderWorkOrderMilestoneTypes = () => {
'<input class="input" name="workOrderMilestoneType" type="text" value="' + '<input class="input" name="workOrderMilestoneType" type="text" value="' +
cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType) + cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType) +
'" maxlength="100" aria-label="Work Order Milestone Type" required />' + '" maxlength="100" aria-label="Work Order Milestone Type" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML( los.getMoveUpDownButtonFieldHTML(
"button--moveWorkOrderMilestoneTypeUp", 'button--moveWorkOrderMilestoneTypeUp',
"button--moveWorkOrderMilestoneTypeDown", 'button--moveWorkOrderMilestoneTypeDown',
false false
) + ) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Mielstone Type" type="button" aria-label="Delete Milestone Type">' + '<button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Mielstone Type" type="button" aria-label="Delete Milestone Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>'
tableRowElement.querySelector("form")!.addEventListener("submit", updateWorkOrderMilestoneType); tableRowElement.querySelector('form')!.addEventListener('submit', updateWorkOrderMilestoneType)
( ;(
tableRowElement.querySelector(".button--moveWorkOrderMilestoneTypeUp") as HTMLButtonElement tableRowElement.querySelector('.button--moveWorkOrderMilestoneTypeUp') as HTMLButtonElement
).addEventListener("click", moveWorkOrderMilestoneType); ).addEventListener('click', moveWorkOrderMilestoneType)
( ;(
tableRowElement.querySelector(".button--moveWorkOrderMilestoneTypeDown") as HTMLButtonElement tableRowElement.querySelector('.button--moveWorkOrderMilestoneTypeDown') as HTMLButtonElement
).addEventListener("click", moveWorkOrderMilestoneType); ).addEventListener('click', moveWorkOrderMilestoneType)
tableRowElement tableRowElement
.querySelector(".button--deleteWorkOrderMilestoneType")! .querySelector('.button--deleteWorkOrderMilestoneType')!
.addEventListener("click", deleteWorkOrderMilestoneType); .addEventListener('click', deleteWorkOrderMilestoneType)
containerElement.append(tableRowElement); containerElement.append(tableRowElement)
}
} }
};
(document.querySelector("#form--addWorkOrderMilestoneType") as HTMLFormElement).addEventListener( ;(document.querySelector('#form--addWorkOrderMilestoneType') as HTMLFormElement).addEventListener(
"submit", 'submit',
(submitEvent: SubmitEvent) => { (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
const formElement = submitEvent.currentTarget as HTMLFormElement; const formElement = submitEvent.currentTarget as HTMLFormElement
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doAddWorkOrderMilestoneType", los.urlPrefix + '/admin/doAddWorkOrderMilestoneType',
formElement, formElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]; workOrderMilestoneTypes?: recordTypes.WorkOrderMilestoneType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!; workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes!
renderWorkOrderMilestoneTypes(); renderWorkOrderMilestoneTypes()
formElement.reset(); formElement.reset()
formElement.querySelector("input")!.focus(); formElement.querySelector('input')!.focus()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Work Order Milestone Type", title: 'Error Adding Work Order Milestone Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
); )
renderWorkOrderMilestoneTypes(); renderWorkOrderMilestoneTypes()

102
public-typescript/adminTables/adminTablesWorkOrderTypes.js
View File

@ -5,28 +5,28 @@ let workOrderTypes = exports.workOrderTypes;
delete exports.workOrderTypes; delete exports.workOrderTypes;
const updateWorkOrderType = (submitEvent) => { const updateWorkOrderType = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateWorkOrderType", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doUpdateWorkOrderType', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes; workOrderTypes = responseJSON.workOrderTypes;
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Type Updated Successfully", message: 'Work Order Type Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order Type", title: 'Error Updating Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const deleteWorkOrderType = (clickEvent) => { const deleteWorkOrderType = (clickEvent) => {
const tableRowElement = clickEvent.currentTarget.closest("tr"); const tableRowElement = clickEvent.currentTarget.closest('tr');
const workOrderTypeId = tableRowElement.dataset.workOrderTypeId; const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteWorkOrderType", { cityssm.postJSON(los.urlPrefix + '/admin/doDeleteWorkOrderType', {
workOrderTypeId workOrderTypeId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -38,40 +38,40 @@ const deleteWorkOrderType = (clickEvent) => {
tableRowElement.remove(); tableRowElement.remove();
} }
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Type Deleted Successfully", message: 'Work Order Type Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order Type", title: 'Error Deleting Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order Type", title: 'Delete Work Order Type',
message: `Are you sure you want to delete this work order type?<br /> message: `Are you sure you want to delete this work order type?<br />
Note that no work orders will be removed.`, Note that no work orders will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order Type", text: 'Yes, Delete Work Order Type',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}; };
const moveWorkOrderType = (clickEvent) => { const moveWorkOrderType = (clickEvent) => {
const buttonElement = clickEvent.currentTarget; const buttonElement = clickEvent.currentTarget;
const tableRowElement = buttonElement.closest("tr"); const tableRowElement = buttonElement.closest('tr');
const workOrderTypeId = tableRowElement.dataset.workOrderTypeId; const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
cityssm.postJSON(los.urlPrefix + cityssm.postJSON(los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveWorkOrderTypeUp" : "doMoveWorkOrderTypeDown"), { (buttonElement.dataset.direction === 'up' ? 'doMoveWorkOrderTypeUp' : 'doMoveWorkOrderTypeDown'), {
workOrderTypeId, workOrderTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes; workOrderTypes = responseJSON.workOrderTypes;
@ -79,79 +79,79 @@ const moveWorkOrderType = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Work Order Type", title: 'Error Moving Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
const renderWorkOrderTypes = () => { const renderWorkOrderTypes = () => {
const containerElement = document.querySelector("#container--workOrderTypes"); const containerElement = document.querySelector('#container--workOrderTypes');
if (workOrderTypes.length === 0) { if (workOrderTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active work order types.</p></div> <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
</td></tr>`; </td></tr>`;
return; return;
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
for (const workOrderType of workOrderTypes) { for (const workOrderType of workOrderTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.workOrderTypeId = workOrderType.workOrderTypeId.toString(); tableRowElement.dataset.workOrderTypeId = workOrderType.workOrderTypeId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="workOrderTypeId" type="hidden" value="' + '<input name="workOrderTypeId" type="hidden" value="' +
workOrderType.workOrderTypeId.toString() + workOrderType.workOrderTypeId.toString() +
'" />' + '" />' +
('<div class="field has-addons">' + ('<div class="field has-addons">' +
'<div class="control">' + '<div class="control">' +
'<input class="input" name="workOrderType" type="text" value="' + '<input class="input" name="workOrderType" type="text" value="' +
cityssm.escapeHTML(workOrderType.workOrderType || "") + cityssm.escapeHTML(workOrderType.workOrderType || '') +
'" maxlength="100" aria-label="Work Order Type" required />' + '" maxlength="100" aria-label="Work Order Type" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML("button--moveWorkOrderTypeUp", "button--moveWorkOrderTypeDown", false) + los.getMoveUpDownButtonFieldHTML('button--moveWorkOrderTypeUp', 'button--moveWorkOrderTypeDown', false) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">' + '<button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>';
tableRowElement.querySelector("form").addEventListener("submit", updateWorkOrderType); tableRowElement.querySelector('form').addEventListener('submit', updateWorkOrderType);
tableRowElement.querySelector(".button--moveWorkOrderTypeUp").addEventListener("click", moveWorkOrderType); tableRowElement.querySelector('.button--moveWorkOrderTypeUp').addEventListener('click', moveWorkOrderType);
tableRowElement.querySelector(".button--moveWorkOrderTypeDown").addEventListener("click", moveWorkOrderType); tableRowElement.querySelector('.button--moveWorkOrderTypeDown').addEventListener('click', moveWorkOrderType);
tableRowElement tableRowElement
.querySelector(".button--deleteWorkOrderType") .querySelector('.button--deleteWorkOrderType')
.addEventListener("click", deleteWorkOrderType); .addEventListener('click', deleteWorkOrderType);
containerElement.append(tableRowElement); containerElement.append(tableRowElement);
} }
}; };
document.querySelector("#form--addWorkOrderType").addEventListener("submit", (submitEvent) => { document.querySelector('#form--addWorkOrderType').addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const formElement = submitEvent.currentTarget; const formElement = submitEvent.currentTarget;
cityssm.postJSON(los.urlPrefix + "/admin/doAddWorkOrderType", formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/admin/doAddWorkOrderType', formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes; workOrderTypes = responseJSON.workOrderTypes;
renderWorkOrderTypes(); renderWorkOrderTypes();
formElement.reset(); formElement.reset();
formElement.querySelector("input").focus(); formElement.querySelector('input').focus();
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Work Order Type", title: 'Error Adding Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });

231
public-typescript/adminTables/adminTablesWorkOrderTypes.ts
View File

@ -1,238 +1,239 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
let workOrderTypes: recordTypes.WorkOrderType[] = exports.workOrderTypes; let workOrderTypes: recordTypes.WorkOrderType[] = exports.workOrderTypes
delete exports.workOrderTypes; delete exports.workOrderTypes
const updateWorkOrderType = (submitEvent: SubmitEvent) => { const updateWorkOrderType = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateWorkOrderType", los.urlPrefix + '/admin/doUpdateWorkOrderType',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderTypes?: recordTypes.WorkOrderType[]; workOrderTypes?: recordTypes.WorkOrderType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes!; workOrderTypes = responseJSON.workOrderTypes!
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Type Updated Successfully", message: 'Work Order Type Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order Type", title: 'Error Updating Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const deleteWorkOrderType = (clickEvent: Event) => { const deleteWorkOrderType = (clickEvent: Event) => {
const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest("tr")!; const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest('tr')!
const workOrderTypeId = tableRowElement.dataset.workOrderTypeId; const workOrderTypeId = tableRowElement.dataset.workOrderTypeId
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteWorkOrderType", los.urlPrefix + '/admin/doDeleteWorkOrderType',
{ {
workOrderTypeId workOrderTypeId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderTypes?: recordTypes.WorkOrderType[]; workOrderTypes?: recordTypes.WorkOrderType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes!; workOrderTypes = responseJSON.workOrderTypes!
if (workOrderTypes.length === 0) { if (workOrderTypes.length === 0) {
renderWorkOrderTypes(); renderWorkOrderTypes()
} else { } else {
tableRowElement.remove(); tableRowElement.remove()
} }
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Type Deleted Successfully", message: 'Work Order Type Deleted Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order Type", title: 'Error Deleting Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order Type", title: 'Delete Work Order Type',
message: `Are you sure you want to delete this work order type?<br /> message: `Are you sure you want to delete this work order type?<br />
Note that no work orders will be removed.`, Note that no work orders will be removed.`,
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order Type", text: 'Yes, Delete Work Order Type',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}; }
const moveWorkOrderType = (clickEvent: MouseEvent) => { const moveWorkOrderType = (clickEvent: MouseEvent) => {
const buttonElement = clickEvent.currentTarget as HTMLButtonElement; const buttonElement = clickEvent.currentTarget as HTMLButtonElement
const tableRowElement = buttonElement.closest("tr")!; const tableRowElement = buttonElement.closest('tr')!
const workOrderTypeId = tableRowElement.dataset.workOrderTypeId; const workOrderTypeId = tableRowElement.dataset.workOrderTypeId
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + los.urlPrefix +
"/admin/" + '/admin/' +
(buttonElement.dataset.direction === "up" ? "doMoveWorkOrderTypeUp" : "doMoveWorkOrderTypeDown"), (buttonElement.dataset.direction === 'up' ? 'doMoveWorkOrderTypeUp' : 'doMoveWorkOrderTypeDown'),
{ {
workOrderTypeId, workOrderTypeId,
moveToEnd: clickEvent.shiftKey ? "1" : "0" moveToEnd: clickEvent.shiftKey ? '1' : '0'
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderTypes?: recordTypes.WorkOrderType[]; workOrderTypes?: recordTypes.WorkOrderType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes!; workOrderTypes = responseJSON.workOrderTypes!
renderWorkOrderTypes(); renderWorkOrderTypes()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Moving Work Order Type", title: 'Error Moving Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const renderWorkOrderTypes = () => { const renderWorkOrderTypes = () => {
const containerElement = document.querySelector("#container--workOrderTypes") as HTMLTableSectionElement; const containerElement = document.querySelector('#container--workOrderTypes') as HTMLTableSectionElement
if (workOrderTypes.length === 0) { if (workOrderTypes.length === 0) {
containerElement.innerHTML = `<tr><td colspan="2"> containerElement.innerHTML = `<tr><td colspan="2">
<div class="message is-warning"><p class="message-body">There are no active work order types.</p></div> <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
</td></tr>`; </td></tr>`
return; return
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
for (const workOrderType of workOrderTypes) { for (const workOrderType of workOrderTypes) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.workOrderTypeId = workOrderType.workOrderTypeId!.toString(); tableRowElement.dataset.workOrderTypeId = workOrderType.workOrderTypeId!.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
"<form>" + '<form>' +
'<input name="workOrderTypeId" type="hidden" value="' + '<input name="workOrderTypeId" type="hidden" value="' +
workOrderType.workOrderTypeId!.toString() + workOrderType.workOrderTypeId!.toString() +
'" />' + '" />' +
('<div class="field has-addons">' + ('<div class="field has-addons">' +
'<div class="control">' + '<div class="control">' +
'<input class="input" name="workOrderType" type="text" value="' + '<input class="input" name="workOrderType" type="text" value="' +
cityssm.escapeHTML(workOrderType.workOrderType || "") + cityssm.escapeHTML(workOrderType.workOrderType || '') +
'" maxlength="100" aria-label="Work Order Type" required />' + '" maxlength="100" aria-label="Work Order Type" required />' +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' + '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</form>" + '</form>' +
"</td>" + '</td>' +
'<td class="is-nowrap">' + '<td class="is-nowrap">' +
'<div class="field is-grouped">' + '<div class="field is-grouped">' +
'<div class="control">' + '<div class="control">' +
los.getMoveUpDownButtonFieldHTML( los.getMoveUpDownButtonFieldHTML(
"button--moveWorkOrderTypeUp", 'button--moveWorkOrderTypeUp',
"button--moveWorkOrderTypeDown", 'button--moveWorkOrderTypeDown',
false false
) + ) +
"</div>" + '</div>' +
'<div class="control">' + '<div class="control">' +
'<button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">' + '<button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</td>"; '</td>'
tableRowElement.querySelector("form")!.addEventListener("submit", updateWorkOrderType); tableRowElement.querySelector('form')!.addEventListener('submit', updateWorkOrderType)
(tableRowElement.querySelector(".button--moveWorkOrderTypeUp") as HTMLButtonElement).addEventListener( ;(tableRowElement.querySelector('.button--moveWorkOrderTypeUp') as HTMLButtonElement).addEventListener(
"click", 'click',
moveWorkOrderType moveWorkOrderType
); )
( ;(tableRowElement.querySelector('.button--moveWorkOrderTypeDown') as HTMLButtonElement).addEventListener(
tableRowElement.querySelector(".button--moveWorkOrderTypeDown") as HTMLButtonElement 'click',
).addEventListener("click", moveWorkOrderType); moveWorkOrderType
)
tableRowElement tableRowElement
.querySelector(".button--deleteWorkOrderType")! .querySelector('.button--deleteWorkOrderType')!
.addEventListener("click", deleteWorkOrderType); .addEventListener('click', deleteWorkOrderType)
containerElement.append(tableRowElement); containerElement.append(tableRowElement)
}
} }
};
(document.querySelector("#form--addWorkOrderType") as HTMLFormElement).addEventListener( ;(document.querySelector('#form--addWorkOrderType') as HTMLFormElement).addEventListener(
"submit", 'submit',
(submitEvent: SubmitEvent) => { (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
const formElement = submitEvent.currentTarget as HTMLFormElement; const formElement = submitEvent.currentTarget as HTMLFormElement
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/admin/doAddWorkOrderType", los.urlPrefix + '/admin/doAddWorkOrderType',
formElement, formElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderTypes?: recordTypes.WorkOrderType[]; workOrderTypes?: recordTypes.WorkOrderType[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderTypes = responseJSON.workOrderTypes!; workOrderTypes = responseJSON.workOrderTypes!
renderWorkOrderTypes(); renderWorkOrderTypes()
formElement.reset(); formElement.reset()
formElement.querySelector("input")!.focus(); formElement.querySelector('input')!.focus()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Work Order Type", title: 'Error Adding Work Order Type',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
); )
renderWorkOrderTypes(); renderWorkOrderTypes()

4
public-typescript/dashboard.js
View File

@ -3,8 +3,8 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const workOrderNumberCircleElements = document.querySelectorAll(".fa-circle[data-work-order-number"); const workOrderNumberCircleElements = document.querySelectorAll('.fa-circle[data-work-order-number');
for (const workOrderNumberCircleElement of workOrderNumberCircleElements) { for (const workOrderNumberCircleElement of workOrderNumberCircleElements) {
workOrderNumberCircleElement.style.color = los.getRandomColor(workOrderNumberCircleElement.dataset.workOrderNumber || ""); workOrderNumberCircleElement.style.color = los.getRandomColor(workOrderNumberCircleElement.dataset.workOrderNumber || '');
} }
})(); })();

16
public-typescript/dashboard.ts
View File

@ -1,17 +1,17 @@
/* eslint-disable unicorn/prefer-module */ /* eslint-disable unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const workOrderNumberCircleElements = document.querySelectorAll( const workOrderNumberCircleElements = document.querySelectorAll(
".fa-circle[data-work-order-number" '.fa-circle[data-work-order-number'
) as NodeListOf<HTMLElement>; ) as NodeListOf<HTMLElement>
for (const workOrderNumberCircleElement of workOrderNumberCircleElements) { for (const workOrderNumberCircleElement of workOrderNumberCircleElements) {
workOrderNumberCircleElement.style.color = los.getRandomColor( workOrderNumberCircleElement.style.color = los.getRandomColor(
workOrderNumberCircleElement.dataset.workOrderNumber || "" workOrderNumberCircleElement.dataset.workOrderNumber || ''
); )
} }
})(); })()

216
public-typescript/lotEdit.js
View File

@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
var _a; var _a;
const los = exports.los; const los = exports.los;
const lotId = document.querySelector("#lot--lotId").value; const lotId = document.querySelector('#lot--lotId')
const isCreate = lotId === ""; .value;
const isCreate = lotId === '';
// Main form // Main form
let refreshAfterSave = isCreate; let refreshAfterSave = isCreate;
const formElement = document.querySelector("#form--lot"); const formElement = document.querySelector('#form--lot');
function updateLot(formEvent) { function updateLot(formEvent) {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lots/" + (isCreate ? "doCreateLot" : "doUpdateLot"), formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lots/' + (isCreate ? 'doCreateLot' : 'doUpdateLot'), formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
los.clearUnsavedChanges(); los.clearUnsavedChanges();
if (isCreate || refreshAfterSave) { if (isCreate || refreshAfterSave) {
@ -19,30 +20,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
message: exports.aliases.lot + " Updated Successfully", message: exports.aliases.lot + ' Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.lot, title: 'Error Updating ' + exports.aliases.lot,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
formElement.addEventListener("submit", updateLot); formElement.addEventListener('submit', updateLot);
const formInputElements = formElement.querySelectorAll("input, select"); const formInputElements = formElement.querySelectorAll('input, select');
for (const formInputElement of formInputElements) { for (const formInputElement of formInputElements) {
formInputElement.addEventListener("change", los.setUnsavedChanges); formInputElement.addEventListener('change', los.setUnsavedChanges);
} }
los.initializeUnlockFieldButtons(formElement); los.initializeUnlockFieldButtons(formElement);
(_a = document.querySelector("#button--deleteLot")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", (clickEvent) => { (_a = document
.querySelector('#button--deleteLot')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lots/doDeleteLot", { cityssm.postJSON(los.urlPrefix + '/lots/doDeleteLot', {
lotId lotId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -52,16 +54,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Deleting ${los.escapedAliases.Lot}`, title: `Error Deleting ${los.escapedAliases.Lot}`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete " + exports.aliases.lot, title: 'Delete ' + exports.aliases.lot,
message: `Are you sure you want to delete this ${los.escapedAliases.lot}?`, message: `Are you sure you want to delete this ${los.escapedAliases.lot}?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${los.escapedAliases.Lot}`, text: `Yes, Delete ${los.escapedAliases.Lot}`,
callbackFunction: doDelete callbackFunction: doDelete
@ -69,17 +71,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
}); });
// Lot Type // Lot Type
const lotTypeIdElement = document.querySelector("#lot--lotTypeId"); const lotTypeIdElement = document.querySelector('#lot--lotTypeId');
if (isCreate) { if (isCreate) {
const lotFieldsContainerElement = document.querySelector("#container--lotFields"); const lotFieldsContainerElement = document.querySelector('#container--lotFields');
lotTypeIdElement.addEventListener("change", () => { lotTypeIdElement.addEventListener('change', () => {
if (lotTypeIdElement.value === "") { if (lotTypeIdElement.value === '') {
lotFieldsContainerElement.innerHTML = `<div class="message is-info"> lotFieldsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">Select the ${los.escapedAliases.lot} type to load the available fields.</p> <p class="message-body">Select the ${los.escapedAliases.lot} type to load the available fields.</p>
</div>`; </div>`;
return; return;
} }
cityssm.postJSON(los.urlPrefix + "/lots/doGetLotTypeFields", { cityssm.postJSON(los.urlPrefix + '/lots/doGetLotTypeFields', {
lotTypeId: lotTypeIdElement.value lotTypeId: lotTypeIdElement.value
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.lotTypeFields.length === 0) { if (responseJSON.lotTypeFields.length === 0) {
@ -88,41 +90,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
</div>`; </div>`;
return; return;
} }
lotFieldsContainerElement.innerHTML = ""; lotFieldsContainerElement.innerHTML = '';
let lotTypeFieldIds = ""; let lotTypeFieldIds = '';
for (const lotTypeField of responseJSON.lotTypeFields) { for (const lotTypeField of responseJSON.lotTypeFields) {
lotTypeFieldIds += "," + lotTypeField.lotTypeFieldId; lotTypeFieldIds += ',' + lotTypeField.lotTypeFieldId;
const fieldName = "lotFieldValue_" + lotTypeField.lotTypeFieldId; const fieldName = 'lotFieldValue_' + lotTypeField.lotTypeFieldId;
const fieldId = "lot--" + fieldName; const fieldId = 'lot--' + fieldName;
const fieldElement = document.createElement("div"); const fieldElement = document.createElement('div');
fieldElement.className = "field"; fieldElement.className = 'field';
fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label> fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label>
<div class="control"></div>`; <div class="control"></div>`;
fieldElement.querySelector("label").textContent = fieldElement.querySelector('label').textContent = lotTypeField.lotTypeField;
lotTypeField.lotTypeField; if (lotTypeField.lotTypeFieldValues === '') {
if (lotTypeField.lotTypeFieldValues === "") { const inputElement = document.createElement('input');
const inputElement = document.createElement("input"); inputElement.className = 'input';
inputElement.className = "input";
inputElement.id = fieldId; inputElement.id = fieldId;
inputElement.name = fieldName; inputElement.name = fieldName;
inputElement.type = "text"; inputElement.type = 'text';
inputElement.required = lotTypeField.isRequired; inputElement.required = lotTypeField.isRequired;
inputElement.minLength = lotTypeField.minimumLength; inputElement.minLength = lotTypeField.minimumLength;
inputElement.maxLength = lotTypeField.maximumLength; inputElement.maxLength = lotTypeField.maximumLength;
if (lotTypeField.pattern && lotTypeField.pattern !== "") { if (lotTypeField.pattern && lotTypeField.pattern !== '') {
inputElement.pattern = lotTypeField.pattern; inputElement.pattern = lotTypeField.pattern;
} }
fieldElement.querySelector(".control").append(inputElement); fieldElement.querySelector('.control').append(inputElement);
} }
else { else {
fieldElement.querySelector(".control").innerHTML = `<div class="select is-fullwidth"> fieldElement.querySelector('.control').innerHTML = `<div class="select is-fullwidth">
<select id="${fieldId}" name="${fieldName}"><option value="">(Not Set)</option></select> <select id="${fieldId}" name="${fieldName}"><option value="">(Not Set)</option></select>
</div>`; </div>`;
const selectElement = fieldElement.querySelector("select"); const selectElement = fieldElement.querySelector('select');
selectElement.required = lotTypeField.isRequired; selectElement.required = lotTypeField.isRequired;
const optionValues = lotTypeField.lotTypeFieldValues.split("\n"); const optionValues = lotTypeField.lotTypeFieldValues.split('\n');
for (const optionValue of optionValues) { for (const optionValue of optionValues) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = optionValue; optionElement.value = optionValue;
optionElement.textContent = optionValue; optionElement.textContent = optionValue;
selectElement.append(optionElement); selectElement.append(optionElement);
@ -130,28 +131,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
lotFieldsContainerElement.append(fieldElement); lotFieldsContainerElement.append(fieldElement);
} }
lotFieldsContainerElement.insertAdjacentHTML("beforeend", `<input name="lotTypeFieldIds" type="hidden" lotFieldsContainerElement.insertAdjacentHTML('beforeend', `<input name="lotTypeFieldIds" type="hidden"
value="${lotTypeFieldIds.slice(1)}" />`); value="${lotTypeFieldIds.slice(1)}" />`);
}); });
}); });
} }
else { else {
const originalLotTypeId = lotTypeIdElement.value; const originalLotTypeId = lotTypeIdElement.value;
lotTypeIdElement.addEventListener("change", () => { lotTypeIdElement.addEventListener('change', () => {
if (lotTypeIdElement.value !== originalLotTypeId) { if (lotTypeIdElement.value !== originalLotTypeId) {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Confirm Change", title: 'Confirm Change',
message: `Are you sure you want to change the ${los.escapedAliases.lot} type?\n message: `Are you sure you want to change the ${los.escapedAliases.lot} type?\n
This change affects the additional fields associated with this record.`, This change affects the additional fields associated with this record.`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Keep the Change", text: 'Yes, Keep the Change',
callbackFunction: () => { callbackFunction: () => {
refreshAfterSave = true; refreshAfterSave = true;
} }
}, },
cancelButton: { cancelButton: {
text: "Revert the Change", text: 'Revert the Change',
callbackFunction: () => { callbackFunction: () => {
lotTypeIdElement.value = originalLotTypeId; lotTypeIdElement.value = originalLotTypeId;
} }
@ -164,7 +165,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
let lotComments = exports.lotComments; let lotComments = exports.lotComments;
delete exports.lotComments; delete exports.lotComments;
function openEditLotComment(clickEvent) { function openEditLotComment(clickEvent) {
const lotCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotCommentId, 10); const lotCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.lotCommentId, 10);
const lotComment = lotComments.find((currentLotComment) => { const lotComment = lotComments.find((currentLotComment) => {
return currentLotComment.lotCommentId === lotCommentId; return currentLotComment.lotCommentId === lotCommentId;
}); });
@ -172,7 +174,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
let editCloseModalFunction; let editCloseModalFunction;
const editComment = (submitEvent) => { const editComment = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lots/doUpdateLotComment", editFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lots/doUpdateLotComment', editFormElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotComments = responseJSON.lotComments; lotComments = responseJSON.lotComments;
editCloseModalFunction(); editCloseModalFunction();
@ -180,37 +182,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Comment", title: 'Error Updating Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lot-editComment", { cityssm.openHtmlModal('lot-editComment', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotCommentEdit--lotId").value = lotId; modalElement.querySelector('#lotCommentEdit--lotId').value = lotId;
modalElement.querySelector("#lotCommentEdit--lotCommentId").value = modalElement.querySelector('#lotCommentEdit--lotCommentId').value = lotCommentId.toString();
lotCommentId.toString(); modalElement.querySelector('#lotCommentEdit--lotComment').value = lotComment.lotComment;
modalElement.querySelector("#lotCommentEdit--lotComment").value = const lotCommentDateStringElement = modalElement.querySelector('#lotCommentEdit--lotCommentDateString');
lotComment.lotComment;
const lotCommentDateStringElement = modalElement.querySelector("#lotCommentEdit--lotCommentDateString");
lotCommentDateStringElement.value = lotComment.lotCommentDateString; lotCommentDateStringElement.value = lotComment.lotCommentDateString;
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date());
lotCommentDateStringElement.max = lotCommentDateStringElement.max =
lotComment.lotCommentDateString <= currentDateString lotComment.lotCommentDateString <= currentDateString
? currentDateString ? currentDateString
: lotComment.lotCommentDateString; : lotComment.lotCommentDateString;
modalElement.querySelector("#lotCommentEdit--lotCommentTimeString").value = lotComment.lotCommentTimeString; modalElement.querySelector('#lotCommentEdit--lotCommentTimeString').value = lotComment.lotCommentTimeString;
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement);
// los.initializeTimePickers(modalElement); modalElement.querySelector('#lotCommentEdit--lotComment').focus();
modalElement.querySelector("#lotCommentEdit--lotComment").focus(); editFormElement = modalElement.querySelector('form');
editFormElement = modalElement.querySelector("form"); editFormElement.addEventListener('submit', editComment);
editFormElement.addEventListener("submit", editComment);
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
}, },
onremoved: () => { onremoved: () => {
@ -219,9 +218,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
function deleteLotComment(clickEvent) { function deleteLotComment(clickEvent) {
const lotCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotCommentId, 10); const lotCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.lotCommentId, 10);
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lots/doDeleteLotComment", { cityssm.postJSON(los.urlPrefix + '/lots/doDeleteLotComment', {
lotId, lotId,
lotCommentId lotCommentId
}, (responseJSON) => { }, (responseJSON) => {
@ -231,33 +231,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing Comment", title: 'Error Removing Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove Comment?", title: 'Remove Comment?',
message: "Are you sure you want to remove this comment?", message: 'Are you sure you want to remove this comment?',
okButton: { okButton: {
text: "Yes, Remove Comment", text: 'Yes, Remove Comment',
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); });
} }
function renderLotComments() { function renderLotComments() {
const containerElement = document.querySelector("#container--lotComments"); const containerElement = document.querySelector('#container--lotComments');
if (lotComments.length === 0) { if (lotComments.length === 0) {
containerElement.innerHTML = `<div class="message is-info"> containerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no comments to display.</p> <p class="message-body">There are no comments to display.</p>
</div>`; </div>`;
return; return;
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table');
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable';
tableElement.innerHTML = `<thead><tr> tableElement.innerHTML = `<thead><tr>
<th>Commentor</th> <th>Commentor</th>
<th>Comment Date</th> <th>Comment Date</th>
@ -266,42 +266,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
</tr></thead> </tr></thead>
<tbody></tbody>`; <tbody></tbody>`;
for (const lotComment of lotComments) { for (const lotComment of lotComments) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotCommentId = lotComment.lotCommentId.toString(); tableRowElement.dataset.lotCommentId = lotComment.lotCommentId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(lotComment.recordCreate_userName || "") + cityssm.escapeHTML(lotComment.recordCreate_userName || '') +
"</td>" + '</td>' +
"<td>" + '<td>' +
lotComment.lotCommentDateString + lotComment.lotCommentDateString +
(lotComment.lotCommentTime === 0 ? "" : " " + lotComment.lotCommentTimeString) + (lotComment.lotCommentTime === 0
"</td>" + ? ''
"<td>" + : ' ' + lotComment.lotCommentTimeString) +
cityssm.escapeHTML(lotComment.lotComment || "") + '</td>' +
"</td>" + '<td>' +
cityssm.escapeHTML(lotComment.lotComment || '') +
'</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>');
tableRowElement.querySelector(".button--edit").addEventListener("click", openEditLotComment); tableRowElement
tableRowElement.querySelector(".button--delete").addEventListener("click", deleteLotComment); .querySelector('.button--edit')
tableElement.querySelector("tbody").append(tableRowElement); .addEventListener('click', openEditLotComment);
tableRowElement
.querySelector('.button--delete')
.addEventListener('click', deleteLotComment);
tableElement.querySelector('tbody').append(tableRowElement);
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
containerElement.append(tableElement); containerElement.append(tableElement);
} }
function openAddCommentModal() { function openAddCommentModal() {
let addCommentCloseModalFunction; let addCommentCloseModalFunction;
const doAddComment = (formEvent) => { const doAddComment = (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lots/doAddLotComment", formEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lots/doAddLotComment', formEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotComments = responseJSON.lotComments; lotComments = responseJSON.lotComments;
renderLotComments(); renderLotComments();
@ -309,25 +315,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
}); });
}; };
cityssm.openHtmlModal("lot-addComment", { cityssm.openHtmlModal('lot-addComment', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotCommentAdd--lotId").value = lotId; modalElement.querySelector('#lotCommentAdd--lotId').value = lotId;
modalElement.querySelector("form").addEventListener("submit", doAddComment); modalElement
.querySelector('form')
.addEventListener('submit', doAddComment);
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
addCommentCloseModalFunction = closeModalFunction; addCommentCloseModalFunction = closeModalFunction;
modalElement.querySelector("#lotCommentAdd--lotComment").focus(); modalElement.querySelector('#lotCommentAdd--lotComment').focus();
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
document.querySelector("#lotComments--add").focus(); document.querySelector('#lotComments--add').focus();
} }
}); });
} }
if (!isCreate) { if (!isCreate) {
document.querySelector("#lotComments--add").addEventListener("click", openAddCommentModal); document
.querySelector('#lotComments--add')
.addEventListener('click', openAddCommentModal);
renderLotComments(); renderLotComments();
} }
})(); })();

481
public-typescript/lotEdit.ts
View File

@ -1,119 +1,130 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const lotId = (document.querySelector("#lot--lotId") as HTMLInputElement).value; const lotId = (document.querySelector('#lot--lotId') as HTMLInputElement)
const isCreate = lotId === ""; .value
const isCreate = lotId === ''
// Main form // Main form
let refreshAfterSave = isCreate; let refreshAfterSave = isCreate
const formElement = document.querySelector("#form--lot") as HTMLFormElement; const formElement = document.querySelector('#form--lot') as HTMLFormElement
function updateLot(formEvent: SubmitEvent) { function updateLot(formEvent: SubmitEvent) {
formEvent.preventDefault(); formEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/" + (isCreate ? "doCreateLot" : "doUpdateLot"), los.urlPrefix + '/lots/' + (isCreate ? 'doCreateLot' : 'doUpdateLot'),
formElement, formElement,
(responseJSON: { success: boolean; lotId?: number; errorMessage?: string }) => { (responseJSON: {
success: boolean
lotId?: number
errorMessage?: string
}) => {
if (responseJSON.success) { if (responseJSON.success) {
los.clearUnsavedChanges(); los.clearUnsavedChanges()
if (isCreate || refreshAfterSave) { if (isCreate || refreshAfterSave) {
window.location.href = los.getLotURL(responseJSON.lotId, true, true); window.location.href = los.getLotURL(responseJSON.lotId, true, true)
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
message: exports.aliases.lot + " Updated Successfully", message: exports.aliases.lot + ' Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} }
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.lot, title: 'Error Updating ' + exports.aliases.lot,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
formElement.addEventListener("submit", updateLot); formElement.addEventListener('submit', updateLot)
const formInputElements = formElement.querySelectorAll("input, select"); const formInputElements = formElement.querySelectorAll('input, select')
for (const formInputElement of formInputElements) { for (const formInputElement of formInputElements) {
formInputElement.addEventListener("change", los.setUnsavedChanges); formInputElement.addEventListener('change', los.setUnsavedChanges)
} }
los.initializeUnlockFieldButtons(formElement); los.initializeUnlockFieldButtons(formElement)
document.querySelector("#button--deleteLot")?.addEventListener("click", (clickEvent) => { document
clickEvent.preventDefault(); .querySelector('#button--deleteLot')
?.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault()
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doDeleteLot", los.urlPrefix + '/lots/doDeleteLot',
{ {
lotId lotId
}, },
(responseJSON: { success: boolean; errorMessage?: string }) => { (responseJSON: { success: boolean; errorMessage?: string }) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
window.location.href = los.getLotURL(); window.location.href = los.getLotURL()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Deleting ${los.escapedAliases.Lot}`, title: `Error Deleting ${los.escapedAliases.Lot}`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete " + exports.aliases.lot, title: 'Delete ' + exports.aliases.lot,
message: `Are you sure you want to delete this ${los.escapedAliases.lot}?`, message: `Are you sure you want to delete this ${los.escapedAliases.lot}?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${los.escapedAliases.Lot}`, text: `Yes, Delete ${los.escapedAliases.Lot}`,
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}); })
// Lot Type // Lot Type
const lotTypeIdElement = document.querySelector("#lot--lotTypeId") as HTMLSelectElement; const lotTypeIdElement = document.querySelector(
'#lot--lotTypeId'
) as HTMLSelectElement
if (isCreate) { if (isCreate) {
const lotFieldsContainerElement = document.querySelector("#container--lotFields") as HTMLElement; const lotFieldsContainerElement = document.querySelector(
'#container--lotFields'
) as HTMLElement
lotTypeIdElement.addEventListener("change", () => { lotTypeIdElement.addEventListener('change', () => {
if (lotTypeIdElement.value === "") { if (lotTypeIdElement.value === '') {
lotFieldsContainerElement.innerHTML = `<div class="message is-info"> lotFieldsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">Select the ${los.escapedAliases.lot} type to load the available fields.</p> <p class="message-body">Select the ${los.escapedAliases.lot} type to load the available fields.</p>
</div>`; </div>`
return; return
} }
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doGetLotTypeFields", los.urlPrefix + '/lots/doGetLotTypeFields',
{ {
lotTypeId: lotTypeIdElement.value lotTypeId: lotTypeIdElement.value
}, },
@ -121,341 +132,389 @@ declare const bulmaJS: BulmaJS;
if (responseJSON.lotTypeFields.length === 0) { if (responseJSON.lotTypeFields.length === 0) {
lotFieldsContainerElement.innerHTML = `<div class="message is-info"> lotFieldsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no additional fields for this ${los.escapedAliases.lot} type.</p> <p class="message-body">There are no additional fields for this ${los.escapedAliases.lot} type.</p>
</div>`; </div>`
return; return
} }
lotFieldsContainerElement.innerHTML = ""; lotFieldsContainerElement.innerHTML = ''
let lotTypeFieldIds = ""; let lotTypeFieldIds = ''
for (const lotTypeField of responseJSON.lotTypeFields) { for (const lotTypeField of responseJSON.lotTypeFields) {
lotTypeFieldIds += "," + lotTypeField.lotTypeFieldId; lotTypeFieldIds += ',' + lotTypeField.lotTypeFieldId
const fieldName = "lotFieldValue_" + lotTypeField.lotTypeFieldId; const fieldName = 'lotFieldValue_' + lotTypeField.lotTypeFieldId
const fieldId = "lot--" + fieldName; const fieldId = 'lot--' + fieldName
const fieldElement = document.createElement("div"); const fieldElement = document.createElement('div')
fieldElement.className = "field"; fieldElement.className = 'field'
fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label> fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label>
<div class="control"></div>`; <div class="control"></div>`
(fieldElement.querySelector("label") as HTMLLabelElement).textContent = ;(
lotTypeField.lotTypeField as string; fieldElement.querySelector('label') as HTMLLabelElement
).textContent = lotTypeField.lotTypeField as string
if (lotTypeField.lotTypeFieldValues === "") { if (lotTypeField.lotTypeFieldValues === '') {
const inputElement = document.createElement("input"); const inputElement = document.createElement('input')
inputElement.className = "input"; inputElement.className = 'input'
inputElement.id = fieldId; inputElement.id = fieldId
inputElement.name = fieldName; inputElement.name = fieldName
inputElement.type = "text"; inputElement.type = 'text'
inputElement.required = lotTypeField.isRequired as boolean; inputElement.required = lotTypeField.isRequired as boolean
inputElement.minLength = lotTypeField.minimumLength as number; inputElement.minLength = lotTypeField.minimumLength as number
inputElement.maxLength = lotTypeField.maximumLength as number; inputElement.maxLength = lotTypeField.maximumLength as number
if (lotTypeField.pattern && lotTypeField.pattern !== "") { if (lotTypeField.pattern && lotTypeField.pattern !== '') {
inputElement.pattern = lotTypeField.pattern; inputElement.pattern = lotTypeField.pattern
} }
fieldElement.querySelector(".control")!.append(inputElement); fieldElement.querySelector('.control')!.append(inputElement)
} else { } else {
fieldElement.querySelector( fieldElement.querySelector(
".control" '.control'
)!.innerHTML = `<div class="select is-fullwidth"> )!.innerHTML = `<div class="select is-fullwidth">
<select id="${fieldId}" name="${fieldName}"><option value="">(Not Set)</option></select> <select id="${fieldId}" name="${fieldName}"><option value="">(Not Set)</option></select>
</div>`; </div>`
const selectElement = fieldElement.querySelector("select") as HTMLSelectElement; const selectElement = fieldElement.querySelector(
'select'
) as HTMLSelectElement
selectElement.required = lotTypeField.isRequired as boolean; selectElement.required = lotTypeField.isRequired as boolean
const optionValues = (lotTypeField.lotTypeFieldValues as string).split("\n"); const optionValues = (
lotTypeField.lotTypeFieldValues as string
).split('\n')
for (const optionValue of optionValues) { for (const optionValue of optionValues) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = optionValue; optionElement.value = optionValue
optionElement.textContent = optionValue; optionElement.textContent = optionValue
selectElement.append(optionElement); selectElement.append(optionElement)
} }
} }
lotFieldsContainerElement.append(fieldElement); lotFieldsContainerElement.append(fieldElement)
} }
lotFieldsContainerElement.insertAdjacentHTML( lotFieldsContainerElement.insertAdjacentHTML(
"beforeend", 'beforeend',
`<input name="lotTypeFieldIds" type="hidden" `<input name="lotTypeFieldIds" type="hidden"
value="${lotTypeFieldIds.slice(1)}" />` value="${lotTypeFieldIds.slice(1)}" />`
); )
} }
); )
}); })
} else { } else {
const originalLotTypeId = lotTypeIdElement.value; const originalLotTypeId = lotTypeIdElement.value
lotTypeIdElement.addEventListener("change", () => { lotTypeIdElement.addEventListener('change', () => {
if (lotTypeIdElement.value !== originalLotTypeId) { if (lotTypeIdElement.value !== originalLotTypeId) {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Confirm Change", title: 'Confirm Change',
message: `Are you sure you want to change the ${los.escapedAliases.lot} type?\n message: `Are you sure you want to change the ${los.escapedAliases.lot} type?\n
This change affects the additional fields associated with this record.`, This change affects the additional fields associated with this record.`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Keep the Change", text: 'Yes, Keep the Change',
callbackFunction: () => { callbackFunction: () => {
refreshAfterSave = true; refreshAfterSave = true
} }
}, },
cancelButton: { cancelButton: {
text: "Revert the Change", text: 'Revert the Change',
callbackFunction: () => { callbackFunction: () => {
lotTypeIdElement.value = originalLotTypeId; lotTypeIdElement.value = originalLotTypeId
} }
} }
}); })
} }
}); })
} }
// Comments // Comments
let lotComments: recordTypes.LotComment[] = exports.lotComments; let lotComments: recordTypes.LotComment[] = exports.lotComments
delete exports.lotComments; delete exports.lotComments
function openEditLotComment(clickEvent: Event) { function openEditLotComment(clickEvent: Event) {
const lotCommentId = Number.parseInt( const lotCommentId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotCommentId!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.lotCommentId!,
10 10
); )
const lotComment = lotComments.find((currentLotComment) => { const lotComment = lotComments.find((currentLotComment) => {
return currentLotComment.lotCommentId === lotCommentId; return currentLotComment.lotCommentId === lotCommentId
})!; })!
let editFormElement: HTMLFormElement; let editFormElement: HTMLFormElement
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
const editComment = (submitEvent: SubmitEvent) => { const editComment = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doUpdateLotComment", los.urlPrefix + '/lots/doUpdateLotComment',
editFormElement, editFormElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotComments?: recordTypes.LotComment[]; lotComments?: recordTypes.LotComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotComments = responseJSON.lotComments!; lotComments = responseJSON.lotComments!
editCloseModalFunction(); editCloseModalFunction()
renderLotComments(); renderLotComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Comment", title: 'Error Updating Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lot-editComment", { cityssm.openHtmlModal('lot-editComment', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
(modalElement.querySelector("#lotCommentEdit--lotId") as HTMLInputElement).value = lotId; ;(
modalElement.querySelector(
'#lotCommentEdit--lotId'
) as HTMLInputElement
).value = lotId
(modalElement.querySelector("#lotCommentEdit--lotCommentId") as HTMLInputElement).value = ;(
lotCommentId.toString(); modalElement.querySelector(
'#lotCommentEdit--lotCommentId'
) as HTMLInputElement
).value = lotCommentId.toString()
(modalElement.querySelector("#lotCommentEdit--lotComment") as HTMLInputElement).value = ;(
lotComment.lotComment!; modalElement.querySelector(
'#lotCommentEdit--lotComment'
) as HTMLInputElement
).value = lotComment.lotComment!
const lotCommentDateStringElement = modalElement.querySelector( const lotCommentDateStringElement = modalElement.querySelector(
"#lotCommentEdit--lotCommentDateString" '#lotCommentEdit--lotCommentDateString'
) as HTMLInputElement; ) as HTMLInputElement
lotCommentDateStringElement.value = lotComment.lotCommentDateString!; lotCommentDateStringElement.value = lotComment.lotCommentDateString!
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date())
lotCommentDateStringElement.max = lotCommentDateStringElement.max =
lotComment.lotCommentDateString! <= currentDateString lotComment.lotCommentDateString! <= currentDateString
? currentDateString ? currentDateString
: lotComment.lotCommentDateString!; : lotComment.lotCommentDateString!
( ;(
modalElement.querySelector("#lotCommentEdit--lotCommentTimeString") as HTMLInputElement modalElement.querySelector(
).value = lotComment.lotCommentTimeString!; '#lotCommentEdit--lotCommentTimeString'
) as HTMLInputElement
).value = lotComment.lotCommentTimeString!
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement)
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
(modalElement.querySelector("#lotCommentEdit--lotComment") as HTMLTextAreaElement).focus(); ;(
modalElement.querySelector(
'#lotCommentEdit--lotComment'
) as HTMLTextAreaElement
).focus()
editFormElement = modalElement.querySelector("form")!; editFormElement = modalElement.querySelector('form')!
editFormElement.addEventListener("submit", editComment); editFormElement.addEventListener('submit', editComment)
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
} }
function deleteLotComment(clickEvent: Event) { function deleteLotComment(clickEvent: Event) {
const lotCommentId = Number.parseInt( const lotCommentId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotCommentId!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.lotCommentId!,
10 10
); )
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doDeleteLotComment", los.urlPrefix + '/lots/doDeleteLotComment',
{ {
lotId, lotId,
lotCommentId lotCommentId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotComments: recordTypes.LotComment[]; lotComments: recordTypes.LotComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotComments = responseJSON.lotComments; lotComments = responseJSON.lotComments
renderLotComments(); renderLotComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing Comment", title: 'Error Removing Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove Comment?", title: 'Remove Comment?',
message: "Are you sure you want to remove this comment?", message: 'Are you sure you want to remove this comment?',
okButton: { okButton: {
text: "Yes, Remove Comment", text: 'Yes, Remove Comment',
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); })
} }
function renderLotComments() { function renderLotComments() {
const containerElement = document.querySelector("#container--lotComments") as HTMLElement; const containerElement = document.querySelector(
'#container--lotComments'
) as HTMLElement
if (lotComments.length === 0) { if (lotComments.length === 0) {
containerElement.innerHTML = `<div class="message is-info"> containerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no comments to display.</p> <p class="message-body">There are no comments to display.</p>
</div>`; </div>`
return; return
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table')
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable'
tableElement.innerHTML = `<thead><tr> tableElement.innerHTML = `<thead><tr>
<th>Commentor</th> <th>Commentor</th>
<th>Comment Date</th> <th>Comment Date</th>
<th>Comment</th> <th>Comment</th>
<th class="is-hidden-print"><span class="is-sr-only">Options</span></th> <th class="is-hidden-print"><span class="is-sr-only">Options</span></th>
</tr></thead> </tr></thead>
<tbody></tbody>`; <tbody></tbody>`
for (const lotComment of lotComments) { for (const lotComment of lotComments) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.lotCommentId = lotComment.lotCommentId!.toString(); tableRowElement.dataset.lotCommentId = lotComment.lotCommentId!.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(lotComment.recordCreate_userName || "") + cityssm.escapeHTML(lotComment.recordCreate_userName || '') +
"</td>" + '</td>' +
"<td>" + '<td>' +
lotComment.lotCommentDateString + lotComment.lotCommentDateString +
(lotComment.lotCommentTime === 0 ? "" : " " + lotComment.lotCommentTimeString) + (lotComment.lotCommentTime === 0
"</td>" + ? ''
"<td>" + : ' ' + lotComment.lotCommentTimeString) +
cityssm.escapeHTML(lotComment.lotComment || "") + '</td>' +
"</td>" + '<td>' +
cityssm.escapeHTML(lotComment.lotComment || '') +
'</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>')
tableRowElement.querySelector(".button--edit")!.addEventListener("click", openEditLotComment); tableRowElement
.querySelector('.button--edit')!
.addEventListener('click', openEditLotComment)
tableRowElement.querySelector(".button--delete")!.addEventListener("click", deleteLotComment); tableRowElement
.querySelector('.button--delete')!
.addEventListener('click', deleteLotComment)
tableElement.querySelector("tbody")!.append(tableRowElement); tableElement.querySelector('tbody')!.append(tableRowElement)
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
containerElement.append(tableElement); containerElement.append(tableElement)
} }
function openAddCommentModal() { function openAddCommentModal() {
let addCommentCloseModalFunction: () => void; let addCommentCloseModalFunction: () => void
const doAddComment = (formEvent: SubmitEvent) => { const doAddComment = (formEvent: SubmitEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doAddLotComment", los.urlPrefix + '/lots/doAddLotComment',
formEvent.currentTarget, formEvent.currentTarget,
(responseJSON: { success: boolean; lotComments?: recordTypes.LotComment[] }) => { (responseJSON: {
success: boolean
lotComments?: recordTypes.LotComment[]
}) => {
if (responseJSON.success) { if (responseJSON.success) {
lotComments = responseJSON.lotComments!; lotComments = responseJSON.lotComments!
renderLotComments(); renderLotComments()
addCommentCloseModalFunction(); addCommentCloseModalFunction()
} }
} }
); )
}; }
cityssm.openHtmlModal("lot-addComment", { cityssm.openHtmlModal('lot-addComment', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement)
(modalElement.querySelector("#lotCommentAdd--lotId") as HTMLInputElement).value = lotId; ;(
modalElement.querySelector("form")!.addEventListener("submit", doAddComment); modalElement.querySelector(
'#lotCommentAdd--lotId'
) as HTMLInputElement
).value = lotId
modalElement
.querySelector('form')!
.addEventListener('submit', doAddComment)
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
addCommentCloseModalFunction = closeModalFunction; addCommentCloseModalFunction = closeModalFunction
(modalElement.querySelector("#lotCommentAdd--lotComment") as HTMLTextAreaElement).focus(); ;(
modalElement.querySelector(
'#lotCommentAdd--lotComment'
) as HTMLTextAreaElement
).focus()
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
(document.querySelector("#lotComments--add") as HTMLButtonElement).focus(); ;(
document.querySelector('#lotComments--add') as HTMLButtonElement
).focus()
} }
}); })
} }
if (!isCreate) { if (!isCreate) {
document.querySelector("#lotComments--add")!.addEventListener("click", openAddCommentModal); document
renderLotComments(); .querySelector('#lotComments--add')!
.addEventListener('click', openAddCommentModal)
renderLotComments()
} }
})(); })()

1009
public-typescript/lotOccupancyEdit.js
View File

File diff suppressed because it is too large Load Diff

306
public-typescript/lotOccupancyEdit/lotOccupancyEdit.js
View File

@ -4,17 +4,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
var _a, _b, _c; var _a, _b, _c;
const los = exports.los; const los = exports.los;
const lotOccupancyId = document.querySelector("#lotOccupancy--lotOccupancyId") const lotOccupancyId = document.querySelector('#lotOccupancy--lotOccupancyId').value;
.value; const isCreate = lotOccupancyId === '';
const isCreate = lotOccupancyId === "";
/* /*
* Main form * Main form
*/ */
let refreshAfterSave = isCreate; let refreshAfterSave = isCreate;
const formElement = document.querySelector("#form--lotOccupancy"); const formElement = document.querySelector('#form--lotOccupancy');
formElement.addEventListener("submit", (formEvent) => { formElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/" + (isCreate ? "doCreateLotOccupancy" : "doUpdateLotOccupancy"), formElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix +
'/lotOccupancies/' +
(isCreate ? 'doCreateLotOccupancy' : 'doUpdateLotOccupancy'), formElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
los.clearUnsavedChanges(); los.clearUnsavedChanges();
if (isCreate || refreshAfterSave) { if (isCreate || refreshAfterSave) {
@ -23,25 +24,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
else { else {
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Occupancy} Updated Successfully`, message: `${los.escapedAliases.Occupancy} Updated Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Saving " + exports.aliases.occupancy, title: 'Error Saving ' + exports.aliases.occupancy,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}); });
const formInputElements = formElement.querySelectorAll("input, select"); const formInputElements = formElement.querySelectorAll('input, select');
for (const formInputElement of formInputElements) { for (const formInputElement of formInputElements) {
formInputElement.addEventListener("change", los.setUnsavedChanges); formInputElement.addEventListener('change', los.setUnsavedChanges);
} }
const doCopy = () => { const doCopy = () => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doCopyLotOccupancy", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doCopyLotOccupancy', {
lotOccupancyId lotOccupancyId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -50,38 +51,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Copying Record", title: 'Error Copying Record',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
(_a = document.querySelector("#button--copyLotOccupancy")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", (clickEvent) => { (_a = document
.querySelector('#button--copyLotOccupancy')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
if (los.hasUnsavedChanges()) { if (los.hasUnsavedChanges()) {
bulmaJS.alert({ bulmaJS.alert({
title: "Unsaved Changes", title: 'Unsaved Changes',
message: "Please save all unsaved changes before continuing.", message: 'Please save all unsaved changes before continuing.',
contextualColorName: "warning" contextualColorName: 'warning'
}); });
} }
else { else {
bulmaJS.confirm({ bulmaJS.confirm({
title: `Copy ${los.escapedAliases.Occupancy} Record as New`, title: `Copy ${los.escapedAliases.Occupancy} Record as New`,
message: "Are you sure you want to copy this record to a new record?", message: 'Are you sure you want to copy this record to a new record?',
contextualColorName: "info", contextualColorName: 'info',
okButton: { okButton: {
text: "Yes, Copy", text: 'Yes, Copy',
callbackFunction: doCopy callbackFunction: doCopy
} }
}); });
} }
}); });
(_b = document.querySelector("#button--deleteLotOccupancy")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", (clickEvent) => { (_b = document
.querySelector('#button--deleteLotOccupancy')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancy", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancy', {
lotOccupancyId lotOccupancyId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -90,65 +93,69 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Record", title: 'Error Deleting Record',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete " + exports.aliases.occupancy + " Record", title: 'Delete ' + exports.aliases.occupancy + ' Record',
message: "Are you sure you want to delete this record?", message: 'Are you sure you want to delete this record?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete", text: 'Yes, Delete',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
}); });
(_c = document.querySelector("#button--createWorkOrder")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", (clickEvent) => { (_c = document
.querySelector('#button--createWorkOrder')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
let createCloseModalFunction; let createCloseModalFunction;
const doCreate = (formEvent) => { const doCreate = (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/workOrders/doCreateWorkOrder", formEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doCreateWorkOrder', formEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
createCloseModalFunction(); createCloseModalFunction();
bulmaJS.confirm({ bulmaJS.confirm({
title: "Work Order Created Successfully", title: 'Work Order Created Successfully',
message: "Would you like to open the work order now?", message: 'Would you like to open the work order now?',
contextualColorName: "success", contextualColorName: 'success',
okButton: { okButton: {
text: "Yes, Open the Work Order", text: 'Yes, Open the Work Order',
callbackFunction: () => { callbackFunction: () => {
window.location.href = window.location.href =
los.urlPrefix + "/workOrders/" + responseJSON.workOrderId + "/edit"; los.urlPrefix +
'/workOrders/' +
responseJSON.workOrderId +
'/edit';
} }
} }
}); });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Creating Work Order", title: 'Error Creating Work Order',
message: responseJSON.errorMessage, message: responseJSON.errorMessage,
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-createWorkOrder", { cityssm.openHtmlModal('lotOccupancy-createWorkOrder', {
onshow(modalElement) { onshow(modalElement) {
modalElement.querySelector("#workOrderCreate--lotOccupancyId").value = ;
lotOccupancyId; modalElement.querySelector('#workOrderCreate--lotOccupancyId').value = lotOccupancyId;
modalElement.querySelector("#workOrderCreate--workOrderOpenDateString").value = cityssm.dateToString(new Date()); modalElement.querySelector('#workOrderCreate--workOrderOpenDateString').value = cityssm.dateToString(new Date());
const workOrderTypeSelectElement = modalElement.querySelector("#workOrderCreate--workOrderTypeId"); const workOrderTypeSelectElement = modalElement.querySelector('#workOrderCreate--workOrderTypeId');
const workOrderTypes = exports.workOrderTypes; const workOrderTypes = exports.workOrderTypes;
if (workOrderTypes.length === 1) { if (workOrderTypes.length === 1) {
workOrderTypeSelectElement.innerHTML = ""; workOrderTypeSelectElement.innerHTML = '';
} }
for (const workOrderType of workOrderTypes) { for (const workOrderType of workOrderTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = workOrderType.workOrderTypeId.toString(); optionElement.value = workOrderType.workOrderTypeId.toString();
optionElement.textContent = workOrderType.workOrderType; optionElement.textContent = workOrderType.workOrderType;
workOrderTypeSelectElement.append(optionElement); workOrderTypeSelectElement.append(optionElement);
@ -157,22 +164,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
var _a; var _a;
createCloseModalFunction = closeModalFunction; createCloseModalFunction = closeModalFunction;
(_a = modalElement.querySelector("form")) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", doCreate); (_a = modalElement
.querySelector('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', doCreate);
} }
}); });
}); });
// Occupancy Type // Occupancy Type
const occupancyTypeIdElement = document.querySelector("#lotOccupancy--occupancyTypeId"); const occupancyTypeIdElement = document.querySelector('#lotOccupancy--occupancyTypeId');
if (isCreate) { if (isCreate) {
const lotOccupancyFieldsContainerElement = document.querySelector("#container--lotOccupancyFields"); const lotOccupancyFieldsContainerElement = document.querySelector('#container--lotOccupancyFields');
occupancyTypeIdElement.addEventListener("change", () => { occupancyTypeIdElement.addEventListener('change', () => {
if (occupancyTypeIdElement.value === "") { if (occupancyTypeIdElement.value === '') {
lotOccupancyFieldsContainerElement.innerHTML = `<div class="message is-info"> lotOccupancyFieldsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">Select the ${los.escapedAliases.occupancy} type to load the available fields.</p> <p class="message-body">Select the ${los.escapedAliases.occupancy} type to load the available fields.</p>
</div>`; </div>`;
return; return;
} }
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doGetOccupancyTypeFields", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doGetOccupancyTypeFields', {
occupancyTypeId: occupancyTypeIdElement.value occupancyTypeId: occupancyTypeIdElement.value
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.occupancyTypeFields.length === 0) { if (responseJSON.occupancyTypeFields.length === 0) {
@ -181,45 +189,51 @@ Object.defineProperty(exports, "__esModule", { value: true });
</div>`; </div>`;
return; return;
} }
lotOccupancyFieldsContainerElement.innerHTML = ""; lotOccupancyFieldsContainerElement.innerHTML = '';
let occupancyTypeFieldIds = ""; let occupancyTypeFieldIds = '';
for (const occupancyTypeField of responseJSON.occupancyTypeFields) { for (const occupancyTypeField of responseJSON.occupancyTypeFields) {
occupancyTypeFieldIds += "," + occupancyTypeField.occupancyTypeFieldId; occupancyTypeFieldIds +=
const fieldName = "lotOccupancyFieldValue_" + occupancyTypeField.occupancyTypeFieldId; ',' + occupancyTypeField.occupancyTypeFieldId;
const fieldId = "lotOccupancy--" + fieldName; const fieldName = 'lotOccupancyFieldValue_' +
const fieldElement = document.createElement("div"); occupancyTypeField.occupancyTypeFieldId;
fieldElement.className = "field"; const fieldId = 'lotOccupancy--' + fieldName;
const fieldElement = document.createElement('div');
fieldElement.className = 'field';
fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label><div class="control"></div>`; fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label><div class="control"></div>`;
fieldElement.querySelector("label").textContent = fieldElement.querySelector('label').textContent = occupancyTypeField.occupancyTypeField;
occupancyTypeField.occupancyTypeField; if (occupancyTypeField.occupancyTypeFieldValues === '') {
if (occupancyTypeField.occupancyTypeFieldValues === "") { const inputElement = document.createElement('input');
const inputElement = document.createElement("input"); inputElement.className = 'input';
inputElement.className = "input";
inputElement.id = fieldId; inputElement.id = fieldId;
inputElement.name = fieldName; inputElement.name = fieldName;
inputElement.type = "text"; inputElement.type = 'text';
inputElement.required = occupancyTypeField.isRequired; inputElement.required = occupancyTypeField.isRequired;
inputElement.minLength = occupancyTypeField.minimumLength; inputElement.minLength =
inputElement.maxLength = occupancyTypeField.maximumLength; occupancyTypeField.minimumLength;
if (occupancyTypeField.pattern && occupancyTypeField.pattern !== "") { inputElement.maxLength =
occupancyTypeField.maximumLength;
if (occupancyTypeField.pattern &&
occupancyTypeField.pattern !== '') {
inputElement.pattern = occupancyTypeField.pattern; inputElement.pattern = occupancyTypeField.pattern;
} }
fieldElement.querySelector(".control").append(inputElement); ;
fieldElement.querySelector('.control').append(inputElement);
} }
else { else {
fieldElement.querySelector(".control").innerHTML = ;
fieldElement.querySelector('.control').innerHTML =
'<div class="select is-fullwidth"><select id="' + '<div class="select is-fullwidth"><select id="' +
fieldId + fieldId +
'" name="' + '" name="' +
fieldName + fieldName +
'">' + '">' +
'<option value="">(Not Set)</option>' + '<option value="">(Not Set)</option>' +
"</select></div>"; '</select></div>';
const selectElement = fieldElement.querySelector("select"); const selectElement = fieldElement.querySelector('select');
selectElement.required = occupancyTypeField.isRequired; selectElement.required = occupancyTypeField.isRequired;
const optionValues = occupancyTypeField.occupancyTypeFieldValues.split("\n"); const optionValues = occupancyTypeField.occupancyTypeFieldValues.split('\n');
for (const optionValue of optionValues) { for (const optionValue of optionValues) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = optionValue; optionElement.value = optionValue;
optionElement.textContent = optionValue; optionElement.textContent = optionValue;
selectElement.append(optionElement); selectElement.append(optionElement);
@ -227,27 +241,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
lotOccupancyFieldsContainerElement.append(fieldElement); lotOccupancyFieldsContainerElement.append(fieldElement);
} }
lotOccupancyFieldsContainerElement.insertAdjacentHTML("beforeend", `<input name="occupancyTypeFieldIds" type="hidden" value="${occupancyTypeFieldIds.slice(1)}" />`); lotOccupancyFieldsContainerElement.insertAdjacentHTML('beforeend', `<input name="occupancyTypeFieldIds" type="hidden" value="${occupancyTypeFieldIds.slice(1)}" />`);
}); });
}); });
} }
else { else {
const originalOccupancyTypeId = occupancyTypeIdElement.value; const originalOccupancyTypeId = occupancyTypeIdElement.value;
occupancyTypeIdElement.addEventListener("change", () => { occupancyTypeIdElement.addEventListener('change', () => {
if (occupancyTypeIdElement.value !== originalOccupancyTypeId) { if (occupancyTypeIdElement.value !== originalOccupancyTypeId) {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Confirm Change", title: 'Confirm Change',
message: `Are you sure you want to change the ${los.escapedAliases.occupancy} type?\n message: `Are you sure you want to change the ${los.escapedAliases.occupancy} type?\n
This change affects the additional fields associated with this record, and may also affect the available fees.`, This change affects the additional fields associated with this record, and may also affect the available fees.`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Keep the Change", text: 'Yes, Keep the Change',
callbackFunction: () => { callbackFunction: () => {
refreshAfterSave = true; refreshAfterSave = true;
} }
}, },
cancelButton: { cancelButton: {
text: "Revert the Change", text: 'Revert the Change',
callbackFunction: () => { callbackFunction: () => {
occupancyTypeIdElement.value = originalOccupancyTypeId; occupancyTypeIdElement.value = originalOccupancyTypeId;
} }
@ -257,16 +271,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
}); });
} }
// Lot Selector // Lot Selector
const lotNameElement = document.querySelector("#lotOccupancy--lotName"); const lotNameElement = document.querySelector('#lotOccupancy--lotName');
lotNameElement.addEventListener("click", (clickEvent) => { lotNameElement.addEventListener('click', (clickEvent) => {
const currentLotName = clickEvent.currentTarget.value; const currentLotName = clickEvent.currentTarget.value;
let lotSelectCloseModalFunction; let lotSelectCloseModalFunction;
let lotSelectModalElement; let lotSelectModalElement;
let lotSelectFormElement; let lotSelectFormElement;
let lotSelectResultsElement; let lotSelectResultsElement;
const renderSelectedLotAndClose = (lotId, lotName) => { const renderSelectedLotAndClose = (lotId, lotName) => {
document.querySelector("#lotOccupancy--lotId").value = lotId.toString(); ;
document.querySelector("#lotOccupancy--lotName").value = lotName; document.querySelector('#lotOccupancy--lotId').value = lotId.toString();
document.querySelector('#lotOccupancy--lotName').value = lotName;
los.setUnsavedChanges(); los.setUnsavedChanges();
lotSelectCloseModalFunction(); lotSelectCloseModalFunction();
}; };
@ -276,64 +291,64 @@ Object.defineProperty(exports, "__esModule", { value: true });
renderSelectedLotAndClose(selectedLotElement.dataset.lotId, selectedLotElement.dataset.lotName); renderSelectedLotAndClose(selectedLotElement.dataset.lotId, selectedLotElement.dataset.lotName);
}; };
const searchLots = () => { const searchLots = () => {
lotSelectResultsElement.innerHTML = los.getLoadingParagraphHTML("Searching..."); lotSelectResultsElement.innerHTML =
cityssm.postJSON(los.urlPrefix + "/lots/doSearchLots", lotSelectFormElement, (responseJSON) => { los.getLoadingParagraphHTML('Searching...');
cityssm.postJSON(los.urlPrefix + '/lots/doSearchLots', lotSelectFormElement, (responseJSON) => {
if (responseJSON.count === 0) { if (responseJSON.count === 0) {
lotSelectResultsElement.innerHTML = `<div class="message is-info"> lotSelectResultsElement.innerHTML = `<div class="message is-info">
<p class="message-body">No results.</p> <p class="message-body">No results.</p>
</div>`; </div>`;
return; return;
} }
const panelElement = document.createElement("div"); const panelElement = document.createElement('div');
panelElement.className = "panel"; panelElement.className = 'panel';
for (const lot of responseJSON.lots) { for (const lot of responseJSON.lots) {
const panelBlockElement = document.createElement("a"); const panelBlockElement = document.createElement('a');
panelBlockElement.className = "panel-block is-block"; panelBlockElement.className = 'panel-block is-block';
panelBlockElement.href = "#"; panelBlockElement.href = '#';
panelBlockElement.dataset.lotId = lot.lotId.toString(); panelBlockElement.dataset.lotId = lot.lotId.toString();
panelBlockElement.dataset.lotName = lot.lotName; panelBlockElement.dataset.lotName = lot.lotName;
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="columns">' + '<div class="columns">' +
('<div class="column">' + ('<div class="column">' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"<br />" + '<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
cityssm.escapeHTML(lot.lotStatus) + cityssm.escapeHTML(lot.lotStatus) +
"<br />" + '<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
(lot.lotOccupancyCount > 0 ? "Currently Occupied" : "") + (lot.lotOccupancyCount > 0 ? 'Currently Occupied' : '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
"</div>"; '</div>';
panelBlockElement.addEventListener("click", selectExistingLot); panelBlockElement.addEventListener('click', selectExistingLot);
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement);
} }
lotSelectResultsElement.innerHTML = ""; lotSelectResultsElement.innerHTML = '';
lotSelectResultsElement.append(panelElement); lotSelectResultsElement.append(panelElement);
}); });
}; };
const createLotAndSelect = (submitEvent) => { const createLotAndSelect = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
const lotName = lotSelectModalElement.querySelector("#lotCreate--lotName") const lotName = lotSelectModalElement.querySelector('#lotCreate--lotName').value;
.value; cityssm.postJSON(los.urlPrefix + '/lots/doCreateLot', submitEvent.currentTarget, (responseJSON) => {
cityssm.postJSON(los.urlPrefix + "/lots/doCreateLot", submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
renderSelectedLotAndClose(responseJSON.lotId, lotName); renderSelectedLotAndClose(responseJSON.lotId, lotName);
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Creating ${los.escapedAliases.Lot}`, title: `Error Creating ${los.escapedAliases.Lot}`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-selectLot", { cityssm.openHtmlModal('lotOccupancy-selectLot', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
}, },
@ -343,87 +358,94 @@ Object.defineProperty(exports, "__esModule", { value: true });
lotSelectCloseModalFunction = closeModalFunction; lotSelectCloseModalFunction = closeModalFunction;
bulmaJS.init(modalElement); bulmaJS.init(modalElement);
// search Tab // search Tab
const lotNameFilterElement = modalElement.querySelector("#lotSelect--lotName"); const lotNameFilterElement = modalElement.querySelector('#lotSelect--lotName');
if (document.querySelector("#lotOccupancy--lotId").value !== "") { if (document.querySelector('#lotOccupancy--lotId')
.value !== '') {
lotNameFilterElement.value = currentLotName; lotNameFilterElement.value = currentLotName;
} }
lotNameFilterElement.focus(); lotNameFilterElement.focus();
lotNameFilterElement.addEventListener("change", searchLots); lotNameFilterElement.addEventListener('change', searchLots);
const occupancyStatusFilterElement = modalElement.querySelector("#lotSelect--occupancyStatus"); const occupancyStatusFilterElement = modalElement.querySelector('#lotSelect--occupancyStatus');
occupancyStatusFilterElement.addEventListener("change", searchLots); occupancyStatusFilterElement.addEventListener('change', searchLots);
if (currentLotName !== "") { if (currentLotName !== '') {
occupancyStatusFilterElement.value = ""; occupancyStatusFilterElement.value = '';
} }
lotSelectFormElement = modalElement.querySelector("#form--lotSelect"); lotSelectFormElement = modalElement.querySelector('#form--lotSelect');
lotSelectResultsElement = modalElement.querySelector("#resultsContainer--lotSelect"); lotSelectResultsElement = modalElement.querySelector('#resultsContainer--lotSelect');
lotSelectFormElement.addEventListener("submit", (submitEvent) => { lotSelectFormElement.addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
}); });
searchLots(); searchLots();
// Create Tab // Create Tab
if (exports.lotNamePattern) { if (exports.lotNamePattern) {
const regex = exports.lotNamePattern; const regex = exports.lotNamePattern;
modalElement.querySelector("#lotCreate--lotName").pattern = modalElement.querySelector('#lotCreate--lotName').pattern = regex.source;
regex.source;
} }
const lotTypeElement = modalElement.querySelector("#lotCreate--lotTypeId"); const lotTypeElement = modalElement.querySelector('#lotCreate--lotTypeId');
for (const lotType of exports.lotTypes) { for (const lotType of exports.lotTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotType.lotTypeId.toString(); optionElement.value = lotType.lotTypeId.toString();
optionElement.textContent = lotType.lotType; optionElement.textContent = lotType.lotType;
lotTypeElement.append(optionElement); lotTypeElement.append(optionElement);
} }
const lotStatusElement = modalElement.querySelector("#lotCreate--lotStatusId"); const lotStatusElement = modalElement.querySelector('#lotCreate--lotStatusId');
for (const lotStatus of exports.lotStatuses) { for (const lotStatus of exports.lotStatuses) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotStatus.lotStatusId.toString(); optionElement.value = lotStatus.lotStatusId.toString();
optionElement.textContent = lotStatus.lotStatus; optionElement.textContent = lotStatus.lotStatus;
lotStatusElement.append(optionElement); lotStatusElement.append(optionElement);
} }
const mapElement = modalElement.querySelector("#lotCreate--mapId"); const mapElement = modalElement.querySelector('#lotCreate--mapId');
for (const map of exports.maps) { for (const map of exports.maps) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = map.mapId.toString(); optionElement.value = map.mapId.toString();
optionElement.textContent = map.mapName || "(No Name)"; optionElement.textContent = map.mapName || '(No Name)';
mapElement.append(optionElement); mapElement.append(optionElement);
} }
modalElement.querySelector("#form--lotCreate").addEventListener("submit", createLotAndSelect); ;
modalElement.querySelector('#form--lotCreate').addEventListener('submit', createLotAndSelect);
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
} }
}); });
}); });
document.querySelector(".is-lot-view-button").addEventListener("click", () => { document
const lotId = document.querySelector("#lotOccupancy--lotId").value; .querySelector('.is-lot-view-button')
.addEventListener('click', () => {
const lotId = document.querySelector('#lotOccupancy--lotId').value;
if (lotId) { if (lotId) {
window.open(los.urlPrefix + "/lots/" + lotId); window.open(los.urlPrefix + '/lots/' + lotId);
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
message: `No ${los.escapedAliases.lot} selected.`, message: `No ${los.escapedAliases.lot} selected.`,
contextualColorName: "info" contextualColorName: 'info'
}); });
} }
}); });
document.querySelector(".is-clear-lot-button").addEventListener("click", () => { document
.querySelector('.is-clear-lot-button')
.addEventListener('click', () => {
if (lotNameElement.disabled) { if (lotNameElement.disabled) {
bulmaJS.alert({ bulmaJS.alert({
message: "You need to unlock the field before clearing it.", message: 'You need to unlock the field before clearing it.',
contextualColorName: "info" contextualColorName: 'info'
}); });
} }
else { else {
lotNameElement.value = `(No ${los.escapedAliases.Lot})`; lotNameElement.value = `(No ${los.escapedAliases.Lot})`;
document.querySelector("#lotOccupancy--lotId").value = ""; document.querySelector('#lotOccupancy--lotId').value = '';
los.setUnsavedChanges(); los.setUnsavedChanges();
} }
}); });
// Start Date // Start Date
los.initializeDatePickers(formElement); los.initializeDatePickers(formElement);
document.querySelector("#lotOccupancy--occupancyStartDateString").addEventListener("change", () => { document
const endDatePicker = document.querySelector("#lotOccupancy--occupancyEndDateString").bulmaCalendar.datePicker; .querySelector('#lotOccupancy--occupancyStartDateString')
endDatePicker.min = document.querySelector("#lotOccupancy--occupancyStartDateString").value; .addEventListener('change', () => {
const endDatePicker = document.querySelector('#lotOccupancy--occupancyEndDateString').bulmaCalendar.datePicker;
endDatePicker.min = document.querySelector('#lotOccupancy--occupancyStartDateString').value;
endDatePicker.refresh(); endDatePicker.refresh();
}); });
los.initializeUnlockFieldButtons(formElement); los.initializeUnlockFieldButtons(formElement);

682
public-typescript/lotOccupancyEdit/lotOccupancyEdit.ts
View File

@ -1,604 +1,698 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
;(() => {
const los = exports.los as globalTypes.LOS
(() => { const lotOccupancyId = (
const los = exports.los as globalTypes.LOS; document.querySelector('#lotOccupancy--lotOccupancyId') as HTMLInputElement
).value
const lotOccupancyId = (document.querySelector("#lotOccupancy--lotOccupancyId") as HTMLInputElement) const isCreate = lotOccupancyId === ''
.value;
const isCreate = lotOccupancyId === "";
/* /*
* Main form * Main form
*/ */
let refreshAfterSave = isCreate; let refreshAfterSave = isCreate
const formElement = document.querySelector("#form--lotOccupancy") as HTMLFormElement; const formElement = document.querySelector(
'#form--lotOccupancy'
) as HTMLFormElement
formElement.addEventListener("submit", (formEvent) => { formElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/" + (isCreate ? "doCreateLotOccupancy" : "doUpdateLotOccupancy"), los.urlPrefix +
'/lotOccupancies/' +
(isCreate ? 'doCreateLotOccupancy' : 'doUpdateLotOccupancy'),
formElement, formElement,
(responseJSON: { success: boolean; lotOccupancyId?: number; errorMessage?: string }) => { (responseJSON: {
success: boolean
lotOccupancyId?: number
errorMessage?: string
}) => {
if (responseJSON.success) { if (responseJSON.success) {
los.clearUnsavedChanges(); los.clearUnsavedChanges()
if (isCreate || refreshAfterSave) { if (isCreate || refreshAfterSave) {
window.location.href = los.getLotOccupancyURL( window.location.href = los.getLotOccupancyURL(
responseJSON.lotOccupancyId, responseJSON.lotOccupancyId,
true, true,
true true
); )
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
message: `${los.escapedAliases.Occupancy} Updated Successfully`, message: `${los.escapedAliases.Occupancy} Updated Successfully`,
contextualColorName: "success" contextualColorName: 'success'
}); })
} }
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Saving " + exports.aliases.occupancy, title: 'Error Saving ' + exports.aliases.occupancy,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}); })
const formInputElements = formElement.querySelectorAll("input, select"); const formInputElements = formElement.querySelectorAll('input, select')
for (const formInputElement of formInputElements) { for (const formInputElement of formInputElements) {
formInputElement.addEventListener("change", los.setUnsavedChanges); formInputElement.addEventListener('change', los.setUnsavedChanges)
} }
const doCopy = () => { const doCopy = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doCopyLotOccupancy", los.urlPrefix + '/lotOccupancies/doCopyLotOccupancy',
{ {
lotOccupancyId lotOccupancyId
}, },
(responseJSON: { success: boolean; errorMessage?: string; lotOccupancyId?: number }) => { (responseJSON: {
success: boolean
errorMessage?: string
lotOccupancyId?: number
}) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
window.location.href = los.getLotOccupancyURL(responseJSON.lotOccupancyId, true); window.location.href = los.getLotOccupancyURL(
responseJSON.lotOccupancyId,
true
)
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Copying Record", title: 'Error Copying Record',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
document.querySelector("#button--copyLotOccupancy")?.addEventListener("click", (clickEvent) => { document
clickEvent.preventDefault(); .querySelector('#button--copyLotOccupancy')
?.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault()
if (los.hasUnsavedChanges()) { if (los.hasUnsavedChanges()) {
bulmaJS.alert({ bulmaJS.alert({
title: "Unsaved Changes", title: 'Unsaved Changes',
message: "Please save all unsaved changes before continuing.", message: 'Please save all unsaved changes before continuing.',
contextualColorName: "warning" contextualColorName: 'warning'
}); })
} else { } else {
bulmaJS.confirm({ bulmaJS.confirm({
title: `Copy ${los.escapedAliases.Occupancy} Record as New`, title: `Copy ${los.escapedAliases.Occupancy} Record as New`,
message: "Are you sure you want to copy this record to a new record?", message: 'Are you sure you want to copy this record to a new record?',
contextualColorName: "info", contextualColorName: 'info',
okButton: { okButton: {
text: "Yes, Copy", text: 'Yes, Copy',
callbackFunction: doCopy callbackFunction: doCopy
} }
}); })
} }
}); })
document.querySelector("#button--deleteLotOccupancy")?.addEventListener("click", (clickEvent) => { document
clickEvent.preventDefault(); .querySelector('#button--deleteLotOccupancy')
?.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault()
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancy", los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancy',
{ {
lotOccupancyId lotOccupancyId
}, },
(responseJSON: { success: boolean; errorMessage?: string }) => { (responseJSON: { success: boolean; errorMessage?: string }) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
window.location.href = los.getLotOccupancyURL(); window.location.href = los.getLotOccupancyURL()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Record", title: 'Error Deleting Record',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete " + exports.aliases.occupancy + " Record", title: 'Delete ' + exports.aliases.occupancy + ' Record',
message: "Are you sure you want to delete this record?", message: 'Are you sure you want to delete this record?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete", text: 'Yes, Delete',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}); })
document.querySelector("#button--createWorkOrder")?.addEventListener("click", (clickEvent) => { document
clickEvent.preventDefault(); .querySelector('#button--createWorkOrder')
?.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault()
let createCloseModalFunction: () => void; let createCloseModalFunction: () => void
const doCreate = (formEvent: SubmitEvent) => { const doCreate = (formEvent: SubmitEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doCreateWorkOrder", los.urlPrefix + '/workOrders/doCreateWorkOrder',
formEvent.currentTarget, formEvent.currentTarget,
(responseJSON: { success: boolean; errorMessage?: string; workOrderId?: number }) => { (responseJSON: {
success: boolean
errorMessage?: string
workOrderId?: number
}) => {
if (responseJSON.success) { if (responseJSON.success) {
createCloseModalFunction(); createCloseModalFunction()
bulmaJS.confirm({ bulmaJS.confirm({
title: "Work Order Created Successfully", title: 'Work Order Created Successfully',
message: "Would you like to open the work order now?", message: 'Would you like to open the work order now?',
contextualColorName: "success", contextualColorName: 'success',
okButton: { okButton: {
text: "Yes, Open the Work Order", text: 'Yes, Open the Work Order',
callbackFunction: () => { callbackFunction: () => {
window.location.href = window.location.href =
los.urlPrefix + "/workOrders/" + responseJSON.workOrderId + "/edit"; los.urlPrefix +
'/workOrders/' +
responseJSON.workOrderId +
'/edit'
} }
} }
}); })
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Creating Work Order", title: 'Error Creating Work Order',
message: responseJSON.errorMessage as string, message: responseJSON.errorMessage as string,
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lotOccupancy-createWorkOrder", { cityssm.openHtmlModal('lotOccupancy-createWorkOrder', {
onshow(modalElement) { onshow(modalElement) {
(modalElement.querySelector("#workOrderCreate--lotOccupancyId") as HTMLInputElement).value = ;(
lotOccupancyId;
(
modalElement.querySelector( modalElement.querySelector(
"#workOrderCreate--workOrderOpenDateString" '#workOrderCreate--lotOccupancyId'
) as HTMLInputElement ) as HTMLInputElement
).value = cityssm.dateToString(new Date()); ).value = lotOccupancyId
;(
modalElement.querySelector(
'#workOrderCreate--workOrderOpenDateString'
) as HTMLInputElement
).value = cityssm.dateToString(new Date())
const workOrderTypeSelectElement = modalElement.querySelector( const workOrderTypeSelectElement = modalElement.querySelector(
"#workOrderCreate--workOrderTypeId" '#workOrderCreate--workOrderTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
const workOrderTypes = exports.workOrderTypes as recordTypes.WorkOrderType[]; const workOrderTypes =
exports.workOrderTypes as recordTypes.WorkOrderType[]
if (workOrderTypes.length === 1) { if (workOrderTypes.length === 1) {
workOrderTypeSelectElement.innerHTML = ""; workOrderTypeSelectElement.innerHTML = ''
} }
for (const workOrderType of workOrderTypes) { for (const workOrderType of workOrderTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = (workOrderType.workOrderTypeId as number).toString(); optionElement.value = (
optionElement.textContent = workOrderType.workOrderType as string; workOrderType.workOrderTypeId as number
workOrderTypeSelectElement.append(optionElement); ).toString()
optionElement.textContent = workOrderType.workOrderType as string
workOrderTypeSelectElement.append(optionElement)
} }
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
createCloseModalFunction = closeModalFunction; createCloseModalFunction = closeModalFunction
modalElement.querySelector("form")?.addEventListener("submit", doCreate); modalElement
.querySelector('form')
?.addEventListener('submit', doCreate)
} }
}); })
}); })
// Occupancy Type // Occupancy Type
const occupancyTypeIdElement = document.querySelector( const occupancyTypeIdElement = document.querySelector(
"#lotOccupancy--occupancyTypeId" '#lotOccupancy--occupancyTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
if (isCreate) { if (isCreate) {
const lotOccupancyFieldsContainerElement = document.querySelector( const lotOccupancyFieldsContainerElement = document.querySelector(
"#container--lotOccupancyFields" '#container--lotOccupancyFields'
) as HTMLElement; ) as HTMLElement
occupancyTypeIdElement.addEventListener("change", () => { occupancyTypeIdElement.addEventListener('change', () => {
if (occupancyTypeIdElement.value === "") { if (occupancyTypeIdElement.value === '') {
lotOccupancyFieldsContainerElement.innerHTML = `<div class="message is-info"> lotOccupancyFieldsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">Select the ${los.escapedAliases.occupancy} type to load the available fields.</p> <p class="message-body">Select the ${los.escapedAliases.occupancy} type to load the available fields.</p>
</div>`; </div>`
return; return
} }
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doGetOccupancyTypeFields", los.urlPrefix + '/lotOccupancies/doGetOccupancyTypeFields',
{ {
occupancyTypeId: occupancyTypeIdElement.value occupancyTypeId: occupancyTypeIdElement.value
}, },
(responseJSON: { occupancyTypeFields: recordTypes.OccupancyTypeField[] }) => { (responseJSON: {
occupancyTypeFields: recordTypes.OccupancyTypeField[]
}) => {
if (responseJSON.occupancyTypeFields.length === 0) { if (responseJSON.occupancyTypeFields.length === 0) {
lotOccupancyFieldsContainerElement.innerHTML = `<div class="message is-info"> lotOccupancyFieldsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no additional fields for this ${los.escapedAliases.occupancy} type.</p> <p class="message-body">There are no additional fields for this ${los.escapedAliases.occupancy} type.</p>
</div>`; </div>`
return; return
} }
lotOccupancyFieldsContainerElement.innerHTML = ""; lotOccupancyFieldsContainerElement.innerHTML = ''
let occupancyTypeFieldIds = ""; let occupancyTypeFieldIds = ''
for (const occupancyTypeField of responseJSON.occupancyTypeFields) { for (const occupancyTypeField of responseJSON.occupancyTypeFields) {
occupancyTypeFieldIds += "," + occupancyTypeField.occupancyTypeFieldId; occupancyTypeFieldIds +=
',' + occupancyTypeField.occupancyTypeFieldId
const fieldName = "lotOccupancyFieldValue_" + occupancyTypeField.occupancyTypeFieldId; const fieldName =
'lotOccupancyFieldValue_' +
occupancyTypeField.occupancyTypeFieldId
const fieldId = "lotOccupancy--" + fieldName; const fieldId = 'lotOccupancy--' + fieldName
const fieldElement = document.createElement("div"); const fieldElement = document.createElement('div')
fieldElement.className = "field"; fieldElement.className = 'field'
fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label><div class="control"></div>`; fieldElement.innerHTML = `<label class="label" for="${fieldId}"></label><div class="control"></div>`
;(
fieldElement.querySelector('label') as HTMLLabelElement
).textContent = occupancyTypeField.occupancyTypeField as string
(fieldElement.querySelector("label") as HTMLLabelElement).textContent = if (occupancyTypeField.occupancyTypeFieldValues === '') {
occupancyTypeField.occupancyTypeField as string; const inputElement = document.createElement('input')
if (occupancyTypeField.occupancyTypeFieldValues === "") { inputElement.className = 'input'
const inputElement = document.createElement("input");
inputElement.className = "input"; inputElement.id = fieldId
inputElement.id = fieldId; inputElement.name = fieldName
inputElement.name = fieldName; inputElement.type = 'text'
inputElement.type = "text"; inputElement.required = occupancyTypeField.isRequired as boolean
inputElement.minLength =
occupancyTypeField.minimumLength as number
inputElement.maxLength =
occupancyTypeField.maximumLength as number
inputElement.required = occupancyTypeField.isRequired as boolean; if (
inputElement.minLength = occupancyTypeField.minimumLength as number; occupancyTypeField.pattern &&
inputElement.maxLength = occupancyTypeField.maximumLength as number; occupancyTypeField.pattern !== ''
) {
if (occupancyTypeField.pattern && occupancyTypeField.pattern !== "") { inputElement.pattern = occupancyTypeField.pattern
inputElement.pattern = occupancyTypeField.pattern;
} }
(fieldElement.querySelector(".control") as HTMLElement).append(inputElement); ;(fieldElement.querySelector('.control') as HTMLElement).append(
inputElement
)
} else { } else {
(fieldElement.querySelector(".control") as HTMLElement).innerHTML = ;(
fieldElement.querySelector('.control') as HTMLElement
).innerHTML =
'<div class="select is-fullwidth"><select id="' + '<div class="select is-fullwidth"><select id="' +
fieldId + fieldId +
'" name="' + '" name="' +
fieldName + fieldName +
'">' + '">' +
'<option value="">(Not Set)</option>' + '<option value="">(Not Set)</option>' +
"</select></div>"; '</select></div>'
const selectElement = fieldElement.querySelector("select") as HTMLSelectElement; const selectElement = fieldElement.querySelector(
'select'
) as HTMLSelectElement
selectElement.required = occupancyTypeField.isRequired as boolean; selectElement.required = occupancyTypeField.isRequired as boolean
const optionValues = ( const optionValues = (
occupancyTypeField.occupancyTypeFieldValues as string occupancyTypeField.occupancyTypeFieldValues as string
).split("\n"); ).split('\n')
for (const optionValue of optionValues) { for (const optionValue of optionValues) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = optionValue; optionElement.value = optionValue
optionElement.textContent = optionValue; optionElement.textContent = optionValue
selectElement.append(optionElement); selectElement.append(optionElement)
} }
} }
lotOccupancyFieldsContainerElement.append(fieldElement); lotOccupancyFieldsContainerElement.append(fieldElement)
} }
lotOccupancyFieldsContainerElement.insertAdjacentHTML( lotOccupancyFieldsContainerElement.insertAdjacentHTML(
"beforeend", 'beforeend',
`<input name="occupancyTypeFieldIds" type="hidden" value="${occupancyTypeFieldIds.slice( `<input name="occupancyTypeFieldIds" type="hidden" value="${occupancyTypeFieldIds.slice(
1 1
)}" />` )}" />`
); )
} }
); )
}); })
} else { } else {
const originalOccupancyTypeId = occupancyTypeIdElement.value; const originalOccupancyTypeId = occupancyTypeIdElement.value
occupancyTypeIdElement.addEventListener("change", () => { occupancyTypeIdElement.addEventListener('change', () => {
if (occupancyTypeIdElement.value !== originalOccupancyTypeId) { if (occupancyTypeIdElement.value !== originalOccupancyTypeId) {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Confirm Change", title: 'Confirm Change',
message: `Are you sure you want to change the ${los.escapedAliases.occupancy} type?\n message: `Are you sure you want to change the ${los.escapedAliases.occupancy} type?\n
This change affects the additional fields associated with this record, and may also affect the available fees.`, This change affects the additional fields associated with this record, and may also affect the available fees.`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Keep the Change", text: 'Yes, Keep the Change',
callbackFunction: () => { callbackFunction: () => {
refreshAfterSave = true; refreshAfterSave = true
} }
}, },
cancelButton: { cancelButton: {
text: "Revert the Change", text: 'Revert the Change',
callbackFunction: () => { callbackFunction: () => {
occupancyTypeIdElement.value = originalOccupancyTypeId; occupancyTypeIdElement.value = originalOccupancyTypeId
} }
} }
}); })
} }
}); })
} }
// Lot Selector // Lot Selector
const lotNameElement = document.querySelector("#lotOccupancy--lotName") as HTMLInputElement; const lotNameElement = document.querySelector(
'#lotOccupancy--lotName'
) as HTMLInputElement
lotNameElement.addEventListener("click", (clickEvent) => { lotNameElement.addEventListener('click', (clickEvent) => {
const currentLotName = (clickEvent.currentTarget as HTMLInputElement).value; const currentLotName = (clickEvent.currentTarget as HTMLInputElement).value
let lotSelectCloseModalFunction: () => void; let lotSelectCloseModalFunction: () => void
let lotSelectModalElement: HTMLElement; let lotSelectModalElement: HTMLElement
let lotSelectFormElement: HTMLFormElement; let lotSelectFormElement: HTMLFormElement
let lotSelectResultsElement: HTMLElement; let lotSelectResultsElement: HTMLElement
const renderSelectedLotAndClose = (lotId: number | string, lotName: string) => { const renderSelectedLotAndClose = (
(document.querySelector("#lotOccupancy--lotId") as HTMLInputElement).value = lotId.toString(); lotId: number | string,
(document.querySelector("#lotOccupancy--lotName") as HTMLInputElement).value = lotName; lotName: string
) => {
;(
document.querySelector('#lotOccupancy--lotId') as HTMLInputElement
).value = lotId.toString()
;(
document.querySelector('#lotOccupancy--lotName') as HTMLInputElement
).value = lotName
los.setUnsavedChanges(); los.setUnsavedChanges()
lotSelectCloseModalFunction(); lotSelectCloseModalFunction()
}; }
const selectExistingLot = (clickEvent: Event) => { const selectExistingLot = (clickEvent: Event) => {
clickEvent.preventDefault(); clickEvent.preventDefault()
const selectedLotElement = clickEvent.currentTarget as HTMLElement; const selectedLotElement = clickEvent.currentTarget as HTMLElement
renderSelectedLotAndClose(selectedLotElement.dataset.lotId!, selectedLotElement.dataset.lotName!); renderSelectedLotAndClose(
}; selectedLotElement.dataset.lotId!,
selectedLotElement.dataset.lotName!
)
}
const searchLots = () => { const searchLots = () => {
lotSelectResultsElement.innerHTML = los.getLoadingParagraphHTML("Searching..."); lotSelectResultsElement.innerHTML =
los.getLoadingParagraphHTML('Searching...')
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doSearchLots", los.urlPrefix + '/lots/doSearchLots',
lotSelectFormElement, lotSelectFormElement,
(responseJSON: { count: number; lots: recordTypes.Lot[] }) => { (responseJSON: { count: number; lots: recordTypes.Lot[] }) => {
if (responseJSON.count === 0) { if (responseJSON.count === 0) {
lotSelectResultsElement.innerHTML = `<div class="message is-info"> lotSelectResultsElement.innerHTML = `<div class="message is-info">
<p class="message-body">No results.</p> <p class="message-body">No results.</p>
</div>`; </div>`
return; return
} }
const panelElement = document.createElement("div"); const panelElement = document.createElement('div')
panelElement.className = "panel"; panelElement.className = 'panel'
for (const lot of responseJSON.lots) { for (const lot of responseJSON.lots) {
const panelBlockElement = document.createElement("a"); const panelBlockElement = document.createElement('a')
panelBlockElement.className = "panel-block is-block"; panelBlockElement.className = 'panel-block is-block'
panelBlockElement.href = "#"; panelBlockElement.href = '#'
panelBlockElement.dataset.lotId = lot.lotId.toString(); panelBlockElement.dataset.lotId = lot.lotId.toString()
panelBlockElement.dataset.lotName = lot.lotName; panelBlockElement.dataset.lotName = lot.lotName
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="columns">' + '<div class="columns">' +
('<div class="column">' + ('<div class="column">' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"<br />" + '<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
cityssm.escapeHTML(lot.lotStatus as string) + cityssm.escapeHTML(lot.lotStatus as string) +
"<br />" + '<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
(lot.lotOccupancyCount! > 0 ? "Currently Occupied" : "") + (lot.lotOccupancyCount! > 0 ? 'Currently Occupied' : '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
"</div>"; '</div>'
panelBlockElement.addEventListener("click", selectExistingLot); panelBlockElement.addEventListener('click', selectExistingLot)
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement)
} }
lotSelectResultsElement.innerHTML = ""; lotSelectResultsElement.innerHTML = ''
lotSelectResultsElement.append(panelElement); lotSelectResultsElement.append(panelElement)
}
)
} }
);
};
const createLotAndSelect = (submitEvent: SubmitEvent) => { const createLotAndSelect = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
const lotName = (lotSelectModalElement.querySelector("#lotCreate--lotName") as HTMLInputElement) const lotName = (
.value; lotSelectModalElement.querySelector(
'#lotCreate--lotName'
) as HTMLInputElement
).value
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lots/doCreateLot", los.urlPrefix + '/lots/doCreateLot',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { success: boolean; errorMessage?: string; lotId?: number }) => { (responseJSON: {
success: boolean
errorMessage?: string
lotId?: number
}) => {
if (responseJSON.success) { if (responseJSON.success) {
renderSelectedLotAndClose(responseJSON.lotId!, lotName); renderSelectedLotAndClose(responseJSON.lotId!, lotName)
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: `Error Creating ${los.escapedAliases.Lot}`, title: `Error Creating ${los.escapedAliases.Lot}`,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lotOccupancy-selectLot", { cityssm.openHtmlModal('lotOccupancy-selectLot', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
lotSelectModalElement = modalElement; lotSelectModalElement = modalElement
lotSelectCloseModalFunction = closeModalFunction; lotSelectCloseModalFunction = closeModalFunction
bulmaJS.init(modalElement); bulmaJS.init(modalElement)
// search Tab // search Tab
const lotNameFilterElement = modalElement.querySelector( const lotNameFilterElement = modalElement.querySelector(
"#lotSelect--lotName" '#lotSelect--lotName'
) as HTMLInputElement; ) as HTMLInputElement
if ((document.querySelector("#lotOccupancy--lotId") as HTMLInputElement).value !== "") { if (
lotNameFilterElement.value = currentLotName; (document.querySelector('#lotOccupancy--lotId') as HTMLInputElement)
.value !== ''
) {
lotNameFilterElement.value = currentLotName
} }
lotNameFilterElement.focus(); lotNameFilterElement.focus()
lotNameFilterElement.addEventListener("change", searchLots); lotNameFilterElement.addEventListener('change', searchLots)
const occupancyStatusFilterElement = modalElement.querySelector( const occupancyStatusFilterElement = modalElement.querySelector(
"#lotSelect--occupancyStatus" '#lotSelect--occupancyStatus'
) as HTMLSelectElement; ) as HTMLSelectElement
occupancyStatusFilterElement.addEventListener("change", searchLots); occupancyStatusFilterElement.addEventListener('change', searchLots)
if (currentLotName !== "") { if (currentLotName !== '') {
occupancyStatusFilterElement.value = ""; occupancyStatusFilterElement.value = ''
} }
lotSelectFormElement = modalElement.querySelector("#form--lotSelect") as HTMLFormElement; lotSelectFormElement = modalElement.querySelector(
'#form--lotSelect'
) as HTMLFormElement
lotSelectResultsElement = modalElement.querySelector( lotSelectResultsElement = modalElement.querySelector(
"#resultsContainer--lotSelect" '#resultsContainer--lotSelect'
) as HTMLElement; ) as HTMLElement
lotSelectFormElement.addEventListener("submit", (submitEvent) => { lotSelectFormElement.addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
}); })
searchLots(); searchLots()
// Create Tab // Create Tab
if (exports.lotNamePattern) { if (exports.lotNamePattern) {
const regex = exports.lotNamePattern as RegExp; const regex = exports.lotNamePattern as RegExp
(modalElement.querySelector("#lotCreate--lotName") as HTMLInputElement).pattern = ;(
regex.source; modalElement.querySelector(
'#lotCreate--lotName'
) as HTMLInputElement
).pattern = regex.source
} }
const lotTypeElement = modalElement.querySelector( const lotTypeElement = modalElement.querySelector(
"#lotCreate--lotTypeId" '#lotCreate--lotTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
for (const lotType of exports.lotTypes as recordTypes.LotType[]) { for (const lotType of exports.lotTypes as recordTypes.LotType[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = lotType.lotTypeId.toString(); optionElement.value = lotType.lotTypeId.toString()
optionElement.textContent = lotType.lotType; optionElement.textContent = lotType.lotType
lotTypeElement.append(optionElement); lotTypeElement.append(optionElement)
} }
const lotStatusElement = modalElement.querySelector( const lotStatusElement = modalElement.querySelector(
"#lotCreate--lotStatusId" '#lotCreate--lotStatusId'
) as HTMLSelectElement; ) as HTMLSelectElement
for (const lotStatus of exports.lotStatuses as recordTypes.LotStatus[]) { for (const lotStatus of exports.lotStatuses as recordTypes.LotStatus[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = lotStatus.lotStatusId.toString(); optionElement.value = lotStatus.lotStatusId.toString()
optionElement.textContent = lotStatus.lotStatus; optionElement.textContent = lotStatus.lotStatus
lotStatusElement.append(optionElement); lotStatusElement.append(optionElement)
} }
const mapElement = modalElement.querySelector("#lotCreate--mapId") as HTMLSelectElement; const mapElement = modalElement.querySelector(
'#lotCreate--mapId'
) as HTMLSelectElement
for (const map of exports.maps as recordTypes.Map[]) { for (const map of exports.maps as recordTypes.Map[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = map.mapId!.toString(); optionElement.value = map.mapId!.toString()
optionElement.textContent = map.mapName || "(No Name)"; optionElement.textContent = map.mapName || '(No Name)'
mapElement.append(optionElement); mapElement.append(optionElement)
} }
(modalElement.querySelector("#form--lotCreate") as HTMLFormElement).addEventListener( ;(
"submit", modalElement.querySelector('#form--lotCreate') as HTMLFormElement
createLotAndSelect ).addEventListener('submit', createLotAndSelect)
);
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
document.querySelector(".is-lot-view-button")!.addEventListener("click", () => { document
const lotId = (document.querySelector("#lotOccupancy--lotId") as HTMLInputElement).value; .querySelector('.is-lot-view-button')!
.addEventListener('click', () => {
const lotId = (
document.querySelector('#lotOccupancy--lotId') as HTMLInputElement
).value
if (lotId) { if (lotId) {
window.open(los.urlPrefix + "/lots/" + lotId); window.open(los.urlPrefix + '/lots/' + lotId)
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
message: `No ${los.escapedAliases.lot} selected.`, message: `No ${los.escapedAliases.lot} selected.`,
contextualColorName: "info" contextualColorName: 'info'
}); })
} }
}); })
document.querySelector(".is-clear-lot-button")!.addEventListener("click", () => { document
.querySelector('.is-clear-lot-button')!
.addEventListener('click', () => {
if (lotNameElement.disabled) { if (lotNameElement.disabled) {
bulmaJS.alert({ bulmaJS.alert({
message: "You need to unlock the field before clearing it.", message: 'You need to unlock the field before clearing it.',
contextualColorName: "info" contextualColorName: 'info'
}); })
} else { } else {
lotNameElement.value = `(No ${los.escapedAliases.Lot})`; lotNameElement.value = `(No ${los.escapedAliases.Lot})`
(document.querySelector("#lotOccupancy--lotId") as HTMLInputElement).value = ""; ;(
los.setUnsavedChanges(); document.querySelector('#lotOccupancy--lotId') as HTMLInputElement
).value = ''
los.setUnsavedChanges()
} }
}); })
// Start Date // Start Date
los.initializeDatePickers(formElement); los.initializeDatePickers(formElement)
document.querySelector("#lotOccupancy--occupancyStartDateString")!.addEventListener("change", () => { document
.querySelector('#lotOccupancy--occupancyStartDateString')!
.addEventListener('change', () => {
const endDatePicker = ( const endDatePicker = (
document.querySelector("#lotOccupancy--occupancyEndDateString") as HTMLInputElement document.querySelector(
).bulmaCalendar.datePicker; '#lotOccupancy--occupancyEndDateString'
) as HTMLInputElement
).bulmaCalendar.datePicker
endDatePicker.min = ( endDatePicker.min = (
document.querySelector("#lotOccupancy--occupancyStartDateString") as HTMLInputElement document.querySelector(
).value; '#lotOccupancy--occupancyStartDateString'
) as HTMLInputElement
).value
endDatePicker.refresh(); endDatePicker.refresh()
}); })
los.initializeUnlockFieldButtons(formElement); los.initializeUnlockFieldButtons(formElement)
/* /*
* Occupants * Occupants
@ -610,4 +704,4 @@ declare const bulmaJS: BulmaJS;
//=include lotOccupancyEditComments.js //=include lotOccupancyEditComments.js
//=include lotOccupancyEditFees.js //=include lotOccupancyEditFees.js
} }
})(); })()

136
public-typescript/lotOccupancyEdit/lotOccupancyEditComments.js
View File

@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
let lotOccupancyComments = exports.lotOccupancyComments; let lotOccupancyComments = exports.lotOccupancyComments;
delete exports.lotOccupancyComments; delete exports.lotOccupancyComments;
const openEditLotOccupancyComment = (clickEvent) => { const openEditLotOccupancyComment = (clickEvent) => {
const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10); const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.lotOccupancyCommentId, 10);
const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => { const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId; return (currentLotOccupancyComment.lotOccupancyCommentId ===
lotOccupancyCommentId);
}); });
let editFormElement; let editFormElement;
let editCloseModalFunction; let editCloseModalFunction;
const editComment = (submitEvent) => { const editComment = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment", editFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyComment', editFormElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyComments = responseJSON.lotOccupancyComments; lotOccupancyComments = responseJSON.lotOccupancyComments;
editCloseModalFunction(); editCloseModalFunction();
@ -20,20 +22,20 @@ const openEditLotOccupancyComment = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Comment", title: 'Error Updating Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-editComment", { cityssm.openHtmlModal('lotOccupancy-editComment', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyId").value = lotOccupancyId; modalElement.querySelector('#lotOccupancyCommentEdit--lotOccupancyId').value = lotOccupancyId;
modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentId").value = lotOccupancyCommentId.toString(); modalElement.querySelector('#lotOccupancyCommentEdit--lotOccupancyCommentId').value = lotOccupancyCommentId.toString();
modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment").value = lotOccupancyComment.lotOccupancyComment; modalElement.querySelector('#lotOccupancyCommentEdit--lotOccupancyComment').value = lotOccupancyComment.lotOccupancyComment;
const lotOccupancyCommentDateStringElement = modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentDateString"); const lotOccupancyCommentDateStringElement = modalElement.querySelector('#lotOccupancyCommentEdit--lotOccupancyCommentDateString');
lotOccupancyCommentDateStringElement.value = lotOccupancyCommentDateStringElement.value =
lotOccupancyComment.lotOccupancyCommentDateString; lotOccupancyComment.lotOccupancyCommentDateString;
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date());
@ -41,15 +43,14 @@ const openEditLotOccupancyComment = (clickEvent) => {
lotOccupancyComment.lotOccupancyCommentDateString <= currentDateString lotOccupancyComment.lotOccupancyCommentDateString <= currentDateString
? currentDateString ? currentDateString
: lotOccupancyComment.lotOccupancyCommentDateString; : lotOccupancyComment.lotOccupancyCommentDateString;
modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentTimeString").value = lotOccupancyComment.lotOccupancyCommentTimeString; modalElement.querySelector('#lotOccupancyCommentEdit--lotOccupancyCommentTimeString').value = lotOccupancyComment.lotOccupancyCommentTimeString;
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement);
// los.initializeTimePickers(modalElement); modalElement.querySelector('#lotOccupancyCommentEdit--lotOccupancyComment').focus();
modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment").focus(); editFormElement = modalElement.querySelector('form');
editFormElement = modalElement.querySelector("form"); editFormElement.addEventListener('submit', editComment);
editFormElement.addEventListener("submit", editComment);
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
}, },
onremoved: () => { onremoved: () => {
@ -58,9 +59,10 @@ const openEditLotOccupancyComment = (clickEvent) => {
}); });
}; };
const deleteLotOccupancyComment = (clickEvent) => { const deleteLotOccupancyComment = (clickEvent) => {
const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10); const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.lotOccupancyCommentId, 10);
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyComment', {
lotOccupancyId, lotOccupancyId,
lotOccupancyCommentId lotOccupancyCommentId
}, (responseJSON) => { }, (responseJSON) => {
@ -70,87 +72,87 @@ const deleteLotOccupancyComment = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing Comment", title: 'Error Removing Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove Comment?", title: 'Remove Comment?',
message: "Are you sure you want to remove this comment?", message: 'Are you sure you want to remove this comment?',
okButton: { okButton: {
text: "Yes, Remove Comment", text: 'Yes, Remove Comment',
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); });
}; };
const renderLotOccupancyComments = () => { const renderLotOccupancyComments = () => {
const containerElement = document.querySelector("#container--lotOccupancyComments"); const containerElement = document.querySelector('#container--lotOccupancyComments');
if (lotOccupancyComments.length === 0) { if (lotOccupancyComments.length === 0) {
containerElement.innerHTML = containerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no comments associated with this record.</p>' + '<p class="message-body">There are no comments associated with this record.</p>' +
"</div>"; '</div>';
return; return;
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table');
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable';
tableElement.innerHTML = tableElement.innerHTML =
"<thead><tr>" + '<thead><tr>' +
"<th>Commentor</th>" + '<th>Commentor</th>' +
"<th>Comment Date</th>" + '<th>Comment Date</th>' +
"<th>Comment</th>" + '<th>Comment</th>' +
'<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>" + '</tr></thead>' +
"<tbody></tbody>"; '<tbody></tbody>';
for (const lotOccupancyComment of lotOccupancyComments) { for (const lotOccupancyComment of lotOccupancyComments) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotOccupancyCommentId = tableRowElement.dataset.lotOccupancyCommentId =
lotOccupancyComment.lotOccupancyCommentId.toString(); lotOccupancyComment.lotOccupancyCommentId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || "") + cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || '') +
"</td>" + '</td>' +
"<td>" + '<td>' +
lotOccupancyComment.lotOccupancyCommentDateString + lotOccupancyComment.lotOccupancyCommentDateString +
(lotOccupancyComment.lotOccupancyCommentTime === 0 (lotOccupancyComment.lotOccupancyCommentTime === 0
? "" ? ''
: " " + lotOccupancyComment.lotOccupancyCommentTimeString) + : ' ' + lotOccupancyComment.lotOccupancyCommentTimeString) +
"</td>" + '</td>' +
"<td>" + '<td>' +
cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || "") + cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || '') +
"</td>" + '</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>');
tableRowElement tableRowElement
.querySelector(".button--edit") .querySelector('.button--edit')
.addEventListener("click", openEditLotOccupancyComment); .addEventListener('click', openEditLotOccupancyComment);
tableRowElement tableRowElement
.querySelector(".button--delete") .querySelector('.button--delete')
.addEventListener("click", deleteLotOccupancyComment); .addEventListener('click', deleteLotOccupancyComment);
tableElement.querySelector("tbody").append(tableRowElement); tableElement.querySelector('tbody').append(tableRowElement);
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
containerElement.append(tableElement); containerElement.append(tableElement);
}; };
document.querySelector("#button--addComment").addEventListener("click", () => { document.querySelector('#button--addComment').addEventListener('click', () => {
let addFormElement; let addFormElement;
let addCloseModalFunction; let addCloseModalFunction;
const addComment = (submitEvent) => { const addComment = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyComment", addFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyComment', addFormElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyComments = responseJSON.lotOccupancyComments; lotOccupancyComments = responseJSON.lotOccupancyComments;
addCloseModalFunction(); addCloseModalFunction();
@ -158,23 +160,23 @@ document.querySelector("#button--addComment").addEventListener("click", () => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Comment", title: 'Error Adding Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-addComment", { cityssm.openHtmlModal('lotOccupancy-addComment', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotOccupancyCommentAdd--lotOccupancyId").value = lotOccupancyId; modalElement.querySelector('#lotOccupancyCommentAdd--lotOccupancyId').value = lotOccupancyId;
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
modalElement.querySelector("#lotOccupancyCommentAdd--lotOccupancyComment").focus(); modalElement.querySelector('#lotOccupancyCommentAdd--lotOccupancyComment').focus();
addFormElement = modalElement.querySelector("form"); addFormElement = modalElement.querySelector('form');
addFormElement.addEventListener("submit", addComment); addFormElement.addEventListener('submit', addComment);
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
}, },
onremoved: () => { onremoved: () => {

310
public-typescript/lotOccupancyEdit/lotOccupancyEditComments.ts
View File

@ -1,295 +1,303 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
declare const lotOccupancyId: string; declare const lotOccupancyId: string
let lotOccupancyComments: recordTypes.LotOccupancyComment[] = exports.lotOccupancyComments; let lotOccupancyComments: recordTypes.LotOccupancyComment[] =
delete exports.lotOccupancyComments; exports.lotOccupancyComments
delete exports.lotOccupancyComments
const openEditLotOccupancyComment = (clickEvent: Event) => { const openEditLotOccupancyComment = (clickEvent: Event) => {
const lotOccupancyCommentId = Number.parseInt( const lotOccupancyCommentId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotOccupancyCommentId!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.lotOccupancyCommentId!,
10 10
); )
const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => { const lotOccupancyComment = lotOccupancyComments.find(
return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId; (currentLotOccupancyComment) => {
})!; return (
currentLotOccupancyComment.lotOccupancyCommentId ===
lotOccupancyCommentId
)
}
)!
let editFormElement: HTMLFormElement; let editFormElement: HTMLFormElement
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
const editComment = (submitEvent: SubmitEvent) => { const editComment = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment", los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyComment',
editFormElement, editFormElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyComments?: recordTypes.LotOccupancyComment[]; lotOccupancyComments?: recordTypes.LotOccupancyComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyComments = responseJSON.lotOccupancyComments!; lotOccupancyComments = responseJSON.lotOccupancyComments!
editCloseModalFunction(); editCloseModalFunction()
renderLotOccupancyComments(); renderLotOccupancyComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Comment", title: 'Error Updating Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lotOccupancy-editComment", { cityssm.openHtmlModal('lotOccupancy-editComment', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentEdit--lotOccupancyId" '#lotOccupancyCommentEdit--lotOccupancyId'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyId; ).value = lotOccupancyId
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentEdit--lotOccupancyCommentId" '#lotOccupancyCommentEdit--lotOccupancyCommentId'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyCommentId.toString(); ).value = lotOccupancyCommentId.toString()
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentEdit--lotOccupancyComment" '#lotOccupancyCommentEdit--lotOccupancyComment'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyComment.lotOccupancyComment!; ).value = lotOccupancyComment.lotOccupancyComment!
const lotOccupancyCommentDateStringElement = modalElement.querySelector( const lotOccupancyCommentDateStringElement = modalElement.querySelector(
"#lotOccupancyCommentEdit--lotOccupancyCommentDateString" '#lotOccupancyCommentEdit--lotOccupancyCommentDateString'
) as HTMLInputElement; ) as HTMLInputElement
lotOccupancyCommentDateStringElement.value = lotOccupancyCommentDateStringElement.value =
lotOccupancyComment.lotOccupancyCommentDateString!; lotOccupancyComment.lotOccupancyCommentDateString!
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date())
lotOccupancyCommentDateStringElement.max = lotOccupancyCommentDateStringElement.max =
lotOccupancyComment.lotOccupancyCommentDateString! <= currentDateString lotOccupancyComment.lotOccupancyCommentDateString! <= currentDateString
? currentDateString ? currentDateString
: lotOccupancyComment.lotOccupancyCommentDateString!; : lotOccupancyComment.lotOccupancyCommentDateString!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentEdit--lotOccupancyCommentTimeString" '#lotOccupancyCommentEdit--lotOccupancyCommentTimeString'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyComment.lotOccupancyCommentTimeString!; ).value = lotOccupancyComment.lotOccupancyCommentTimeString!
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement)
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentEdit--lotOccupancyComment" '#lotOccupancyCommentEdit--lotOccupancyComment'
) as HTMLTextAreaElement ) as HTMLTextAreaElement
).focus(); ).focus()
editFormElement = modalElement.querySelector("form")!; editFormElement = modalElement.querySelector('form')!
editFormElement.addEventListener("submit", editComment); editFormElement.addEventListener('submit', editComment)
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}
})
} }
});
};
const deleteLotOccupancyComment = (clickEvent: Event) => { const deleteLotOccupancyComment = (clickEvent: Event) => {
const lotOccupancyCommentId = Number.parseInt( const lotOccupancyCommentId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotOccupancyCommentId!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.lotOccupancyCommentId!,
10 10
); )
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment", los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyComment',
{ {
lotOccupancyId, lotOccupancyId,
lotOccupancyCommentId lotOccupancyCommentId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyComments: recordTypes.LotOccupancyComment[]; lotOccupancyComments: recordTypes.LotOccupancyComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyComments = responseJSON.lotOccupancyComments; lotOccupancyComments = responseJSON.lotOccupancyComments
renderLotOccupancyComments(); renderLotOccupancyComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing Comment", title: 'Error Removing Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove Comment?", title: 'Remove Comment?',
message: "Are you sure you want to remove this comment?", message: 'Are you sure you want to remove this comment?',
okButton: { okButton: {
text: "Yes, Remove Comment", text: 'Yes, Remove Comment',
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); })
}; }
const renderLotOccupancyComments = () => { const renderLotOccupancyComments = () => {
const containerElement = document.querySelector( const containerElement = document.querySelector(
"#container--lotOccupancyComments" '#container--lotOccupancyComments'
) as HTMLElement; ) as HTMLElement
if (lotOccupancyComments.length === 0) { if (lotOccupancyComments.length === 0) {
containerElement.innerHTML = containerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no comments associated with this record.</p>' + '<p class="message-body">There are no comments associated with this record.</p>' +
"</div>"; '</div>'
return; return
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table')
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable'
tableElement.innerHTML = tableElement.innerHTML =
"<thead><tr>" + '<thead><tr>' +
"<th>Commentor</th>" + '<th>Commentor</th>' +
"<th>Comment Date</th>" + '<th>Comment Date</th>' +
"<th>Comment</th>" + '<th>Comment</th>' +
'<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>" + '</tr></thead>' +
"<tbody></tbody>"; '<tbody></tbody>'
for (const lotOccupancyComment of lotOccupancyComments) { for (const lotOccupancyComment of lotOccupancyComments) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.lotOccupancyCommentId = tableRowElement.dataset.lotOccupancyCommentId =
lotOccupancyComment.lotOccupancyCommentId!.toString(); lotOccupancyComment.lotOccupancyCommentId!.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || "") + cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || '') +
"</td>" + '</td>' +
"<td>" + '<td>' +
lotOccupancyComment.lotOccupancyCommentDateString + lotOccupancyComment.lotOccupancyCommentDateString +
(lotOccupancyComment.lotOccupancyCommentTime === 0 (lotOccupancyComment.lotOccupancyCommentTime === 0
? "" ? ''
: " " + lotOccupancyComment.lotOccupancyCommentTimeString) + : ' ' + lotOccupancyComment.lotOccupancyCommentTimeString) +
"</td>" + '</td>' +
"<td>" + '<td>' +
cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || "") + cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || '') +
"</td>" + '</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>')
tableRowElement tableRowElement
.querySelector(".button--edit")! .querySelector('.button--edit')!
.addEventListener("click", openEditLotOccupancyComment); .addEventListener('click', openEditLotOccupancyComment)
tableRowElement tableRowElement
.querySelector(".button--delete")! .querySelector('.button--delete')!
.addEventListener("click", deleteLotOccupancyComment); .addEventListener('click', deleteLotOccupancyComment)
tableElement.querySelector("tbody")!.append(tableRowElement); tableElement.querySelector('tbody')!.append(tableRowElement)
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
containerElement.append(tableElement); containerElement.append(tableElement)
}; }
document.querySelector("#button--addComment")!.addEventListener("click", () => { document.querySelector('#button--addComment')!.addEventListener('click', () => {
let addFormElement: HTMLFormElement; let addFormElement: HTMLFormElement
let addCloseModalFunction: () => void; let addCloseModalFunction: () => void
const addComment = (submitEvent: SubmitEvent) => { const addComment = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doAddLotOccupancyComment", los.urlPrefix + '/lotOccupancies/doAddLotOccupancyComment',
addFormElement, addFormElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyComments?: recordTypes.LotOccupancyComment[]; lotOccupancyComments?: recordTypes.LotOccupancyComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyComments = responseJSON.lotOccupancyComments!; lotOccupancyComments = responseJSON.lotOccupancyComments!
addCloseModalFunction(); addCloseModalFunction()
renderLotOccupancyComments(); renderLotOccupancyComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Comment", title: 'Error Adding Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lotOccupancy-addComment", { cityssm.openHtmlModal('lotOccupancy-addComment', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentAdd--lotOccupancyId" '#lotOccupancyCommentAdd--lotOccupancyId'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyId; ).value = lotOccupancyId
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyCommentAdd--lotOccupancyComment" '#lotOccupancyCommentAdd--lotOccupancyComment'
) as HTMLTextAreaElement ) as HTMLTextAreaElement
).focus(); ).focus()
addFormElement = modalElement.querySelector("form")!; addFormElement = modalElement.querySelector('form')!
addFormElement.addEventListener("submit", addComment); addFormElement.addEventListener('submit', addComment)
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
renderLotOccupancyComments(); renderLotOccupancyComments()

274
public-typescript/lotOccupancyEdit/lotOccupancyEditFees.js
View File

@ -3,19 +3,20 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
let lotOccupancyFees = exports.lotOccupancyFees; let lotOccupancyFees = exports.lotOccupancyFees;
delete exports.lotOccupancyFees; delete exports.lotOccupancyFees;
const lotOccupancyFeesContainerElement = document.querySelector("#container--lotOccupancyFees"); const lotOccupancyFeesContainerElement = document.querySelector('#container--lotOccupancyFees');
const getFeeGrandTotal = () => { const getFeeGrandTotal = () => {
let feeGrandTotal = 0; let feeGrandTotal = 0;
for (const lotOccupancyFee of lotOccupancyFees) { for (const lotOccupancyFee of lotOccupancyFees) {
feeGrandTotal += feeGrandTotal +=
(lotOccupancyFee.feeAmount + lotOccupancyFee.taxAmount) * lotOccupancyFee.quantity; (lotOccupancyFee.feeAmount + lotOccupancyFee.taxAmount) *
lotOccupancyFee.quantity;
} }
return feeGrandTotal; return feeGrandTotal;
}; };
const deleteLotOccupancyFee = (clickEvent) => { const deleteLotOccupancyFee = (clickEvent) => {
const feeId = clickEvent.currentTarget.closest(".container--lotOccupancyFee").dataset.feeId; const feeId = clickEvent.currentTarget.closest('.container--lotOccupancyFee').dataset.feeId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyFee", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyFee', {
lotOccupancyId, lotOccupancyId,
feeId feeId
}, (responseJSON) => { }, (responseJSON) => {
@ -25,19 +26,19 @@ const deleteLotOccupancyFee = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Fee", title: 'Error Deleting Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Fee", title: 'Delete Fee',
message: "Are you sure you want to delete this fee?", message: 'Are you sure you want to delete this fee?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Fee", text: 'Yes, Delete Fee',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
@ -47,74 +48,81 @@ const renderLotOccupancyFees = () => {
lotOccupancyFeesContainerElement.innerHTML = lotOccupancyFeesContainerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no fees associated with this record.</p>' + '<p class="message-body">There are no fees associated with this record.</p>' +
"</div>"; '</div>';
renderLotOccupancyTransactions(); renderLotOccupancyTransactions();
return; return;
} }
lotOccupancyFeesContainerElement.innerHTML = lotOccupancyFeesContainerElement.innerHTML =
'<table class="table is-fullwidth is-striped is-hoverable">' + '<table class="table is-fullwidth is-striped is-hoverable">' +
("<thead><tr>" + ('<thead><tr>' +
"<th>Fee</th>" + '<th>Fee</th>' +
'<th><span class="is-sr-only">Unit Cost</span></th>' + '<th><span class="is-sr-only">Unit Cost</span></th>' +
'<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' + '<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' +
'<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' + '<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' +
'<th class="has-width-1"><span class="is-sr-only">equals</span></th>' + '<th class="has-width-1"><span class="is-sr-only">equals</span></th>' +
'<th class="has-width-1 has-text-right">Total</th>' + '<th class="has-width-1 has-text-right">Total</th>' +
'<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>") + '</tr></thead>') +
"<tbody></tbody>" + '<tbody></tbody>' +
("<tfoot>" + ('<tfoot>' +
'<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' + '<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
'<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' + '<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
'<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' + '<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' +
"</tfoot>") + '</tfoot>') +
"</table>"; '</table>';
let feeAmountTotal = 0; let feeAmountTotal = 0;
let taxAmountTotal = 0; let taxAmountTotal = 0;
for (const lotOccupancyFee of lotOccupancyFees) { for (const lotOccupancyFee of lotOccupancyFees) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.className = "container--lotOccupancyFee"; tableRowElement.className = 'container--lotOccupancyFee';
tableRowElement.dataset.feeId = lotOccupancyFee.feeId.toString(); tableRowElement.dataset.feeId = lotOccupancyFee.feeId.toString();
tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity ? "1" : "0"; tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity
? '1'
: '0';
tableRowElement.innerHTML = tableRowElement.innerHTML =
'<td colspan="' + '<td colspan="' +
(lotOccupancyFee.quantity === 1 ? "5" : "1") + (lotOccupancyFee.quantity === 1 ? '5' : '1') +
'">' + '">' +
cityssm.escapeHTML(lotOccupancyFee.feeName || "") + cityssm.escapeHTML(lotOccupancyFee.feeName || '') +
"</td>" + '</td>' +
(lotOccupancyFee.quantity === 1 (lotOccupancyFee.quantity === 1
? "" ? ''
: '<td class="has-text-right">$' + : '<td class="has-text-right">$' +
lotOccupancyFee.feeAmount.toFixed(2) + lotOccupancyFee.feeAmount.toFixed(2) +
"</td>" + '</td>' +
"<td>&times;</td>" + '<td>&times;</td>' +
'<td class="has-text-right">' + '<td class="has-text-right">' +
lotOccupancyFee.quantity + lotOccupancyFee.quantity +
"</td>" + '</td>' +
"<td>=</td>") + '<td>=</td>') +
'<td class="has-text-right">$' + '<td class="has-text-right">$' +
(lotOccupancyFee.feeAmount * lotOccupancyFee.quantity).toFixed(2) + (lotOccupancyFee.feeAmount * lotOccupancyFee.quantity).toFixed(2) +
"</td>" + '</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' + '<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>"); '</td>');
tableRowElement.querySelector("button").addEventListener("click", deleteLotOccupancyFee); tableRowElement
lotOccupancyFeesContainerElement.querySelector("tbody").append(tableRowElement); .querySelector('button')
.addEventListener('click', deleteLotOccupancyFee);
lotOccupancyFeesContainerElement
.querySelector('tbody')
.append(tableRowElement);
feeAmountTotal += lotOccupancyFee.feeAmount * lotOccupancyFee.quantity; feeAmountTotal += lotOccupancyFee.feeAmount * lotOccupancyFee.quantity;
taxAmountTotal += lotOccupancyFee.taxAmount * lotOccupancyFee.quantity; taxAmountTotal += lotOccupancyFee.taxAmount * lotOccupancyFee.quantity;
} }
lotOccupancyFeesContainerElement.querySelector("#lotOccupancyFees--feeAmountTotal").textContent = "$" + feeAmountTotal.toFixed(2); ;
lotOccupancyFeesContainerElement.querySelector("#lotOccupancyFees--taxAmountTotal").textContent = "$" + taxAmountTotal.toFixed(2); lotOccupancyFeesContainerElement.querySelector('#lotOccupancyFees--feeAmountTotal').textContent = '$' + feeAmountTotal.toFixed(2);
lotOccupancyFeesContainerElement.querySelector("#lotOccupancyFees--grandTotal").textContent = "$" + (feeAmountTotal + taxAmountTotal).toFixed(2); lotOccupancyFeesContainerElement.querySelector('#lotOccupancyFees--taxAmountTotal').textContent = '$' + taxAmountTotal.toFixed(2);
lotOccupancyFeesContainerElement.querySelector('#lotOccupancyFees--grandTotal').textContent = '$' + (feeAmountTotal + taxAmountTotal).toFixed(2);
renderLotOccupancyTransactions(); renderLotOccupancyTransactions();
}; };
document.querySelector("#button--addFee").addEventListener("click", () => { document.querySelector('#button--addFee').addEventListener('click', () => {
if (hasUnsavedChanges) { if (hasUnsavedChanges) {
bulmaJS.alert({ bulmaJS.alert({
message: "Please save all unsaved changes before adding fees.", message: 'Please save all unsaved changes before adding fees.',
contextualColorName: "warning" contextualColorName: 'warning'
}); });
return; return;
} }
@ -122,7 +130,7 @@ document.querySelector("#button--addFee").addEventListener("click", () => {
let feeFilterElement; let feeFilterElement;
let feeFilterResultsElement; let feeFilterResultsElement;
const doAddFee = (feeId, quantity = 1) => { const doAddFee = (feeId, quantity = 1) => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyFee", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyFee', {
lotOccupancyId, lotOccupancyId,
feeId, feeId,
quantity quantity
@ -134,9 +142,9 @@ document.querySelector("#button--addFee").addEventListener("click", () => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Fee", title: 'Error Adding Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -149,21 +157,24 @@ document.querySelector("#button--addFee").addEventListener("click", () => {
doAddFee(fee.feeId, quantityElement.value); doAddFee(fee.feeId, quantityElement.value);
quantityCloseModalFunction(); quantityCloseModalFunction();
}; };
cityssm.openHtmlModal("lotOccupancy-setFeeQuantity", { cityssm.openHtmlModal('lotOccupancy-setFeeQuantity', {
onshow: (modalElement) => { onshow: (modalElement) => {
modalElement.querySelector("#lotOccupancyFeeQuantity--quantityUnit").textContent = fee.quantityUnit; ;
modalElement.querySelector('#lotOccupancyFeeQuantity--quantityUnit').textContent = fee.quantityUnit;
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
quantityCloseModalFunction = closeModalFunction; quantityCloseModalFunction = closeModalFunction;
quantityElement = modalElement.querySelector("#lotOccupancyFeeQuantity--quantity"); quantityElement = modalElement.querySelector('#lotOccupancyFeeQuantity--quantity');
modalElement.querySelector("form").addEventListener("submit", doSetQuantity); modalElement
.querySelector('form')
.addEventListener('submit', doSetQuantity);
} }
}); });
}; };
const tryAddFee = (clickEvent) => { const tryAddFee = (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
const feeId = Number.parseInt(clickEvent.currentTarget.dataset.feeId, 10); const feeId = Number.parseInt(clickEvent.currentTarget.dataset.feeId, 10);
const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest(".container--feeCategory").dataset.feeCategoryId, 10); const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest('.container--feeCategory').dataset.feeCategoryId, 10);
const feeCategory = feeCategories.find((currentFeeCategory) => { const feeCategory = feeCategories.find((currentFeeCategory) => {
return currentFeeCategory.feeCategoryId === feeCategoryId; return currentFeeCategory.feeCategoryId === feeCategoryId;
}); });
@ -178,16 +189,20 @@ document.querySelector("#button--addFee").addEventListener("click", () => {
} }
}; };
const filterFees = () => { const filterFees = () => {
const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" "); const filterStringPieces = feeFilterElement.value
feeFilterResultsElement.innerHTML = ""; .trim()
.toLowerCase()
.split(' ');
feeFilterResultsElement.innerHTML = '';
for (const feeCategory of feeCategories) { for (const feeCategory of feeCategories) {
const categoryContainerElement = document.createElement("div"); const categoryContainerElement = document.createElement('div');
categoryContainerElement.className = "container--feeCategory"; categoryContainerElement.className = 'container--feeCategory';
categoryContainerElement.dataset.feeCategoryId = feeCategory.feeCategoryId.toString(); categoryContainerElement.dataset.feeCategoryId =
feeCategory.feeCategoryId.toString();
categoryContainerElement.innerHTML = categoryContainerElement.innerHTML =
'<h4 class="title is-5 mt-2">' + '<h4 class="title is-5 mt-2">' +
cityssm.escapeHTML(feeCategory.feeCategory || "") + cityssm.escapeHTML(feeCategory.feeCategory || '') +
"</h4>" + '</h4>' +
'<div class="panel mb-5"></div>'; '<div class="panel mb-5"></div>';
let hasFees = false; let hasFees = false;
for (const fee of feeCategory.fees) { for (const fee of feeCategory.fees) {
@ -207,35 +222,37 @@ document.querySelector("#button--addFee").addEventListener("click", () => {
continue; continue;
} }
hasFees = true; hasFees = true;
const panelBlockElement = document.createElement("a"); const panelBlockElement = document.createElement('a');
panelBlockElement.className = "panel-block is-block container--fee"; panelBlockElement.className = 'panel-block is-block container--fee';
panelBlockElement.dataset.feeId = fee.feeId.toString(); panelBlockElement.dataset.feeId = fee.feeId.toString();
panelBlockElement.href = "#"; panelBlockElement.href = '#';
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
"<strong>" + '<strong>' +
cityssm.escapeHTML(fee.feeName || "") + cityssm.escapeHTML(fee.feeName || '') +
"</strong><br />" + '</strong><br />' +
"<small>" + '<small>' +
cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") + cityssm
"</small>"; .escapeHTML(fee.feeDescription || '')
panelBlockElement.addEventListener("click", tryAddFee); .replace(/\n/g, '<br />') +
categoryContainerElement.querySelector(".panel").append(panelBlockElement); '</small>';
panelBlockElement.addEventListener('click', tryAddFee);
categoryContainerElement.querySelector('.panel').append(panelBlockElement);
} }
if (hasFees) { if (hasFees) {
feeFilterResultsElement.append(categoryContainerElement); feeFilterResultsElement.append(categoryContainerElement);
} }
} }
}; };
cityssm.openHtmlModal("lotOccupancy-addFee", { cityssm.openHtmlModal('lotOccupancy-addFee', {
onshow: (modalElement) => { onshow: (modalElement) => {
feeFilterElement = modalElement.querySelector("#feeSelect--feeName"); feeFilterElement = modalElement.querySelector('#feeSelect--feeName');
feeFilterResultsElement = modalElement.querySelector("#resultsContainer--feeSelect"); feeFilterResultsElement = modalElement.querySelector('#resultsContainer--feeSelect');
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doGetFees", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doGetFees', {
lotOccupancyId lotOccupancyId
}, (responseJSON) => { }, (responseJSON) => {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories;
feeFilterElement.disabled = false; feeFilterElement.disabled = false;
feeFilterElement.addEventListener("keyup", filterFees); feeFilterElement.addEventListener('keyup', filterFees);
feeFilterElement.focus(); feeFilterElement.focus();
filterFees(); filterFees();
}); });
@ -253,7 +270,7 @@ document.querySelector("#button--addFee").addEventListener("click", () => {
}); });
let lotOccupancyTransactions = exports.lotOccupancyTransactions; let lotOccupancyTransactions = exports.lotOccupancyTransactions;
delete exports.lotOccupancyTransactions; delete exports.lotOccupancyTransactions;
const lotOccupancyTransactionsContainerElement = document.querySelector("#container--lotOccupancyTransactions"); const lotOccupancyTransactionsContainerElement = document.querySelector('#container--lotOccupancyTransactions');
const getTransactionGrandTotal = () => { const getTransactionGrandTotal = () => {
let transactionGrandTotal = 0; let transactionGrandTotal = 0;
for (const lotOccupancyTransaction of lotOccupancyTransactions) { for (const lotOccupancyTransaction of lotOccupancyTransactions) {
@ -262,9 +279,9 @@ const getTransactionGrandTotal = () => {
return transactionGrandTotal; return transactionGrandTotal;
}; };
const deleteLotOccupancyTransaction = (clickEvent) => { const deleteLotOccupancyTransaction = (clickEvent) => {
const transactionIndex = clickEvent.currentTarget.closest(".container--lotOccupancyTransaction").dataset.transactionIndex; const transactionIndex = clickEvent.currentTarget.closest('.container--lotOccupancyTransaction').dataset.transactionIndex;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyTransaction", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyTransaction', {
lotOccupancyId, lotOccupancyId,
transactionIndex transactionIndex
}, (responseJSON) => { }, (responseJSON) => {
@ -274,19 +291,19 @@ const deleteLotOccupancyTransaction = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Transaction", title: 'Error Deleting Transaction',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Trasnaction", title: 'Delete Trasnaction',
message: "Are you sure you want to delete this transaction?", message: 'Are you sure you want to delete this transaction?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Transaction", text: 'Yes, Delete Transaction',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
@ -295,80 +312,85 @@ const renderLotOccupancyTransactions = () => {
if (lotOccupancyTransactions.length === 0) { if (lotOccupancyTransactions.length === 0) {
lotOccupancyTransactionsContainerElement.innerHTML = lotOccupancyTransactionsContainerElement.innerHTML =
'<div class="message ' + '<div class="message ' +
(lotOccupancyFees.length === 0 ? "is-info" : "is-warning") + (lotOccupancyFees.length === 0 ? 'is-info' : 'is-warning') +
'">' + '">' +
'<p class="message-body">There are no transactions associated with this record.</p>' + '<p class="message-body">There are no transactions associated with this record.</p>' +
"</div>"; '</div>';
return; return;
} }
lotOccupancyTransactionsContainerElement.innerHTML = lotOccupancyTransactionsContainerElement.innerHTML =
'<table class="table is-fullwidth is-striped is-hoverable">' + '<table class="table is-fullwidth is-striped is-hoverable">' +
"<thead><tr>" + '<thead><tr>' +
'<th class="has-width-1">Date</th>' + '<th class="has-width-1">Date</th>' +
"<th>" + '<th>' +
cityssm.escapeHTML(exports.aliases.externalReceiptNumber) + cityssm.escapeHTML(exports.aliases.externalReceiptNumber) +
"</th>" + '</th>' +
'<th class="has-text-right has-width-1">Amount</th>' + '<th class="has-text-right has-width-1">Amount</th>' +
'<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>" + '</tr></thead>' +
"<tbody></tbody>" + '<tbody></tbody>' +
("<tfoot><tr>" + ('<tfoot><tr>' +
'<th colspan="2">Transaction Total</th>' + '<th colspan="2">Transaction Total</th>' +
'<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' + '<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' +
'<td class="is-hidden-print"></td>' + '<td class="is-hidden-print"></td>' +
"</tr></tfoot>") + '</tr></tfoot>') +
"</table>"; '</table>';
let transactionGrandTotal = 0; let transactionGrandTotal = 0;
for (const lotOccupancyTransaction of lotOccupancyTransactions) { for (const lotOccupancyTransaction of lotOccupancyTransactions) {
transactionGrandTotal += lotOccupancyTransaction.transactionAmount; transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.className = "container--lotOccupancyTransaction"; tableRowElement.className = 'container--lotOccupancyTransaction';
tableRowElement.dataset.transactionIndex = tableRowElement.dataset.transactionIndex =
lotOccupancyTransaction.transactionIndex.toString(); lotOccupancyTransaction.transactionIndex.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
lotOccupancyTransaction.transactionDateString + lotOccupancyTransaction.transactionDateString +
"</td>" + '</td>' +
("<td>" + ('<td>' +
cityssm.escapeHTML(lotOccupancyTransaction.externalReceiptNumber || "") + cityssm.escapeHTML(lotOccupancyTransaction.externalReceiptNumber || '') +
"<br />" + '<br />' +
"<small>" + '<small>' +
cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || "") + cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || '') +
"</small>" + '</small>' +
"</td>") + '</td>') +
('<td class="has-text-right">$' + ('<td class="has-text-right">$' +
lotOccupancyTransaction.transactionAmount.toFixed(2) + lotOccupancyTransaction.transactionAmount.toFixed(2) +
"</td>") + '</td>') +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' + '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>"); '</td>');
tableRowElement tableRowElement
.querySelector("button") .querySelector('button')
.addEventListener("click", deleteLotOccupancyTransaction); .addEventListener('click', deleteLotOccupancyTransaction);
lotOccupancyTransactionsContainerElement.querySelector("tbody").append(tableRowElement); lotOccupancyTransactionsContainerElement
.querySelector('tbody')
.append(tableRowElement);
} }
lotOccupancyTransactionsContainerElement.querySelector("#lotOccupancyTransactions--grandTotal").textContent = "$" + transactionGrandTotal.toFixed(2); ;
lotOccupancyTransactionsContainerElement.querySelector('#lotOccupancyTransactions--grandTotal').textContent = '$' + transactionGrandTotal.toFixed(2);
const feeGrandTotal = getFeeGrandTotal(); const feeGrandTotal = getFeeGrandTotal();
if (feeGrandTotal > transactionGrandTotal) { if (feeGrandTotal > transactionGrandTotal) {
lotOccupancyTransactionsContainerElement.insertAdjacentHTML("afterbegin", '<div class="message is-warning">' + lotOccupancyTransactionsContainerElement.insertAdjacentHTML('afterbegin', '<div class="message is-warning">' +
'<div class="message-body">' + '<div class="message-body">' +
'<div class="level">' + '<div class="level">' +
'<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' + '<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' +
'<div class="level-right"><div class="level-item">$' + '<div class="level-right"><div class="level-item">$' +
(feeGrandTotal - transactionGrandTotal).toFixed(2) + (feeGrandTotal - transactionGrandTotal).toFixed(2) +
"</div></div>" + '</div></div>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</div>"); '</div>');
} }
}; };
document.querySelector("#button--addTransaction").addEventListener("click", () => { document
.querySelector('#button--addTransaction')
.addEventListener('click', () => {
let addCloseModalFunction; let addCloseModalFunction;
const doAddTransaction = (submitEvent) => { const doAddTransaction = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyTransaction", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyTransaction', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyTransactions = responseJSON.lotOccupancyTransactions; lotOccupancyTransactions = responseJSON.lotOccupancyTransactions;
addCloseModalFunction(); addCloseModalFunction();
@ -376,20 +398,20 @@ document.querySelector("#button--addTransaction").addEventListener("click", () =
} }
else { else {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Error Adding Transaction", title: 'Error Adding Transaction',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-addTransaction", { cityssm.openHtmlModal('lotOccupancy-addTransaction', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotOccupancyTransactionAdd--lotOccupancyId").value = lotOccupancyId.toString(); modalElement.querySelector('#lotOccupancyTransactionAdd--lotOccupancyId').value = lotOccupancyId.toString();
const feeGrandTotal = getFeeGrandTotal(); const feeGrandTotal = getFeeGrandTotal();
const transactionGrandTotal = getTransactionGrandTotal(); const transactionGrandTotal = getTransactionGrandTotal();
const transactionAmountElement = modalElement.querySelector("#lotOccupancyTransactionAdd--transactionAmount"); const transactionAmountElement = modalElement.querySelector('#lotOccupancyTransactionAdd--transactionAmount');
transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2); transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2);
transactionAmountElement.max = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2); transactionAmountElement.max = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
transactionAmountElement.value = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2); transactionAmountElement.value = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
@ -397,7 +419,9 @@ document.querySelector("#button--addTransaction").addEventListener("click", () =
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
modalElement.querySelector("form").addEventListener("submit", doAddTransaction); modalElement
.querySelector('form')
.addEventListener('submit', doAddTransaction);
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();

586
public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts
View File

@ -1,290 +1,306 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
declare const lotOccupancyId: string; declare const lotOccupancyId: string
declare const hasUnsavedChanges: boolean; declare const hasUnsavedChanges: boolean
let lotOccupancyFees: recordTypes.LotOccupancyFee[] = exports.lotOccupancyFees; let lotOccupancyFees: recordTypes.LotOccupancyFee[] = exports.lotOccupancyFees
delete exports.lotOccupancyFees; delete exports.lotOccupancyFees
const lotOccupancyFeesContainerElement = document.querySelector( const lotOccupancyFeesContainerElement = document.querySelector(
"#container--lotOccupancyFees" '#container--lotOccupancyFees'
) as HTMLElement; ) as HTMLElement
const getFeeGrandTotal = (): number => { const getFeeGrandTotal = (): number => {
let feeGrandTotal = 0; let feeGrandTotal = 0
for (const lotOccupancyFee of lotOccupancyFees) { for (const lotOccupancyFee of lotOccupancyFees) {
feeGrandTotal += feeGrandTotal +=
(lotOccupancyFee.feeAmount! + lotOccupancyFee.taxAmount!) * lotOccupancyFee.quantity!; (lotOccupancyFee.feeAmount! + lotOccupancyFee.taxAmount!) *
lotOccupancyFee.quantity!
} }
return feeGrandTotal; return feeGrandTotal
}; }
const deleteLotOccupancyFee = (clickEvent: Event) => { const deleteLotOccupancyFee = (clickEvent: Event) => {
const feeId = ( const feeId = (
(clickEvent.currentTarget as HTMLElement).closest( (clickEvent.currentTarget as HTMLElement).closest(
".container--lotOccupancyFee" '.container--lotOccupancyFee'
) as HTMLElement ) as HTMLElement
).dataset.feeId; ).dataset.feeId
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyFee", los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyFee',
{ {
lotOccupancyId, lotOccupancyId,
feeId feeId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyFees?: recordTypes.LotOccupancyFee[]; lotOccupancyFees?: recordTypes.LotOccupancyFee[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyFees = responseJSON.lotOccupancyFees!; lotOccupancyFees = responseJSON.lotOccupancyFees!
renderLotOccupancyFees(); renderLotOccupancyFees()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Fee", title: 'Error Deleting Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Fee", title: 'Delete Fee',
message: "Are you sure you want to delete this fee?", message: 'Are you sure you want to delete this fee?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Fee", text: 'Yes, Delete Fee',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}; }
const renderLotOccupancyFees = () => { const renderLotOccupancyFees = () => {
if (lotOccupancyFees.length === 0) { if (lotOccupancyFees.length === 0) {
lotOccupancyFeesContainerElement.innerHTML = lotOccupancyFeesContainerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no fees associated with this record.</p>' + '<p class="message-body">There are no fees associated with this record.</p>' +
"</div>"; '</div>'
renderLotOccupancyTransactions(); renderLotOccupancyTransactions()
return; return
} }
lotOccupancyFeesContainerElement.innerHTML = lotOccupancyFeesContainerElement.innerHTML =
'<table class="table is-fullwidth is-striped is-hoverable">' + '<table class="table is-fullwidth is-striped is-hoverable">' +
("<thead><tr>" + ('<thead><tr>' +
"<th>Fee</th>" + '<th>Fee</th>' +
'<th><span class="is-sr-only">Unit Cost</span></th>' + '<th><span class="is-sr-only">Unit Cost</span></th>' +
'<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' + '<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' +
'<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' + '<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' +
'<th class="has-width-1"><span class="is-sr-only">equals</span></th>' + '<th class="has-width-1"><span class="is-sr-only">equals</span></th>' +
'<th class="has-width-1 has-text-right">Total</th>' + '<th class="has-width-1 has-text-right">Total</th>' +
'<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>") + '</tr></thead>') +
"<tbody></tbody>" + '<tbody></tbody>' +
("<tfoot>" + ('<tfoot>' +
'<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' + '<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
'<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' + '<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
'<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' + '<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' +
"</tfoot>") + '</tfoot>') +
"</table>"; '</table>'
let feeAmountTotal = 0; let feeAmountTotal = 0
let taxAmountTotal = 0; let taxAmountTotal = 0
for (const lotOccupancyFee of lotOccupancyFees) { for (const lotOccupancyFee of lotOccupancyFees) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.className = "container--lotOccupancyFee"; tableRowElement.className = 'container--lotOccupancyFee'
tableRowElement.dataset.feeId = lotOccupancyFee.feeId!.toString(); tableRowElement.dataset.feeId = lotOccupancyFee.feeId!.toString()
tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity ? "1" : "0"; tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity
? '1'
: '0'
tableRowElement.innerHTML = tableRowElement.innerHTML =
'<td colspan="' + '<td colspan="' +
(lotOccupancyFee.quantity === 1 ? "5" : "1") + (lotOccupancyFee.quantity === 1 ? '5' : '1') +
'">' + '">' +
cityssm.escapeHTML(lotOccupancyFee.feeName || "") + cityssm.escapeHTML(lotOccupancyFee.feeName || '') +
"</td>" + '</td>' +
(lotOccupancyFee.quantity === 1 (lotOccupancyFee.quantity === 1
? "" ? ''
: '<td class="has-text-right">$' + : '<td class="has-text-right">$' +
lotOccupancyFee.feeAmount!.toFixed(2) + lotOccupancyFee.feeAmount!.toFixed(2) +
"</td>" + '</td>' +
"<td>&times;</td>" + '<td>&times;</td>' +
'<td class="has-text-right">' + '<td class="has-text-right">' +
lotOccupancyFee.quantity + lotOccupancyFee.quantity +
"</td>" + '</td>' +
"<td>=</td>") + '<td>=</td>') +
'<td class="has-text-right">$' + '<td class="has-text-right">$' +
(lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!).toFixed(2) + (lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!).toFixed(2) +
"</td>" + '</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' + '<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>"); '</td>')
tableRowElement.querySelector("button")!.addEventListener("click", deleteLotOccupancyFee); tableRowElement
.querySelector('button')!
.addEventListener('click', deleteLotOccupancyFee)
lotOccupancyFeesContainerElement.querySelector("tbody")!.append(tableRowElement); lotOccupancyFeesContainerElement
.querySelector('tbody')!
.append(tableRowElement)
feeAmountTotal += lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!; feeAmountTotal += lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!
taxAmountTotal += lotOccupancyFee.taxAmount! * lotOccupancyFee.quantity!; taxAmountTotal += lotOccupancyFee.taxAmount! * lotOccupancyFee.quantity!
} }
( ;(
lotOccupancyFeesContainerElement.querySelector( lotOccupancyFeesContainerElement.querySelector(
"#lotOccupancyFees--feeAmountTotal" '#lotOccupancyFees--feeAmountTotal'
) as HTMLElement ) as HTMLElement
).textContent = "$" + feeAmountTotal.toFixed(2); ).textContent = '$' + feeAmountTotal.toFixed(2)
( ;(
lotOccupancyFeesContainerElement.querySelector( lotOccupancyFeesContainerElement.querySelector(
"#lotOccupancyFees--taxAmountTotal" '#lotOccupancyFees--taxAmountTotal'
) as HTMLElement ) as HTMLElement
).textContent = "$" + taxAmountTotal.toFixed(2); ).textContent = '$' + taxAmountTotal.toFixed(2)
( ;(
lotOccupancyFeesContainerElement.querySelector( lotOccupancyFeesContainerElement.querySelector(
"#lotOccupancyFees--grandTotal" '#lotOccupancyFees--grandTotal'
) as HTMLElement ) as HTMLElement
).textContent = "$" + (feeAmountTotal + taxAmountTotal).toFixed(2); ).textContent = '$' + (feeAmountTotal + taxAmountTotal).toFixed(2)
renderLotOccupancyTransactions(); renderLotOccupancyTransactions()
}; }
document.querySelector("#button--addFee")!.addEventListener("click", () => { document.querySelector('#button--addFee')!.addEventListener('click', () => {
if (hasUnsavedChanges) { if (hasUnsavedChanges) {
bulmaJS.alert({ bulmaJS.alert({
message: "Please save all unsaved changes before adding fees.", message: 'Please save all unsaved changes before adding fees.',
contextualColorName: "warning" contextualColorName: 'warning'
}); })
return; return
} }
let feeCategories: recordTypes.FeeCategory[]; let feeCategories: recordTypes.FeeCategory[]
let feeFilterElement: HTMLInputElement; let feeFilterElement: HTMLInputElement
let feeFilterResultsElement: HTMLElement; let feeFilterResultsElement: HTMLElement
const doAddFee = (feeId: number, quantity: number | string = 1) => { const doAddFee = (feeId: number, quantity: number | string = 1) => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doAddLotOccupancyFee", los.urlPrefix + '/lotOccupancies/doAddLotOccupancyFee',
{ {
lotOccupancyId, lotOccupancyId,
feeId, feeId,
quantity quantity
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyFees?: recordTypes.LotOccupancyFee[]; lotOccupancyFees?: recordTypes.LotOccupancyFee[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyFees = responseJSON.lotOccupancyFees!; lotOccupancyFees = responseJSON.lotOccupancyFees!
renderLotOccupancyFees(); renderLotOccupancyFees()
filterFees(); filterFees()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding Fee", title: 'Error Adding Fee',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const doSetQuantityAndAddFee = (fee: recordTypes.Fee) => { const doSetQuantityAndAddFee = (fee: recordTypes.Fee) => {
let quantityElement: HTMLInputElement; let quantityElement: HTMLInputElement
let quantityCloseModalFunction: () => void; let quantityCloseModalFunction: () => void
const doSetQuantity = (submitEvent: SubmitEvent) => { const doSetQuantity = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
doAddFee(fee.feeId!, quantityElement.value); doAddFee(fee.feeId!, quantityElement.value)
quantityCloseModalFunction(); quantityCloseModalFunction()
}; }
cityssm.openHtmlModal("lotOccupancy-setFeeQuantity", { cityssm.openHtmlModal('lotOccupancy-setFeeQuantity', {
onshow: (modalElement) => { onshow: (modalElement) => {
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyFeeQuantity--quantityUnit" '#lotOccupancyFeeQuantity--quantityUnit'
) as HTMLElement ) as HTMLElement
).textContent = fee.quantityUnit!; ).textContent = fee.quantityUnit!
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
quantityCloseModalFunction = closeModalFunction; quantityCloseModalFunction = closeModalFunction
quantityElement = modalElement.querySelector( quantityElement = modalElement.querySelector(
"#lotOccupancyFeeQuantity--quantity" '#lotOccupancyFeeQuantity--quantity'
) as HTMLInputElement; ) as HTMLInputElement
modalElement.querySelector("form")!.addEventListener("submit", doSetQuantity); modalElement
.querySelector('form')!
.addEventListener('submit', doSetQuantity)
}
})
} }
});
};
const tryAddFee = (clickEvent: Event) => { const tryAddFee = (clickEvent: Event) => {
clickEvent.preventDefault(); clickEvent.preventDefault()
const feeId = Number.parseInt((clickEvent.currentTarget as HTMLElement).dataset.feeId!, 10); const feeId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).dataset.feeId!,
10
)
const feeCategoryId = Number.parseInt( const feeCategoryId = Number.parseInt(
( (
(clickEvent.currentTarget as HTMLElement).closest( (clickEvent.currentTarget as HTMLElement).closest(
".container--feeCategory" '.container--feeCategory'
) as HTMLElement ) as HTMLElement
).dataset.feeCategoryId!, ).dataset.feeCategoryId!,
10 10
); )
const feeCategory = feeCategories.find((currentFeeCategory) => { const feeCategory = feeCategories.find((currentFeeCategory) => {
return currentFeeCategory.feeCategoryId === feeCategoryId; return currentFeeCategory.feeCategoryId === feeCategoryId
})!; })!
const fee = feeCategory.fees!.find((currentFee) => { const fee = feeCategory.fees!.find((currentFee) => {
return currentFee.feeId === feeId; return currentFee.feeId === feeId
})!; })!
if (fee.includeQuantity) { if (fee.includeQuantity) {
doSetQuantityAndAddFee(fee); doSetQuantityAndAddFee(fee)
} else { } else {
doAddFee(feeId); doAddFee(feeId)
}
} }
};
const filterFees = () => { const filterFees = () => {
const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" "); const filterStringPieces = feeFilterElement.value
.trim()
.toLowerCase()
.split(' ')
feeFilterResultsElement.innerHTML = ""; feeFilterResultsElement.innerHTML = ''
for (const feeCategory of feeCategories) { for (const feeCategory of feeCategories) {
const categoryContainerElement = document.createElement("div"); const categoryContainerElement = document.createElement('div')
categoryContainerElement.className = "container--feeCategory"; categoryContainerElement.className = 'container--feeCategory'
categoryContainerElement.dataset.feeCategoryId = feeCategory.feeCategoryId!.toString(); categoryContainerElement.dataset.feeCategoryId =
feeCategory.feeCategoryId!.toString()
categoryContainerElement.innerHTML = categoryContainerElement.innerHTML =
'<h4 class="title is-5 mt-2">' + '<h4 class="title is-5 mt-2">' +
cityssm.escapeHTML(feeCategory.feeCategory || "") + cityssm.escapeHTML(feeCategory.feeCategory || '') +
"</h4>" + '</h4>' +
'<div class="panel mb-5"></div>'; '<div class="panel mb-5"></div>'
let hasFees = false; let hasFees = false
for (const fee of feeCategory.fees!) { for (const fee of feeCategory.fees!) {
if ( if (
@ -294,309 +310,319 @@ document.querySelector("#button--addFee")!.addEventListener("click", () => {
"'][data-include-quantity='0']" "'][data-include-quantity='0']"
) )
) { ) {
continue; continue
} }
let includeFee = true; let includeFee = true
for (const filterStringPiece of filterStringPieces) { for (const filterStringPiece of filterStringPieces) {
if (!fee.feeName!.toLowerCase().includes(filterStringPiece)) { if (!fee.feeName!.toLowerCase().includes(filterStringPiece)) {
includeFee = false; includeFee = false
break; break
} }
} }
if (!includeFee) { if (!includeFee) {
continue; continue
} }
hasFees = true; hasFees = true
const panelBlockElement = document.createElement("a"); const panelBlockElement = document.createElement('a')
panelBlockElement.className = "panel-block is-block container--fee"; panelBlockElement.className = 'panel-block is-block container--fee'
panelBlockElement.dataset.feeId = fee.feeId!.toString(); panelBlockElement.dataset.feeId = fee.feeId!.toString()
panelBlockElement.href = "#"; panelBlockElement.href = '#'
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
"<strong>" + '<strong>' +
cityssm.escapeHTML(fee.feeName || "") + cityssm.escapeHTML(fee.feeName || '') +
"</strong><br />" + '</strong><br />' +
"<small>" + '<small>' +
cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") + cityssm
"</small>"; .escapeHTML(fee.feeDescription || '')
.replace(/\n/g, '<br />') +
'</small>'
panelBlockElement.addEventListener("click", tryAddFee); panelBlockElement.addEventListener('click', tryAddFee)
(categoryContainerElement.querySelector(".panel") as HTMLElement).append( ;(
panelBlockElement categoryContainerElement.querySelector('.panel') as HTMLElement
); ).append(panelBlockElement)
} }
if (hasFees) { if (hasFees) {
feeFilterResultsElement.append(categoryContainerElement); feeFilterResultsElement.append(categoryContainerElement)
}
} }
} }
};
cityssm.openHtmlModal("lotOccupancy-addFee", { cityssm.openHtmlModal('lotOccupancy-addFee', {
onshow: (modalElement) => { onshow: (modalElement) => {
feeFilterElement = modalElement.querySelector( feeFilterElement = modalElement.querySelector(
"#feeSelect--feeName" '#feeSelect--feeName'
) as HTMLInputElement; ) as HTMLInputElement
feeFilterResultsElement = modalElement.querySelector( feeFilterResultsElement = modalElement.querySelector(
"#resultsContainer--feeSelect" '#resultsContainer--feeSelect'
) as HTMLElement; ) as HTMLElement
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doGetFees", los.urlPrefix + '/lotOccupancies/doGetFees',
{ {
lotOccupancyId lotOccupancyId
}, },
(responseJSON: { feeCategories: recordTypes.FeeCategory[] }) => { (responseJSON: { feeCategories: recordTypes.FeeCategory[] }) => {
feeCategories = responseJSON.feeCategories; feeCategories = responseJSON.feeCategories
feeFilterElement.disabled = false; feeFilterElement.disabled = false
feeFilterElement.addEventListener("keyup", filterFees); feeFilterElement.addEventListener('keyup', filterFees)
feeFilterElement.focus(); feeFilterElement.focus()
filterFees(); filterFees()
} }
); )
}, },
onshown: () => { onshown: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}, },
onhidden: () => { onhidden: () => {
renderLotOccupancyFees(); renderLotOccupancyFees()
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
let lotOccupancyTransactions: recordTypes.LotOccupancyTransaction[] = let lotOccupancyTransactions: recordTypes.LotOccupancyTransaction[] =
exports.lotOccupancyTransactions; exports.lotOccupancyTransactions
delete exports.lotOccupancyTransactions; delete exports.lotOccupancyTransactions
const lotOccupancyTransactionsContainerElement = document.querySelector( const lotOccupancyTransactionsContainerElement = document.querySelector(
"#container--lotOccupancyTransactions" '#container--lotOccupancyTransactions'
) as HTMLElement; ) as HTMLElement
const getTransactionGrandTotal = (): number => { const getTransactionGrandTotal = (): number => {
let transactionGrandTotal = 0; let transactionGrandTotal = 0
for (const lotOccupancyTransaction of lotOccupancyTransactions) { for (const lotOccupancyTransaction of lotOccupancyTransactions) {
transactionGrandTotal += lotOccupancyTransaction.transactionAmount; transactionGrandTotal += lotOccupancyTransaction.transactionAmount
} }
return transactionGrandTotal; return transactionGrandTotal
}; }
const deleteLotOccupancyTransaction = (clickEvent: Event) => { const deleteLotOccupancyTransaction = (clickEvent: Event) => {
const transactionIndex = ( const transactionIndex = (
(clickEvent.currentTarget as HTMLElement).closest( (clickEvent.currentTarget as HTMLElement).closest(
".container--lotOccupancyTransaction" '.container--lotOccupancyTransaction'
) as HTMLElement ) as HTMLElement
).dataset.transactionIndex; ).dataset.transactionIndex
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyTransaction", los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyTransaction',
{ {
lotOccupancyId, lotOccupancyId,
transactionIndex transactionIndex
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[]; lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!; lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!
renderLotOccupancyTransactions(); renderLotOccupancyTransactions()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Transaction", title: 'Error Deleting Transaction',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Trasnaction", title: 'Delete Trasnaction',
message: "Are you sure you want to delete this transaction?", message: 'Are you sure you want to delete this transaction?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Transaction", text: 'Yes, Delete Transaction',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}; }
const renderLotOccupancyTransactions = () => { const renderLotOccupancyTransactions = () => {
if (lotOccupancyTransactions.length === 0) { if (lotOccupancyTransactions.length === 0) {
lotOccupancyTransactionsContainerElement.innerHTML = lotOccupancyTransactionsContainerElement.innerHTML =
'<div class="message ' + '<div class="message ' +
(lotOccupancyFees.length === 0 ? "is-info" : "is-warning") + (lotOccupancyFees.length === 0 ? 'is-info' : 'is-warning') +
'">' + '">' +
'<p class="message-body">There are no transactions associated with this record.</p>' + '<p class="message-body">There are no transactions associated with this record.</p>' +
"</div>"; '</div>'
return; return
} }
lotOccupancyTransactionsContainerElement.innerHTML = lotOccupancyTransactionsContainerElement.innerHTML =
'<table class="table is-fullwidth is-striped is-hoverable">' + '<table class="table is-fullwidth is-striped is-hoverable">' +
"<thead><tr>" + '<thead><tr>' +
'<th class="has-width-1">Date</th>' + '<th class="has-width-1">Date</th>' +
"<th>" + '<th>' +
cityssm.escapeHTML(exports.aliases.externalReceiptNumber) + cityssm.escapeHTML(exports.aliases.externalReceiptNumber) +
"</th>" + '</th>' +
'<th class="has-text-right has-width-1">Amount</th>' + '<th class="has-text-right has-width-1">Amount</th>' +
'<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>" + '</tr></thead>' +
"<tbody></tbody>" + '<tbody></tbody>' +
("<tfoot><tr>" + ('<tfoot><tr>' +
'<th colspan="2">Transaction Total</th>' + '<th colspan="2">Transaction Total</th>' +
'<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' + '<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' +
'<td class="is-hidden-print"></td>' + '<td class="is-hidden-print"></td>' +
"</tr></tfoot>") + '</tr></tfoot>') +
"</table>"; '</table>'
let transactionGrandTotal = 0; let transactionGrandTotal = 0
for (const lotOccupancyTransaction of lotOccupancyTransactions) { for (const lotOccupancyTransaction of lotOccupancyTransactions) {
transactionGrandTotal += lotOccupancyTransaction.transactionAmount; transactionGrandTotal += lotOccupancyTransaction.transactionAmount
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.className = "container--lotOccupancyTransaction"; tableRowElement.className = 'container--lotOccupancyTransaction'
tableRowElement.dataset.transactionIndex = tableRowElement.dataset.transactionIndex =
lotOccupancyTransaction.transactionIndex!.toString(); lotOccupancyTransaction.transactionIndex!.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
lotOccupancyTransaction.transactionDateString + lotOccupancyTransaction.transactionDateString +
"</td>" + '</td>' +
("<td>" + ('<td>' +
cityssm.escapeHTML(lotOccupancyTransaction.externalReceiptNumber || "") + cityssm.escapeHTML(
"<br />" + lotOccupancyTransaction.externalReceiptNumber || ''
"<small>" + ) +
cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || "") + '<br />' +
"</small>" + '<small>' +
"</td>") + cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || '') +
'</small>' +
'</td>') +
('<td class="has-text-right">$' + ('<td class="has-text-right">$' +
lotOccupancyTransaction.transactionAmount.toFixed(2) + lotOccupancyTransaction.transactionAmount.toFixed(2) +
"</td>") + '</td>') +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' + '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>"); '</td>')
tableRowElement tableRowElement
.querySelector("button")! .querySelector('button')!
.addEventListener("click", deleteLotOccupancyTransaction); .addEventListener('click', deleteLotOccupancyTransaction)
lotOccupancyTransactionsContainerElement.querySelector("tbody")!.append(tableRowElement); lotOccupancyTransactionsContainerElement
.querySelector('tbody')!
.append(tableRowElement)
} }
( ;(
lotOccupancyTransactionsContainerElement.querySelector( lotOccupancyTransactionsContainerElement.querySelector(
"#lotOccupancyTransactions--grandTotal" '#lotOccupancyTransactions--grandTotal'
) as HTMLElement ) as HTMLElement
).textContent = "$" + transactionGrandTotal.toFixed(2); ).textContent = '$' + transactionGrandTotal.toFixed(2)
const feeGrandTotal = getFeeGrandTotal(); const feeGrandTotal = getFeeGrandTotal()
if (feeGrandTotal > transactionGrandTotal) { if (feeGrandTotal > transactionGrandTotal) {
lotOccupancyTransactionsContainerElement.insertAdjacentHTML( lotOccupancyTransactionsContainerElement.insertAdjacentHTML(
"afterbegin", 'afterbegin',
'<div class="message is-warning">' + '<div class="message is-warning">' +
'<div class="message-body">' + '<div class="message-body">' +
'<div class="level">' + '<div class="level">' +
'<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' + '<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' +
'<div class="level-right"><div class="level-item">$' + '<div class="level-right"><div class="level-item">$' +
(feeGrandTotal - transactionGrandTotal).toFixed(2) + (feeGrandTotal - transactionGrandTotal).toFixed(2) +
"</div></div>" + '</div></div>' +
"</div>" + '</div>' +
"</div>" + '</div>' +
"</div>" '</div>'
); )
}
} }
};
document.querySelector("#button--addTransaction")!.addEventListener("click", () => { document
let addCloseModalFunction: () => void; .querySelector('#button--addTransaction')!
.addEventListener('click', () => {
let addCloseModalFunction: () => void
const doAddTransaction = (submitEvent: SubmitEvent) => { const doAddTransaction = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doAddLotOccupancyTransaction", los.urlPrefix + '/lotOccupancies/doAddLotOccupancyTransaction',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[]; lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!; lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!
addCloseModalFunction(); addCloseModalFunction()
renderLotOccupancyTransactions(); renderLotOccupancyTransactions()
} else { } else {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Error Adding Transaction", title: 'Error Adding Transaction',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lotOccupancy-addTransaction", { cityssm.openHtmlModal('lotOccupancy-addTransaction', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyTransactionAdd--lotOccupancyId" '#lotOccupancyTransactionAdd--lotOccupancyId'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyId.toString(); ).value = lotOccupancyId.toString()
const feeGrandTotal = getFeeGrandTotal(); const feeGrandTotal = getFeeGrandTotal()
const transactionGrandTotal = getTransactionGrandTotal(); const transactionGrandTotal = getTransactionGrandTotal()
const transactionAmountElement = modalElement.querySelector( const transactionAmountElement = modalElement.querySelector(
"#lotOccupancyTransactionAdd--transactionAmount" '#lotOccupancyTransactionAdd--transactionAmount'
) as HTMLInputElement; ) as HTMLInputElement
transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2); transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2)
transactionAmountElement.max = Math.max( transactionAmountElement.max = Math.max(
feeGrandTotal - transactionGrandTotal, feeGrandTotal - transactionGrandTotal,
0 0
).toFixed(2); ).toFixed(2)
transactionAmountElement.value = Math.max( transactionAmountElement.value = Math.max(
feeGrandTotal - transactionGrandTotal, feeGrandTotal - transactionGrandTotal,
0 0
).toFixed(2); ).toFixed(2)
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction
modalElement.querySelector("form")!.addEventListener("submit", doAddTransaction); modalElement
.querySelector('form')!
.addEventListener('submit', doAddTransaction)
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
renderLotOccupancyFees(); renderLotOccupancyFees()

293
public-typescript/lotOccupancyEdit/lotOccupancyEditOccupants.js
View File

@ -3,7 +3,8 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
let lotOccupancyOccupants; let lotOccupancyOccupants;
const openEditLotOccupancyOccupant = (clickEvent) => { const openEditLotOccupancyOccupant = (clickEvent) => {
const lotOccupantIndex = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupantIndex, 10); const lotOccupantIndex = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.lotOccupantIndex, 10);
const lotOccupancyOccupant = lotOccupancyOccupants.find((currentLotOccupancyOccupant) => { const lotOccupancyOccupant = lotOccupancyOccupants.find((currentLotOccupancyOccupant) => {
return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex; return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex;
}); });
@ -11,7 +12,7 @@ const openEditLotOccupancyOccupant = (clickEvent) => {
let editCloseModalFunction; let editCloseModalFunction;
const editOccupant = (submitEvent) => { const editOccupant = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyOccupant", editFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant', editFormElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyOccupants = responseJSON.lotOccupancyOccupants; lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
editCloseModalFunction(); editCloseModalFunction();
@ -19,52 +20,55 @@ const openEditLotOccupancyOccupant = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.occupant, title: 'Error Updating ' + exports.aliases.occupant,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-editOccupant", { cityssm.openHtmlModal('lotOccupancy-editOccupant', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupancyId").value = lotOccupancyId; modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupancyId').value = lotOccupancyId;
modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantIndex").value = lotOccupantIndex.toString(); modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantIndex').value = lotOccupantIndex.toString();
const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantTypeId"); const lotOccupantTypeSelectElement = modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId');
let lotOccupantTypeSelected = false; let lotOccupantTypeSelected = false;
for (const lotOccupantType of exports.lotOccupantTypes) { for (const lotOccupantType of exports.lotOccupantTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotOccupantType.lotOccupantTypeId.toString(); optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
optionElement.textContent = lotOccupantType.lotOccupantType; optionElement.textContent = lotOccupantType.lotOccupantType;
if (lotOccupantType.lotOccupantTypeId === lotOccupancyOccupant.lotOccupantTypeId) { if (lotOccupantType.lotOccupantTypeId ===
lotOccupancyOccupant.lotOccupantTypeId) {
optionElement.selected = true; optionElement.selected = true;
lotOccupantTypeSelected = true; lotOccupantTypeSelected = true;
} }
lotOccupantTypeSelectElement.append(optionElement); lotOccupantTypeSelectElement.append(optionElement);
} }
if (!lotOccupantTypeSelected) { if (!lotOccupantTypeSelected) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString(); optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString();
optionElement.textContent = lotOccupancyOccupant.lotOccupantType; optionElement.textContent =
lotOccupancyOccupant.lotOccupantType;
optionElement.selected = true; optionElement.selected = true;
lotOccupantTypeSelectElement.append(optionElement); lotOccupantTypeSelectElement.append(optionElement);
} }
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantName").value = lotOccupancyOccupant.occupantName; ;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantAddress1").value = lotOccupancyOccupant.occupantAddress1; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantName').value = lotOccupancyOccupant.occupantName;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantAddress2").value = lotOccupancyOccupant.occupantAddress2; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress1').value = lotOccupancyOccupant.occupantAddress1;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantCity").value = lotOccupancyOccupant.occupantCity; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress2').value = lotOccupancyOccupant.occupantAddress2;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantProvince").value = lotOccupancyOccupant.occupantProvince; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantCity').value = lotOccupancyOccupant.occupantCity;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantPostalCode").value = lotOccupancyOccupant.occupantPostalCode; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantProvince').value = lotOccupancyOccupant.occupantProvince;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantPhoneNumber").value = lotOccupancyOccupant.occupantPhoneNumber; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPostalCode').value = lotOccupancyOccupant.occupantPostalCode;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantEmailAddress").value = lotOccupancyOccupant.occupantEmailAddress; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPhoneNumber').value = lotOccupancyOccupant.occupantPhoneNumber;
modalElement.querySelector("#lotOccupancyOccupantEdit--occupantComment").value = lotOccupancyOccupant.occupantComment; modalElement.querySelector('#lotOccupancyOccupantEdit--occupantEmailAddress').value = lotOccupancyOccupant.occupantEmailAddress;
modalElement.querySelector('#lotOccupancyOccupantEdit--occupantComment').value = lotOccupancyOccupant.occupantComment;
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantTypeId").focus(); modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId').focus();
editFormElement = modalElement.querySelector("form"); editFormElement = modalElement.querySelector('form');
editFormElement.addEventListener("submit", editOccupant); editFormElement.addEventListener('submit', editOccupant);
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
}, },
onremoved: () => { onremoved: () => {
@ -73,10 +77,9 @@ const openEditLotOccupancyOccupant = (clickEvent) => {
}); });
}; };
const deleteLotOccupancyOccupant = (clickEvent) => { const deleteLotOccupancyOccupant = (clickEvent) => {
const lotOccupantIndex = clickEvent.currentTarget.closest("tr").dataset const lotOccupantIndex = clickEvent.currentTarget.closest('tr').dataset.lotOccupantIndex;
.lotOccupantIndex;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyOccupant", { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyOccupant', {
lotOccupancyId, lotOccupancyId,
lotOccupantIndex lotOccupantIndex
}, (responseJSON) => { }, (responseJSON) => {
@ -86,128 +89,135 @@ const deleteLotOccupancyOccupant = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing " + exports.aliases.occupant, title: 'Error Removing ' + exports.aliases.occupant,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove " + exports.aliases.occupant + "?", title: 'Remove ' + exports.aliases.occupant + '?',
message: "Are you sure you want to remove this " + exports.aliases.occupant.toLowerCase() + "?", message: 'Are you sure you want to remove this ' +
exports.aliases.occupant.toLowerCase() +
'?',
okButton: { okButton: {
text: "Yes, Remove " + exports.aliases.occupant, text: 'Yes, Remove ' + exports.aliases.occupant,
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); });
}; };
const renderLotOccupancyOccupants = () => { const renderLotOccupancyOccupants = () => {
const occupantsContainer = document.querySelector("#container--lotOccupancyOccupants"); const occupantsContainer = document.querySelector('#container--lotOccupancyOccupants');
cityssm.clearElement(occupantsContainer); cityssm.clearElement(occupantsContainer);
if (lotOccupancyOccupants.length === 0) { if (lotOccupancyOccupants.length === 0) {
occupantsContainer.innerHTML = occupantsContainer.innerHTML =
'<div class="message is-warning">' + '<div class="message is-warning">' +
'<p class="message-body">There are no ' + '<p class="message-body">There are no ' +
exports.aliases.occupants.toLowerCase() + exports.aliases.occupants.toLowerCase() +
" associated with this record.</p>" + ' associated with this record.</p>' +
"</div>"; '</div>';
return; return;
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table');
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable';
tableElement.innerHTML = tableElement.innerHTML =
"<thead><tr>" + '<thead><tr>' +
("<th>" + exports.aliases.occupant + "</th>") + ('<th>' + exports.aliases.occupant + '</th>') +
"<th>Address</th>" + '<th>Address</th>' +
"<th>Other Contact</th>" + '<th>Other Contact</th>' +
"<th>Comment</th>" + '<th>Comment</th>' +
'<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>" + '</tr></thead>' +
"<tbody></tbody>"; '<tbody></tbody>';
for (const lotOccupancyOccupant of lotOccupancyOccupants) { for (const lotOccupancyOccupant of lotOccupancyOccupants) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.lotOccupantIndex = tableRowElement.dataset.lotOccupantIndex =
lotOccupancyOccupant.lotOccupantIndex.toString(); lotOccupancyOccupant.lotOccupantIndex.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(lotOccupancyOccupant.occupantName || "(No Name)") + cityssm.escapeHTML(lotOccupancyOccupant.occupantName || '(No Name)') +
"<br />" + '<br />' +
('<span class="tag">' + ('<span class="tag">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(lotOccupancyOccupant.fontAwesomeIconClass) + cityssm.escapeHTML(lotOccupancyOccupant.fontAwesomeIconClass) +
'" aria-hidden="true"></i>' + '" aria-hidden="true"></i>' +
' <span class="ml-1">' + ' <span class="ml-1">' +
cityssm.escapeHTML(lotOccupancyOccupant.lotOccupantType) + cityssm.escapeHTML(lotOccupancyOccupant.lotOccupantType) +
"</span>" + '</span>' +
"</span>") + '</span>') +
"</td>" + '</td>' +
("<td>" + ('<td>' +
(lotOccupancyOccupant.occupantAddress1 (lotOccupancyOccupant.occupantAddress1
? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress1) + "<br />" ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress1) + '<br />'
: "") + : '') +
(lotOccupancyOccupant.occupantAddress2 (lotOccupancyOccupant.occupantAddress2
? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress2) + "<br />" ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress2) + '<br />'
: "") + : '') +
(lotOccupancyOccupant.occupantCity (lotOccupancyOccupant.occupantCity
? cityssm.escapeHTML(lotOccupancyOccupant.occupantCity) + ", " ? cityssm.escapeHTML(lotOccupancyOccupant.occupantCity) + ', '
: "") + : '') +
cityssm.escapeHTML(lotOccupancyOccupant.occupantProvince || "") + cityssm.escapeHTML(lotOccupancyOccupant.occupantProvince || '') +
"<br />" + '<br />' +
cityssm.escapeHTML(lotOccupancyOccupant.occupantPostalCode || "") + cityssm.escapeHTML(lotOccupancyOccupant.occupantPostalCode || '') +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(lotOccupancyOccupant.occupantPhoneNumber (lotOccupancyOccupant.occupantPhoneNumber
? cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) + "<br />" ? cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) +
: "") + '<br />'
: '') +
(lotOccupancyOccupant.occupantEmailAddress (lotOccupancyOccupant.occupantEmailAddress
? cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress) ? cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress)
: "") + : '') +
"</td>") + '</td>') +
("<td>" + cityssm.escapeHTML(lotOccupancyOccupant.occupantComment) + "</td>") + ('<td>' +
cityssm.escapeHTML(lotOccupancyOccupant.occupantComment) +
'</td>') +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete ' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete ' +
cityssm.escapeHTML(exports.aliases.occupant) + cityssm.escapeHTML(exports.aliases.occupant) +
'" type="button" aria-label="Delete">' + '" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>');
tableRowElement tableRowElement
.querySelector(".button--edit") .querySelector('.button--edit')
.addEventListener("click", openEditLotOccupancyOccupant); .addEventListener('click', openEditLotOccupancyOccupant);
tableRowElement tableRowElement
.querySelector(".button--delete") .querySelector('.button--delete')
.addEventListener("click", deleteLotOccupancyOccupant); .addEventListener('click', deleteLotOccupancyOccupant);
tableElement.querySelector("tbody").append(tableRowElement); tableElement.querySelector('tbody').append(tableRowElement);
} }
occupantsContainer.append(tableElement); occupantsContainer.append(tableElement);
}; };
if (isCreate) { if (isCreate) {
const lotOccupantTypeIdElement = document.querySelector("#lotOccupancy--lotOccupantTypeId"); const lotOccupantTypeIdElement = document.querySelector('#lotOccupancy--lotOccupantTypeId');
lotOccupantTypeIdElement.addEventListener("change", () => { lotOccupantTypeIdElement.addEventListener('change', () => {
const occupantFields = formElement.querySelectorAll("[data-table='LotOccupancyOccupant']"); const occupantFields = formElement.querySelectorAll("[data-table='LotOccupancyOccupant']");
for (const occupantField of occupantFields) { for (const occupantField of occupantFields) {
occupantField.disabled = lotOccupantTypeIdElement.value === ""; occupantField.disabled = lotOccupantTypeIdElement.value === '';
} }
}); });
} }
else { else {
lotOccupancyOccupants = exports.lotOccupancyOccupants; lotOccupancyOccupants = exports.lotOccupancyOccupants;
delete exports.lotOccupancyOccupants; delete exports.lotOccupancyOccupants;
document.querySelector("#button--addOccupant").addEventListener("click", () => { document
.querySelector('#button--addOccupant')
.addEventListener('click', () => {
let addCloseModalFunction; let addCloseModalFunction;
let addFormElement; let addFormElement;
let searchFormElement; let searchFormElement;
let searchResultsElement; let searchResultsElement;
const addOccupant = (formOrObject) => { const addOccupant = (formOrObject) => {
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant", formOrObject, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant', formOrObject, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyOccupants = responseJSON.lotOccupancyOccupants; lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
addCloseModalFunction(); addCloseModalFunction();
@ -215,9 +225,9 @@ else {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding " + exports.aliases.occupant, title: 'Error Adding ' + exports.aliases.occupant,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -232,15 +242,15 @@ else {
const panelBlockElement = clickEvent.currentTarget; const panelBlockElement = clickEvent.currentTarget;
const occupant = pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index, 10)]; const occupant = pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index, 10)];
const lotOccupantTypeId = panelBlockElement const lotOccupantTypeId = panelBlockElement
.closest(".modal") .closest('.modal')
.querySelector("#lotOccupancyOccupantCopy--lotOccupantTypeId").value; .querySelector('#lotOccupancyOccupantCopy--lotOccupantTypeId').value;
if (lotOccupantTypeId === "") { if (lotOccupantTypeId === '') {
bulmaJS.alert({ bulmaJS.alert({
title: "No " + exports.aliases.occupant + " Type Selected", title: 'No ' + exports.aliases.occupant + ' Type Selected',
message: "Select a type to apply to the newly added " + message: 'Select a type to apply to the newly added ' +
exports.aliases.occupant.toLowerCase() + exports.aliases.occupant.toLowerCase() +
".", '.',
contextualColorName: "warning" contextualColorName: 'warning'
}); });
} }
else { else {
@ -251,83 +261,86 @@ else {
}; };
const searchOccupants = (event) => { const searchOccupants = (event) => {
event.preventDefault(); event.preventDefault();
if (searchFormElement.querySelector("#lotOccupancyOccupantCopy--searchFilter").value === "") { if (searchFormElement.querySelector('#lotOccupancyOccupantCopy--searchFilter').value === '') {
searchResultsElement.innerHTML = searchResultsElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">Enter a partial name or address in the search field above.</p>' + '<p class="message-body">Enter a partial name or address in the search field above.</p>' +
"</div>"; '</div>';
return; return;
} }
searchResultsElement.innerHTML = los.getLoadingParagraphHTML("Searching..."); searchResultsElement.innerHTML =
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doSearchPastOccupants", searchFormElement, (responseJSON) => { los.getLoadingParagraphHTML('Searching...');
cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchPastOccupants', searchFormElement, (responseJSON) => {
pastOccupantSearchResults = responseJSON.occupants; pastOccupantSearchResults = responseJSON.occupants;
const panelElement = document.createElement("div"); const panelElement = document.createElement('div');
panelElement.className = "panel"; panelElement.className = 'panel';
for (const [index, occupant] of pastOccupantSearchResults.entries()) { for (const [index, occupant] of pastOccupantSearchResults.entries()) {
const panelBlockElement = document.createElement("a"); const panelBlockElement = document.createElement('a');
panelBlockElement.className = "panel-block is-block"; panelBlockElement.className = 'panel-block is-block';
panelBlockElement.dataset.index = index.toString(); panelBlockElement.dataset.index = index.toString();
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
"<strong>" + '<strong>' +
cityssm.escapeHTML(occupant.occupantName || "") + cityssm.escapeHTML(occupant.occupantName || '') +
"</strong>" + '</strong>' +
"<br />" + '<br />' +
'<div class="columns">' + '<div class="columns">' +
('<div class="column">' + ('<div class="column">' +
cityssm.escapeHTML(occupant.occupantAddress1 || "") + cityssm.escapeHTML(occupant.occupantAddress1 || '') +
"<br />" + '<br />' +
(occupant.occupantAddress2 (occupant.occupantAddress2
? cityssm.escapeHTML(occupant.occupantAddress2) + "<br />" ? cityssm.escapeHTML(occupant.occupantAddress2) + '<br />'
: "") + : '') +
cityssm.escapeHTML(occupant.occupantCity || "") + cityssm.escapeHTML(occupant.occupantCity || '') +
", " + ', ' +
cityssm.escapeHTML(occupant.occupantProvince || "") + cityssm.escapeHTML(occupant.occupantProvince || '') +
"<br />" + '<br />' +
cityssm.escapeHTML(occupant.occupantPostalCode || "") + cityssm.escapeHTML(occupant.occupantPostalCode || '') +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
(occupant.occupantPhoneNumber (occupant.occupantPhoneNumber
? cityssm.escapeHTML(occupant.occupantPhoneNumber) + "<br />" ? cityssm.escapeHTML(occupant.occupantPhoneNumber) +
: "") + '<br />'
cityssm.escapeHTML(occupant.occupantEmailAddress || "") + : '') +
"<br />" + cityssm.escapeHTML(occupant.occupantEmailAddress || '') +
"</div>") + '<br />' +
"</div>"; '</div>') +
panelBlockElement.addEventListener("click", addOccupantFromCopy); '</div>';
panelBlockElement.addEventListener('click', addOccupantFromCopy);
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement);
} }
searchResultsElement.innerHTML = ""; searchResultsElement.innerHTML = '';
searchResultsElement.append(panelElement); searchResultsElement.append(panelElement);
}); });
}; };
cityssm.openHtmlModal("lotOccupancy-addOccupant", { cityssm.openHtmlModal('lotOccupancy-addOccupant', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupancyId").value = lotOccupancyId; modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupancyId').value = lotOccupancyId;
const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId"); const lotOccupantTypeSelectElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
const lotOccupantTypeCopySelectElement = modalElement.querySelector("#lotOccupancyOccupantCopy--lotOccupantTypeId"); const lotOccupantTypeCopySelectElement = modalElement.querySelector('#lotOccupancyOccupantCopy--lotOccupantTypeId');
for (const lotOccupantType of exports.lotOccupantTypes) { for (const lotOccupantType of exports.lotOccupantTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotOccupantType.lotOccupantTypeId.toString(); optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
optionElement.textContent = lotOccupantType.lotOccupantType; optionElement.textContent = lotOccupantType.lotOccupantType;
lotOccupantTypeSelectElement.append(optionElement); lotOccupantTypeSelectElement.append(optionElement);
lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true)); lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
} }
modalElement.querySelector("#lotOccupancyOccupantAdd--occupantCity").value = exports.occupantCityDefault; ;
modalElement.querySelector("#lotOccupancyOccupantAdd--occupantProvince").value = exports.occupantProvinceDefault; modalElement.querySelector('#lotOccupancyOccupantAdd--occupantCity').value = exports.occupantCityDefault;
modalElement.querySelector('#lotOccupancyOccupantAdd--occupantProvince').value = exports.occupantProvinceDefault;
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
bulmaJS.init(modalElement); bulmaJS.init(modalElement);
modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId").focus(); modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId').focus();
addFormElement = modalElement.querySelector("#form--lotOccupancyOccupantAdd"); addFormElement = modalElement.querySelector('#form--lotOccupancyOccupantAdd');
addFormElement.addEventListener("submit", addOccupantFromForm); addFormElement.addEventListener('submit', addOccupantFromForm);
searchResultsElement = modalElement.querySelector("#lotOccupancyOccupantCopy--searchResults"); searchResultsElement = modalElement.querySelector('#lotOccupancyOccupantCopy--searchResults');
searchFormElement = modalElement.querySelector("#form--lotOccupancyOccupantCopy"); searchFormElement = modalElement.querySelector('#form--lotOccupancyOccupantCopy');
searchFormElement.addEventListener("submit", (formEvent) => { searchFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
}); });
modalElement.querySelector("#lotOccupancyOccupantCopy--searchFilter").addEventListener("change", searchOccupants); modalElement.querySelector('#lotOccupancyOccupantCopy--searchFilter').addEventListener('change', searchOccupants);
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction;
}, },
onremoved: () => { onremoved: () => {

614
public-typescript/lotOccupancyEdit/lotOccupancyEditOccupants.ts
View File

@ -1,558 +1,584 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
declare const lotOccupancyId: string; declare const lotOccupancyId: string
declare const isCreate: boolean; declare const isCreate: boolean
declare const formElement: HTMLFormElement; declare const formElement: HTMLFormElement
let lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[]; let lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[]
const openEditLotOccupancyOccupant = (clickEvent: Event) => { const openEditLotOccupancyOccupant = (clickEvent: Event) => {
const lotOccupantIndex = Number.parseInt( const lotOccupantIndex = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotOccupantIndex!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.lotOccupantIndex!,
10 10
); )
const lotOccupancyOccupant = lotOccupancyOccupants.find((currentLotOccupancyOccupant) => { const lotOccupancyOccupant = lotOccupancyOccupants.find(
return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex; (currentLotOccupancyOccupant) => {
})!; return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex
}
)!
let editFormElement: HTMLFormElement; let editFormElement: HTMLFormElement
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
const editOccupant = (submitEvent: SubmitEvent) => { const editOccupant = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyOccupant", los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant',
editFormElement, editFormElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]; lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyOccupants = responseJSON.lotOccupancyOccupants!; lotOccupancyOccupants = responseJSON.lotOccupancyOccupants!
editCloseModalFunction(); editCloseModalFunction()
renderLotOccupancyOccupants(); renderLotOccupancyOccupants()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.occupant, title: 'Error Updating ' + exports.aliases.occupant,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
cityssm.openHtmlModal("lotOccupancy-editOccupant", { cityssm.openHtmlModal('lotOccupancy-editOccupant', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--lotOccupancyId" '#lotOccupancyOccupantEdit--lotOccupancyId'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyId; ).value = lotOccupancyId
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--lotOccupantIndex" '#lotOccupancyOccupantEdit--lotOccupantIndex'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupantIndex.toString(); ).value = lotOccupantIndex.toString()
const lotOccupantTypeSelectElement = modalElement.querySelector( const lotOccupantTypeSelectElement = modalElement.querySelector(
"#lotOccupancyOccupantEdit--lotOccupantTypeId" '#lotOccupancyOccupantEdit--lotOccupantTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
let lotOccupantTypeSelected = false; let lotOccupantTypeSelected = false
for (const lotOccupantType of exports.lotOccupantTypes as recordTypes.LotOccupantType[]) { for (const lotOccupantType of exports.lotOccupantTypes as recordTypes.LotOccupantType[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = lotOccupantType.lotOccupantTypeId.toString(); optionElement.value = lotOccupantType.lotOccupantTypeId.toString()
optionElement.textContent = lotOccupantType.lotOccupantType; optionElement.textContent = lotOccupantType.lotOccupantType
if (lotOccupantType.lotOccupantTypeId === lotOccupancyOccupant.lotOccupantTypeId) { if (
optionElement.selected = true; lotOccupantType.lotOccupantTypeId ===
lotOccupantTypeSelected = true; lotOccupancyOccupant.lotOccupantTypeId
) {
optionElement.selected = true
lotOccupantTypeSelected = true
} }
lotOccupantTypeSelectElement.append(optionElement); lotOccupantTypeSelectElement.append(optionElement)
} }
if (!lotOccupantTypeSelected) { if (!lotOccupantTypeSelected) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = lotOccupancyOccupant.lotOccupantTypeId!.toString(); optionElement.value = lotOccupancyOccupant.lotOccupantTypeId!.toString()
optionElement.textContent = lotOccupancyOccupant.lotOccupantType as string; optionElement.textContent =
optionElement.selected = true; lotOccupancyOccupant.lotOccupantType as string
optionElement.selected = true
lotOccupantTypeSelectElement.append(optionElement); lotOccupantTypeSelectElement.append(optionElement)
} }
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantName" '#lotOccupancyOccupantEdit--occupantName'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantName!; ).value = lotOccupancyOccupant.occupantName!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantAddress1" '#lotOccupancyOccupantEdit--occupantAddress1'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantAddress1!; ).value = lotOccupancyOccupant.occupantAddress1!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantAddress2" '#lotOccupancyOccupantEdit--occupantAddress2'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantAddress2!; ).value = lotOccupancyOccupant.occupantAddress2!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantCity" '#lotOccupancyOccupantEdit--occupantCity'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantCity!; ).value = lotOccupancyOccupant.occupantCity!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantProvince" '#lotOccupancyOccupantEdit--occupantProvince'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantProvince!; ).value = lotOccupancyOccupant.occupantProvince!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantPostalCode" '#lotOccupancyOccupantEdit--occupantPostalCode'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantPostalCode!; ).value = lotOccupancyOccupant.occupantPostalCode!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantPhoneNumber" '#lotOccupancyOccupantEdit--occupantPhoneNumber'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantPhoneNumber!; ).value = lotOccupancyOccupant.occupantPhoneNumber!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantEmailAddress" '#lotOccupancyOccupantEdit--occupantEmailAddress'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyOccupant.occupantEmailAddress!; ).value = lotOccupancyOccupant.occupantEmailAddress!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--occupantComment" '#lotOccupancyOccupantEdit--occupantComment'
) as HTMLTextAreaElement ) as HTMLTextAreaElement
).value = lotOccupancyOccupant.occupantComment!; ).value = lotOccupancyOccupant.occupantComment!
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantEdit--lotOccupantTypeId" '#lotOccupancyOccupantEdit--lotOccupantTypeId'
) as HTMLInputElement ) as HTMLInputElement
).focus(); ).focus()
editFormElement = modalElement.querySelector("form")!; editFormElement = modalElement.querySelector('form')!
editFormElement.addEventListener("submit", editOccupant); editFormElement.addEventListener('submit', editOccupant)
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}
})
} }
});
};
const deleteLotOccupancyOccupant = (clickEvent: Event) => { const deleteLotOccupancyOccupant = (clickEvent: Event) => {
const lotOccupantIndex = (clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset const lotOccupantIndex = (clickEvent.currentTarget as HTMLElement).closest(
.lotOccupantIndex; 'tr'
)!.dataset.lotOccupantIndex
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyOccupant", los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyOccupant',
{ {
lotOccupancyId, lotOccupancyId,
lotOccupantIndex lotOccupantIndex
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[]; lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyOccupants = responseJSON.lotOccupancyOccupants; lotOccupancyOccupants = responseJSON.lotOccupancyOccupants
renderLotOccupancyOccupants(); renderLotOccupancyOccupants()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing " + exports.aliases.occupant, title: 'Error Removing ' + exports.aliases.occupant,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove " + exports.aliases.occupant + "?", title: 'Remove ' + exports.aliases.occupant + '?',
message: message:
"Are you sure you want to remove this " + exports.aliases.occupant.toLowerCase() + "?", 'Are you sure you want to remove this ' +
exports.aliases.occupant.toLowerCase() +
'?',
okButton: { okButton: {
text: "Yes, Remove " + exports.aliases.occupant, text: 'Yes, Remove ' + exports.aliases.occupant,
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); })
}; }
const renderLotOccupancyOccupants = () => { const renderLotOccupancyOccupants = () => {
const occupantsContainer = document.querySelector( const occupantsContainer = document.querySelector(
"#container--lotOccupancyOccupants" '#container--lotOccupancyOccupants'
) as HTMLElement; ) as HTMLElement
cityssm.clearElement(occupantsContainer); cityssm.clearElement(occupantsContainer)
if (lotOccupancyOccupants.length === 0) { if (lotOccupancyOccupants.length === 0) {
occupantsContainer.innerHTML = occupantsContainer.innerHTML =
'<div class="message is-warning">' + '<div class="message is-warning">' +
'<p class="message-body">There are no ' + '<p class="message-body">There are no ' +
exports.aliases.occupants.toLowerCase() + exports.aliases.occupants.toLowerCase() +
" associated with this record.</p>" + ' associated with this record.</p>' +
"</div>"; '</div>'
return; return
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table')
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable'
tableElement.innerHTML = tableElement.innerHTML =
"<thead><tr>" + '<thead><tr>' +
("<th>" + exports.aliases.occupant + "</th>") + ('<th>' + exports.aliases.occupant + '</th>') +
"<th>Address</th>" + '<th>Address</th>' +
"<th>Other Contact</th>" + '<th>Other Contact</th>' +
"<th>Comment</th>" + '<th>Comment</th>' +
'<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' + '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
"</tr></thead>" + '</tr></thead>' +
"<tbody></tbody>"; '<tbody></tbody>'
for (const lotOccupancyOccupant of lotOccupancyOccupants) { for (const lotOccupancyOccupant of lotOccupancyOccupants) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.lotOccupantIndex = tableRowElement.dataset.lotOccupantIndex =
lotOccupancyOccupant.lotOccupantIndex!.toString(); lotOccupancyOccupant.lotOccupantIndex!.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(lotOccupancyOccupant.occupantName || "(No Name)") + cityssm.escapeHTML(lotOccupancyOccupant.occupantName || '(No Name)') +
"<br />" + '<br />' +
('<span class="tag">' + ('<span class="tag">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(lotOccupancyOccupant.fontAwesomeIconClass!) + cityssm.escapeHTML(lotOccupancyOccupant.fontAwesomeIconClass!) +
'" aria-hidden="true"></i>' + '" aria-hidden="true"></i>' +
' <span class="ml-1">' + ' <span class="ml-1">' +
cityssm.escapeHTML(lotOccupancyOccupant.lotOccupantType!) + cityssm.escapeHTML(lotOccupancyOccupant.lotOccupantType!) +
"</span>" + '</span>' +
"</span>") + '</span>') +
"</td>" + '</td>' +
("<td>" + ('<td>' +
(lotOccupancyOccupant.occupantAddress1 (lotOccupancyOccupant.occupantAddress1
? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress1) + "<br />" ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress1) + '<br />'
: "") + : '') +
(lotOccupancyOccupant.occupantAddress2 (lotOccupancyOccupant.occupantAddress2
? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress2) + "<br />" ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress2) + '<br />'
: "") + : '') +
(lotOccupancyOccupant.occupantCity (lotOccupancyOccupant.occupantCity
? cityssm.escapeHTML(lotOccupancyOccupant.occupantCity) + ", " ? cityssm.escapeHTML(lotOccupancyOccupant.occupantCity) + ', '
: "") + : '') +
cityssm.escapeHTML(lotOccupancyOccupant.occupantProvince || "") + cityssm.escapeHTML(lotOccupancyOccupant.occupantProvince || '') +
"<br />" + '<br />' +
cityssm.escapeHTML(lotOccupancyOccupant.occupantPostalCode || "") + cityssm.escapeHTML(lotOccupancyOccupant.occupantPostalCode || '') +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(lotOccupancyOccupant.occupantPhoneNumber (lotOccupancyOccupant.occupantPhoneNumber
? cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) + "<br />" ? cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) +
: "") + '<br />'
: '') +
(lotOccupancyOccupant.occupantEmailAddress (lotOccupancyOccupant.occupantEmailAddress
? cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress) ? cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress)
: "") + : '') +
"</td>") + '</td>') +
("<td>" + cityssm.escapeHTML(lotOccupancyOccupant.occupantComment!) + "</td>") + ('<td>' +
cityssm.escapeHTML(lotOccupancyOccupant.occupantComment!) +
'</td>') +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete ' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete ' +
cityssm.escapeHTML(exports.aliases.occupant) + cityssm.escapeHTML(exports.aliases.occupant) +
'" type="button" aria-label="Delete">' + '" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>')
tableRowElement tableRowElement
.querySelector(".button--edit")! .querySelector('.button--edit')!
.addEventListener("click", openEditLotOccupancyOccupant); .addEventListener('click', openEditLotOccupancyOccupant)
tableRowElement tableRowElement
.querySelector(".button--delete")! .querySelector('.button--delete')!
.addEventListener("click", deleteLotOccupancyOccupant); .addEventListener('click', deleteLotOccupancyOccupant)
tableElement.querySelector("tbody")!.append(tableRowElement); tableElement.querySelector('tbody')!.append(tableRowElement)
} }
occupantsContainer.append(tableElement); occupantsContainer.append(tableElement)
}; }
if (isCreate) { if (isCreate) {
const lotOccupantTypeIdElement = document.querySelector( const lotOccupantTypeIdElement = document.querySelector(
"#lotOccupancy--lotOccupantTypeId" '#lotOccupancy--lotOccupantTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
lotOccupantTypeIdElement.addEventListener("change", () => { lotOccupantTypeIdElement.addEventListener('change', () => {
const occupantFields = formElement.querySelectorAll( const occupantFields = formElement.querySelectorAll(
"[data-table='LotOccupancyOccupant']" "[data-table='LotOccupancyOccupant']"
) as NodeListOf<HTMLInputElement | HTMLTextAreaElement>; ) as NodeListOf<HTMLInputElement | HTMLTextAreaElement>
for (const occupantField of occupantFields) { for (const occupantField of occupantFields) {
occupantField.disabled = lotOccupantTypeIdElement.value === ""; occupantField.disabled = lotOccupantTypeIdElement.value === ''
} }
}); })
} else { } else {
lotOccupancyOccupants = exports.lotOccupancyOccupants; lotOccupancyOccupants = exports.lotOccupancyOccupants
delete exports.lotOccupancyOccupants; delete exports.lotOccupancyOccupants
document.querySelector("#button--addOccupant")!.addEventListener("click", () => { document
let addCloseModalFunction: () => void; .querySelector('#button--addOccupant')!
.addEventListener('click', () => {
let addCloseModalFunction: () => void
let addFormElement: HTMLFormElement; let addFormElement: HTMLFormElement
let searchFormElement: HTMLFormElement; let searchFormElement: HTMLFormElement
let searchResultsElement: HTMLElement; let searchResultsElement: HTMLElement
const addOccupant = (formOrObject: HTMLFormElement | recordTypes.LotOccupancyOccupant) => { const addOccupant = (
formOrObject: HTMLFormElement | recordTypes.LotOccupancyOccupant
) => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant", los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant',
formOrObject, formOrObject,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]; lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
lotOccupancyOccupants = responseJSON.lotOccupancyOccupants!; lotOccupancyOccupants = responseJSON.lotOccupancyOccupants!
addCloseModalFunction(); addCloseModalFunction()
renderLotOccupancyOccupants(); renderLotOccupancyOccupants()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding " + exports.aliases.occupant, title: 'Error Adding ' + exports.aliases.occupant,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}; }
const addOccupantFromForm = (submitEvent: SubmitEvent) => { const addOccupantFromForm = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
addOccupant(addFormElement); addOccupant(addFormElement)
}; }
let pastOccupantSearchResults: recordTypes.LotOccupancyOccupant[] = []; let pastOccupantSearchResults: recordTypes.LotOccupancyOccupant[] = []
const addOccupantFromCopy = (clickEvent: MouseEvent) => { const addOccupantFromCopy = (clickEvent: MouseEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault()
const panelBlockElement = clickEvent.currentTarget as HTMLElement; const panelBlockElement = clickEvent.currentTarget as HTMLElement
const occupant = const occupant =
pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index!, 10)]; pastOccupantSearchResults[
Number.parseInt(panelBlockElement.dataset.index!, 10)
]
const lotOccupantTypeId = ( const lotOccupantTypeId = (
panelBlockElement panelBlockElement
.closest(".modal")! .closest('.modal')!
.querySelector( .querySelector(
"#lotOccupancyOccupantCopy--lotOccupantTypeId" '#lotOccupancyOccupantCopy--lotOccupantTypeId'
) as HTMLSelectElement ) as HTMLSelectElement
).value; ).value
if (lotOccupantTypeId === "") { if (lotOccupantTypeId === '') {
bulmaJS.alert({ bulmaJS.alert({
title: "No " + exports.aliases.occupant + " Type Selected", title: 'No ' + exports.aliases.occupant + ' Type Selected',
message: message:
"Select a type to apply to the newly added " + 'Select a type to apply to the newly added ' +
exports.aliases.occupant.toLowerCase() + exports.aliases.occupant.toLowerCase() +
".", '.',
contextualColorName: "warning" contextualColorName: 'warning'
}); })
} else { } else {
occupant.lotOccupantTypeId = Number.parseInt(lotOccupantTypeId, 10); occupant.lotOccupantTypeId = Number.parseInt(lotOccupantTypeId, 10)
occupant.lotOccupancyId = Number.parseInt(lotOccupancyId, 10); occupant.lotOccupancyId = Number.parseInt(lotOccupancyId, 10)
addOccupant(occupant); addOccupant(occupant)
}
} }
};
const searchOccupants = (event: Event) => { const searchOccupants = (event: Event) => {
event.preventDefault(); event.preventDefault()
if ( if (
( (
searchFormElement.querySelector( searchFormElement.querySelector(
"#lotOccupancyOccupantCopy--searchFilter" '#lotOccupancyOccupantCopy--searchFilter'
) as HTMLInputElement ) as HTMLInputElement
).value === "" ).value === ''
) { ) {
searchResultsElement.innerHTML = searchResultsElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">Enter a partial name or address in the search field above.</p>' + '<p class="message-body">Enter a partial name or address in the search field above.</p>' +
"</div>"; '</div>'
return; return
} }
searchResultsElement.innerHTML = los.getLoadingParagraphHTML("Searching..."); searchResultsElement.innerHTML =
los.getLoadingParagraphHTML('Searching...')
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doSearchPastOccupants", los.urlPrefix + '/lotOccupancies/doSearchPastOccupants',
searchFormElement, searchFormElement,
(responseJSON: { occupants: recordTypes.LotOccupancyOccupant[] }) => { (responseJSON: { occupants: recordTypes.LotOccupancyOccupant[] }) => {
pastOccupantSearchResults = responseJSON.occupants; pastOccupantSearchResults = responseJSON.occupants
const panelElement = document.createElement("div"); const panelElement = document.createElement('div')
panelElement.className = "panel"; panelElement.className = 'panel'
for (const [index, occupant] of pastOccupantSearchResults.entries()) { for (const [
const panelBlockElement = document.createElement("a"); index,
panelBlockElement.className = "panel-block is-block"; occupant
panelBlockElement.dataset.index = index.toString(); ] of pastOccupantSearchResults.entries()) {
const panelBlockElement = document.createElement('a')
panelBlockElement.className = 'panel-block is-block'
panelBlockElement.dataset.index = index.toString()
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
"<strong>" + '<strong>' +
cityssm.escapeHTML(occupant.occupantName || "") + cityssm.escapeHTML(occupant.occupantName || '') +
"</strong>" + '</strong>' +
"<br />" + '<br />' +
'<div class="columns">' + '<div class="columns">' +
('<div class="column">' + ('<div class="column">' +
cityssm.escapeHTML(occupant.occupantAddress1 || "") + cityssm.escapeHTML(occupant.occupantAddress1 || '') +
"<br />" + '<br />' +
(occupant.occupantAddress2 (occupant.occupantAddress2
? cityssm.escapeHTML(occupant.occupantAddress2) + "<br />" ? cityssm.escapeHTML(occupant.occupantAddress2) + '<br />'
: "") + : '') +
cityssm.escapeHTML(occupant.occupantCity || "") + cityssm.escapeHTML(occupant.occupantCity || '') +
", " + ', ' +
cityssm.escapeHTML(occupant.occupantProvince || "") + cityssm.escapeHTML(occupant.occupantProvince || '') +
"<br />" + '<br />' +
cityssm.escapeHTML(occupant.occupantPostalCode || "") + cityssm.escapeHTML(occupant.occupantPostalCode || '') +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
(occupant.occupantPhoneNumber (occupant.occupantPhoneNumber
? cityssm.escapeHTML(occupant.occupantPhoneNumber) + "<br />" ? cityssm.escapeHTML(occupant.occupantPhoneNumber) +
: "") + '<br />'
cityssm.escapeHTML(occupant.occupantEmailAddress || "") + : '') +
"<br />" + cityssm.escapeHTML(occupant.occupantEmailAddress || '') +
"</div>") + '<br />' +
"</div>"; '</div>') +
'</div>'
panelBlockElement.addEventListener("click", addOccupantFromCopy); panelBlockElement.addEventListener('click', addOccupantFromCopy)
panelElement.append(panelBlockElement); panelElement.append(panelBlockElement)
} }
searchResultsElement.innerHTML = ""; searchResultsElement.innerHTML = ''
searchResultsElement.append(panelElement); searchResultsElement.append(panelElement)
}
)
} }
);
};
cityssm.openHtmlModal("lotOccupancy-addOccupant", { cityssm.openHtmlModal('lotOccupancy-addOccupant', {
onshow: (modalElement) => { onshow: (modalElement) => {
los.populateAliases(modalElement); los.populateAliases(modalElement)
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantAdd--lotOccupancyId" '#lotOccupancyOccupantAdd--lotOccupancyId'
) as HTMLInputElement ) as HTMLInputElement
).value = lotOccupancyId; ).value = lotOccupancyId
const lotOccupantTypeSelectElement = modalElement.querySelector( const lotOccupantTypeSelectElement = modalElement.querySelector(
"#lotOccupancyOccupantAdd--lotOccupantTypeId" '#lotOccupancyOccupantAdd--lotOccupantTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
const lotOccupantTypeCopySelectElement = modalElement.querySelector( const lotOccupantTypeCopySelectElement = modalElement.querySelector(
"#lotOccupancyOccupantCopy--lotOccupantTypeId" '#lotOccupancyOccupantCopy--lotOccupantTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
for (const lotOccupantType of exports.lotOccupantTypes as recordTypes.LotOccupantType[]) { for (const lotOccupantType of exports.lotOccupantTypes as recordTypes.LotOccupantType[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = lotOccupantType.lotOccupantTypeId.toString(); optionElement.value = lotOccupantType.lotOccupantTypeId.toString()
optionElement.textContent = lotOccupantType.lotOccupantType; optionElement.textContent = lotOccupantType.lotOccupantType
lotOccupantTypeSelectElement.append(optionElement); lotOccupantTypeSelectElement.append(optionElement)
lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true)); lotOccupantTypeCopySelectElement.append(
optionElement.cloneNode(true)
)
} }
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantAdd--occupantCity" '#lotOccupancyOccupantAdd--occupantCity'
) as HTMLInputElement ) as HTMLInputElement
).value = exports.occupantCityDefault; ).value = exports.occupantCityDefault
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantAdd--occupantProvince" '#lotOccupancyOccupantAdd--occupantProvince'
) as HTMLInputElement ) as HTMLInputElement
).value = exports.occupantProvinceDefault; ).value = exports.occupantProvinceDefault
}, },
onshown: (modalElement, closeModalFunction) => { onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
bulmaJS.init(modalElement); bulmaJS.init(modalElement)
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantAdd--lotOccupantTypeId" '#lotOccupancyOccupantAdd--lotOccupantTypeId'
) as HTMLInputElement ) as HTMLInputElement
).focus(); ).focus()
addFormElement = modalElement.querySelector( addFormElement = modalElement.querySelector(
"#form--lotOccupancyOccupantAdd" '#form--lotOccupancyOccupantAdd'
) as HTMLFormElement; ) as HTMLFormElement
addFormElement.addEventListener("submit", addOccupantFromForm); addFormElement.addEventListener('submit', addOccupantFromForm)
searchResultsElement = modalElement.querySelector( searchResultsElement = modalElement.querySelector(
"#lotOccupancyOccupantCopy--searchResults" '#lotOccupancyOccupantCopy--searchResults'
) as HTMLElement; ) as HTMLElement
searchFormElement = modalElement.querySelector( searchFormElement = modalElement.querySelector(
"#form--lotOccupancyOccupantCopy" '#form--lotOccupancyOccupantCopy'
) as HTMLFormElement; ) as HTMLFormElement
searchFormElement.addEventListener("submit", (formEvent) => { searchFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
}); })
( ;(
modalElement.querySelector( modalElement.querySelector(
"#lotOccupancyOccupantCopy--searchFilter" '#lotOccupancyOccupantCopy--searchFilter'
) as HTMLInputElement ) as HTMLInputElement
).addEventListener("change", searchOccupants); ).addEventListener('change', searchOccupants)
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction
}, },
onremoved: () => { onremoved: () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
renderLotOccupancyOccupants(); renderLotOccupancyOccupants()
} }

94
public-typescript/lotOccupancySearch.js
View File

@ -3,10 +3,10 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const searchFilterFormElement = document.querySelector("#form--searchFilters"); const searchFilterFormElement = document.querySelector('#form--searchFilters');
const searchResultsContainerElement = document.querySelector("#container--searchResults"); const searchResultsContainerElement = document.querySelector('#container--searchResults');
const limit = Number.parseInt(document.querySelector("#searchFilter--limit").value, 10); const limit = Number.parseInt(document.querySelector('#searchFilter--limit').value, 10);
const offsetElement = document.querySelector("#searchFilter--offset"); const offsetElement = document.querySelector('#searchFilter--offset');
function renderLotOccupancies(responseJSON) { function renderLotOccupancies(responseJSON) {
var _a, _b; var _a, _b;
if (responseJSON.lotOccupancies.length === 0) { if (responseJSON.lotOccupancies.length === 0) {
@ -17,12 +17,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
</div>`; </div>`;
return; return;
} }
const resultsTbodyElement = document.createElement("tbody"); const resultsTbodyElement = document.createElement('tbody');
const nowDateString = cityssm.dateToString(new Date()); const nowDateString = cityssm.dateToString(new Date());
for (const lotOccupancy of responseJSON.lotOccupancies) { for (const lotOccupancy of responseJSON.lotOccupancies) {
let occupancyTimeHTML = ""; let occupancyTimeHTML = '';
if (lotOccupancy.occupancyStartDateString <= nowDateString && if (lotOccupancy.occupancyStartDateString <= nowDateString &&
(lotOccupancy.occupancyEndDateString === "" || (lotOccupancy.occupancyEndDateString === '' ||
lotOccupancy.occupancyEndDateString >= nowDateString)) { lotOccupancy.occupancyEndDateString >= nowDateString)) {
occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Current ${los.escapedAliases.Occupancy}"> occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Current ${los.escapedAliases.Occupancy}">
<i class="fas fa-play" aria-label="Current ${los.escapedAliases.Occupancy}"></i> <i class="fas fa-play" aria-label="Current ${los.escapedAliases.Occupancy}"></i>
@ -38,63 +38,65 @@ Object.defineProperty(exports, "__esModule", { value: true });
<i class="fas fa-stop" aria-label="Past ${los.escapedAliases.Occupancy}"></i> <i class="fas fa-stop" aria-label="Past ${los.escapedAliases.Occupancy}"></i>
</span>`; </span>`;
} }
let occupantsHTML = ""; let occupantsHTML = '';
for (const occupant of lotOccupancy.lotOccupancyOccupants) { for (const occupant of lotOccupancy.lotOccupancyOccupants) {
occupantsHTML += occupantsHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType || "") + cityssm.escapeHTML(occupant.lotOccupantType || '') +
'">' + '">' +
('<i class="fas fa-fw fa-' + ('<i class="fas fa-fw fa-' +
cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + cityssm.escapeHTML(occupant.fontAwesomeIconClass || 'user') +
'" aria-hidden="true"></i> ') + '" aria-hidden="true"></i> ') +
cityssm.escapeHTML(occupant.occupantName || "") + cityssm.escapeHTML(occupant.occupantName || '') +
"</span><br />"; '</span><br />';
} }
resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" + resultsTbodyElement.insertAdjacentHTML('beforeend', '<tr>' +
('<td class="has-width-1">' + occupancyTimeHTML + "</td>") + ('<td class="has-width-1">' + occupancyTimeHTML + '</td>') +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getLotOccupancyURL(lotOccupancy.lotOccupancyId) + los.getLotOccupancyURL(lotOccupancy.lotOccupancyId) +
'">' + '">' +
cityssm.escapeHTML(lotOccupancy.occupancyType) + cityssm.escapeHTML(lotOccupancy.occupancyType) +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(lotOccupancy.lotName (lotOccupancy.lotName
? '<a class="has-tooltip-right" data-tooltip="' + ? '<a class="has-tooltip-right" data-tooltip="' +
cityssm.escapeHTML(lotOccupancy.lotType || "") + cityssm.escapeHTML(lotOccupancy.lotType || '') +
'" href="' + '" href="' +
los.getLotURL(lotOccupancy.lotId) + los.getLotURL(lotOccupancy.lotId) +
'">' + '">' +
cityssm.escapeHTML(lotOccupancy.lotName) + cityssm.escapeHTML(lotOccupancy.lotName) +
"</a>" '</a>'
: '<span class="has-text-grey">(No ' + los.escapedAliases.Lot + ")</span>") + : '<span class="has-text-grey">(No ' +
"<br />" + los.escapedAliases.Lot +
')</span>') +
'<br />' +
('<span class="is-size-7">' + ('<span class="is-size-7">' +
cityssm.escapeHTML(lotOccupancy.mapName || "") + cityssm.escapeHTML(lotOccupancy.mapName || '') +
"</span>") + '</span>') +
"</td>") + '</td>') +
("<td>" + lotOccupancy.occupancyStartDateString + "</td>") + ('<td>' + lotOccupancy.occupancyStartDateString + '</td>') +
("<td>" + ('<td>' +
(lotOccupancy.occupancyEndDate (lotOccupancy.occupancyEndDate
? lotOccupancy.occupancyEndDateString ? lotOccupancy.occupancyEndDateString
: '<span class="has-text-grey">(No End Date)</span>') + : '<span class="has-text-grey">(No End Date)</span>') +
"</td>") + '</td>') +
("<td>" + occupantsHTML + "</td>") + ('<td>' + occupantsHTML + '</td>') +
"<td>" + '<td>' +
(lotOccupancy.printEJS (lotOccupancy.printEJS
? '<a class="button is-small" data-tooltip="Print" href="' + ? '<a class="button is-small" data-tooltip="Print" href="' +
los.urlPrefix + los.urlPrefix +
"/print/" + '/print/' +
lotOccupancy.printEJS + lotOccupancy.printEJS +
"/?lotOccupancyId=" + '/?lotOccupancyId=' +
lotOccupancy.lotOccupancyId + lotOccupancy.lotOccupancyId +
'" target="_blank">' + '" target="_blank">' +
'<i class="fas fa-print" aria-label="Print"></i>' + '<i class="fas fa-print" aria-label="Print"></i>' +
"</a>" '</a>'
: "") + : '') +
"</td>" + '</td>' +
"</tr>"); '</tr>');
} }
searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"> searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
<thead><tr> <thead><tr>
@ -107,19 +109,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
<th class="has-width-1"><span class="is-sr-only">Print</span></th> <th class="has-width-1"><span class="is-sr-only">Print</span></th>
</tr></thead> </tr></thead>
<table>`; <table>`;
searchResultsContainerElement.querySelector("table").append(resultsTbodyElement); searchResultsContainerElement
searchResultsContainerElement.insertAdjacentHTML("beforeend", los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count)); .querySelector('table')
.append(resultsTbodyElement);
searchResultsContainerElement.insertAdjacentHTML('beforeend', los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count));
(_a = searchResultsContainerElement (_a = searchResultsContainerElement
.querySelector("button[data-page='previous']")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", previousAndGetLotOccupancies); .querySelector("button[data-page='previous']")) === null || _a === void 0 ? void 0 : _a.addEventListener('click', previousAndGetLotOccupancies);
(_b = searchResultsContainerElement (_b = searchResultsContainerElement
.querySelector("button[data-page='next']")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", nextAndGetLotOccupancies); .querySelector("button[data-page='next']")) === null || _b === void 0 ? void 0 : _b.addEventListener('click', nextAndGetLotOccupancies);
} }
function getLotOccupancies() { function getLotOccupancies() {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(`Loading ${exports.aliases.occupancies}...`); searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(`Loading ${exports.aliases.occupancies}...`);
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doSearchLotOccupancies", searchFilterFormElement, renderLotOccupancies); cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchLotOccupancies', searchFilterFormElement, renderLotOccupancies);
} }
function resetOffsetAndGetLotOccupancies() { function resetOffsetAndGetLotOccupancies() {
offsetElement.value = "0"; offsetElement.value = '0';
getLotOccupancies(); getLotOccupancies();
} }
function previousAndGetLotOccupancies() { function previousAndGetLotOccupancies() {
@ -130,11 +134,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString(); offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
getLotOccupancies(); getLotOccupancies();
} }
const filterElements = searchFilterFormElement.querySelectorAll("input, select"); const filterElements = searchFilterFormElement.querySelectorAll('input, select');
for (const filterElement of filterElements) { for (const filterElement of filterElements) {
filterElement.addEventListener("change", resetOffsetAndGetLotOccupancies); filterElement.addEventListener('change', resetOffsetAndGetLotOccupancies);
} }
searchFilterFormElement.addEventListener("submit", (formEvent) => { searchFilterFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
resetOffsetAndGetLotOccupancies(); resetOffsetAndGetLotOccupancies();
}); });

179
public-typescript/lotOccupancySearch.ts
View File

@ -1,128 +1,136 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const searchFilterFormElement = document.querySelector("#form--searchFilters") as HTMLFormElement; const searchFilterFormElement = document.querySelector(
'#form--searchFilters'
) as HTMLFormElement
const searchResultsContainerElement = document.querySelector("#container--searchResults") as HTMLElement; const searchResultsContainerElement = document.querySelector(
'#container--searchResults'
) as HTMLElement
const limit = Number.parseInt( const limit = Number.parseInt(
(document.querySelector("#searchFilter--limit") as HTMLInputElement).value, (document.querySelector('#searchFilter--limit') as HTMLInputElement).value,
10 10
); )
const offsetElement = document.querySelector("#searchFilter--offset") as HTMLInputElement; const offsetElement = document.querySelector(
'#searchFilter--offset'
) as HTMLInputElement
function renderLotOccupancies(responseJSON: { function renderLotOccupancies(responseJSON: {
count: number; count: number
offset: number; offset: number
lotOccupancies: recordTypes.LotOccupancy[]; lotOccupancies: recordTypes.LotOccupancy[]
}) { }) {
if (responseJSON.lotOccupancies.length === 0) { if (responseJSON.lotOccupancies.length === 0) {
searchResultsContainerElement.innerHTML = `<div class="message is-info"> searchResultsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body"> <p class="message-body">
There are no ${los.escapedAliases.occupancy} records that meet the search criteria. There are no ${los.escapedAliases.occupancy} records that meet the search criteria.
</p> </p>
</div>`; </div>`
return; return
} }
const resultsTbodyElement = document.createElement("tbody"); const resultsTbodyElement = document.createElement('tbody')
const nowDateString = cityssm.dateToString(new Date()); const nowDateString = cityssm.dateToString(new Date())
for (const lotOccupancy of responseJSON.lotOccupancies) { for (const lotOccupancy of responseJSON.lotOccupancies) {
let occupancyTimeHTML = ""; let occupancyTimeHTML = ''
if ( if (
lotOccupancy.occupancyStartDateString! <= nowDateString && lotOccupancy.occupancyStartDateString! <= nowDateString &&
(lotOccupancy.occupancyEndDateString === "" || (lotOccupancy.occupancyEndDateString === '' ||
lotOccupancy.occupancyEndDateString! >= nowDateString) lotOccupancy.occupancyEndDateString! >= nowDateString)
) { ) {
occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Current ${los.escapedAliases.Occupancy}"> occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Current ${los.escapedAliases.Occupancy}">
<i class="fas fa-play" aria-label="Current ${los.escapedAliases.Occupancy}"></i> <i class="fas fa-play" aria-label="Current ${los.escapedAliases.Occupancy}"></i>
</span>`; </span>`
} else if (lotOccupancy.occupancyStartDateString! > nowDateString) { } else if (lotOccupancy.occupancyStartDateString! > nowDateString) {
occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Future ${los.escapedAliases.Occupancy}"> occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Future ${los.escapedAliases.Occupancy}">
<i class="fas fa-fast-forward" aria-label="Future ${los.escapedAliases.Occupancy}"></i> <i class="fas fa-fast-forward" aria-label="Future ${los.escapedAliases.Occupancy}"></i>
</span>`; </span>`
} else { } else {
occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Past ${los.escapedAliases.Occupancy}"> occupancyTimeHTML = `<span class="has-tooltip-right" data-tooltip="Past ${los.escapedAliases.Occupancy}">
<i class="fas fa-stop" aria-label="Past ${los.escapedAliases.Occupancy}"></i> <i class="fas fa-stop" aria-label="Past ${los.escapedAliases.Occupancy}"></i>
</span>`; </span>`
} }
let occupantsHTML = ""; let occupantsHTML = ''
for (const occupant of lotOccupancy.lotOccupancyOccupants!) { for (const occupant of lotOccupancy.lotOccupancyOccupants!) {
occupantsHTML += occupantsHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType || "") + cityssm.escapeHTML(occupant.lotOccupantType || '') +
'">' + '">' +
('<i class="fas fa-fw fa-' + ('<i class="fas fa-fw fa-' +
cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + cityssm.escapeHTML(occupant.fontAwesomeIconClass || 'user') +
'" aria-hidden="true"></i> ') + '" aria-hidden="true"></i> ') +
cityssm.escapeHTML(occupant.occupantName || "") + cityssm.escapeHTML(occupant.occupantName || '') +
"</span><br />"; '</span><br />'
} }
resultsTbodyElement.insertAdjacentHTML( resultsTbodyElement.insertAdjacentHTML(
"beforeend", 'beforeend',
"<tr>" + '<tr>' +
('<td class="has-width-1">' + occupancyTimeHTML + "</td>") + ('<td class="has-width-1">' + occupancyTimeHTML + '</td>') +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getLotOccupancyURL(lotOccupancy.lotOccupancyId!) + los.getLotOccupancyURL(lotOccupancy.lotOccupancyId!) +
'">' + '">' +
cityssm.escapeHTML(lotOccupancy.occupancyType as string) + cityssm.escapeHTML(lotOccupancy.occupancyType as string) +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(lotOccupancy.lotName (lotOccupancy.lotName
? '<a class="has-tooltip-right" data-tooltip="' + ? '<a class="has-tooltip-right" data-tooltip="' +
cityssm.escapeHTML(lotOccupancy.lotType || "") + cityssm.escapeHTML(lotOccupancy.lotType || '') +
'" href="' + '" href="' +
los.getLotURL(lotOccupancy.lotId!) + los.getLotURL(lotOccupancy.lotId!) +
'">' + '">' +
cityssm.escapeHTML(lotOccupancy.lotName) + cityssm.escapeHTML(lotOccupancy.lotName) +
"</a>" '</a>'
: '<span class="has-text-grey">(No ' + los.escapedAliases.Lot + ")</span>") + : '<span class="has-text-grey">(No ' +
"<br />" + los.escapedAliases.Lot +
')</span>') +
'<br />' +
('<span class="is-size-7">' + ('<span class="is-size-7">' +
cityssm.escapeHTML(lotOccupancy.mapName || "") + cityssm.escapeHTML(lotOccupancy.mapName || '') +
"</span>") + '</span>') +
"</td>") + '</td>') +
("<td>" + lotOccupancy.occupancyStartDateString + "</td>") + ('<td>' + lotOccupancy.occupancyStartDateString + '</td>') +
("<td>" + ('<td>' +
(lotOccupancy.occupancyEndDate (lotOccupancy.occupancyEndDate
? lotOccupancy.occupancyEndDateString ? lotOccupancy.occupancyEndDateString
: '<span class="has-text-grey">(No End Date)</span>') + : '<span class="has-text-grey">(No End Date)</span>') +
"</td>") + '</td>') +
("<td>" + occupantsHTML + "</td>") + ('<td>' + occupantsHTML + '</td>') +
"<td>" + '<td>' +
(lotOccupancy.printEJS (lotOccupancy.printEJS
? '<a class="button is-small" data-tooltip="Print" href="' + ? '<a class="button is-small" data-tooltip="Print" href="' +
los.urlPrefix + los.urlPrefix +
"/print/" + '/print/' +
lotOccupancy.printEJS + lotOccupancy.printEJS +
"/?lotOccupancyId=" + '/?lotOccupancyId=' +
lotOccupancy.lotOccupancyId + lotOccupancy.lotOccupancyId +
'" target="_blank">' + '" target="_blank">' +
'<i class="fas fa-print" aria-label="Print"></i>' + '<i class="fas fa-print" aria-label="Print"></i>' +
"</a>" '</a>'
: "") + : '') +
"</td>" + '</td>' +
"</tr>" '</tr>'
); )
} }
searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"> searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
@ -135,63 +143,74 @@ declare const cityssm: cityssmGlobal;
<th>${los.escapedAliases.Occupants}</th> <th>${los.escapedAliases.Occupants}</th>
<th class="has-width-1"><span class="is-sr-only">Print</span></th> <th class="has-width-1"><span class="is-sr-only">Print</span></th>
</tr></thead> </tr></thead>
<table>`; <table>`
searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement); searchResultsContainerElement
.querySelector('table')!
.append(resultsTbodyElement)
searchResultsContainerElement.insertAdjacentHTML( searchResultsContainerElement.insertAdjacentHTML(
"beforeend", 'beforeend',
los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count) los.getSearchResultsPagerHTML(
); limit,
responseJSON.offset,
responseJSON.count
)
)
searchResultsContainerElement searchResultsContainerElement
.querySelector("button[data-page='previous']") .querySelector("button[data-page='previous']")
?.addEventListener("click", previousAndGetLotOccupancies); ?.addEventListener('click', previousAndGetLotOccupancies)
searchResultsContainerElement searchResultsContainerElement
.querySelector("button[data-page='next']") .querySelector("button[data-page='next']")
?.addEventListener("click", nextAndGetLotOccupancies); ?.addEventListener('click', nextAndGetLotOccupancies)
} }
function getLotOccupancies() { function getLotOccupancies() {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML( searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(
`Loading ${exports.aliases.occupancies}...` `Loading ${exports.aliases.occupancies}...`
); )
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/lotOccupancies/doSearchLotOccupancies", los.urlPrefix + '/lotOccupancies/doSearchLotOccupancies',
searchFilterFormElement, searchFilterFormElement,
renderLotOccupancies renderLotOccupancies
); )
} }
function resetOffsetAndGetLotOccupancies() { function resetOffsetAndGetLotOccupancies() {
offsetElement.value = "0"; offsetElement.value = '0'
getLotOccupancies(); getLotOccupancies()
} }
function previousAndGetLotOccupancies() { function previousAndGetLotOccupancies() {
offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString(); offsetElement.value = Math.max(
getLotOccupancies(); Number.parseInt(offsetElement.value, 10) - limit,
0
).toString()
getLotOccupancies()
} }
function nextAndGetLotOccupancies() { function nextAndGetLotOccupancies() {
offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString(); offsetElement.value = (
getLotOccupancies(); Number.parseInt(offsetElement.value, 10) + limit
).toString()
getLotOccupancies()
} }
const filterElements = searchFilterFormElement.querySelectorAll("input, select") as NodeListOf< const filterElements = searchFilterFormElement.querySelectorAll(
HTMLInputElement | HTMLSelectElement 'input, select'
>; ) as NodeListOf<HTMLInputElement | HTMLSelectElement>
for (const filterElement of filterElements) { for (const filterElement of filterElements) {
filterElement.addEventListener("change", resetOffsetAndGetLotOccupancies); filterElement.addEventListener('change', resetOffsetAndGetLotOccupancies)
} }
searchFilterFormElement.addEventListener("submit", (formEvent) => { searchFilterFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
resetOffsetAndGetLotOccupancies(); resetOffsetAndGetLotOccupancies()
}); })
getLotOccupancies(); getLotOccupancies()
})(); })()

60
public-typescript/lotSearch.js
View File

@ -3,10 +3,10 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const searchFilterFormElement = document.querySelector("#form--searchFilters"); const searchFilterFormElement = document.querySelector('#form--searchFilters');
const searchResultsContainerElement = document.querySelector("#container--searchResults"); const searchResultsContainerElement = document.querySelector('#container--searchResults');
const limit = Number.parseInt(document.querySelector("#searchFilter--limit").value, 10); const limit = Number.parseInt(document.querySelector('#searchFilter--limit').value, 10);
const offsetElement = document.querySelector("#searchFilter--offset"); const offsetElement = document.querySelector('#searchFilter--offset');
function renderLots(responseJSON) { function renderLots(responseJSON) {
var _a, _b; var _a, _b;
if (responseJSON.lots.length === 0) { if (responseJSON.lots.length === 0) {
@ -15,36 +15,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
</div>`; </div>`;
return; return;
} }
const resultsTbodyElement = document.createElement("tbody"); const resultsTbodyElement = document.createElement('tbody');
for (const lot of responseJSON.lots) { for (const lot of responseJSON.lots) {
resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" + resultsTbodyElement.insertAdjacentHTML('beforeend', '<tr>' +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getLotURL(lot.lotId) + los.getLotURL(lot.lotId) +
'">' + '">' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
'<a href="' + '<a href="' +
los.getMapURL(lot.mapId) + los.getMapURL(lot.mapId) +
'">' + '">' +
(lot.mapName (lot.mapName
? cityssm.escapeHTML(lot.mapName) ? cityssm.escapeHTML(lot.mapName)
: '<span class="has-text-grey">(No Name)</span>') + : '<span class="has-text-grey">(No Name)</span>') +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + cityssm.escapeHTML(lot.lotType || "") + "</td>") + ('<td>' + cityssm.escapeHTML(lot.lotType || '') + '</td>') +
("<td>" + ('<td>' +
(lot.lotStatusId (lot.lotStatusId
? cityssm.escapeHTML(lot.lotStatus || "") ? cityssm.escapeHTML(lot.lotStatus || '')
: '<span class="has-text-grey">(No Status)</span>') + : '<span class="has-text-grey">(No Status)</span>') +
"<br />" + '<br />' +
(lot.lotOccupancyCount > 0 (lot.lotOccupancyCount > 0
? '<span class="is-size-7">Currently Occupied</span>' ? '<span class="is-size-7">Currently Occupied</span>'
: "") + : '') +
"</td>") + '</td>') +
"</tr>"); '</tr>');
} }
searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"> searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
<thead><tr> <thead><tr>
@ -54,19 +54,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
<th>Status</th> <th>Status</th>
</tr></thead> </tr></thead>
<table>`; <table>`;
searchResultsContainerElement.insertAdjacentHTML("beforeend", los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count)); searchResultsContainerElement.insertAdjacentHTML('beforeend', los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count));
searchResultsContainerElement.querySelector("table").append(resultsTbodyElement); searchResultsContainerElement
.querySelector('table')
.append(resultsTbodyElement);
(_a = searchResultsContainerElement (_a = searchResultsContainerElement
.querySelector("button[data-page='previous']")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", previousAndGetLots); .querySelector("button[data-page='previous']")) === null || _a === void 0 ? void 0 : _a.addEventListener('click', previousAndGetLots);
(_b = searchResultsContainerElement (_b = searchResultsContainerElement
.querySelector("button[data-page='next']")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", nextAndGetLots); .querySelector("button[data-page='next']")) === null || _b === void 0 ? void 0 : _b.addEventListener('click', nextAndGetLots);
} }
function getLots() { function getLots() {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(`Loading ${los.escapedAliases.Lots}...`); searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(`Loading ${los.escapedAliases.Lots}...`);
cityssm.postJSON(los.urlPrefix + "/lots/doSearchLots", searchFilterFormElement, renderLots); cityssm.postJSON(los.urlPrefix + '/lots/doSearchLots', searchFilterFormElement, renderLots);
} }
function resetOffsetAndGetLots() { function resetOffsetAndGetLots() {
offsetElement.value = "0"; offsetElement.value = '0';
getLots(); getLots();
} }
function previousAndGetLots() { function previousAndGetLots() {
@ -77,11 +79,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString(); offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
getLots(); getLots();
} }
const filterElements = searchFilterFormElement.querySelectorAll("input, select"); const filterElements = searchFilterFormElement.querySelectorAll('input, select');
for (const filterElement of filterElements) { for (const filterElement of filterElements) {
filterElement.addEventListener("change", resetOffsetAndGetLots); filterElement.addEventListener('change', resetOffsetAndGetLots);
} }
searchFilterFormElement.addEventListener("submit", (formEvent) => { searchFilterFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
resetOffsetAndGetLots(); resetOffsetAndGetLots();
}); });

139
public-typescript/lotSearch.ts
View File

@ -1,68 +1,78 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const searchFilterFormElement = document.querySelector("#form--searchFilters") as HTMLFormElement; const searchFilterFormElement = document.querySelector(
'#form--searchFilters'
) as HTMLFormElement
const searchResultsContainerElement = document.querySelector("#container--searchResults") as HTMLElement; const searchResultsContainerElement = document.querySelector(
'#container--searchResults'
) as HTMLElement
const limit = Number.parseInt( const limit = Number.parseInt(
(document.querySelector("#searchFilter--limit") as HTMLInputElement).value, (document.querySelector('#searchFilter--limit') as HTMLInputElement).value,
10 10
); )
const offsetElement = document.querySelector("#searchFilter--offset") as HTMLInputElement; const offsetElement = document.querySelector(
'#searchFilter--offset'
) as HTMLInputElement
function renderLots(responseJSON: { count: number; offset: number; lots: recordTypes.Lot[] }): void { function renderLots(responseJSON: {
count: number
offset: number
lots: recordTypes.Lot[]
}): void {
if (responseJSON.lots.length === 0) { if (responseJSON.lots.length === 0) {
searchResultsContainerElement.innerHTML = `<div class="message is-info"> searchResultsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no ${los.escapedAliases.lots} that meet the search criteria.</p> <p class="message-body">There are no ${los.escapedAliases.lots} that meet the search criteria.</p>
</div>`; </div>`
return; return
} }
const resultsTbodyElement = document.createElement("tbody"); const resultsTbodyElement = document.createElement('tbody')
for (const lot of responseJSON.lots) { for (const lot of responseJSON.lots) {
resultsTbodyElement.insertAdjacentHTML( resultsTbodyElement.insertAdjacentHTML(
"beforeend", 'beforeend',
"<tr>" + '<tr>' +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getLotURL(lot.lotId) + los.getLotURL(lot.lotId) +
'">' + '">' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
'<a href="' + '<a href="' +
los.getMapURL(lot.mapId!) + los.getMapURL(lot.mapId!) +
'">' + '">' +
(lot.mapName (lot.mapName
? cityssm.escapeHTML(lot.mapName) ? cityssm.escapeHTML(lot.mapName)
: '<span class="has-text-grey">(No Name)</span>') + : '<span class="has-text-grey">(No Name)</span>') +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + cityssm.escapeHTML(lot.lotType || "") + "</td>") + ('<td>' + cityssm.escapeHTML(lot.lotType || '') + '</td>') +
("<td>" + ('<td>' +
(lot.lotStatusId (lot.lotStatusId
? cityssm.escapeHTML(lot.lotStatus || "") ? cityssm.escapeHTML(lot.lotStatus || '')
: '<span class="has-text-grey">(No Status)</span>') + : '<span class="has-text-grey">(No Status)</span>') +
"<br />" + '<br />' +
(lot.lotOccupancyCount! > 0 (lot.lotOccupancyCount! > 0
? '<span class="is-size-7">Currently Occupied</span>' ? '<span class="is-size-7">Currently Occupied</span>'
: "") + : '') +
"</td>") + '</td>') +
"</tr>" '</tr>'
); )
} }
searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"> searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
@ -72,59 +82,74 @@ declare const cityssm: cityssmGlobal;
<th>${los.escapedAliases.Lot} Type</th> <th>${los.escapedAliases.Lot} Type</th>
<th>Status</th> <th>Status</th>
</tr></thead> </tr></thead>
<table>`; <table>`
searchResultsContainerElement.insertAdjacentHTML( searchResultsContainerElement.insertAdjacentHTML(
"beforeend", 'beforeend',
los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count) los.getSearchResultsPagerHTML(
); limit,
responseJSON.offset,
responseJSON.count
)
)
searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement); searchResultsContainerElement
.querySelector('table')!
.append(resultsTbodyElement)
searchResultsContainerElement searchResultsContainerElement
.querySelector("button[data-page='previous']") .querySelector("button[data-page='previous']")
?.addEventListener("click", previousAndGetLots); ?.addEventListener('click', previousAndGetLots)
searchResultsContainerElement searchResultsContainerElement
.querySelector("button[data-page='next']") .querySelector("button[data-page='next']")
?.addEventListener("click", nextAndGetLots); ?.addEventListener('click', nextAndGetLots)
} }
function getLots(): void { function getLots(): void {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML( searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(
`Loading ${los.escapedAliases.Lots}...` `Loading ${los.escapedAliases.Lots}...`
); )
cityssm.postJSON(los.urlPrefix + "/lots/doSearchLots", searchFilterFormElement, renderLots); cityssm.postJSON(
los.urlPrefix + '/lots/doSearchLots',
searchFilterFormElement,
renderLots
)
} }
function resetOffsetAndGetLots(): void { function resetOffsetAndGetLots(): void {
offsetElement.value = "0"; offsetElement.value = '0'
getLots(); getLots()
} }
function previousAndGetLots(): void { function previousAndGetLots(): void {
offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString(); offsetElement.value = Math.max(
getLots(); Number.parseInt(offsetElement.value, 10) - limit,
0
).toString()
getLots()
} }
function nextAndGetLots(): void { function nextAndGetLots(): void {
offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString(); offsetElement.value = (
getLots(); Number.parseInt(offsetElement.value, 10) + limit
).toString()
getLots()
} }
const filterElements = searchFilterFormElement.querySelectorAll("input, select") as NodeListOf< const filterElements = searchFilterFormElement.querySelectorAll(
HTMLInputElement | HTMLSelectElement 'input, select'
>; ) as NodeListOf<HTMLInputElement | HTMLSelectElement>
for (const filterElement of filterElements) { for (const filterElement of filterElements) {
filterElement.addEventListener("change", resetOffsetAndGetLots); filterElement.addEventListener('change', resetOffsetAndGetLots)
} }
searchFilterFormElement.addEventListener("submit", (formEvent) => { searchFilterFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
resetOffsetAndGetLots(); resetOffsetAndGetLots()
}); })
getLots(); getLots()
})(); })()

5
public-typescript/lotView.js
View File

@ -2,8 +2,9 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const mapContainerElement = document.querySelector("#lot--map"); const mapContainerElement = document.querySelector('#lot--map');
if (mapContainerElement) { if (mapContainerElement) {
exports.los.highlightMap(mapContainerElement, mapContainerElement.dataset.mapKey, "success"); ;
exports.los.highlightMap(mapContainerElement, mapContainerElement.dataset.mapKey, 'success');
} }
})(); })();

15
public-typescript/lotView.ts
View File

@ -1,15 +1,14 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import * as globalTypes from "../types/globalTypes"; import * as globalTypes from '../types/globalTypes'
;(() => {
(() => { const mapContainerElement = document.querySelector('#lot--map') as HTMLElement
const mapContainerElement = document.querySelector("#lot--map") as HTMLElement;
if (mapContainerElement) { if (mapContainerElement) {
(exports.los as globalTypes.LOS).highlightMap( ;(exports.los as globalTypes.LOS).highlightMap(
mapContainerElement, mapContainerElement,
mapContainerElement.dataset.mapKey!, mapContainerElement.dataset.mapKey!,
"success" 'success'
); )
} }
})(); })()

153
public-typescript/main.js
View File

@ -28,33 +28,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
let svgElementToHighlight; let svgElementToHighlight;
// eslint-disable-next-line no-constant-condition // eslint-disable-next-line no-constant-condition
while (true) { while (true) {
svgElementToHighlight = mapContainerElement.querySelector("#" + svgId); svgElementToHighlight = mapContainerElement.querySelector('#' + svgId);
if (svgElementToHighlight || !svgId.includes("-")) { if (svgElementToHighlight || !svgId.includes('-')) {
break; break;
} }
svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf("-"))); svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf('-')));
} }
if (svgElementToHighlight) { if (svgElementToHighlight) {
// eslint-disable-next-line unicorn/no-null // eslint-disable-next-line unicorn/no-null
svgElementToHighlight.style.fill = ""; svgElementToHighlight.style.fill = '';
svgElementToHighlight.classList.add("highlight", "is-" + contextualClass); svgElementToHighlight.classList.add('highlight', 'is-' + contextualClass);
const childPathElements = svgElementToHighlight.querySelectorAll("path"); const childPathElements = svgElementToHighlight.querySelectorAll('path');
for (const pathElement of childPathElements) { for (const pathElement of childPathElements) {
// eslint-disable-next-line unicorn/no-null // eslint-disable-next-line unicorn/no-null
pathElement.style.fill = ""; pathElement.style.fill = '';
} }
} }
} }
function unlockField(clickEvent) { function unlockField(clickEvent) {
const fieldElement = clickEvent.currentTarget.closest(".field"); const fieldElement = clickEvent.currentTarget.closest('.field');
const inputOrSelectElement = fieldElement.querySelector("input, select"); const inputOrSelectElement = fieldElement.querySelector('input, select');
inputOrSelectElement.classList.remove("is-readonly"); inputOrSelectElement.classList.remove('is-readonly');
if (inputOrSelectElement.tagName === "INPUT") { if (inputOrSelectElement.tagName === 'INPUT') {
;
inputOrSelectElement.readOnly = false; inputOrSelectElement.readOnly = false;
inputOrSelectElement.disabled = false; inputOrSelectElement.disabled = false;
} }
else { else {
const optionElements = inputOrSelectElement.querySelectorAll("option"); const optionElements = inputOrSelectElement.querySelectorAll('option');
for (const optionElement of optionElements) { for (const optionElement of optionElements) {
optionElement.disabled = false; optionElement.disabled = false;
} }
@ -62,20 +63,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
inputOrSelectElement.focus(); inputOrSelectElement.focus();
} }
function initializeUnlockFieldButtons(containerElement) { function initializeUnlockFieldButtons(containerElement) {
const unlockFieldButtonElements = containerElement.querySelectorAll(".is-unlock-field-button"); const unlockFieldButtonElements = containerElement.querySelectorAll('.is-unlock-field-button');
for (const unlockFieldButtonElement of unlockFieldButtonElements) { for (const unlockFieldButtonElement of unlockFieldButtonElements) {
unlockFieldButtonElement.addEventListener("click", unlockField); unlockFieldButtonElement.addEventListener('click', unlockField);
} }
} }
/* /*
* Date Pickers * Date Pickers
*/ */
const datePickerBaseOptions = { const datePickerBaseOptions = {
type: "date", type: 'date',
dateFormat: "yyyy-MM-dd", dateFormat: 'yyyy-MM-dd',
showFooter: false, showFooter: false,
color: "info", color: 'info',
displayMode: "dialog" displayMode: 'dialog'
}; };
function initializeDatePickers(containerElement) { function initializeDatePickers(containerElement) {
const dateElements = containerElement.querySelectorAll("input[type='date']"); const dateElements = containerElement.querySelectorAll("input[type='date']");
@ -94,35 +95,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
const cal = exports.bulmaCalendar.attach(dateElement, datePickerOptions)[0]; const cal = exports.bulmaCalendar.attach(dateElement, datePickerOptions)[0];
// trigger change event on original element // trigger change event on original element
cal.on("save", () => { cal.on('save', () => {
dateElement.value = cal.value(); dateElement.value = cal.value();
dateElement.dispatchEvent(new Event("change")); dateElement.dispatchEvent(new Event('change'));
}); });
// Disable html scrolling when calendar is open // Disable html scrolling when calendar is open
cal.on("show", () => { cal.on('show', () => {
document.querySelector("html").classList.add("is-clipped"); document.querySelector('html').classList.add('is-clipped');
}); });
// Reenable scrolling, if a modal window is not open // Reenable scrolling, if a modal window is not open
cal.on("hide", () => { cal.on('hide', () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
}); });
// Get the datepicker container element // Get the datepicker container element
const datepickerElement = containerElement.querySelector("#" + cal._id); const datepickerElement = containerElement.querySelector('#' + cal._id);
// Override the previous and next month button styles // Override the previous and next month button styles
const datePickerNavButtonElements = datepickerElement.querySelectorAll(".datepicker-nav button.is-text"); const datePickerNavButtonElements = datepickerElement.querySelectorAll('.datepicker-nav button.is-text');
for (const datePickerNavButtonElement of datePickerNavButtonElements) { for (const datePickerNavButtonElement of datePickerNavButtonElements) {
datePickerNavButtonElement.classList.add("is-" + datePickerBaseOptions.color); datePickerNavButtonElement.classList.add('is-' + datePickerBaseOptions.color);
datePickerNavButtonElement.classList.remove("is-text"); datePickerNavButtonElement.classList.remove('is-text');
} }
// Override the clear button style // Override the clear button style
const clearButtonElement = datepickerElement.querySelector(".datetimepicker-clear-button"); const clearButtonElement = datepickerElement.querySelector('.datetimepicker-clear-button');
if (clearButtonElement) { if (clearButtonElement) {
if (dateElement.required) { if (dateElement.required) {
clearButtonElement.remove(); clearButtonElement.remove();
} }
else { else {
clearButtonElement.dataset.tooltip = "Clear"; clearButtonElement.dataset.tooltip = 'Clear';
clearButtonElement.ariaLabel = "Clear"; clearButtonElement.ariaLabel = 'Clear';
clearButtonElement.innerHTML = clearButtonElement.innerHTML =
'<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'; '<span class="has-text-weight-bold" aria-hidden="true">&times;</span>';
} }
@ -130,8 +131,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
// Apply a label // Apply a label
const labelElement = document.querySelector("label[for='" + dateElement.id + "']"); const labelElement = document.querySelector("label[for='" + dateElement.id + "']");
if (labelElement) { if (labelElement) {
datepickerElement.querySelector(".datetimepicker-dummy-input").ariaLabel = datepickerElement.querySelector('.datetimepicker-dummy-input').ariaLabel = labelElement.textContent;
labelElement.textContent;
} }
} }
} }
@ -211,38 +211,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
* Aliases * Aliases
*/ */
function populateAliases(containerElement) { function populateAliases(containerElement) {
const aliasElements = containerElement.querySelectorAll(".alias"); const aliasElements = containerElement.querySelectorAll('.alias');
for (const aliasElement of aliasElements) { for (const aliasElement of aliasElements) {
switch (aliasElement.dataset.alias) { switch (aliasElement.dataset.alias) {
case "Map": { case 'Map': {
aliasElement.textContent = exports.aliases.map; aliasElement.textContent = exports.aliases.map;
break; break;
} }
case "Lot": { case 'Lot': {
aliasElement.textContent = exports.aliases.lot; aliasElement.textContent = exports.aliases.lot;
break; break;
} }
case "lot": { case 'lot': {
aliasElement.textContent = exports.aliases.lot.toLowerCase(); aliasElement.textContent = exports.aliases.lot.toLowerCase();
break; break;
} }
case "Occupancy": { case 'Occupancy': {
aliasElement.textContent = exports.aliases.occupancy; aliasElement.textContent = exports.aliases.occupancy;
break; break;
} }
case "occupancy": { case 'occupancy': {
aliasElement.textContent = exports.aliases.occupancy.toLowerCase(); aliasElement.textContent = exports.aliases.occupancy.toLowerCase();
break; break;
} }
case "Occupant": { case 'Occupant': {
aliasElement.textContent = exports.aliases.occupant; aliasElement.textContent = exports.aliases.occupant;
break; break;
} }
case "occupant": { case 'occupant': {
aliasElement.textContent = exports.aliases.occupant.toLowerCase(); aliasElement.textContent = exports.aliases.occupant.toLowerCase();
break; break;
} }
case "ExternalReceiptNumber": { case 'ExternalReceiptNumber': {
aliasElement.textContent = exports.aliases.externalReceiptNumber; aliasElement.textContent = exports.aliases.externalReceiptNumber;
break; break;
} }
@ -278,17 +278,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
/* /*
* Colours * Colours
*/ */
const hues = ["red", "green", "orange", "blue", "pink", "yellow", "purple"]; const hues = ['red', 'green', 'orange', 'blue', 'pink', 'yellow', 'purple'];
const luminosity = ["bright", "light", "dark"]; const luminosity = ['bright', 'light', 'dark'];
function getRandomColor(seedString) { function getRandomColor(seedString) {
let actualSeedString = seedString; let actualSeedString = seedString;
if (actualSeedString.length < 2) { if (actualSeedString.length < 2) {
actualSeedString = actualSeedString + "a1"; actualSeedString = actualSeedString + 'a1';
} }
return exports.randomColor({ return exports.randomColor({
seed: actualSeedString + actualSeedString, seed: actualSeedString + actualSeedString,
hue: hues[actualSeedString.codePointAt(actualSeedString.length - 1) % hues.length], hue: hues[actualSeedString.codePointAt(actualSeedString.length - 1) % hues.length],
luminosity: luminosity[actualSeedString.codePointAt(actualSeedString.length - 2) % luminosity.length] luminosity: luminosity[actualSeedString.codePointAt(actualSeedString.length - 2) %
luminosity.length]
}); });
} }
/* /*
@ -298,21 +299,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
return `<div class="field has-addons"> return `<div class="field has-addons">
<div class="control"> <div class="control">
<button <button
class="button ${isSmall ? "is-small" : ""} ${upButtonClassNames}" class="button ${isSmall ? 'is-small' : ''} ${upButtonClassNames}"
data-tooltip="Move Up" data-direction="up" type="button" aria-label="Move Up"> data-tooltip="Move Up" data-direction="up" type="button" aria-label="Move Up">
<i class="fas fa-arrow-up" aria-hidden="true"></i> <i class="fas fa-arrow-up" aria-hidden="true"></i>
</button> </button>
</div> </div>
<div class="control"> <div class="control">
<button <button
class="button ${isSmall ? "is-small" : ""} ${downButtonClassNames}" class="button ${isSmall ? 'is-small' : ''} ${downButtonClassNames}"
data-tooltip="Move Down" data-direction="down" type="button" aria-label="Move Down"> data-tooltip="Move Down" data-direction="down" type="button" aria-label="Move Down">
<i class="fas fa-arrow-down" aria-hidden="true"></i> <i class="fas fa-arrow-down" aria-hidden="true"></i>
</button> </button>
</div> </div>
</div>`; </div>`;
} }
function getLoadingParagraphHTML(captionText = "Loading...") { function getLoadingParagraphHTML(captionText = 'Loading...') {
return `<p class="has-text-centered has-text-grey"> return `<p class="has-text-centered has-text-grey">
<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br /> <i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />
${cityssm.escapeHTML(captionText)} ${cityssm.escapeHTML(captionText)}
@ -322,63 +323,63 @@ Object.defineProperty(exports, "__esModule", { value: true });
return ('<div class="level">' + return ('<div class="level">' +
('<div class="level-left">' + ('<div class="level-left">' +
'<div class="level-item has-text-weight-bold">' + '<div class="level-item has-text-weight-bold">' +
"Displaying " + 'Displaying ' +
(offset + 1).toString() + (offset + 1).toString() +
" to " + ' to ' +
Math.min(count, limit + offset) + Math.min(count, limit + offset) +
" of " + ' of ' +
count + count +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
(offset > 0 (offset > 0
? '<div class="level-item">' + ? '<div class="level-item">' +
'<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' + '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
'<i class="fas fa-arrow-left" aria-hidden="true"></i>' + '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" '</div>'
: "") + : '') +
(limit + offset < count (limit + offset < count
? '<div class="level-item">' + ? '<div class="level-item">' +
'<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' + '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
"<span>Next</span>" + '<span>Next</span>' +
'<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' + '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
"</button>" + '</button>' +
"</div>" '</div>'
: "") + : '') +
"</div>") + '</div>') +
"</div>"); '</div>');
} }
/* /*
* URLs * URLs
*/ */
const urlPrefix = document.querySelector("main").dataset.urlPrefix; const urlPrefix = document.querySelector('main').dataset.urlPrefix;
function getRecordURL(recordTypePlural, recordId, edit, time) { function getRecordURL(recordTypePlural, recordId, edit, time) {
return (urlPrefix + return (urlPrefix +
"/" + '/' +
recordTypePlural + recordTypePlural +
(recordId ? "/" + recordId : "") + (recordId ? '/' + recordId : '') +
(recordId && edit ? "/edit" : "") + (recordId && edit ? '/edit' : '') +
(time ? "/?t=" + Date.now() : "")); (time ? '/?t=' + Date.now() : ''));
} }
function getMapURL(mapId = "", edit = false, time = false) { function getMapURL(mapId = '', edit = false, time = false) {
return getRecordURL("maps", mapId, edit, time); return getRecordURL('maps', mapId, edit, time);
} }
function getLotURL(lotId = "", edit = false, time = false) { function getLotURL(lotId = '', edit = false, time = false) {
return getRecordURL("lots", lotId, edit, time); return getRecordURL('lots', lotId, edit, time);
} }
function getLotOccupancyURL(lotOccupancyId = "", edit = false, time = false) { function getLotOccupancyURL(lotOccupancyId = '', edit = false, time = false) {
return getRecordURL("lotOccupancies", lotOccupancyId, edit, time); return getRecordURL('lotOccupancies', lotOccupancyId, edit, time);
} }
function getWorkOrderURL(workOrderId = "", edit = false, time = false) { function getWorkOrderURL(workOrderId = '', edit = false, time = false) {
return getRecordURL("workOrders", workOrderId, edit, time); return getRecordURL('workOrders', workOrderId, edit, time);
} }
/* /*
* Declare LOS * Declare LOS
*/ */
const los = { const los = {
urlPrefix, urlPrefix,
apiKey: document.querySelector("main").dataset.apiKey, apiKey: document.querySelector('main').dataset.apiKey,
highlightMap, highlightMap,
initializeUnlockFieldButtons, initializeUnlockFieldButtons,
initializeDatePickers, initializeDatePickers,

345
public-typescript/main.ts
View File

@ -1,34 +1,34 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type { Options as BulmaCalendarOptions } from "bulma-calendar"; import type { Options as BulmaCalendarOptions } from 'bulma-calendar'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
/* /*
* Unsaved Changes * Unsaved Changes
*/ */
let _hasUnsavedChanges = false; let _hasUnsavedChanges = false
function setUnsavedChanges() { function setUnsavedChanges() {
if (!hasUnsavedChanges()) { if (!hasUnsavedChanges()) {
_hasUnsavedChanges = true; _hasUnsavedChanges = true
cityssm.enableNavBlocker(); cityssm.enableNavBlocker()
} }
} }
function clearUnsavedChanges() { function clearUnsavedChanges() {
_hasUnsavedChanges = false; _hasUnsavedChanges = false
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
} }
function hasUnsavedChanges() { function hasUnsavedChanges() {
return _hasUnsavedChanges; return _hasUnsavedChanges
} }
/* /*
@ -38,64 +38,68 @@ declare const bulmaJS: BulmaJS;
function highlightMap( function highlightMap(
mapContainerElement: HTMLElement, mapContainerElement: HTMLElement,
mapKey: string, mapKey: string,
contextualClass: "success" | "danger" contextualClass: 'success' | 'danger'
): void { ): void {
// Search for ID // Search for ID
let svgId = mapKey; let svgId = mapKey
let svgElementToHighlight: SVGElement | null; let svgElementToHighlight: SVGElement | null
// eslint-disable-next-line no-constant-condition // eslint-disable-next-line no-constant-condition
while (true) { while (true) {
svgElementToHighlight = mapContainerElement.querySelector("#" + svgId); svgElementToHighlight = mapContainerElement.querySelector('#' + svgId)
if (svgElementToHighlight || !svgId.includes("-")) { if (svgElementToHighlight || !svgId.includes('-')) {
break; break
} }
svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf("-"))); svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf('-')))
} }
if (svgElementToHighlight) { if (svgElementToHighlight) {
// eslint-disable-next-line unicorn/no-null // eslint-disable-next-line unicorn/no-null
svgElementToHighlight.style.fill = ""; svgElementToHighlight.style.fill = ''
svgElementToHighlight.classList.add("highlight", "is-" + contextualClass); svgElementToHighlight.classList.add('highlight', 'is-' + contextualClass)
const childPathElements = svgElementToHighlight.querySelectorAll("path"); const childPathElements = svgElementToHighlight.querySelectorAll('path')
for (const pathElement of childPathElements) { for (const pathElement of childPathElements) {
// eslint-disable-next-line unicorn/no-null // eslint-disable-next-line unicorn/no-null
pathElement.style.fill = ""; pathElement.style.fill = ''
} }
} }
} }
function unlockField(clickEvent: Event): void { function unlockField(clickEvent: Event): void {
const fieldElement = (clickEvent.currentTarget as HTMLElement).closest(".field")!; const fieldElement = (clickEvent.currentTarget as HTMLElement).closest(
'.field'
)!
const inputOrSelectElement = fieldElement.querySelector("input, select") as const inputOrSelectElement = fieldElement.querySelector('input, select') as
| HTMLInputElement | HTMLInputElement
| HTMLSelectElement; | HTMLSelectElement
inputOrSelectElement.classList.remove("is-readonly"); inputOrSelectElement.classList.remove('is-readonly')
if (inputOrSelectElement.tagName === "INPUT") { if (inputOrSelectElement.tagName === 'INPUT') {
(inputOrSelectElement as HTMLInputElement).readOnly = false; ;(inputOrSelectElement as HTMLInputElement).readOnly = false
(inputOrSelectElement as HTMLInputElement).disabled = false; ;(inputOrSelectElement as HTMLInputElement).disabled = false
} else { } else {
const optionElements = inputOrSelectElement.querySelectorAll("option"); const optionElements = inputOrSelectElement.querySelectorAll('option')
for (const optionElement of optionElements) { for (const optionElement of optionElements) {
optionElement.disabled = false; optionElement.disabled = false
} }
} }
inputOrSelectElement.focus(); inputOrSelectElement.focus()
} }
function initializeUnlockFieldButtons(containerElement: HTMLElement): void { function initializeUnlockFieldButtons(containerElement: HTMLElement): void {
const unlockFieldButtonElements = containerElement.querySelectorAll(".is-unlock-field-button"); const unlockFieldButtonElements = containerElement.querySelectorAll(
'.is-unlock-field-button'
)
for (const unlockFieldButtonElement of unlockFieldButtonElements) { for (const unlockFieldButtonElement of unlockFieldButtonElements) {
unlockFieldButtonElement.addEventListener("click", unlockField); unlockFieldButtonElement.addEventListener('click', unlockField)
} }
} }
@ -104,88 +108,98 @@ declare const bulmaJS: BulmaJS;
*/ */
const datePickerBaseOptions: BulmaCalendarOptions = { const datePickerBaseOptions: BulmaCalendarOptions = {
type: "date", type: 'date',
dateFormat: "yyyy-MM-dd", dateFormat: 'yyyy-MM-dd',
showFooter: false, showFooter: false,
color: "info", color: 'info',
displayMode: "dialog" displayMode: 'dialog'
}; }
function initializeDatePickers(containerElement: HTMLElement): void { function initializeDatePickers(containerElement: HTMLElement): void {
const dateElements = containerElement.querySelectorAll( const dateElements = containerElement.querySelectorAll(
"input[type='date']" "input[type='date']"
) as NodeListOf<HTMLInputElement>; ) as NodeListOf<HTMLInputElement>
for (const dateElement of dateElements) { for (const dateElement of dateElements) {
const datePickerOptions = Object.assign({}, datePickerBaseOptions); const datePickerOptions = Object.assign({}, datePickerBaseOptions)
if (dateElement.required) { if (dateElement.required) {
datePickerOptions.showClearButton = false; datePickerOptions.showClearButton = false
} }
// apply min date if set // apply min date if set
if (dateElement.min) { if (dateElement.min) {
datePickerOptions.minDate = cityssm.dateStringToDate(dateElement.min); datePickerOptions.minDate = cityssm.dateStringToDate(dateElement.min)
} }
// apply max date if set // apply max date if set
if (dateElement.max) { if (dateElement.max) {
datePickerOptions.maxDate = cityssm.dateStringToDate(dateElement.max); datePickerOptions.maxDate = cityssm.dateStringToDate(dateElement.max)
} }
const cal = exports.bulmaCalendar.attach(dateElement, datePickerOptions)[0]; const cal = exports.bulmaCalendar.attach(
dateElement,
datePickerOptions
)[0]
// trigger change event on original element // trigger change event on original element
cal.on("save", () => { cal.on('save', () => {
dateElement.value = cal.value(); dateElement.value = cal.value()
dateElement.dispatchEvent(new Event("change")); dateElement.dispatchEvent(new Event('change'))
}); })
// Disable html scrolling when calendar is open // Disable html scrolling when calendar is open
cal.on("show", () => { cal.on('show', () => {
document.querySelector("html")!.classList.add("is-clipped"); document.querySelector('html')!.classList.add('is-clipped')
}); })
// Reenable scrolling, if a modal window is not open // Reenable scrolling, if a modal window is not open
cal.on("hide", () => { cal.on('hide', () => {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}); })
// Get the datepicker container element // Get the datepicker container element
const datepickerElement = containerElement.querySelector("#" + cal._id) as HTMLElement; const datepickerElement = containerElement.querySelector(
'#' + cal._id
) as HTMLElement
// Override the previous and next month button styles // Override the previous and next month button styles
const datePickerNavButtonElements = datepickerElement.querySelectorAll( const datePickerNavButtonElements = datepickerElement.querySelectorAll(
".datepicker-nav button.is-text" '.datepicker-nav button.is-text'
); )
for (const datePickerNavButtonElement of datePickerNavButtonElements) { for (const datePickerNavButtonElement of datePickerNavButtonElements) {
datePickerNavButtonElement.classList.add("is-" + datePickerBaseOptions.color); datePickerNavButtonElement.classList.add(
datePickerNavButtonElement.classList.remove("is-text"); 'is-' + datePickerBaseOptions.color
)
datePickerNavButtonElement.classList.remove('is-text')
} }
// Override the clear button style // Override the clear button style
const clearButtonElement = datepickerElement.querySelector( const clearButtonElement = datepickerElement.querySelector(
".datetimepicker-clear-button" '.datetimepicker-clear-button'
) as HTMLElement; ) as HTMLElement
if (clearButtonElement) { if (clearButtonElement) {
if (dateElement.required) { if (dateElement.required) {
clearButtonElement.remove(); clearButtonElement.remove()
} else { } else {
clearButtonElement.dataset.tooltip = "Clear"; clearButtonElement.dataset.tooltip = 'Clear'
clearButtonElement.ariaLabel = "Clear"; clearButtonElement.ariaLabel = 'Clear'
clearButtonElement.innerHTML = clearButtonElement.innerHTML =
'<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'; '<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'
} }
} }
// Apply a label // Apply a label
const labelElement = document.querySelector("label[for='" + dateElement.id + "']"); const labelElement = document.querySelector(
"label[for='" + dateElement.id + "']"
)
if (labelElement) { if (labelElement) {
datepickerElement.querySelector(".datetimepicker-dummy-input")!.ariaLabel = datepickerElement.querySelector(
labelElement.textContent; '.datetimepicker-dummy-input'
)!.ariaLabel = labelElement.textContent
} }
} }
} }
@ -268,41 +282,43 @@ declare const bulmaJS: BulmaJS;
*/ */
function populateAliases(containerElement: HTMLElement): void { function populateAliases(containerElement: HTMLElement): void {
const aliasElements = containerElement.querySelectorAll(".alias") as NodeListOf<HTMLElement>; const aliasElements = containerElement.querySelectorAll(
'.alias'
) as NodeListOf<HTMLElement>
for (const aliasElement of aliasElements) { for (const aliasElement of aliasElements) {
switch (aliasElement.dataset.alias) { switch (aliasElement.dataset.alias) {
case "Map": { case 'Map': {
aliasElement.textContent = exports.aliases.map; aliasElement.textContent = exports.aliases.map
break; break
} }
case "Lot": { case 'Lot': {
aliasElement.textContent = exports.aliases.lot; aliasElement.textContent = exports.aliases.lot
break; break
} }
case "lot": { case 'lot': {
aliasElement.textContent = exports.aliases.lot.toLowerCase(); aliasElement.textContent = exports.aliases.lot.toLowerCase()
break; break
} }
case "Occupancy": { case 'Occupancy': {
aliasElement.textContent = exports.aliases.occupancy; aliasElement.textContent = exports.aliases.occupancy
break; break
} }
case "occupancy": { case 'occupancy': {
aliasElement.textContent = exports.aliases.occupancy.toLowerCase(); aliasElement.textContent = exports.aliases.occupancy.toLowerCase()
break; break
} }
case "Occupant": { case 'Occupant': {
aliasElement.textContent = exports.aliases.occupant; aliasElement.textContent = exports.aliases.occupant
break; break
} }
case "occupant": { case 'occupant': {
aliasElement.textContent = exports.aliases.occupant.toLowerCase(); aliasElement.textContent = exports.aliases.occupant.toLowerCase()
break; break
} }
case "ExternalReceiptNumber": { case 'ExternalReceiptNumber': {
aliasElement.textContent = exports.aliases.externalReceiptNumber; aliasElement.textContent = exports.aliases.externalReceiptNumber
break; break
} }
} }
} }
@ -329,39 +345,54 @@ declare const bulmaJS: BulmaJS;
Occupants: cityssm.escapeHTML(exports.aliases.occupants), Occupants: cityssm.escapeHTML(exports.aliases.occupants),
occupants: cityssm.escapeHTML(exports.aliases.occupants.toLowerCase()), occupants: cityssm.escapeHTML(exports.aliases.occupants.toLowerCase()),
ExternalReceiptNumber: cityssm.escapeHTML(exports.aliases.externalReceiptNumber), ExternalReceiptNumber: cityssm.escapeHTML(
externalReceiptNumber: cityssm.escapeHTML(exports.aliases.externalReceiptNumber.toLowerCase()), exports.aliases.externalReceiptNumber
),
externalReceiptNumber: cityssm.escapeHTML(
exports.aliases.externalReceiptNumber.toLowerCase()
),
OccupancyStartDate: cityssm.escapeHTML(exports.aliases.occupancyStartDate), OccupancyStartDate: cityssm.escapeHTML(exports.aliases.occupancyStartDate),
occupancyStartDate: cityssm.escapeHTML(exports.aliases.occupancyStartDate.toLowerCase()), occupancyStartDate: cityssm.escapeHTML(
exports.aliases.occupancyStartDate.toLowerCase()
),
WorkOrderOpenDate: cityssm.escapeHTML(exports.aliases.workOrderOpenDate), WorkOrderOpenDate: cityssm.escapeHTML(exports.aliases.workOrderOpenDate),
workOrderOpenDate: cityssm.escapeHTML(exports.aliases.workOrderOpenDate.toLowerCase()), workOrderOpenDate: cityssm.escapeHTML(
exports.aliases.workOrderOpenDate.toLowerCase()
),
WorkOrderCloseDate: cityssm.escapeHTML(exports.aliases.workOrderCloseDate), WorkOrderCloseDate: cityssm.escapeHTML(exports.aliases.workOrderCloseDate),
workOrderCloseDate: cityssm.escapeHTML(exports.aliases.workOrderCloseDate.toLowerCase()) workOrderCloseDate: cityssm.escapeHTML(
}); exports.aliases.workOrderCloseDate.toLowerCase()
)
})
/* /*
* Colours * Colours
*/ */
const hues = ["red", "green", "orange", "blue", "pink", "yellow", "purple"]; const hues = ['red', 'green', 'orange', 'blue', 'pink', 'yellow', 'purple']
const luminosity = ["bright", "light", "dark"]; const luminosity = ['bright', 'light', 'dark']
function getRandomColor(seedString: string) { function getRandomColor(seedString: string) {
let actualSeedString = seedString; let actualSeedString = seedString
if (actualSeedString.length < 2) { if (actualSeedString.length < 2) {
actualSeedString = actualSeedString + "a1"; actualSeedString = actualSeedString + 'a1'
} }
return exports.randomColor({ return exports.randomColor({
seed: actualSeedString + actualSeedString, seed: actualSeedString + actualSeedString,
hue: hues[actualSeedString.codePointAt(actualSeedString.length - 1)! % hues.length], hue: hues[
actualSeedString.codePointAt(actualSeedString.length - 1)! % hues.length
],
luminosity: luminosity:
luminosity[actualSeedString.codePointAt(actualSeedString.length - 2)! % luminosity.length] luminosity[
}); actualSeedString.codePointAt(actualSeedString.length - 2)! %
luminosity.length
]
})
} }
/* /*
@ -376,98 +407,114 @@ declare const bulmaJS: BulmaJS;
return `<div class="field has-addons"> return `<div class="field has-addons">
<div class="control"> <div class="control">
<button <button
class="button ${isSmall ? "is-small" : ""} ${upButtonClassNames}" class="button ${
isSmall ? 'is-small' : ''
} ${upButtonClassNames}"
data-tooltip="Move Up" data-direction="up" type="button" aria-label="Move Up"> data-tooltip="Move Up" data-direction="up" type="button" aria-label="Move Up">
<i class="fas fa-arrow-up" aria-hidden="true"></i> <i class="fas fa-arrow-up" aria-hidden="true"></i>
</button> </button>
</div> </div>
<div class="control"> <div class="control">
<button <button
class="button ${isSmall ? "is-small" : ""} ${downButtonClassNames}" class="button ${
isSmall ? 'is-small' : ''
} ${downButtonClassNames}"
data-tooltip="Move Down" data-direction="down" type="button" aria-label="Move Down"> data-tooltip="Move Down" data-direction="down" type="button" aria-label="Move Down">
<i class="fas fa-arrow-down" aria-hidden="true"></i> <i class="fas fa-arrow-down" aria-hidden="true"></i>
</button> </button>
</div> </div>
</div>`; </div>`
} }
function getLoadingParagraphHTML(captionText = "Loading..."): string { function getLoadingParagraphHTML(captionText = 'Loading...'): string {
return `<p class="has-text-centered has-text-grey"> return `<p class="has-text-centered has-text-grey">
<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br /> <i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />
${cityssm.escapeHTML(captionText)} ${cityssm.escapeHTML(captionText)}
</p>`; </p>`
} }
function getSearchResultsPagerHTML(limit: number, offset: number, count: number) { function getSearchResultsPagerHTML(
limit: number,
offset: number,
count: number
) {
return ( return (
'<div class="level">' + '<div class="level">' +
('<div class="level-left">' + ('<div class="level-left">' +
'<div class="level-item has-text-weight-bold">' + '<div class="level-item has-text-weight-bold">' +
"Displaying " + 'Displaying ' +
(offset + 1).toString() + (offset + 1).toString() +
" to " + ' to ' +
Math.min(count, limit + offset) + Math.min(count, limit + offset) +
" of " + ' of ' +
count + count +
"</div>" + '</div>' +
"</div>") + '</div>') +
('<div class="level-right">' + ('<div class="level-right">' +
(offset > 0 (offset > 0
? '<div class="level-item">' + ? '<div class="level-item">' +
'<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' + '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
'<i class="fas fa-arrow-left" aria-hidden="true"></i>' + '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>" '</div>'
: "") + : '') +
(limit + offset < count (limit + offset < count
? '<div class="level-item">' + ? '<div class="level-item">' +
'<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' + '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
"<span>Next</span>" + '<span>Next</span>' +
'<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' + '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
"</button>" + '</button>' +
"</div>" '</div>'
: "") + : '') +
"</div>") + '</div>') +
"</div>" '</div>'
); )
} }
/* /*
* URLs * URLs
*/ */
const urlPrefix = document.querySelector("main")!.dataset.urlPrefix!; const urlPrefix = document.querySelector('main')!.dataset.urlPrefix!
function getRecordURL( function getRecordURL(
recordTypePlural: "maps" | "lots" | "lotOccupancies" | "workOrders", recordTypePlural: 'maps' | 'lots' | 'lotOccupancies' | 'workOrders',
recordId: number | string, recordId: number | string,
edit: boolean, edit: boolean,
time: boolean time: boolean
): string { ): string {
return ( return (
urlPrefix + urlPrefix +
"/" + '/' +
recordTypePlural + recordTypePlural +
(recordId ? "/" + recordId : "") + (recordId ? '/' + recordId : '') +
(recordId && edit ? "/edit" : "") + (recordId && edit ? '/edit' : '') +
(time ? "/?t=" + Date.now() : "") (time ? '/?t=' + Date.now() : '')
); )
} }
function getMapURL(mapId: number | string = "", edit = false, time = false) { function getMapURL(mapId: number | string = '', edit = false, time = false) {
return getRecordURL("maps", mapId, edit, time); return getRecordURL('maps', mapId, edit, time)
} }
function getLotURL(lotId: number | string = "", edit = false, time = false) { function getLotURL(lotId: number | string = '', edit = false, time = false) {
return getRecordURL("lots", lotId, edit, time); return getRecordURL('lots', lotId, edit, time)
} }
function getLotOccupancyURL(lotOccupancyId: number | string = "", edit = false, time = false) { function getLotOccupancyURL(
return getRecordURL("lotOccupancies", lotOccupancyId, edit, time); lotOccupancyId: number | string = '',
edit = false,
time = false
) {
return getRecordURL('lotOccupancies', lotOccupancyId, edit, time)
} }
function getWorkOrderURL(workOrderId: number | string = "", edit = false, time = false) { function getWorkOrderURL(
return getRecordURL("workOrders", workOrderId, edit, time); workOrderId: number | string = '',
edit = false,
time = false
) {
return getRecordURL('workOrders', workOrderId, edit, time)
} }
/* /*
@ -476,7 +523,7 @@ declare const bulmaJS: BulmaJS;
const los: globalTypes.LOS = { const los: globalTypes.LOS = {
urlPrefix, urlPrefix,
apiKey: document.querySelector("main")!.dataset.apiKey!, apiKey: document.querySelector('main')!.dataset.apiKey!,
highlightMap, highlightMap,
initializeUnlockFieldButtons, initializeUnlockFieldButtons,
initializeDatePickers, initializeDatePickers,
@ -498,7 +545,7 @@ declare const bulmaJS: BulmaJS;
getLotURL, getLotURL,
getLotOccupancyURL, getLotOccupancyURL,
getWorkOrderURL getWorkOrderURL
}; }
exports.los = los; exports.los = los
})(); })()

43
public-typescript/mapEdit.js
View File

@ -4,42 +4,45 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
var _a; var _a;
const los = exports.los; const los = exports.los;
const mapId = document.querySelector("#map--mapId").value; const mapId = document.querySelector('#map--mapId')
const isCreate = mapId === ""; .value;
const mapForm = document.querySelector("#form--map"); const isCreate = mapId === '';
const mapForm = document.querySelector('#form--map');
function updateMap(formEvent) { function updateMap(formEvent) {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/maps/" + (isCreate ? "doCreateMap" : "doUpdateMap"), mapForm, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/maps/' + (isCreate ? 'doCreateMap' : 'doUpdateMap'), mapForm, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker();
if (isCreate) { if (isCreate) {
window.location.href = los.urlPrefix + "/maps/" + responseJSON.mapId + "/edit"; window.location.href =
los.urlPrefix + '/maps/' + responseJSON.mapId + '/edit';
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
message: exports.aliases.map + " Updated Successfully", message: exports.aliases.map + ' Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.map, title: 'Error Updating ' + exports.aliases.map,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
mapForm.addEventListener("submit", updateMap); mapForm.addEventListener('submit', updateMap);
const inputElements = mapForm.querySelectorAll("input, select"); const inputElements = mapForm.querySelectorAll('input, select');
for (const inputElement of inputElements) { for (const inputElement of inputElements) {
inputElement.addEventListener("change", cityssm.enableNavBlocker); inputElement.addEventListener('change', cityssm.enableNavBlocker);
} }
(_a = document.querySelector("#button--deleteMap")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", (clickEvent) => { (_a = document
.querySelector('#button--deleteMap')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/maps/doDeleteMap", { cityssm.postJSON(los.urlPrefix + '/maps/doDeleteMap', {
mapId mapId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
@ -47,17 +50,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting " + exports.aliases.map, title: 'Error Deleting ' + exports.aliases.map,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete " + exports.aliases.map, title: 'Delete ' + exports.aliases.map,
message: `Are you sure you want to delete this ${exports.aliases.map.toLowerCase()} and all related ${exports.aliases.lots.toLowerCase()}?`, message: `Are you sure you want to delete this ${exports.aliases.map.toLowerCase()} and all related ${exports.aliases.lots.toLowerCase()}?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${exports.aliases.map}`, text: `Yes, Delete ${exports.aliases.map}`,
callbackFunction: doDelete callbackFunction: doDelete

90
public-typescript/mapEdit.ts
View File

@ -1,91 +1,99 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const mapId = (document.querySelector("#map--mapId") as HTMLInputElement).value; const mapId = (document.querySelector('#map--mapId') as HTMLInputElement)
const isCreate = mapId === ""; .value
const isCreate = mapId === ''
const mapForm = document.querySelector("#form--map") as HTMLFormElement; const mapForm = document.querySelector('#form--map') as HTMLFormElement
function updateMap(formEvent: SubmitEvent) { function updateMap(formEvent: SubmitEvent) {
formEvent.preventDefault(); formEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/maps/" + (isCreate ? "doCreateMap" : "doUpdateMap"), los.urlPrefix + '/maps/' + (isCreate ? 'doCreateMap' : 'doUpdateMap'),
mapForm, mapForm,
(responseJSON: { success: boolean; mapId?: number; errorMessage?: string }) => { (responseJSON: {
success: boolean
mapId?: number
errorMessage?: string
}) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
if (isCreate) { if (isCreate) {
window.location.href = los.urlPrefix + "/maps/" + responseJSON.mapId + "/edit"; window.location.href =
los.urlPrefix + '/maps/' + responseJSON.mapId + '/edit'
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
message: exports.aliases.map + " Updated Successfully", message: exports.aliases.map + ' Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} }
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating " + exports.aliases.map, title: 'Error Updating ' + exports.aliases.map,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
mapForm.addEventListener("submit", updateMap); mapForm.addEventListener('submit', updateMap)
const inputElements = mapForm.querySelectorAll("input, select") as NodeListOf< const inputElements = mapForm.querySelectorAll('input, select') as NodeListOf<
HTMLInputElement | HTMLSelectElement HTMLInputElement | HTMLSelectElement
>; >
for (const inputElement of inputElements) { for (const inputElement of inputElements) {
inputElement.addEventListener("change", cityssm.enableNavBlocker); inputElement.addEventListener('change', cityssm.enableNavBlocker)
} }
document.querySelector("#button--deleteMap")?.addEventListener("click", (clickEvent) => { document
clickEvent.preventDefault(); .querySelector('#button--deleteMap')
?.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault()
function doDelete() { function doDelete() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/maps/doDeleteMap", los.urlPrefix + '/maps/doDeleteMap',
{ {
mapId mapId
}, },
(responseJSON: { success: boolean; errorMessage?: string }) => { (responseJSON: { success: boolean; errorMessage?: string }) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = los.getMapURL(); window.location.href = los.getMapURL()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting " + exports.aliases.map, title: 'Error Deleting ' + exports.aliases.map,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete " + exports.aliases.map, title: 'Delete ' + exports.aliases.map,
message: `Are you sure you want to delete this ${exports.aliases.map.toLowerCase()} and all related ${exports.aliases.lots.toLowerCase()}?`, message: `Are you sure you want to delete this ${exports.aliases.map.toLowerCase()} and all related ${exports.aliases.lots.toLowerCase()}?`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: `Yes, Delete ${exports.aliases.map}`, text: `Yes, Delete ${exports.aliases.map}`,
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}); })
})(); })()

81
public-typescript/mapSearch.js
View File

@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const maps = exports.maps; const maps = exports.maps;
const searchFilterElement = document.querySelector("#searchFilter--map"); const searchFilterElement = document.querySelector('#searchFilter--map');
const searchResultsContainerElement = document.querySelector("#container--searchResults"); const searchResultsContainerElement = document.querySelector('#container--searchResults');
function renderResults() { function renderResults() {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(`Loading ${los.escapedAliases.Maps}...`); searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(`Loading ${los.escapedAliases.Maps}...`);
let searchResultCount = 0; let searchResultCount = 0;
const searchResultsTbodyElement = document.createElement("tbody"); const searchResultsTbodyElement = document.createElement('tbody');
const filterStringSplit = searchFilterElement.value.trim().toLowerCase().split(" "); const filterStringSplit = searchFilterElement.value
.trim()
.toLowerCase()
.split(' ');
for (const map of maps) { for (const map of maps) {
const mapSearchString = `${map.mapName} ${map.mapDescription} ${map.mapAddress1} ${map.mapAddress2}`.toLowerCase(); const mapSearchString = `${map.mapName} ${map.mapDescription} ${map.mapAddress1} ${map.mapAddress2}`.toLowerCase();
let showMap = true; let showMap = true;
@ -24,62 +27,66 @@ Object.defineProperty(exports, "__esModule", { value: true });
continue; continue;
} }
searchResultCount += 1; searchResultCount += 1;
searchResultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" + searchResultsTbodyElement.insertAdjacentHTML('beforeend', '<tr>' +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.urlPrefix + los.urlPrefix +
"/maps/" + '/maps/' +
map.mapId + map.mapId +
'">' + '">' +
cityssm.escapeHTML(map.mapName || "(No Name)") + cityssm.escapeHTML(map.mapName || '(No Name)') +
"</a><br />" + '</a><br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(map.mapDescription || "") + cityssm.escapeHTML(map.mapDescription || '') +
"</span>" + '</span>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(map.mapAddress1 ? cityssm.escapeHTML(map.mapAddress1) + "<br />" : "") + (map.mapAddress1
(map.mapAddress2 ? cityssm.escapeHTML(map.mapAddress2) + "<br />" : "") + ? cityssm.escapeHTML(map.mapAddress1) + '<br />'
: '') +
(map.mapAddress2
? cityssm.escapeHTML(map.mapAddress2) + '<br />'
: '') +
(map.mapCity || map.mapProvince (map.mapCity || map.mapProvince
? cityssm.escapeHTML(map.mapCity || "") + ? cityssm.escapeHTML(map.mapCity || '') +
", " + ', ' +
cityssm.escapeHTML(map.mapProvince || "") + cityssm.escapeHTML(map.mapProvince || '') +
"<br />" '<br />'
: "") + : '') +
(map.mapPostalCode ? cityssm.escapeHTML(map.mapPostalCode) : "") + (map.mapPostalCode ? cityssm.escapeHTML(map.mapPostalCode) : '') +
"</td>") + '</td>') +
("<td>" + cityssm.escapeHTML(map.mapPhoneNumber || "") + "</td>") + ('<td>' + cityssm.escapeHTML(map.mapPhoneNumber || '') + '</td>') +
'<td class="has-text-centered">' + '<td class="has-text-centered">' +
(map.mapLatitude && map.mapLongitude (map.mapLatitude && map.mapLongitude
? '<span data-tooltip="Has Geographic Coordinates"><i class="fas fa-map-marker-alt" aria-label="Has Geographic Coordinates"></i></span>' ? '<span data-tooltip="Has Geographic Coordinates"><i class="fas fa-map-marker-alt" aria-label="Has Geographic Coordinates"></i></span>'
: "") + : '') +
"</td>" + '</td>' +
'<td class="has-text-centered">' + '<td class="has-text-centered">' +
(map.mapSVG (map.mapSVG
? '<span data-tooltip="Has Image"><i class="fas fa-image" aria-label="Has Image"></i></span>' ? '<span data-tooltip="Has Image"><i class="fas fa-image" aria-label="Has Image"></i></span>'
: "") + : '') +
"</td>" + '</td>' +
('<td class="has-text-right">' + ('<td class="has-text-right">' +
'<a href="' + '<a href="' +
los.urlPrefix + los.urlPrefix +
"/lots?mapId=" + '/lots?mapId=' +
map.mapId + map.mapId +
'">' + '">' +
map.lotCount + map.lotCount +
"</a>" + '</a>' +
"</td>") + '</td>') +
"</tr>"); '</tr>');
} }
searchResultsContainerElement.innerHTML = ""; searchResultsContainerElement.innerHTML = '';
if (searchResultCount === 0) { if (searchResultCount === 0) {
searchResultsContainerElement.innerHTML = `<div class="message is-info"> searchResultsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no ${los.escapedAliases.maps} that meet the search criteria.</p> <p class="message-body">There are no ${los.escapedAliases.maps} that meet the search criteria.</p>
</div>`; </div>`;
} }
else { else {
const searchResultsTableElement = document.createElement("table"); const searchResultsTableElement = document.createElement('table');
searchResultsTableElement.className = searchResultsTableElement.className =
"table is-fullwidth is-striped is-hoverable has-sticky-header"; 'table is-fullwidth is-striped is-hoverable has-sticky-header';
searchResultsTableElement.innerHTML = `<thead><tr> searchResultsTableElement.innerHTML = `<thead><tr>
<th>${los.escapedAliases.Map}</th> <th>${los.escapedAliases.Map}</th>
<th>Address</th> <th>Address</th>
@ -92,8 +99,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
searchResultsContainerElement.append(searchResultsTableElement); searchResultsContainerElement.append(searchResultsTableElement);
} }
} }
searchFilterElement.addEventListener("keyup", renderResults); searchFilterElement.addEventListener('keyup', renderResults);
document.querySelector("#form--searchFilters").addEventListener("submit", (formEvent) => { document
.querySelector('#form--searchFilters')
.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
renderResults(); renderResults();
}); });

137
public-typescript/mapSearch.ts
View File

@ -1,111 +1,122 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const maps: recordTypes.Map[] = exports.maps; const maps: recordTypes.Map[] = exports.maps
const searchFilterElement = document.querySelector("#searchFilter--map") as HTMLInputElement; const searchFilterElement = document.querySelector(
'#searchFilter--map'
) as HTMLInputElement
const searchResultsContainerElement = document.querySelector("#container--searchResults") as HTMLElement; const searchResultsContainerElement = document.querySelector(
'#container--searchResults'
) as HTMLElement
function renderResults(): void { function renderResults(): void {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML( searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(
`Loading ${los.escapedAliases.Maps}...` `Loading ${los.escapedAliases.Maps}...`
); )
let searchResultCount = 0; let searchResultCount = 0
const searchResultsTbodyElement = document.createElement("tbody"); const searchResultsTbodyElement = document.createElement('tbody')
const filterStringSplit = searchFilterElement.value.trim().toLowerCase().split(" "); const filterStringSplit = searchFilterElement.value
.trim()
.toLowerCase()
.split(' ')
for (const map of maps) { for (const map of maps) {
const mapSearchString = const mapSearchString =
`${map.mapName} ${map.mapDescription} ${map.mapAddress1} ${map.mapAddress2}`.toLowerCase(); `${map.mapName} ${map.mapDescription} ${map.mapAddress1} ${map.mapAddress2}`.toLowerCase()
let showMap = true; let showMap = true
for (const filterStringPiece of filterStringSplit) { for (const filterStringPiece of filterStringSplit) {
if (!mapSearchString.includes(filterStringPiece)) { if (!mapSearchString.includes(filterStringPiece)) {
showMap = false; showMap = false
break; break
} }
} }
if (!showMap) { if (!showMap) {
continue; continue
} }
searchResultCount += 1; searchResultCount += 1
searchResultsTbodyElement.insertAdjacentHTML( searchResultsTbodyElement.insertAdjacentHTML(
"beforeend", 'beforeend',
"<tr>" + '<tr>' +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.urlPrefix + los.urlPrefix +
"/maps/" + '/maps/' +
map.mapId + map.mapId +
'">' + '">' +
cityssm.escapeHTML(map.mapName || "(No Name)") + cityssm.escapeHTML(map.mapName || '(No Name)') +
"</a><br />" + '</a><br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(map.mapDescription || "") + cityssm.escapeHTML(map.mapDescription || '') +
"</span>" + '</span>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(map.mapAddress1 ? cityssm.escapeHTML(map.mapAddress1) + "<br />" : "") + (map.mapAddress1
(map.mapAddress2 ? cityssm.escapeHTML(map.mapAddress2) + "<br />" : "") + ? cityssm.escapeHTML(map.mapAddress1) + '<br />'
: '') +
(map.mapAddress2
? cityssm.escapeHTML(map.mapAddress2) + '<br />'
: '') +
(map.mapCity || map.mapProvince (map.mapCity || map.mapProvince
? cityssm.escapeHTML(map.mapCity || "") + ? cityssm.escapeHTML(map.mapCity || '') +
", " + ', ' +
cityssm.escapeHTML(map.mapProvince || "") + cityssm.escapeHTML(map.mapProvince || '') +
"<br />" '<br />'
: "") + : '') +
(map.mapPostalCode ? cityssm.escapeHTML(map.mapPostalCode) : "") + (map.mapPostalCode ? cityssm.escapeHTML(map.mapPostalCode) : '') +
"</td>") + '</td>') +
("<td>" + cityssm.escapeHTML(map.mapPhoneNumber || "") + "</td>") + ('<td>' + cityssm.escapeHTML(map.mapPhoneNumber || '') + '</td>') +
'<td class="has-text-centered">' + '<td class="has-text-centered">' +
(map.mapLatitude && map.mapLongitude (map.mapLatitude && map.mapLongitude
? '<span data-tooltip="Has Geographic Coordinates"><i class="fas fa-map-marker-alt" aria-label="Has Geographic Coordinates"></i></span>' ? '<span data-tooltip="Has Geographic Coordinates"><i class="fas fa-map-marker-alt" aria-label="Has Geographic Coordinates"></i></span>'
: "") + : '') +
"</td>" + '</td>' +
'<td class="has-text-centered">' + '<td class="has-text-centered">' +
(map.mapSVG (map.mapSVG
? '<span data-tooltip="Has Image"><i class="fas fa-image" aria-label="Has Image"></i></span>' ? '<span data-tooltip="Has Image"><i class="fas fa-image" aria-label="Has Image"></i></span>'
: "") + : '') +
"</td>" + '</td>' +
('<td class="has-text-right">' + ('<td class="has-text-right">' +
'<a href="' + '<a href="' +
los.urlPrefix + los.urlPrefix +
"/lots?mapId=" + '/lots?mapId=' +
map.mapId + map.mapId +
'">' + '">' +
map.lotCount + map.lotCount +
"</a>" + '</a>' +
"</td>") + '</td>') +
"</tr>" '</tr>'
); )
} }
searchResultsContainerElement.innerHTML = ""; searchResultsContainerElement.innerHTML = ''
if (searchResultCount === 0) { if (searchResultCount === 0) {
searchResultsContainerElement.innerHTML = `<div class="message is-info"> searchResultsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no ${los.escapedAliases.maps} that meet the search criteria.</p> <p class="message-body">There are no ${los.escapedAliases.maps} that meet the search criteria.</p>
</div>`; </div>`
} else { } else {
const searchResultsTableElement = document.createElement("table"); const searchResultsTableElement = document.createElement('table')
searchResultsTableElement.className = searchResultsTableElement.className =
"table is-fullwidth is-striped is-hoverable has-sticky-header"; 'table is-fullwidth is-striped is-hoverable has-sticky-header'
searchResultsTableElement.innerHTML = `<thead><tr> searchResultsTableElement.innerHTML = `<thead><tr>
<th>${los.escapedAliases.Map}</th> <th>${los.escapedAliases.Map}</th>
@ -114,20 +125,22 @@ declare const cityssm: cityssmGlobal;
<th class="has-text-centered">Coordinates</th> <th class="has-text-centered">Coordinates</th>
<th class="has-text-centered">Image</th> <th class="has-text-centered">Image</th>
<th class="has-text-right">${los.escapedAliases.Lot} Count</th> <th class="has-text-right">${los.escapedAliases.Lot} Count</th>
</tr></thead>`; </tr></thead>`
searchResultsTableElement.append(searchResultsTbodyElement); searchResultsTableElement.append(searchResultsTbodyElement)
searchResultsContainerElement.append(searchResultsTableElement); searchResultsContainerElement.append(searchResultsTableElement)
} }
} }
searchFilterElement.addEventListener("keyup", renderResults); searchFilterElement.addEventListener('keyup', renderResults)
document.querySelector("#form--searchFilters")!.addEventListener("submit", (formEvent) => { document
formEvent.preventDefault(); .querySelector('#form--searchFilters')!
renderResults(); .addEventListener('submit', (formEvent) => {
}); formEvent.preventDefault()
renderResults()
})
renderResults(); renderResults()
})(); })()

6
public-typescript/mapView.js
View File

@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable @typescript-eslint/no-non-null-assertion */
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const mapContainerElement = document.querySelector("#map--leaflet"); const mapContainerElement = document.querySelector('#map--leaflet');
if (mapContainerElement) { if (mapContainerElement) {
const mapLatitude = Number.parseFloat(mapContainerElement.dataset.mapLatitude); const mapLatitude = Number.parseFloat(mapContainerElement.dataset.mapLatitude);
const mapLongitude = Number.parseFloat(mapContainerElement.dataset.mapLongitude); const mapLongitude = Number.parseFloat(mapContainerElement.dataset.mapLongitude);
@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
// eslint-disable-next-line unicorn/no-array-callback-reference // eslint-disable-next-line unicorn/no-array-callback-reference
const map = L.map(mapContainerElement); const map = L.map(mapContainerElement);
map.setView(mapCoordinates, 15); map.setView(mapCoordinates, 15);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: "© OpenStreetMap" attribution: '© OpenStreetMap'
}).addTo(map); }).addTo(map);
L.marker(mapCoordinates).addTo(map); L.marker(mapCoordinates).addTo(map);
} }

30
public-typescript/mapView.ts
View File

@ -1,33 +1,33 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable @typescript-eslint/no-non-null-assertion */
import type * as Leaflet from "leaflet"; import type * as Leaflet from 'leaflet'
declare const L; declare const L
(() => { ;(() => {
const mapContainerElement = document.querySelector( const mapContainerElement = document.querySelector(
"#map--leaflet" '#map--leaflet'
) as HTMLElement; ) as HTMLElement
if (mapContainerElement) { if (mapContainerElement) {
const mapLatitude = Number.parseFloat( const mapLatitude = Number.parseFloat(
mapContainerElement.dataset.mapLatitude! mapContainerElement.dataset.mapLatitude!
); )
const mapLongitude = Number.parseFloat( const mapLongitude = Number.parseFloat(
mapContainerElement.dataset.mapLongitude! mapContainerElement.dataset.mapLongitude!
); )
const mapCoordinates: Leaflet.LatLngTuple = [mapLatitude, mapLongitude]; const mapCoordinates: Leaflet.LatLngTuple = [mapLatitude, mapLongitude]
// eslint-disable-next-line unicorn/no-array-callback-reference // eslint-disable-next-line unicorn/no-array-callback-reference
const map: Leaflet.Map = L.map(mapContainerElement); const map: Leaflet.Map = L.map(mapContainerElement)
map.setView(mapCoordinates, 15); map.setView(mapCoordinates, 15)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: "© OpenStreetMap" attribution: '© OpenStreetMap'
}).addTo(map); }).addTo(map)
L.marker(mapCoordinates).addTo(map); L.marker(mapCoordinates).addTo(map)
} }
})(); })()

17
public-typescript/reportSearch.js
View File

@ -1,28 +1,29 @@
/* eslint-disable unicorn/prefer-module */ /* eslint-disable unicorn/prefer-module */
;
(() => { (() => {
const menuTabElements = document.querySelectorAll(".menu a"); const menuTabElements = document.querySelectorAll('.menu a');
const tabContainerElements = document.querySelectorAll(".tabs-container > div"); const tabContainerElements = document.querySelectorAll('.tabs-container > div');
function selectTab(clickEvent) { function selectTab(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
// Remove .is-active from all tabs // Remove .is-active from all tabs
for (const menuTabElement of menuTabElements) { for (const menuTabElement of menuTabElements) {
menuTabElement.classList.remove("is-active"); menuTabElement.classList.remove('is-active');
} }
// Set .is-active on clicked tab // Set .is-active on clicked tab
const selectedTabElement = clickEvent.currentTarget; const selectedTabElement = clickEvent.currentTarget;
selectedTabElement.classList.add("is-active"); selectedTabElement.classList.add('is-active');
// Hide all but selected tab // Hide all but selected tab
const selectedTabContainerId = selectedTabElement.href.slice(Math.max(0, selectedTabElement.href.indexOf("#") + 1)); const selectedTabContainerId = selectedTabElement.href.slice(Math.max(0, selectedTabElement.href.indexOf('#') + 1));
for (const tabContainerElement of tabContainerElements) { for (const tabContainerElement of tabContainerElements) {
if (tabContainerElement.id === selectedTabContainerId) { if (tabContainerElement.id === selectedTabContainerId) {
tabContainerElement.classList.remove("is-hidden"); tabContainerElement.classList.remove('is-hidden');
} }
else { else {
tabContainerElement.classList.add("is-hidden"); tabContainerElement.classList.add('is-hidden');
} }
} }
} }
for (const menuTabElement of menuTabElements) { for (const menuTabElement of menuTabElements) {
menuTabElement.addEventListener("click", selectTab); menuTabElement.addEventListener('click', selectTab);
} }
})(); })();

31
public-typescript/reportSearch.ts
View File

@ -1,38 +1,41 @@
/* eslint-disable unicorn/prefer-module */ /* eslint-disable unicorn/prefer-module */
(() => { ;(() => {
const menuTabElements = document.querySelectorAll(".menu a") as NodeListOf<HTMLAnchorElement>; const menuTabElements = document.querySelectorAll(
'.menu a'
) as NodeListOf<HTMLAnchorElement>
const tabContainerElements = document.querySelectorAll( const tabContainerElements = document.querySelectorAll(
".tabs-container > div" '.tabs-container > div'
) as NodeListOf<HTMLElement>; ) as NodeListOf<HTMLElement>
function selectTab(clickEvent: Event) { function selectTab(clickEvent: Event) {
clickEvent.preventDefault(); clickEvent.preventDefault()
// Remove .is-active from all tabs // Remove .is-active from all tabs
for (const menuTabElement of menuTabElements) { for (const menuTabElement of menuTabElements) {
menuTabElement.classList.remove("is-active"); menuTabElement.classList.remove('is-active')
} }
// Set .is-active on clicked tab // Set .is-active on clicked tab
const selectedTabElement = clickEvent.currentTarget as HTMLAnchorElement; const selectedTabElement = clickEvent.currentTarget as HTMLAnchorElement
selectedTabElement.classList.add("is-active"); selectedTabElement.classList.add('is-active')
// Hide all but selected tab // Hide all but selected tab
const selectedTabContainerId = selectedTabElement.href.slice( const selectedTabContainerId = selectedTabElement.href.slice(
Math.max(0, selectedTabElement.href.indexOf("#") + 1) Math.max(0, selectedTabElement.href.indexOf('#') + 1)
); )
for (const tabContainerElement of tabContainerElements) { for (const tabContainerElement of tabContainerElements) {
if (tabContainerElement.id === selectedTabContainerId) { if (tabContainerElement.id === selectedTabContainerId) {
tabContainerElement.classList.remove("is-hidden"); tabContainerElement.classList.remove('is-hidden')
} else { } else {
tabContainerElement.classList.add("is-hidden"); tabContainerElement.classList.add('is-hidden')
} }
} }
} }
for (const menuTabElement of menuTabElements) { for (const menuTabElement of menuTabElements) {
menuTabElement.addEventListener("click", selectTab); menuTabElement.addEventListener('click', selectTab)
} }
})(); })()

740
public-typescript/workOrderEdit.js
View File

File diff suppressed because it is too large Load Diff

277
public-typescript/workOrderEdit/workOrderEdit.js
View File

@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
var _a, _b; var _a, _b;
const los = exports.los; const los = exports.los;
const workOrderId = document.querySelector("#workOrderEdit--workOrderId").value; const workOrderId = document.querySelector('#workOrderEdit--workOrderId').value;
const isCreate = workOrderId === ""; const isCreate = workOrderId === '';
const workOrderFormElement = document.querySelector("#form--workOrderEdit"); const workOrderFormElement = document.querySelector('#form--workOrderEdit');
los.initializeDatePickers(workOrderFormElement los.initializeDatePickers(workOrderFormElement
.querySelector("#workOrderEdit--workOrderOpenDateString") .querySelector('#workOrderEdit--workOrderOpenDateString')
.closest(".field")); .closest('.field'));
los.initializeUnlockFieldButtons(workOrderFormElement); los.initializeUnlockFieldButtons(workOrderFormElement);
workOrderFormElement.addEventListener("submit", (submitEvent) => { workOrderFormElement.addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/workOrders/" + (isCreate ? "doCreateWorkOrder" : "doUpdateWorkOrder"), submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix +
'/workOrders/' +
(isCreate ? 'doCreateWorkOrder' : 'doUpdateWorkOrder'), submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker();
if (isCreate) { if (isCreate) {
@ -21,70 +23,71 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Updated Successfully", message: 'Work Order Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); });
} }
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order", title: 'Error Updating Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
}); });
const inputElements = workOrderFormElement.querySelectorAll("input, select"); const inputElements = workOrderFormElement.querySelectorAll('input, select');
for (const inputElement of inputElements) { for (const inputElement of inputElements) {
inputElement.addEventListener("change", cityssm.enableNavBlocker); inputElement.addEventListener('change', cityssm.enableNavBlocker);
} }
/* /*
* Work Order Options * Work Order Options
*/ */
function doClose() { function doClose() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doCloseWorkOrder", { cityssm.postJSON(los.urlPrefix + '/workOrders/doCloseWorkOrder', {
workOrderId workOrderId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = los.urlPrefix + "/workOrders/" + workOrderId; window.location.href = los.urlPrefix + '/workOrders/' + workOrderId;
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Closing Work Order", title: 'Error Closing Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doDeleteWorkOrder", { cityssm.postJSON(los.urlPrefix + '/workOrders/doDeleteWorkOrder', {
workOrderId workOrderId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = los.urlPrefix + "/workOrders"; window.location.href = los.urlPrefix + '/workOrders';
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order", title: 'Error Deleting Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
let workOrderMilestones; let workOrderMilestones;
(_a = document.querySelector("#button--closeWorkOrder")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => { (_a = document
.querySelector('#button--closeWorkOrder')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
const hasOpenMilestones = workOrderMilestones.some((milestone) => { const hasOpenMilestones = workOrderMilestones.some((milestone) => {
return !milestone.workOrderMilestoneCompletionDate; return !milestone.workOrderMilestoneCompletionDate;
}); });
if (hasOpenMilestones) { if (hasOpenMilestones) {
bulmaJS.alert({ bulmaJS.alert({
title: "Outstanding Milestones", title: 'Outstanding Milestones',
message: `You cannot close a work order with outstanding milestones. message: `You cannot close a work order with outstanding milestones.
Either complete the outstanding milestones, or remove them from the work order.`, Either complete the outstanding milestones, or remove them from the work order.`,
contextualColorName: "warning" contextualColorName: 'warning'
}); });
/* /*
// Disable closing work orders with open milestones // Disable closing work orders with open milestones
@ -102,24 +105,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Close Work Order", title: 'Close Work Order',
message: "Are you sure you want to close this work order?", message: 'Are you sure you want to close this work order?',
contextualColorName: "info", contextualColorName: 'info',
okButton: { okButton: {
text: "Yes, Close Work Order", text: 'Yes, Close Work Order',
callbackFunction: doClose callbackFunction: doClose
} }
}); });
} }
}); });
(_b = document.querySelector("#button--deleteWorkOrder")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", (clickEvent) => { (_b = document
.querySelector('#button--deleteWorkOrder')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault(); clickEvent.preventDefault();
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order", title: 'Delete Work Order',
message: "Are you sure you want to delete this work order?", message: 'Are you sure you want to delete this work order?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order", text: 'Yes, Delete Work Order',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
@ -144,131 +148,136 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Reopening Milestone", title: 'Error Reopening Milestone',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
} }
function completeMilestone(clickEvent) { function completeMilestone(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date());
const workOrderMilestoneId = Number.parseInt(clickEvent.currentTarget.closest(".container--milestone") const workOrderMilestoneId = Number.parseInt(clickEvent.currentTarget.closest('.container--milestone').dataset.workOrderMilestoneId, 10);
.dataset.workOrderMilestoneId, 10);
const workOrderMilestone = workOrderMilestones.find((currentMilestone) => { const workOrderMilestone = workOrderMilestones.find((currentMilestone) => {
return currentMilestone.workOrderMilestoneId === workOrderMilestoneId; return currentMilestone.workOrderMilestoneId === workOrderMilestoneId;
}); });
const doComplete = () => { const doComplete = () => {
cityssm.postJSON(los.urlPrefix + "/workOrders/doCompleteWorkOrderMilestone", { cityssm.postJSON(los.urlPrefix + '/workOrders/doCompleteWorkOrderMilestone', {
workOrderId, workOrderId,
workOrderMilestoneId workOrderMilestoneId
}, processMilestoneResponse); }, processMilestoneResponse);
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Complete Milestone", title: 'Complete Milestone',
message: "Are you sure you want to complete this milestone?" + message: 'Are you sure you want to complete this milestone?' +
(workOrderMilestone.workOrderMilestoneDateString > currentDateString (workOrderMilestone.workOrderMilestoneDateString > currentDateString
? "<br /><strong>Note that this milestone is expected to be completed in the future.</strong>" ? '<br /><strong>Note that this milestone is expected to be completed in the future.</strong>'
: ""), : ''),
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Complete Milestone", text: 'Yes, Complete Milestone',
callbackFunction: doComplete callbackFunction: doComplete
} }
}); });
} }
function reopenMilestone(clickEvent) { function reopenMilestone(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const workOrderMilestoneId = clickEvent.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId; const workOrderMilestoneId = clickEvent.currentTarget.closest('.container--milestone').dataset.workOrderMilestoneId;
const doReopen = () => { const doReopen = () => {
cityssm.postJSON(los.urlPrefix + "/workOrders/doReopenWorkOrderMilestone", { cityssm.postJSON(los.urlPrefix + '/workOrders/doReopenWorkOrderMilestone', {
workOrderId, workOrderId,
workOrderMilestoneId workOrderMilestoneId
}, processMilestoneResponse); }, processMilestoneResponse);
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Reopen Milestone", title: 'Reopen Milestone',
message: "Are you sure you want to remove the completion status from this milestone, and reopen it?", message: 'Are you sure you want to remove the completion status from this milestone, and reopen it?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Reopen Milestone", text: 'Yes, Reopen Milestone',
callbackFunction: doReopen callbackFunction: doReopen
} }
}); });
} }
function deleteMilestone(clickEvent) { function deleteMilestone(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const workOrderMilestoneId = clickEvent.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId; const workOrderMilestoneId = clickEvent.currentTarget.closest('.container--milestone').dataset.workOrderMilestoneId;
const doDelete = () => { const doDelete = () => {
cityssm.postJSON(los.urlPrefix + "/workOrders/doDeleteWorkOrderMilestone", { cityssm.postJSON(los.urlPrefix + '/workOrders/doDeleteWorkOrderMilestone', {
workOrderMilestoneId, workOrderMilestoneId,
workOrderId workOrderId
}, processMilestoneResponse); }, processMilestoneResponse);
}; };
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Milestone", title: 'Delete Milestone',
message: "Are you sure you want to delete this milestone?", message: 'Are you sure you want to delete this milestone?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Milestone", text: 'Yes, Delete Milestone',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
function editMilestone(clickEvent) { function editMilestone(clickEvent) {
clickEvent.preventDefault(); clickEvent.preventDefault();
const workOrderMilestoneId = Number.parseInt(clickEvent.currentTarget.closest(".container--milestone") const workOrderMilestoneId = Number.parseInt(clickEvent.currentTarget.closest('.container--milestone').dataset.workOrderMilestoneId, 10);
.dataset.workOrderMilestoneId, 10);
const workOrderMilestone = workOrderMilestones.find((currentMilestone) => { const workOrderMilestone = workOrderMilestones.find((currentMilestone) => {
return currentMilestone.workOrderMilestoneId === workOrderMilestoneId; return currentMilestone.workOrderMilestoneId === workOrderMilestoneId;
}); });
let editCloseModalFunction; let editCloseModalFunction;
const doEdit = (submitEvent) => { const doEdit = (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/workOrders/doUpdateWorkOrderMilestone", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doUpdateWorkOrderMilestone', submitEvent.currentTarget, (responseJSON) => {
processMilestoneResponse(responseJSON); processMilestoneResponse(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction();
} }
}); });
}; };
cityssm.openHtmlModal("workOrder-editMilestone", { cityssm.openHtmlModal('workOrder-editMilestone', {
onshow(modalElement) { onshow(modalElement) {
modalElement.querySelector("#milestoneEdit--workOrderId").value = ;
workOrderId; modalElement.querySelector('#milestoneEdit--workOrderId').value = workOrderId;
modalElement.querySelector("#milestoneEdit--workOrderMilestoneId").value = workOrderMilestone.workOrderMilestoneId.toString(); modalElement.querySelector('#milestoneEdit--workOrderMilestoneId').value = workOrderMilestone.workOrderMilestoneId.toString();
const milestoneTypeElement = modalElement.querySelector("#milestoneEdit--workOrderMilestoneTypeId"); const milestoneTypeElement = modalElement.querySelector('#milestoneEdit--workOrderMilestoneTypeId');
let milestoneTypeFound = false; let milestoneTypeFound = false;
for (const milestoneType of exports.workOrderMilestoneTypes) { for (const milestoneType of exports.workOrderMilestoneTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = milestoneType.workOrderMilestoneTypeId.toString(); optionElement.value =
milestoneType.workOrderMilestoneTypeId.toString();
optionElement.textContent = milestoneType.workOrderMilestoneType; optionElement.textContent = milestoneType.workOrderMilestoneType;
if (milestoneType.workOrderMilestoneTypeId === workOrderMilestone.workOrderMilestoneTypeId) { if (milestoneType.workOrderMilestoneTypeId ===
workOrderMilestone.workOrderMilestoneTypeId) {
optionElement.selected = true; optionElement.selected = true;
milestoneTypeFound = true; milestoneTypeFound = true;
} }
milestoneTypeElement.append(optionElement); milestoneTypeElement.append(optionElement);
} }
if (!milestoneTypeFound && workOrderMilestone.workOrderMilestoneTypeId) { if (!milestoneTypeFound &&
const optionElement = document.createElement("option"); workOrderMilestone.workOrderMilestoneTypeId) {
optionElement.value = workOrderMilestone.workOrderMilestoneTypeId.toString(); const optionElement = document.createElement('option');
optionElement.value =
workOrderMilestone.workOrderMilestoneTypeId.toString();
optionElement.textContent = workOrderMilestone.workOrderMilestoneType; optionElement.textContent = workOrderMilestone.workOrderMilestoneType;
optionElement.selected = true; optionElement.selected = true;
milestoneTypeElement.append(optionElement); milestoneTypeElement.append(optionElement);
} }
modalElement.querySelector("#milestoneEdit--workOrderMilestoneDateString").value = workOrderMilestone.workOrderMilestoneDateString; ;
modalElement.querySelector('#milestoneEdit--workOrderMilestoneDateString').value = workOrderMilestone.workOrderMilestoneDateString;
if (workOrderMilestone.workOrderMilestoneTime) { if (workOrderMilestone.workOrderMilestoneTime) {
modalElement.querySelector("#milestoneEdit--workOrderMilestoneTimeString").value = workOrderMilestone.workOrderMilestoneTimeString; ;
modalElement.querySelector('#milestoneEdit--workOrderMilestoneTimeString').value = workOrderMilestone.workOrderMilestoneTimeString;
} }
modalElement.querySelector("#milestoneEdit--workOrderMilestoneDescription").value = workOrderMilestone.workOrderMilestoneDescription; ;
modalElement.querySelector('#milestoneEdit--workOrderMilestoneDescription').value = workOrderMilestone.workOrderMilestoneDescription;
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement);
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
modalElement.querySelector("form").addEventListener("submit", doEdit); modalElement.querySelector('form').addEventListener('submit', doEdit);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -278,15 +287,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
function renderMilestones() { function renderMilestones() {
var _a, _b, _c; var _a, _b, _c;
// Clear milestones panel // Clear milestones panel
const milestonesPanelElement = document.querySelector("#panel--milestones"); const milestonesPanelElement = document.querySelector('#panel--milestones');
const panelBlockElementsToDelete = milestonesPanelElement.querySelectorAll(".panel-block"); const panelBlockElementsToDelete = milestonesPanelElement.querySelectorAll('.panel-block');
for (const panelBlockToDelete of panelBlockElementsToDelete) { for (const panelBlockToDelete of panelBlockElementsToDelete) {
panelBlockToDelete.remove(); panelBlockToDelete.remove();
} }
for (const milestone of workOrderMilestones) { for (const milestone of workOrderMilestones) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div');
panelBlockElement.className = "panel-block is-block container--milestone"; panelBlockElement.className = 'panel-block is-block container--milestone';
panelBlockElement.dataset.workOrderMilestoneId = milestone.workOrderMilestoneId.toString(); panelBlockElement.dataset.workOrderMilestoneId =
milestone.workOrderMilestoneId.toString();
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="columns is-mobile">' + '<div class="columns is-mobile">' +
('<div class="column is-narrow">' + ('<div class="column is-narrow">' +
@ -297,70 +307,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
milestone.workOrderMilestoneCompletionDateString + milestone.workOrderMilestoneCompletionDateString +
'">' + '">' +
'<span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span>' +
"</span>" '</span>'
: '<button class="button button--completeMilestone" data-tooltip="Incomplete" type="button" aria-label="Incomplete">' + : '<button class="button button--completeMilestone" data-tooltip="Incomplete" type="button" aria-label="Incomplete">' +
'<span class="icon is-small"><i class="far fa-square" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="far fa-square" aria-hidden="true"></i></span>' +
"</button>") + '</button>') +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
(milestone.workOrderMilestoneTypeId (milestone.workOrderMilestoneTypeId
? "<strong>" + ? '<strong>' +
cityssm.escapeHTML(milestone.workOrderMilestoneType || "") + cityssm.escapeHTML(milestone.workOrderMilestoneType || '') +
"</strong><br />" '</strong><br />'
: "") + : '') +
milestone.workOrderMilestoneDateString + milestone.workOrderMilestoneDateString +
(milestone.workOrderMilestoneTime ? " " + milestone.workOrderMilestoneTimeString : "") + (milestone.workOrderMilestoneTime
"<br />" + ? ' ' + milestone.workOrderMilestoneTimeString
: '') +
'<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(milestone.workOrderMilestoneDescription || "") + cityssm.escapeHTML(milestone.workOrderMilestoneDescription || '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column is-narrow">' + ('<div class="column is-narrow">' +
'<div class="dropdown is-right">' + '<div class="dropdown is-right">' +
('<div class="dropdown-trigger">' + ('<div class="dropdown-trigger">' +
'<button class="button is-small" data-tooltip="Options" type="button" aria-label="Options">' + '<button class="button is-small" data-tooltip="Options" type="button" aria-label="Options">' +
'<i class="fas fa-ellipsis-v" aria-hidden="true"></i>' + '<i class="fas fa-ellipsis-v" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="dropdown-menu">' + ('<div class="dropdown-menu">' +
'<div class="dropdown-content">' + '<div class="dropdown-content">' +
(milestone.workOrderMilestoneCompletionDate (milestone.workOrderMilestoneCompletionDate
? '<a class="dropdown-item button--reopenMilestone" href="#">' + ? '<a class="dropdown-item button--reopenMilestone" href="#">' +
'<span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span>' +
" <span>Reopen Milestone</span>" + ' <span>Reopen Milestone</span>' +
"</a>" '</a>'
: '<a class="dropdown-item button--editMilestone" href="#">' + : '<a class="dropdown-item button--editMilestone" href="#">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit Milestone</span>" + ' <span>Edit Milestone</span>' +
"</a>") + '</a>') +
'<hr class="dropdown-divider" />' + '<hr class="dropdown-divider" />' +
'<a class="dropdown-item button--deleteMilestone" href="#">' + '<a class="dropdown-item button--deleteMilestone" href="#">' +
'<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>' +
" <span>Delete Milestone</span>" + ' <span>Delete Milestone</span>' +
"</a>" + '</a>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</div>"; '</div>';
(_a = panelBlockElement (_a = panelBlockElement
.querySelector(".button--reopenMilestone")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", reopenMilestone); .querySelector('.button--reopenMilestone')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', reopenMilestone);
(_b = panelBlockElement (_b = panelBlockElement
.querySelector(".button--editMilestone")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", editMilestone); .querySelector('.button--editMilestone')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', editMilestone);
(_c = panelBlockElement (_c = panelBlockElement
.querySelector(".button--completeMilestone")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", completeMilestone); .querySelector('.button--completeMilestone')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', completeMilestone);
panelBlockElement panelBlockElement
.querySelector(".button--deleteMilestone") .querySelector('.button--deleteMilestone')
.addEventListener("click", deleteMilestone); .addEventListener('click', deleteMilestone);
milestonesPanelElement.append(panelBlockElement); milestonesPanelElement.append(panelBlockElement);
} }
bulmaJS.init(milestonesPanelElement); bulmaJS.init(milestonesPanelElement);
} }
if (!isCreate) { if (!isCreate) {
workOrderMilestones = exports.workOrderMilestones; workOrderMilestones =
exports.workOrderMilestones;
delete exports.workOrderMilestones; delete exports.workOrderMilestones;
renderMilestones(); renderMilestones();
document.querySelector("#button--addMilestone").addEventListener("click", () => { document
.querySelector('#button--addMilestone')
.addEventListener('click', () => {
let addModalElement; let addModalElement;
let addFormElement; let addFormElement;
let addCloseModalFunction; let addCloseModalFunction;
@ -370,20 +385,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
} }
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date());
function _doAdd() { function _doAdd() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doAddWorkOrderMilestone", addFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doAddWorkOrderMilestone', addFormElement, (responseJSON) => {
processMilestoneResponse(responseJSON); processMilestoneResponse(responseJSON);
if (responseJSON.success) { if (responseJSON.success) {
addCloseModalFunction(); addCloseModalFunction();
} }
}); });
} }
if (addModalElement.querySelector("#milestoneAdd--workOrderMilestoneDateString").value < currentDateString) { if (addModalElement.querySelector('#milestoneAdd--workOrderMilestoneDateString').value < currentDateString) {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Milestone Date in the Past", title: 'Milestone Date in the Past',
message: "Are you sure you want to create a milestone with a date in the past?", message: 'Are you sure you want to create a milestone with a date in the past?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Create a Past Milestone", text: 'Yes, Create a Past Milestone',
callbackFunction: _doAdd callbackFunction: _doAdd
} }
}); });
@ -392,18 +407,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
_doAdd(); _doAdd();
} }
}; };
cityssm.openHtmlModal("workOrder-addMilestone", { cityssm.openHtmlModal('workOrder-addMilestone', {
onshow(modalElement) { onshow(modalElement) {
modalElement.querySelector("#milestoneAdd--workOrderId").value = ;
workOrderId; modalElement.querySelector('#milestoneAdd--workOrderId').value = workOrderId;
const milestoneTypeElement = modalElement.querySelector("#milestoneAdd--workOrderMilestoneTypeId"); const milestoneTypeElement = modalElement.querySelector('#milestoneAdd--workOrderMilestoneTypeId');
for (const milestoneType of exports.workOrderMilestoneTypes) { for (const milestoneType of exports.workOrderMilestoneTypes) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = milestoneType.workOrderMilestoneTypeId.toString(); optionElement.value =
milestoneType.workOrderMilestoneTypeId.toString();
optionElement.textContent = milestoneType.workOrderMilestoneType; optionElement.textContent = milestoneType.workOrderMilestoneType;
milestoneTypeElement.append(optionElement); milestoneTypeElement.append(optionElement);
} }
modalElement.querySelector("#milestoneAdd--workOrderMilestoneDateString").valueAsDate = new Date(); ;
modalElement.querySelector('#milestoneAdd--workOrderMilestoneDateString').valueAsDate = new Date();
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addModalElement = modalElement; addModalElement = modalElement;
@ -411,8 +428,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement);
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
addFormElement = modalElement.querySelector("form"); addFormElement = modalElement.querySelector('form');
addFormElement.addEventListener("submit", doAdd); addFormElement.addEventListener('submit', doAdd);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();

566
public-typescript/workOrderEdit/workOrderEdit.ts
View File

@ -1,65 +1,78 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const workOrderId = (document.querySelector("#workOrderEdit--workOrderId") as HTMLInputElement).value; const workOrderId = (
document.querySelector('#workOrderEdit--workOrderId') as HTMLInputElement
).value
const isCreate = workOrderId === ""; const isCreate = workOrderId === ''
const workOrderFormElement = document.querySelector("#form--workOrderEdit") as HTMLFormElement; const workOrderFormElement = document.querySelector(
'#form--workOrderEdit'
) as HTMLFormElement
los.initializeDatePickers( los.initializeDatePickers(
workOrderFormElement workOrderFormElement
.querySelector("#workOrderEdit--workOrderOpenDateString")! .querySelector('#workOrderEdit--workOrderOpenDateString')!
.closest(".field") as HTMLElement .closest('.field') as HTMLElement
); )
los.initializeUnlockFieldButtons(workOrderFormElement); los.initializeUnlockFieldButtons(workOrderFormElement)
workOrderFormElement.addEventListener("submit", (submitEvent) => { workOrderFormElement.addEventListener('submit', (submitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/" + (isCreate ? "doCreateWorkOrder" : "doUpdateWorkOrder"), los.urlPrefix +
'/workOrders/' +
(isCreate ? 'doCreateWorkOrder' : 'doUpdateWorkOrder'),
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { success: boolean; workOrderId?: number; errorMessage?: string }) => { (responseJSON: {
success: boolean
workOrderId?: number
errorMessage?: string
}) => {
if (responseJSON.success) { if (responseJSON.success) {
cityssm.disableNavBlocker(); cityssm.disableNavBlocker()
if (isCreate) { if (isCreate) {
window.location.href = los.getWorkOrderURL(responseJSON.workOrderId!, true); window.location.href = los.getWorkOrderURL(
responseJSON.workOrderId!,
true
)
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
message: "Work Order Updated Successfully", message: 'Work Order Updated Successfully',
contextualColorName: "success" contextualColorName: 'success'
}); })
} }
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Work Order", title: 'Error Updating Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
}); })
const inputElements = workOrderFormElement.querySelectorAll("input, select") as NodeListOf< const inputElements = workOrderFormElement.querySelectorAll(
HTMLInputElement | HTMLSelectElement 'input, select'
>; ) as NodeListOf<HTMLInputElement | HTMLSelectElement>
for (const inputElement of inputElements) { for (const inputElement of inputElements) {
inputElement.addEventListener("change", cityssm.enableNavBlocker); inputElement.addEventListener('change', cityssm.enableNavBlocker)
} }
/* /*
@ -68,58 +81,60 @@ declare const bulmaJS: BulmaJS;
function doClose() { function doClose() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doCloseWorkOrder", los.urlPrefix + '/workOrders/doCloseWorkOrder',
{ {
workOrderId workOrderId
}, },
(responseJSON: { success: boolean; errorMessage?: string }) => { (responseJSON: { success: boolean; errorMessage?: string }) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = los.urlPrefix + "/workOrders/" + workOrderId; window.location.href = los.urlPrefix + '/workOrders/' + workOrderId
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Closing Work Order", title: 'Error Closing Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
function doDelete() { function doDelete() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doDeleteWorkOrder", los.urlPrefix + '/workOrders/doDeleteWorkOrder',
{ {
workOrderId workOrderId
}, },
(responseJSON: { success: boolean; errorMessage?: string }) => { (responseJSON: { success: boolean; errorMessage?: string }) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = los.urlPrefix + "/workOrders"; window.location.href = los.urlPrefix + '/workOrders'
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Work Order", title: 'Error Deleting Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
let workOrderMilestones: recordTypes.WorkOrderMilestone[]; let workOrderMilestones: recordTypes.WorkOrderMilestone[]
document.querySelector("#button--closeWorkOrder")?.addEventListener("click", () => { document
.querySelector('#button--closeWorkOrder')
?.addEventListener('click', () => {
const hasOpenMilestones = workOrderMilestones.some((milestone) => { const hasOpenMilestones = workOrderMilestones.some((milestone) => {
return !milestone.workOrderMilestoneCompletionDate; return !milestone.workOrderMilestoneCompletionDate
}); })
if (hasOpenMilestones) { if (hasOpenMilestones) {
bulmaJS.alert({ bulmaJS.alert({
title: "Outstanding Milestones", title: 'Outstanding Milestones',
message: `You cannot close a work order with outstanding milestones. message: `You cannot close a work order with outstanding milestones.
Either complete the outstanding milestones, or remove them from the work order.`, Either complete the outstanding milestones, or remove them from the work order.`,
contextualColorName: "warning" contextualColorName: 'warning'
}); })
/* /*
// Disable closing work orders with open milestones // Disable closing work orders with open milestones
@ -136,30 +151,32 @@ declare const bulmaJS: BulmaJS;
*/ */
} else { } else {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Close Work Order", title: 'Close Work Order',
message: "Are you sure you want to close this work order?", message: 'Are you sure you want to close this work order?',
contextualColorName: "info", contextualColorName: 'info',
okButton: { okButton: {
text: "Yes, Close Work Order", text: 'Yes, Close Work Order',
callbackFunction: doClose callbackFunction: doClose
} }
}); })
} }
}); })
document.querySelector("#button--deleteWorkOrder")?.addEventListener("click", (clickEvent: Event) => { document
clickEvent.preventDefault(); .querySelector('#button--deleteWorkOrder')
?.addEventListener('click', (clickEvent: Event) => {
clickEvent.preventDefault()
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Work Order", title: 'Delete Work Order',
message: "Are you sure you want to delete this work order?", message: 'Are you sure you want to delete this work order?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Work Order", text: 'Yes, Delete Work Order',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
}); })
/* /*
* Related Lots * Related Lots
@ -180,246 +197,271 @@ declare const bulmaJS: BulmaJS;
*/ */
function processMilestoneResponse(responseJSON: { function processMilestoneResponse(responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestones?: recordTypes.WorkOrderMilestone[]; workOrderMilestones?: recordTypes.WorkOrderMilestone[]
}) { }) {
if (responseJSON.success) { if (responseJSON.success) {
workOrderMilestones = responseJSON.workOrderMilestones!; workOrderMilestones = responseJSON.workOrderMilestones!
renderMilestones(); renderMilestones()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Reopening Milestone", title: 'Error Reopening Milestone',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
function completeMilestone(clickEvent: Event) { function completeMilestone(clickEvent: Event) {
clickEvent.preventDefault(); clickEvent.preventDefault()
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date())
const workOrderMilestoneId = Number.parseInt( const workOrderMilestoneId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--milestone") as HTMLElement) (
.dataset.workOrderMilestoneId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--milestone'
) as HTMLElement
).dataset.workOrderMilestoneId!,
10 10
); )
const workOrderMilestone = workOrderMilestones.find((currentMilestone) => { const workOrderMilestone = workOrderMilestones.find((currentMilestone) => {
return currentMilestone.workOrderMilestoneId === workOrderMilestoneId; return currentMilestone.workOrderMilestoneId === workOrderMilestoneId
})!; })!
const doComplete = () => { const doComplete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doCompleteWorkOrderMilestone", los.urlPrefix + '/workOrders/doCompleteWorkOrderMilestone',
{ {
workOrderId, workOrderId,
workOrderMilestoneId workOrderMilestoneId
}, },
processMilestoneResponse processMilestoneResponse
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Complete Milestone", title: 'Complete Milestone',
message: message:
"Are you sure you want to complete this milestone?" + 'Are you sure you want to complete this milestone?' +
(workOrderMilestone.workOrderMilestoneDateString! > currentDateString (workOrderMilestone.workOrderMilestoneDateString! > currentDateString
? "<br /><strong>Note that this milestone is expected to be completed in the future.</strong>" ? '<br /><strong>Note that this milestone is expected to be completed in the future.</strong>'
: ""), : ''),
messageIsHtml: true, messageIsHtml: true,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Complete Milestone", text: 'Yes, Complete Milestone',
callbackFunction: doComplete callbackFunction: doComplete
} }
}); })
} }
function reopenMilestone(clickEvent: Event) { function reopenMilestone(clickEvent: Event) {
clickEvent.preventDefault(); clickEvent.preventDefault()
const workOrderMilestoneId = ( const workOrderMilestoneId = (
(clickEvent.currentTarget as HTMLElement).closest(".container--milestone") as HTMLElement (clickEvent.currentTarget as HTMLElement).closest(
).dataset.workOrderMilestoneId; '.container--milestone'
) as HTMLElement
).dataset.workOrderMilestoneId
const doReopen = () => { const doReopen = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doReopenWorkOrderMilestone", los.urlPrefix + '/workOrders/doReopenWorkOrderMilestone',
{ {
workOrderId, workOrderId,
workOrderMilestoneId workOrderMilestoneId
}, },
processMilestoneResponse processMilestoneResponse
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Reopen Milestone", title: 'Reopen Milestone',
message: message:
"Are you sure you want to remove the completion status from this milestone, and reopen it?", 'Are you sure you want to remove the completion status from this milestone, and reopen it?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Reopen Milestone", text: 'Yes, Reopen Milestone',
callbackFunction: doReopen callbackFunction: doReopen
} }
}); })
} }
function deleteMilestone(clickEvent: Event) { function deleteMilestone(clickEvent: Event) {
clickEvent.preventDefault(); clickEvent.preventDefault()
const workOrderMilestoneId = ( const workOrderMilestoneId = (
(clickEvent.currentTarget as HTMLElement).closest(".container--milestone") as HTMLElement (clickEvent.currentTarget as HTMLElement).closest(
).dataset.workOrderMilestoneId; '.container--milestone'
) as HTMLElement
).dataset.workOrderMilestoneId
const doDelete = () => { const doDelete = () => {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doDeleteWorkOrderMilestone", los.urlPrefix + '/workOrders/doDeleteWorkOrderMilestone',
{ {
workOrderMilestoneId, workOrderMilestoneId,
workOrderId workOrderId
}, },
processMilestoneResponse processMilestoneResponse
); )
}; }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Delete Milestone", title: 'Delete Milestone',
message: "Are you sure you want to delete this milestone?", message: 'Are you sure you want to delete this milestone?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Milestone", text: 'Yes, Delete Milestone',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); })
} }
function editMilestone(clickEvent: Event) { function editMilestone(clickEvent: Event) {
clickEvent.preventDefault(); clickEvent.preventDefault()
const workOrderMilestoneId = Number.parseInt( const workOrderMilestoneId = Number.parseInt(
((clickEvent.currentTarget as HTMLElement).closest(".container--milestone") as HTMLElement) (
.dataset.workOrderMilestoneId!, (clickEvent.currentTarget as HTMLElement).closest(
'.container--milestone'
) as HTMLElement
).dataset.workOrderMilestoneId!,
10 10
); )
const workOrderMilestone = workOrderMilestones.find((currentMilestone) => { const workOrderMilestone = workOrderMilestones.find((currentMilestone) => {
return currentMilestone.workOrderMilestoneId === workOrderMilestoneId; return currentMilestone.workOrderMilestoneId === workOrderMilestoneId
})!; })!
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
const doEdit = (submitEvent: SubmitEvent) => { const doEdit = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doUpdateWorkOrderMilestone", los.urlPrefix + '/workOrders/doUpdateWorkOrderMilestone',
submitEvent.currentTarget, submitEvent.currentTarget,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestones?: recordTypes.WorkOrderMilestone[]; workOrderMilestones?: recordTypes.WorkOrderMilestone[]
}) => { }) => {
processMilestoneResponse(responseJSON); processMilestoneResponse(responseJSON)
if (responseJSON.success) { if (responseJSON.success) {
editCloseModalFunction(); editCloseModalFunction()
} }
} }
); )
}; }
cityssm.openHtmlModal("workOrder-editMilestone", { cityssm.openHtmlModal('workOrder-editMilestone', {
onshow(modalElement) { onshow(modalElement) {
(modalElement.querySelector("#milestoneEdit--workOrderId") as HTMLInputElement).value = ;(
workOrderId; modalElement.querySelector(
'#milestoneEdit--workOrderId'
) as HTMLInputElement
).value = workOrderId
( ;(
modalElement.querySelector("#milestoneEdit--workOrderMilestoneId") as HTMLInputElement modalElement.querySelector(
).value = workOrderMilestone.workOrderMilestoneId!.toString(); '#milestoneEdit--workOrderMilestoneId'
) as HTMLInputElement
).value = workOrderMilestone.workOrderMilestoneId!.toString()
const milestoneTypeElement = modalElement.querySelector( const milestoneTypeElement = modalElement.querySelector(
"#milestoneEdit--workOrderMilestoneTypeId" '#milestoneEdit--workOrderMilestoneTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
let milestoneTypeFound = false; let milestoneTypeFound = false
for (const milestoneType of exports.workOrderMilestoneTypes as recordTypes.WorkOrderMilestoneType[]) { for (const milestoneType of exports.workOrderMilestoneTypes as recordTypes.WorkOrderMilestoneType[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = milestoneType.workOrderMilestoneTypeId.toString(); optionElement.value =
optionElement.textContent = milestoneType.workOrderMilestoneType; milestoneType.workOrderMilestoneTypeId.toString()
optionElement.textContent = milestoneType.workOrderMilestoneType
if ( if (
milestoneType.workOrderMilestoneTypeId === workOrderMilestone.workOrderMilestoneTypeId milestoneType.workOrderMilestoneTypeId ===
workOrderMilestone.workOrderMilestoneTypeId
) { ) {
optionElement.selected = true; optionElement.selected = true
milestoneTypeFound = true; milestoneTypeFound = true
} }
milestoneTypeElement.append(optionElement); milestoneTypeElement.append(optionElement)
} }
if (!milestoneTypeFound && workOrderMilestone.workOrderMilestoneTypeId) { if (
const optionElement = document.createElement("option"); !milestoneTypeFound &&
optionElement.value = workOrderMilestone.workOrderMilestoneTypeId.toString(); workOrderMilestone.workOrderMilestoneTypeId
optionElement.textContent = workOrderMilestone.workOrderMilestoneType!; ) {
optionElement.selected = true; const optionElement = document.createElement('option')
milestoneTypeElement.append(optionElement); optionElement.value =
workOrderMilestone.workOrderMilestoneTypeId.toString()
optionElement.textContent = workOrderMilestone.workOrderMilestoneType!
optionElement.selected = true
milestoneTypeElement.append(optionElement)
} }
( ;(
modalElement.querySelector( modalElement.querySelector(
"#milestoneEdit--workOrderMilestoneDateString" '#milestoneEdit--workOrderMilestoneDateString'
) as HTMLInputElement ) as HTMLInputElement
).value = workOrderMilestone.workOrderMilestoneDateString!; ).value = workOrderMilestone.workOrderMilestoneDateString!
if (workOrderMilestone.workOrderMilestoneTime) { if (workOrderMilestone.workOrderMilestoneTime) {
( ;(
modalElement.querySelector( modalElement.querySelector(
"#milestoneEdit--workOrderMilestoneTimeString" '#milestoneEdit--workOrderMilestoneTimeString'
) as HTMLInputElement ) as HTMLInputElement
).value = workOrderMilestone.workOrderMilestoneTimeString!; ).value = workOrderMilestone.workOrderMilestoneTimeString!
} }
( ;(
modalElement.querySelector( modalElement.querySelector(
"#milestoneEdit--workOrderMilestoneDescription" '#milestoneEdit--workOrderMilestoneDescription'
) as HTMLTextAreaElement ) as HTMLTextAreaElement
).value = workOrderMilestone.workOrderMilestoneDescription!; ).value = workOrderMilestone.workOrderMilestoneDescription!
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement)
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
modalElement.querySelector("form")!.addEventListener("submit", doEdit); modalElement.querySelector('form')!.addEventListener('submit', doEdit)
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
} }
function renderMilestones() { function renderMilestones() {
// Clear milestones panel // Clear milestones panel
const milestonesPanelElement = document.querySelector("#panel--milestones") as HTMLElement; const milestonesPanelElement = document.querySelector(
'#panel--milestones'
) as HTMLElement
const panelBlockElementsToDelete = milestonesPanelElement.querySelectorAll(".panel-block"); const panelBlockElementsToDelete =
milestonesPanelElement.querySelectorAll('.panel-block')
for (const panelBlockToDelete of panelBlockElementsToDelete) { for (const panelBlockToDelete of panelBlockElementsToDelete) {
panelBlockToDelete.remove(); panelBlockToDelete.remove()
} }
for (const milestone of workOrderMilestones) { for (const milestone of workOrderMilestones) {
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div')
panelBlockElement.className = "panel-block is-block container--milestone"; panelBlockElement.className = 'panel-block is-block container--milestone'
panelBlockElement.dataset.workOrderMilestoneId = milestone.workOrderMilestoneId!.toString(); panelBlockElement.dataset.workOrderMilestoneId =
milestone.workOrderMilestoneId!.toString()
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
'<div class="columns is-mobile">' + '<div class="columns is-mobile">' +
@ -431,171 +473,181 @@ declare const bulmaJS: BulmaJS;
milestone.workOrderMilestoneCompletionDateString + milestone.workOrderMilestoneCompletionDateString +
'">' + '">' +
'<span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span>' +
"</span>" '</span>'
: '<button class="button button--completeMilestone" data-tooltip="Incomplete" type="button" aria-label="Incomplete">' + : '<button class="button button--completeMilestone" data-tooltip="Incomplete" type="button" aria-label="Incomplete">' +
'<span class="icon is-small"><i class="far fa-square" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="far fa-square" aria-hidden="true"></i></span>' +
"</button>") + '</button>') +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
(milestone.workOrderMilestoneTypeId (milestone.workOrderMilestoneTypeId
? "<strong>" + ? '<strong>' +
cityssm.escapeHTML(milestone.workOrderMilestoneType || "") + cityssm.escapeHTML(milestone.workOrderMilestoneType || '') +
"</strong><br />" '</strong><br />'
: "") + : '') +
milestone.workOrderMilestoneDateString + milestone.workOrderMilestoneDateString +
(milestone.workOrderMilestoneTime ? " " + milestone.workOrderMilestoneTimeString : "") + (milestone.workOrderMilestoneTime
"<br />" + ? ' ' + milestone.workOrderMilestoneTimeString
: '') +
'<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(milestone.workOrderMilestoneDescription || "") + cityssm.escapeHTML(milestone.workOrderMilestoneDescription || '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column is-narrow">' + ('<div class="column is-narrow">' +
'<div class="dropdown is-right">' + '<div class="dropdown is-right">' +
('<div class="dropdown-trigger">' + ('<div class="dropdown-trigger">' +
'<button class="button is-small" data-tooltip="Options" type="button" aria-label="Options">' + '<button class="button is-small" data-tooltip="Options" type="button" aria-label="Options">' +
'<i class="fas fa-ellipsis-v" aria-hidden="true"></i>' + '<i class="fas fa-ellipsis-v" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</div>") + '</div>') +
('<div class="dropdown-menu">' + ('<div class="dropdown-menu">' +
'<div class="dropdown-content">' + '<div class="dropdown-content">' +
(milestone.workOrderMilestoneCompletionDate (milestone.workOrderMilestoneCompletionDate
? '<a class="dropdown-item button--reopenMilestone" href="#">' + ? '<a class="dropdown-item button--reopenMilestone" href="#">' +
'<span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span>' +
" <span>Reopen Milestone</span>" + ' <span>Reopen Milestone</span>' +
"</a>" '</a>'
: '<a class="dropdown-item button--editMilestone" href="#">' + : '<a class="dropdown-item button--editMilestone" href="#">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit Milestone</span>" + ' <span>Edit Milestone</span>' +
"</a>") + '</a>') +
'<hr class="dropdown-divider" />' + '<hr class="dropdown-divider" />' +
'<a class="dropdown-item button--deleteMilestone" href="#">' + '<a class="dropdown-item button--deleteMilestone" href="#">' +
'<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>' +
" <span>Delete Milestone</span>" + ' <span>Delete Milestone</span>' +
"</a>" + '</a>' +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</div>" + '</div>' +
"</div>") + '</div>') +
"</div>"; '</div>'
panelBlockElement panelBlockElement
.querySelector(".button--reopenMilestone") .querySelector('.button--reopenMilestone')
?.addEventListener("click", reopenMilestone); ?.addEventListener('click', reopenMilestone)
panelBlockElement panelBlockElement
.querySelector(".button--editMilestone") .querySelector('.button--editMilestone')
?.addEventListener("click", editMilestone); ?.addEventListener('click', editMilestone)
panelBlockElement panelBlockElement
.querySelector(".button--completeMilestone") .querySelector('.button--completeMilestone')
?.addEventListener("click", completeMilestone); ?.addEventListener('click', completeMilestone)
panelBlockElement panelBlockElement
.querySelector(".button--deleteMilestone")! .querySelector('.button--deleteMilestone')!
.addEventListener("click", deleteMilestone); .addEventListener('click', deleteMilestone)
milestonesPanelElement.append(panelBlockElement); milestonesPanelElement.append(panelBlockElement)
} }
bulmaJS.init(milestonesPanelElement); bulmaJS.init(milestonesPanelElement)
} }
if (!isCreate) { if (!isCreate) {
workOrderMilestones = exports.workOrderMilestones as recordTypes.WorkOrderMilestone[]; workOrderMilestones =
delete exports.workOrderMilestones; exports.workOrderMilestones as recordTypes.WorkOrderMilestone[]
delete exports.workOrderMilestones
renderMilestones(); renderMilestones()
document.querySelector("#button--addMilestone")!.addEventListener("click", () => { document
let addModalElement: HTMLElement; .querySelector('#button--addMilestone')!
let addFormElement: HTMLFormElement; .addEventListener('click', () => {
let addCloseModalFunction: () => void; let addModalElement: HTMLElement
let addFormElement: HTMLFormElement
let addCloseModalFunction: () => void
const doAdd = (submitEvent: SubmitEvent) => { const doAdd = (submitEvent: SubmitEvent) => {
if (submitEvent) { if (submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault()
} }
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date())
function _doAdd() { function _doAdd() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doAddWorkOrderMilestone", los.urlPrefix + '/workOrders/doAddWorkOrderMilestone',
addFormElement, addFormElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderMilestones?: recordTypes.WorkOrderMilestone[]; workOrderMilestones?: recordTypes.WorkOrderMilestone[]
}) => { }) => {
processMilestoneResponse(responseJSON); processMilestoneResponse(responseJSON)
if (responseJSON.success) { if (responseJSON.success) {
addCloseModalFunction(); addCloseModalFunction()
} }
} }
); )
} }
if ( if (
( (
addModalElement.querySelector( addModalElement.querySelector(
"#milestoneAdd--workOrderMilestoneDateString" '#milestoneAdd--workOrderMilestoneDateString'
) as HTMLInputElement ) as HTMLInputElement
).value < currentDateString ).value < currentDateString
) { ) {
bulmaJS.confirm({ bulmaJS.confirm({
title: "Milestone Date in the Past", title: 'Milestone Date in the Past',
message: "Are you sure you want to create a milestone with a date in the past?", message:
contextualColorName: "warning", 'Are you sure you want to create a milestone with a date in the past?',
contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Create a Past Milestone", text: 'Yes, Create a Past Milestone',
callbackFunction: _doAdd callbackFunction: _doAdd
} }
}); })
} else { } else {
_doAdd(); _doAdd()
}
} }
};
cityssm.openHtmlModal("workOrder-addMilestone", { cityssm.openHtmlModal('workOrder-addMilestone', {
onshow(modalElement) { onshow(modalElement) {
(modalElement.querySelector("#milestoneAdd--workOrderId") as HTMLInputElement).value = ;(
workOrderId; modalElement.querySelector(
'#milestoneAdd--workOrderId'
) as HTMLInputElement
).value = workOrderId
const milestoneTypeElement = modalElement.querySelector( const milestoneTypeElement = modalElement.querySelector(
"#milestoneAdd--workOrderMilestoneTypeId" '#milestoneAdd--workOrderMilestoneTypeId'
) as HTMLSelectElement; ) as HTMLSelectElement
for (const milestoneType of exports.workOrderMilestoneTypes as recordTypes.WorkOrderMilestoneType[]) { for (const milestoneType of exports.workOrderMilestoneTypes as recordTypes.WorkOrderMilestoneType[]) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option')
optionElement.value = milestoneType.workOrderMilestoneTypeId.toString(); optionElement.value =
optionElement.textContent = milestoneType.workOrderMilestoneType; milestoneType.workOrderMilestoneTypeId.toString()
optionElement.textContent = milestoneType.workOrderMilestoneType
milestoneTypeElement.append(optionElement); milestoneTypeElement.append(optionElement)
} }
( ;(
modalElement.querySelector( modalElement.querySelector(
"#milestoneAdd--workOrderMilestoneDateString" '#milestoneAdd--workOrderMilestoneDateString'
) as HTMLInputElement ) as HTMLInputElement
).valueAsDate = new Date(); ).valueAsDate = new Date()
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
addModalElement = modalElement; addModalElement = modalElement
addCloseModalFunction = closeModalFunction; addCloseModalFunction = closeModalFunction
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement)
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
addFormElement = modalElement.querySelector("form")!; addFormElement = modalElement.querySelector('form')!
addFormElement.addEventListener("submit", doAdd); addFormElement.addEventListener('submit', doAdd)
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
} }
}); })
}); })
} }
})(); })()

125
public-typescript/workOrderEdit/workOrderEditComments.js
View File

@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
let workOrderComments = exports.workOrderComments; let workOrderComments = exports.workOrderComments;
delete exports.workOrderComments; delete exports.workOrderComments;
const openEditWorkOrderComment = (clickEvent) => { const openEditWorkOrderComment = (clickEvent) => {
const workOrderCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.workOrderCommentId, 10); const workOrderCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.workOrderCommentId, 10);
const workOrderComment = workOrderComments.find((currentComment) => { const workOrderComment = workOrderComments.find((currentComment) => {
return currentComment.workOrderCommentId === workOrderCommentId; return currentComment.workOrderCommentId === workOrderCommentId;
}); });
@ -13,7 +14,7 @@ const openEditWorkOrderComment = (clickEvent) => {
let editCloseModalFunction; let editCloseModalFunction;
function editComment(submitEvent) { function editComment(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/workOrders/doUpdateWorkOrderComment", editFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doUpdateWorkOrderComment', editFormElement, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderComments = responseJSON.workOrderComments; workOrderComments = responseJSON.workOrderComments;
editCloseModalFunction(); editCloseModalFunction();
@ -21,35 +22,35 @@ const openEditWorkOrderComment = (clickEvent) => {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Comment", title: 'Error Updating Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
cityssm.openHtmlModal("workOrder-editComment", { cityssm.openHtmlModal('workOrder-editComment', {
onshow(modalElement) { onshow(modalElement) {
modalElement.querySelector("#workOrderCommentEdit--workOrderId").value = ;
workOrderId; modalElement.querySelector('#workOrderCommentEdit--workOrderId').value = workOrderId;
modalElement.querySelector("#workOrderCommentEdit--workOrderCommentId").value = workOrderCommentId.toString(); modalElement.querySelector('#workOrderCommentEdit--workOrderCommentId').value = workOrderCommentId.toString();
modalElement.querySelector("#workOrderCommentEdit--workOrderComment").value = workOrderComment.workOrderComment; modalElement.querySelector('#workOrderCommentEdit--workOrderComment').value = workOrderComment.workOrderComment;
const workOrderCommentDateStringElement = modalElement.querySelector("#workOrderCommentEdit--workOrderCommentDateString"); const workOrderCommentDateStringElement = modalElement.querySelector('#workOrderCommentEdit--workOrderCommentDateString');
workOrderCommentDateStringElement.value = workOrderComment.workOrderCommentDateString; workOrderCommentDateStringElement.value =
workOrderComment.workOrderCommentDateString;
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date());
workOrderCommentDateStringElement.max = workOrderCommentDateStringElement.max =
workOrderComment.workOrderCommentDateString <= currentDateString workOrderComment.workOrderCommentDateString <= currentDateString
? currentDateString ? currentDateString
: workOrderComment.workOrderCommentDateString; : workOrderComment.workOrderCommentDateString;
modalElement.querySelector("#workOrderCommentEdit--workOrderCommentTimeString").value = workOrderComment.workOrderCommentTimeString; modalElement.querySelector('#workOrderCommentEdit--workOrderCommentTimeString').value = workOrderComment.workOrderCommentTimeString;
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement);
// los.initializeTimePickers(modalElement); modalElement.querySelector('#workOrderCommentEdit--workOrderComment').focus();
modalElement.querySelector("#workOrderCommentEdit--workOrderComment").focus(); editFormElement = modalElement.querySelector('form');
editFormElement = modalElement.querySelector("form"); editFormElement.addEventListener('submit', editComment);
editFormElement.addEventListener("submit", editComment);
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
}, },
onremoved() { onremoved() {
@ -58,9 +59,10 @@ const openEditWorkOrderComment = (clickEvent) => {
}); });
}; };
function deleteWorkOrderComment(clickEvent) { function deleteWorkOrderComment(clickEvent) {
const workOrderCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.workOrderCommentId, 10); const workOrderCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
.workOrderCommentId, 10);
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doDeleteWorkOrderComment", { cityssm.postJSON(los.urlPrefix + '/workOrders/doDeleteWorkOrderComment', {
workOrderId, workOrderId,
workOrderCommentId workOrderCommentId
}, (responseJSON) => { }, (responseJSON) => {
@ -70,77 +72,82 @@ function deleteWorkOrderComment(clickEvent) {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing Comment", title: 'Error Removing Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove Comment?", title: 'Remove Comment?',
message: "Are you sure you want to remove this comment?", message: 'Are you sure you want to remove this comment?',
okButton: { okButton: {
text: "Yes, Remove Comment", text: 'Yes, Remove Comment',
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); });
} }
function renderWorkOrderComments() { function renderWorkOrderComments() {
const containerElement = document.querySelector("#container--workOrderComments"); const containerElement = document.querySelector('#container--workOrderComments');
if (workOrderComments.length === 0) { if (workOrderComments.length === 0) {
containerElement.innerHTML = `<div class="message is-info"> containerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no comments to display.</p> <p class="message-body">There are no comments to display.</p>
</div>`; </div>`;
return; return;
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table');
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable';
tableElement.innerHTML = `<thead><tr> tableElement.innerHTML = `<thead><tr>
<th>Commentor</th> <th>Commentor</th>
<th>Comment Date</th> <th>Comment Date</th>
<th>Comment</th> <th>Comment</th>
<th class="is-hidden-print"><span class="is-sr-only">Options</span></th></tr></thead><tbody></tbody>`; <th class="is-hidden-print"><span class="is-sr-only">Options</span></th></tr></thead><tbody></tbody>`;
for (const workOrderComment of workOrderComments) { for (const workOrderComment of workOrderComments) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr');
tableRowElement.dataset.workOrderCommentId = workOrderComment.workOrderCommentId.toString(); tableRowElement.dataset.workOrderCommentId =
workOrderComment.workOrderCommentId.toString();
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(workOrderComment.recordCreate_userName || "") + cityssm.escapeHTML(workOrderComment.recordCreate_userName || '') +
"</td>" + '</td>' +
"<td>" + '<td>' +
workOrderComment.workOrderCommentDateString + workOrderComment.workOrderCommentDateString +
(workOrderComment.workOrderCommentTime === 0 (workOrderComment.workOrderCommentTime === 0
? "" ? ''
: " " + workOrderComment.workOrderCommentTimeString) + : ' ' + workOrderComment.workOrderCommentTimeString) +
"</td>" + '</td>' +
"<td>" + '<td>' +
cityssm.escapeHTML(workOrderComment.workOrderComment || "") + cityssm.escapeHTML(workOrderComment.workOrderComment || '') +
"</td>" + '</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>');
tableRowElement.querySelector(".button--edit").addEventListener("click", openEditWorkOrderComment); tableRowElement
tableRowElement.querySelector(".button--delete").addEventListener("click", deleteWorkOrderComment); .querySelector('.button--edit')
tableElement.querySelector("tbody").append(tableRowElement); .addEventListener('click', openEditWorkOrderComment);
tableRowElement
.querySelector('.button--delete')
.addEventListener('click', deleteWorkOrderComment);
tableElement.querySelector('tbody').append(tableRowElement);
} }
containerElement.innerHTML = ""; containerElement.innerHTML = '';
containerElement.append(tableElement); containerElement.append(tableElement);
} }
function openAddCommentModal() { function openAddCommentModal() {
let addCommentCloseModalFunction; let addCommentCloseModalFunction;
function doAddComment(formEvent) { function doAddComment(formEvent) {
formEvent.preventDefault(); formEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/workOrders/doAddWorkOrderComment", formEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doAddWorkOrderComment', formEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderComments = responseJSON.workOrderComments; workOrderComments = responseJSON.workOrderComments;
renderWorkOrderComments(); renderWorkOrderComments();
@ -148,25 +155,27 @@ function openAddCommentModal() {
} }
}); });
} }
cityssm.openHtmlModal("workOrder-addComment", { cityssm.openHtmlModal('workOrder-addComment', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#workOrderCommentAdd--workOrderId").value = modalElement.querySelector('#workOrderCommentAdd--workOrderId').value = workOrderId;
workOrderId; modalElement
modalElement.querySelector("form").addEventListener("submit", doAddComment); .querySelector('form')
.addEventListener('submit', doAddComment);
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
addCommentCloseModalFunction = closeModalFunction; addCommentCloseModalFunction = closeModalFunction;
modalElement.querySelector("#workOrderCommentAdd--workOrderComment").focus(); modalElement.querySelector('#workOrderCommentAdd--workOrderComment').focus();
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
document.querySelector("#workOrderComments--add").focus(); document.querySelector('#workOrderComments--add').focus();
} }
}); });
} }
(_a = document.querySelector("#workOrderComments--add")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", openAddCommentModal); (_a = document
.querySelector('#workOrderComments--add')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', openAddCommentModal);
if (!isCreate) { if (!isCreate) {
renderWorkOrderComments(); renderWorkOrderComments();
} }

288
public-typescript/workOrderEdit/workOrderEditComments.ts
View File

@ -1,256 +1,290 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
import type * as globalTypes from "../../types/globalTypes"; import type * as globalTypes from '../../types/globalTypes'
import type * as recordTypes from "../../types/recordTypes"; import type * as recordTypes from '../../types/recordTypes'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
declare const los: globalTypes.LOS; declare const los: globalTypes.LOS
declare const workOrderId: string; declare const workOrderId: string
declare const isCreate: boolean; declare const isCreate: boolean
let workOrderComments: recordTypes.WorkOrderComment[] = exports.workOrderComments; let workOrderComments: recordTypes.WorkOrderComment[] =
delete exports.workOrderComments; exports.workOrderComments
delete exports.workOrderComments
const openEditWorkOrderComment = (clickEvent: Event) => { const openEditWorkOrderComment = (clickEvent: Event) => {
const workOrderCommentId = Number.parseInt( const workOrderCommentId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.workOrderCommentId!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.workOrderCommentId!,
10 10
); )
const workOrderComment = workOrderComments.find((currentComment) => { const workOrderComment = workOrderComments.find((currentComment) => {
return currentComment.workOrderCommentId === workOrderCommentId; return currentComment.workOrderCommentId === workOrderCommentId
})!; })!
let editFormElement: HTMLFormElement; let editFormElement: HTMLFormElement
let editCloseModalFunction: () => void; let editCloseModalFunction: () => void
function editComment(submitEvent: SubmitEvent): void { function editComment(submitEvent: SubmitEvent): void {
submitEvent.preventDefault(); submitEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doUpdateWorkOrderComment", los.urlPrefix + '/workOrders/doUpdateWorkOrderComment',
editFormElement, editFormElement,
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderComments?: recordTypes.WorkOrderComment[]; workOrderComments?: recordTypes.WorkOrderComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderComments = responseJSON.workOrderComments!; workOrderComments = responseJSON.workOrderComments!
editCloseModalFunction(); editCloseModalFunction()
renderWorkOrderComments(); renderWorkOrderComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Updating Comment", title: 'Error Updating Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
cityssm.openHtmlModal("workOrder-editComment", { cityssm.openHtmlModal('workOrder-editComment', {
onshow(modalElement) { onshow(modalElement) {
(modalElement.querySelector("#workOrderCommentEdit--workOrderId") as HTMLInputElement).value = ;(
workOrderId; modalElement.querySelector(
( '#workOrderCommentEdit--workOrderId'
modalElement.querySelector("#workOrderCommentEdit--workOrderCommentId") as HTMLInputElement ) as HTMLInputElement
).value = workOrderCommentId.toString(); ).value = workOrderId
;(
modalElement.querySelector(
'#workOrderCommentEdit--workOrderCommentId'
) as HTMLInputElement
).value = workOrderCommentId.toString()
( ;(
modalElement.querySelector("#workOrderCommentEdit--workOrderComment") as HTMLInputElement modalElement.querySelector(
).value = workOrderComment.workOrderComment!; '#workOrderCommentEdit--workOrderComment'
) as HTMLInputElement
).value = workOrderComment.workOrderComment!
const workOrderCommentDateStringElement = modalElement.querySelector( const workOrderCommentDateStringElement = modalElement.querySelector(
"#workOrderCommentEdit--workOrderCommentDateString" '#workOrderCommentEdit--workOrderCommentDateString'
) as HTMLInputElement; ) as HTMLInputElement
workOrderCommentDateStringElement.value = workOrderComment.workOrderCommentDateString!; workOrderCommentDateStringElement.value =
workOrderComment.workOrderCommentDateString!
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date())
workOrderCommentDateStringElement.max = workOrderCommentDateStringElement.max =
workOrderComment.workOrderCommentDateString! <= currentDateString workOrderComment.workOrderCommentDateString! <= currentDateString
? currentDateString ? currentDateString
: workOrderComment.workOrderCommentDateString!; : workOrderComment.workOrderCommentDateString!
( ;(
modalElement.querySelector( modalElement.querySelector(
"#workOrderCommentEdit--workOrderCommentTimeString" '#workOrderCommentEdit--workOrderCommentTimeString'
) as HTMLInputElement ) as HTMLInputElement
).value = workOrderComment.workOrderCommentTimeString!; ).value = workOrderComment.workOrderCommentTimeString!
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
los.initializeDatePickers(modalElement); los.initializeDatePickers(modalElement)
// los.initializeTimePickers(modalElement); // los.initializeTimePickers(modalElement);
( ;(
modalElement.querySelector("#workOrderCommentEdit--workOrderComment") as HTMLTextAreaElement modalElement.querySelector(
).focus(); '#workOrderCommentEdit--workOrderComment'
) as HTMLTextAreaElement
).focus()
editFormElement = modalElement.querySelector("form")!; editFormElement = modalElement.querySelector('form')!
editFormElement.addEventListener("submit", editComment); editFormElement.addEventListener('submit', editComment)
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
}
})
} }
});
};
function deleteWorkOrderComment(clickEvent: Event): void { function deleteWorkOrderComment(clickEvent: Event): void {
const workOrderCommentId = Number.parseInt( const workOrderCommentId = Number.parseInt(
(clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.workOrderCommentId!, (clickEvent.currentTarget as HTMLElement).closest('tr')!.dataset
.workOrderCommentId!,
10 10
); )
function doDelete() { function doDelete() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doDeleteWorkOrderComment", los.urlPrefix + '/workOrders/doDeleteWorkOrderComment',
{ {
workOrderId, workOrderId,
workOrderCommentId workOrderCommentId
}, },
(responseJSON: { (responseJSON: {
success: boolean; success: boolean
errorMessage?: string; errorMessage?: string
workOrderComments: recordTypes.WorkOrderComment[]; workOrderComments: recordTypes.WorkOrderComment[]
}) => { }) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderComments = responseJSON.workOrderComments; workOrderComments = responseJSON.workOrderComments
renderWorkOrderComments(); renderWorkOrderComments()
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Removing Comment", title: 'Error Removing Comment',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Remove Comment?", title: 'Remove Comment?',
message: "Are you sure you want to remove this comment?", message: 'Are you sure you want to remove this comment?',
okButton: { okButton: {
text: "Yes, Remove Comment", text: 'Yes, Remove Comment',
callbackFunction: doDelete callbackFunction: doDelete
}, },
contextualColorName: "warning" contextualColorName: 'warning'
}); })
} }
function renderWorkOrderComments() { function renderWorkOrderComments() {
const containerElement = document.querySelector("#container--workOrderComments") as HTMLElement; const containerElement = document.querySelector(
'#container--workOrderComments'
) as HTMLElement
if (workOrderComments.length === 0) { if (workOrderComments.length === 0) {
containerElement.innerHTML = `<div class="message is-info"> containerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no comments to display.</p> <p class="message-body">There are no comments to display.</p>
</div>`; </div>`
return; return
} }
const tableElement = document.createElement("table"); const tableElement = document.createElement('table')
tableElement.className = "table is-fullwidth is-striped is-hoverable"; tableElement.className = 'table is-fullwidth is-striped is-hoverable'
tableElement.innerHTML = `<thead><tr> tableElement.innerHTML = `<thead><tr>
<th>Commentor</th> <th>Commentor</th>
<th>Comment Date</th> <th>Comment Date</th>
<th>Comment</th> <th>Comment</th>
<th class="is-hidden-print"><span class="is-sr-only">Options</span></th></tr></thead><tbody></tbody>`; <th class="is-hidden-print"><span class="is-sr-only">Options</span></th></tr></thead><tbody></tbody>`
for (const workOrderComment of workOrderComments) { for (const workOrderComment of workOrderComments) {
const tableRowElement = document.createElement("tr"); const tableRowElement = document.createElement('tr')
tableRowElement.dataset.workOrderCommentId = workOrderComment.workOrderCommentId!.toString(); tableRowElement.dataset.workOrderCommentId =
workOrderComment.workOrderCommentId!.toString()
tableRowElement.innerHTML = tableRowElement.innerHTML =
"<td>" + '<td>' +
cityssm.escapeHTML(workOrderComment.recordCreate_userName || "") + cityssm.escapeHTML(workOrderComment.recordCreate_userName || '') +
"</td>" + '</td>' +
"<td>" + '<td>' +
workOrderComment.workOrderCommentDateString + workOrderComment.workOrderCommentDateString +
(workOrderComment.workOrderCommentTime === 0 (workOrderComment.workOrderCommentTime === 0
? "" ? ''
: " " + workOrderComment.workOrderCommentTimeString) + : ' ' + workOrderComment.workOrderCommentTimeString) +
"</td>" + '</td>' +
"<td>" + '<td>' +
cityssm.escapeHTML(workOrderComment.workOrderComment || "") + cityssm.escapeHTML(workOrderComment.workOrderComment || '') +
"</td>" + '</td>' +
('<td class="is-hidden-print">' + ('<td class="is-hidden-print">' +
'<div class="buttons are-small is-justify-content-end">' + '<div class="buttons are-small is-justify-content-end">' +
('<button class="button is-primary button--edit" type="button">' + ('<button class="button is-primary button--edit" type="button">' +
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' + '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
" <span>Edit</span>" + ' <span>Edit</span>' +
"</button>") + '</button>') +
('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' + ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</div>" + '</div>' +
"</td>"); '</td>')
tableRowElement.querySelector(".button--edit")!.addEventListener("click", openEditWorkOrderComment); tableRowElement
.querySelector('.button--edit')!
.addEventListener('click', openEditWorkOrderComment)
tableRowElement.querySelector(".button--delete")!.addEventListener("click", deleteWorkOrderComment); tableRowElement
.querySelector('.button--delete')!
.addEventListener('click', deleteWorkOrderComment)
tableElement.querySelector("tbody")!.append(tableRowElement); tableElement.querySelector('tbody')!.append(tableRowElement)
} }
containerElement.innerHTML = ""; containerElement.innerHTML = ''
containerElement.append(tableElement); containerElement.append(tableElement)
} }
function openAddCommentModal() { function openAddCommentModal() {
let addCommentCloseModalFunction: () => void; let addCommentCloseModalFunction: () => void
function doAddComment(formEvent: SubmitEvent) { function doAddComment(formEvent: SubmitEvent) {
formEvent.preventDefault(); formEvent.preventDefault()
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doAddWorkOrderComment", los.urlPrefix + '/workOrders/doAddWorkOrderComment',
formEvent.currentTarget, formEvent.currentTarget,
(responseJSON: { success: boolean; workOrderComments?: recordTypes.WorkOrderComment[] }) => { (responseJSON: {
success: boolean
workOrderComments?: recordTypes.WorkOrderComment[]
}) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderComments = responseJSON.workOrderComments!; workOrderComments = responseJSON.workOrderComments!
renderWorkOrderComments(); renderWorkOrderComments()
addCommentCloseModalFunction(); addCommentCloseModalFunction()
} }
} }
); )
} }
cityssm.openHtmlModal("workOrder-addComment", { cityssm.openHtmlModal('workOrder-addComment', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement)
(modalElement.querySelector("#workOrderCommentAdd--workOrderId") as HTMLInputElement).value = ;(
workOrderId; modalElement.querySelector(
modalElement.querySelector("form")!.addEventListener("submit", doAddComment); '#workOrderCommentAdd--workOrderId'
) as HTMLInputElement
).value = workOrderId
modalElement
.querySelector('form')!
.addEventListener('submit', doAddComment)
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
addCommentCloseModalFunction = closeModalFunction; addCommentCloseModalFunction = closeModalFunction
( ;(
modalElement.querySelector("#workOrderCommentAdd--workOrderComment") as HTMLTextAreaElement modalElement.querySelector(
).focus(); '#workOrderCommentAdd--workOrderComment'
) as HTMLTextAreaElement
).focus()
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped()
(document.querySelector("#workOrderComments--add") as HTMLButtonElement).focus(); ;(
document.querySelector('#workOrderComments--add') as HTMLButtonElement
).focus()
} }
}); })
} }
document.querySelector("#workOrderComments--add")?.addEventListener("click", openAddCommentModal); document
.querySelector('#workOrderComments--add')
?.addEventListener('click', openAddCommentModal)
if (!isCreate) { if (!isCreate) {
renderWorkOrderComments(); renderWorkOrderComments()
} }

338
public-typescript/workOrderEdit/workOrderEditLots.js
View File

@ -6,9 +6,9 @@ delete exports.workOrderLots;
let workOrderLotOccupancies = exports.workOrderLotOccupancies; let workOrderLotOccupancies = exports.workOrderLotOccupancies;
delete exports.workOrderLotOccupancies; delete exports.workOrderLotOccupancies;
function deleteLotOccupancy(clickEvent) { function deleteLotOccupancy(clickEvent) {
const lotOccupancyId = clickEvent.currentTarget.closest(".container--lotOccupancy").dataset.lotOccupancyId; const lotOccupancyId = clickEvent.currentTarget.closest('.container--lotOccupancy').dataset.lotOccupancyId;
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doDeleteWorkOrderLotOccupancy", { cityssm.postJSON(los.urlPrefix + '/workOrders/doDeleteWorkOrderLotOccupancy', {
workOrderId, workOrderId,
lotOccupancyId lotOccupancyId
}, (responseJSON) => { }, (responseJSON) => {
@ -18,9 +18,9 @@ function deleteLotOccupancy(clickEvent) {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Relationship", title: 'Error Deleting Relationship',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -28,15 +28,15 @@ function deleteLotOccupancy(clickEvent) {
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${los.escapedAliases.Occupancy} Relationship`, title: `Delete ${los.escapedAliases.Occupancy} Relationship`,
message: `Are you sure you want to remove the relationship to this ${los.escapedAliases.occupancy} record from this work order? Note that the record will remain.`, message: `Are you sure you want to remove the relationship to this ${los.escapedAliases.occupancy} record from this work order? Note that the record will remain.`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Relationship", text: 'Yes, Delete Relationship',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
function addLot(lotId, callbackFunction) { function addLot(lotId, callbackFunction) {
cityssm.postJSON(los.urlPrefix + "/workOrders/doAddWorkOrderLot", { cityssm.postJSON(los.urlPrefix + '/workOrders/doAddWorkOrderLot', {
workOrderId, workOrderId,
lotId lotId
}, (responseJSON) => { }, (responseJSON) => {
@ -46,9 +46,9 @@ function addLot(lotId, callbackFunction) {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding " + los.escapedAliases.Lot, title: 'Error Adding ' + los.escapedAliases.Lot,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
if (callbackFunction) { if (callbackFunction) {
@ -57,7 +57,7 @@ function addLot(lotId, callbackFunction) {
}); });
} }
function addLotOccupancy(lotOccupancyId, callbackFunction) { function addLotOccupancy(lotOccupancyId, callbackFunction) {
cityssm.postJSON(los.urlPrefix + "/workOrders/doAddWorkOrderLotOccupancy", { cityssm.postJSON(los.urlPrefix + '/workOrders/doAddWorkOrderLotOccupancy', {
workOrderId, workOrderId,
lotOccupancyId lotOccupancyId
}, (responseJSON) => { }, (responseJSON) => {
@ -67,9 +67,9 @@ function addLotOccupancy(lotOccupancyId, callbackFunction) {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Adding " + los.escapedAliases.Occupancy, title: 'Error Adding ' + los.escapedAliases.Occupancy,
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
if (callbackFunction) { if (callbackFunction) {
@ -83,9 +83,8 @@ function addLotFromLotOccupancy(clickEvent) {
} }
function renderRelatedOccupancies() { function renderRelatedOccupancies() {
var _a, _b; var _a, _b;
const occupanciesContainerElement = document.querySelector("#container--lotOccupancies"); const occupanciesContainerElement = document.querySelector('#container--lotOccupancies');
document.querySelector(".tabs a[href='#relatedTab--lotOccupancies'] .tag").textContent = document.querySelector(".tabs a[href='#relatedTab--lotOccupancies'] .tag").textContent = workOrderLotOccupancies.length.toString();
workOrderLotOccupancies.length.toString();
if (workOrderLotOccupancies.length === 0) { if (workOrderLotOccupancies.length === 0) {
occupanciesContainerElement.innerHTML = `<div class="message is-info"> occupanciesContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no ${los.escapedAliases.occupancies} associated with this work order.</p> <p class="message-body">There are no ${los.escapedAliases.occupancies} associated with this work order.</p>
@ -103,10 +102,11 @@ function renderRelatedOccupancies() {
</table>`; </table>`;
const currentDateString = cityssm.dateToString(new Date()); const currentDateString = cityssm.dateToString(new Date());
for (const lotOccupancy of workOrderLotOccupancies) { for (const lotOccupancy of workOrderLotOccupancies) {
const rowElement = document.createElement("tr"); const rowElement = document.createElement('tr');
rowElement.className = "container--lotOccupancy"; rowElement.className = 'container--lotOccupancy';
rowElement.dataset.lotOccupancyId = lotOccupancy.lotOccupancyId.toString(); rowElement.dataset.lotOccupancyId = lotOccupancy.lotOccupancyId.toString();
const isActive = !(lotOccupancy.occupancyEndDate && lotOccupancy.occupancyEndDateString < currentDateString); const isActive = !(lotOccupancy.occupancyEndDate &&
lotOccupancy.occupancyEndDateString < currentDateString);
const hasLotRecord = lotOccupancy.lotId && const hasLotRecord = lotOccupancy.lotId &&
workOrderLots.some((lot) => { workOrderLots.some((lot) => {
return lotOccupancy.lotId === lot.lotId; return lotOccupancy.lotId === lot.lotId;
@ -114,21 +114,25 @@ function renderRelatedOccupancies() {
rowElement.innerHTML = rowElement.innerHTML =
'<td class="is-width-1 has-text-centered">' + '<td class="is-width-1 has-text-centered">' +
(isActive (isActive
? '<i class="fas fa-play" title="Current ' + los.escapedAliases.Occupancy + '"></i>' ? '<i class="fas fa-play" title="Current ' +
: '<i class="fas fa-stop" title="Previous ' + los.escapedAliases.Occupancy + '"></i>') + los.escapedAliases.Occupancy +
"</td>" + '"></i>'
("<td>" + : '<i class="fas fa-stop" title="Previous ' +
los.escapedAliases.Occupancy +
'"></i>') +
'</td>' +
('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getLotOccupancyURL(lotOccupancy.lotOccupancyId) + los.getLotOccupancyURL(lotOccupancy.lotOccupancyId) +
'">' + '">' +
cityssm.escapeHTML(lotOccupancy.occupancyType || "") + cityssm.escapeHTML(lotOccupancy.occupancyType || '') +
"</a>" + '</a>' +
"</td>"); '</td>');
if (lotOccupancy.lotId) { if (lotOccupancy.lotId) {
rowElement.insertAdjacentHTML("beforeend", "<td>" + rowElement.insertAdjacentHTML('beforeend', '<td>' +
cityssm.escapeHTML(lotOccupancy.lotName || "") + cityssm.escapeHTML(lotOccupancy.lotName || '') +
(hasLotRecord (hasLotRecord
? "" ? ''
: ' <button class="button is-small is-light is-success button--addLot"' + : ' <button class="button is-small is-light is-success button--addLot"' +
' data-lot-id="' + ' data-lot-id="' +
lotOccupancy.lotId + lotOccupancy.lotId +
@ -140,58 +144,61 @@ function renderRelatedOccupancies() {
los.escapedAliases.Lot + los.escapedAliases.Lot +
'" type="button">' + '" type="button">' +
'<i class="fas fa-plus" aria-hidden="true"></i>' + '<i class="fas fa-plus" aria-hidden="true"></i>' +
"</button>") + '</button>') +
"</td>"); '</td>');
} }
else { else {
rowElement.insertAdjacentHTML("beforeend", `<td><span class="has-text-grey">(No ${los.escapedAliases.Lot})</span></td>`); rowElement.insertAdjacentHTML('beforeend', `<td><span class="has-text-grey">(No ${los.escapedAliases.Lot})</span></td>`);
} }
rowElement.insertAdjacentHTML("beforeend", "<td>" + rowElement.insertAdjacentHTML('beforeend', '<td>' +
lotOccupancy.occupancyStartDateString + lotOccupancy.occupancyStartDateString +
"</td>" + '</td>' +
("<td>" + ('<td>' +
(lotOccupancy.occupancyEndDate (lotOccupancy.occupancyEndDate
? lotOccupancy.occupancyEndDateString ? lotOccupancy.occupancyEndDateString
: '<span class="has-text-grey">(No End Date)</span>') + : '<span class="has-text-grey">(No End Date)</span>') +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(lotOccupancy.lotOccupancyOccupants.length === 0 (lotOccupancy.lotOccupancyOccupants.length === 0
? '<span class="has-text-grey">(No ' + los.escapedAliases.Occupants + ")</span>" ? '<span class="has-text-grey">(No ' +
los.escapedAliases.Occupants +
')</span>'
: (_a = lotOccupancy.lotOccupancyOccupants) === null || _a === void 0 ? void 0 : _a.reduce((soFar, occupant) => { : (_a = lotOccupancy.lotOccupancyOccupants) === null || _a === void 0 ? void 0 : _a.reduce((soFar, occupant) => {
return (soFar + return (soFar +
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType) + cityssm.escapeHTML(occupant.lotOccupantType) +
'">' + '">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + cityssm.escapeHTML(occupant.fontAwesomeIconClass || 'user') +
'" aria-label="' + '" aria-label="' +
los.escapedAliases.Occupant + los.escapedAliases.Occupant +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(occupant.occupantName) + cityssm.escapeHTML(occupant.occupantName) +
"</span><br />"); '</span><br />');
}, "")) + }, '')) +
"</td>") + '</td>') +
("<td>" + ('<td>' +
'<button class="button is-small is-light is-danger button--deleteLotOccupancy" data-tooltip="Delete Relationship" type="button">' + '<button class="button is-small is-light is-danger button--deleteLotOccupancy" data-tooltip="Delete Relationship" type="button">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>")); '</td>'));
(_b = rowElement.querySelector(".button--addLot")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", addLotFromLotOccupancy); (_b = rowElement
.querySelector('.button--addLot')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', addLotFromLotOccupancy);
rowElement rowElement
.querySelector(".button--deleteLotOccupancy") .querySelector('.button--deleteLotOccupancy')
.addEventListener("click", deleteLotOccupancy); .addEventListener('click', deleteLotOccupancy);
occupanciesContainerElement.querySelector("tbody").append(rowElement); occupanciesContainerElement.querySelector('tbody').append(rowElement);
} }
} }
function openEditLotStatus(clickEvent) { function openEditLotStatus(clickEvent) {
const lotId = Number.parseInt(clickEvent.currentTarget.closest(".container--lot").dataset.lotId, 10); const lotId = Number.parseInt(clickEvent.currentTarget.closest('.container--lot').dataset.lotId, 10);
const lot = workOrderLots.find((possibleLot) => { const lot = workOrderLots.find((possibleLot) => {
return possibleLot.lotId === lotId; return possibleLot.lotId === lotId;
}); });
let editCloseModalFunction; let editCloseModalFunction;
function doUpdateLotStatus(submitEvent) { function doUpdateLotStatus(submitEvent) {
submitEvent.preventDefault(); submitEvent.preventDefault();
cityssm.postJSON(los.urlPrefix + "/workOrders/doUpdateLotStatus", submitEvent.currentTarget, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doUpdateLotStatus', submitEvent.currentTarget, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
workOrderLots = responseJSON.workOrderLots; workOrderLots = responseJSON.workOrderLots;
renderRelatedLotsAndOccupancies(); renderRelatedLotsAndOccupancies();
@ -199,23 +206,22 @@ function openEditLotStatus(clickEvent) {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Relationship", title: 'Error Deleting Relationship',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
cityssm.openHtmlModal("lot-editLotStatus", { cityssm.openHtmlModal('lot-editLotStatus', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
modalElement.querySelector("#lotStatusEdit--lotId").value = modalElement.querySelector('#lotStatusEdit--lotId').value = lotId.toString();
lotId.toString(); modalElement.querySelector('#lotStatusEdit--lotName').value = lot.lotName;
modalElement.querySelector("#lotStatusEdit--lotName").value = lot.lotName; const lotStatusElement = modalElement.querySelector('#lotStatusEdit--lotStatusId');
const lotStatusElement = modalElement.querySelector("#lotStatusEdit--lotStatusId");
let lotStatusFound = false; let lotStatusFound = false;
for (const lotStatus of exports.lotStatuses) { for (const lotStatus of exports.lotStatuses) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotStatus.lotStatusId.toString(); optionElement.value = lotStatus.lotStatusId.toString();
optionElement.textContent = lotStatus.lotStatus; optionElement.textContent = lotStatus.lotStatus;
if (lotStatus.lotStatusId === lot.lotStatusId) { if (lotStatus.lotStatusId === lot.lotStatusId) {
@ -224,7 +230,7 @@ function openEditLotStatus(clickEvent) {
lotStatusElement.append(optionElement); lotStatusElement.append(optionElement);
} }
if (!lotStatusFound && lot.lotStatusId) { if (!lotStatusFound && lot.lotStatusId) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lot.lotStatusId.toString(); optionElement.value = lot.lotStatusId.toString();
optionElement.textContent = lot.lotStatus; optionElement.textContent = lot.lotStatus;
lotStatusElement.append(optionElement); lotStatusElement.append(optionElement);
@ -233,13 +239,15 @@ function openEditLotStatus(clickEvent) {
lotStatusElement.value = lot.lotStatusId.toString(); lotStatusElement.value = lot.lotStatusId.toString();
} }
modalElement modalElement
.querySelector("form") .querySelector('form')
.insertAdjacentHTML("beforeend", `<input name="workOrderId" type="hidden" value="${workOrderId}" />`); .insertAdjacentHTML('beforeend', `<input name="workOrderId" type="hidden" value="${workOrderId}" />`);
}, },
onshown(modalElement, closeModalFunction) { onshown(modalElement, closeModalFunction) {
editCloseModalFunction = closeModalFunction; editCloseModalFunction = closeModalFunction;
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
modalElement.querySelector("form").addEventListener("submit", doUpdateLotStatus); modalElement
.querySelector('form')
.addEventListener('submit', doUpdateLotStatus);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -247,10 +255,9 @@ function openEditLotStatus(clickEvent) {
}); });
} }
function deleteLot(clickEvent) { function deleteLot(clickEvent) {
const lotId = clickEvent.currentTarget.closest(".container--lot") const lotId = clickEvent.currentTarget.closest('.container--lot').dataset.lotId;
.dataset.lotId;
function doDelete() { function doDelete() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doDeleteWorkOrderLot", { cityssm.postJSON(los.urlPrefix + '/workOrders/doDeleteWorkOrderLot', {
workOrderId, workOrderId,
lotId lotId
}, (responseJSON) => { }, (responseJSON) => {
@ -260,9 +267,9 @@ function deleteLot(clickEvent) {
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Deleting Relationship", title: 'Error Deleting Relationship',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
@ -270,17 +277,16 @@ function deleteLot(clickEvent) {
bulmaJS.confirm({ bulmaJS.confirm({
title: `Delete ${los.escapedAliases.Occupancy} Relationship`, title: `Delete ${los.escapedAliases.Occupancy} Relationship`,
message: `Are you sure you want to remove the relationship to this ${los.escapedAliases.occupancy} record from this work order? Note that the record will remain.`, message: `Are you sure you want to remove the relationship to this ${los.escapedAliases.occupancy} record from this work order? Note that the record will remain.`,
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Delete Relationship", text: 'Yes, Delete Relationship',
callbackFunction: doDelete callbackFunction: doDelete
} }
}); });
} }
function renderRelatedLots() { function renderRelatedLots() {
const lotsContainerElement = document.querySelector("#container--lots"); const lotsContainerElement = document.querySelector('#container--lots');
document.querySelector(".tabs a[href='#relatedTab--lots'] .tag").textContent = document.querySelector(".tabs a[href='#relatedTab--lots'] .tag").textContent = workOrderLots.length.toString();
workOrderLots.length.toString();
if (workOrderLots.length === 0) { if (workOrderLots.length === 0) {
lotsContainerElement.innerHTML = `<div class="message is-info"> lotsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no ${los.escapedAliases.lots} associated with this work order.</p> <p class="message-body">There are no ${los.escapedAliases.lots} associated with this work order.</p>
@ -298,35 +304,39 @@ function renderRelatedLots() {
<tbody></tbody> <tbody></tbody>
</table>`; </table>`;
for (const lot of workOrderLots) { for (const lot of workOrderLots) {
const rowElement = document.createElement("tr"); const rowElement = document.createElement('tr');
rowElement.className = "container--lot"; rowElement.className = 'container--lot';
rowElement.dataset.lotId = lot.lotId.toString(); rowElement.dataset.lotId = lot.lotId.toString();
rowElement.innerHTML = rowElement.innerHTML =
"<td>" + '<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getLotURL(lot.lotId) + los.getLotURL(lot.lotId) +
'">' + '">' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"</a>" + '</a>' +
"</td>" + '</td>' +
("<td>" + cityssm.escapeHTML(lot.mapName || "") + "</td>") + ('<td>' + cityssm.escapeHTML(lot.mapName || '') + '</td>') +
("<td>" + cityssm.escapeHTML(lot.lotType || "") + "</td>") + ('<td>' + cityssm.escapeHTML(lot.lotType || '') + '</td>') +
("<td>" + ('<td>' +
(lot.lotStatusId (lot.lotStatusId
? cityssm.escapeHTML(lot.lotStatus || "") ? cityssm.escapeHTML(lot.lotStatus || '')
: '<span class="has-text-grey">(No Status)</span>') + : '<span class="has-text-grey">(No Status)</span>') +
"</td>") + '</td>') +
('<td class="is-nowrap">' + ('<td class="is-nowrap">' +
'<button class="button is-small is-light is-info button--editLotStatus" data-tooltip="Update Status" type="button">' + '<button class="button is-small is-light is-info button--editLotStatus" data-tooltip="Update Status" type="button">' +
'<i class="fas fa-pencil-alt" aria-hidden="true"></i>' + '<i class="fas fa-pencil-alt" aria-hidden="true"></i>' +
"</button>" + '</button>' +
' <button class="button is-small is-light is-danger button--deleteLot" data-tooltip="Delete Relationship" type="button">' + ' <button class="button is-small is-light is-danger button--deleteLot" data-tooltip="Delete Relationship" type="button">' +
'<i class="fas fa-trash" aria-hidden="true"></i>' + '<i class="fas fa-trash" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>"); '</td>');
rowElement.querySelector(".button--editLotStatus").addEventListener("click", openEditLotStatus); rowElement
rowElement.querySelector(".button--deleteLot").addEventListener("click", deleteLot); .querySelector('.button--editLotStatus')
lotsContainerElement.querySelector("tbody").append(rowElement); .addEventListener('click', openEditLotStatus);
rowElement
.querySelector('.button--deleteLot')
.addEventListener('click', deleteLot);
lotsContainerElement.querySelector('tbody').append(rowElement);
} }
} }
function renderRelatedLotsAndOccupancies() { function renderRelatedLotsAndOccupancies() {
@ -335,7 +345,7 @@ function renderRelatedLotsAndOccupancies() {
} }
renderRelatedLotsAndOccupancies(); renderRelatedLotsAndOccupancies();
function doAddLotOccupancy(clickEvent) { function doAddLotOccupancy(clickEvent) {
const rowElement = clickEvent.currentTarget.closest("tr"); const rowElement = clickEvent.currentTarget.closest('tr');
const lotOccupancyId = rowElement.dataset.lotOccupancyId; const lotOccupancyId = rowElement.dataset.lotOccupancyId;
addLotOccupancy(lotOccupancyId, (success) => { addLotOccupancy(lotOccupancyId, (success) => {
if (success) { if (success) {
@ -343,15 +353,18 @@ function doAddLotOccupancy(clickEvent) {
} }
}); });
} }
document.querySelector("#button--addLotOccupancy").addEventListener("click", () => { document
.querySelector('#button--addLotOccupancy')
.addEventListener('click', () => {
let searchFormElement; let searchFormElement;
let searchResultsContainerElement; let searchResultsContainerElement;
function doSearch(event) { function doSearch(event) {
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML("Searching..."); searchResultsContainerElement.innerHTML =
cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doSearchLotOccupancies", searchFormElement, (responseJSON) => { los.getLoadingParagraphHTML('Searching...');
cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchLotOccupancies', searchFormElement, (responseJSON) => {
if (responseJSON.lotOccupancies.length === 0) { if (responseJSON.lotOccupancies.length === 0) {
searchResultsContainerElement.innerHTML = `<div class="message is-info"> searchResultsContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no records that meet the search criteria.</p> <p class="message-body">There are no records that meet the search criteria.</p>
@ -370,64 +383,69 @@ document.querySelector("#button--addLotOccupancy").addEventListener("click", ()
<tbody></tbody> <tbody></tbody>
</table>`; </table>`;
for (const lotOccupancy of responseJSON.lotOccupancies) { for (const lotOccupancy of responseJSON.lotOccupancies) {
const rowElement = document.createElement("tr"); const rowElement = document.createElement('tr');
rowElement.className = "container--lotOccupancy"; rowElement.className = 'container--lotOccupancy';
rowElement.dataset.lotOccupancyId = lotOccupancy.lotOccupancyId.toString(); rowElement.dataset.lotOccupancyId =
lotOccupancy.lotOccupancyId.toString();
rowElement.innerHTML = rowElement.innerHTML =
'<td class="has-text-centered">' + '<td class="has-text-centered">' +
'<button class="button is-small is-success button--addLotOccupancy" data-tooltip="Add" type="button" aria-label="Add">' + '<button class="button is-small is-success button--addLotOccupancy" data-tooltip="Add" type="button" aria-label="Add">' +
'<i class="fas fa-plus" aria-hidden="true"></i>' + '<i class="fas fa-plus" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>" + '</td>' +
('<td class="has-text-weight-bold">' + ('<td class="has-text-weight-bold">' +
cityssm.escapeHTML(lotOccupancy.occupancyType || "") + cityssm.escapeHTML(lotOccupancy.occupancyType || '') +
"</td>"); '</td>');
if (lotOccupancy.lotId) { if (lotOccupancy.lotId) {
rowElement.insertAdjacentHTML("beforeend", "<td>" + cityssm.escapeHTML(lotOccupancy.lotName || "") + "</td>"); rowElement.insertAdjacentHTML('beforeend', '<td>' +
cityssm.escapeHTML(lotOccupancy.lotName || '') +
'</td>');
} }
else { else {
rowElement.insertAdjacentHTML("beforeend", `<td><span class="has-text-grey">(No ${los.escapedAliases.Lot})</span></td>`); rowElement.insertAdjacentHTML('beforeend', `<td><span class="has-text-grey">(No ${los.escapedAliases.Lot})</span></td>`);
} }
rowElement.insertAdjacentHTML("beforeend", "<td>" + rowElement.insertAdjacentHTML('beforeend', '<td>' +
lotOccupancy.occupancyStartDateString + lotOccupancy.occupancyStartDateString +
"</td>" + '</td>' +
("<td>" + ('<td>' +
(lotOccupancy.occupancyEndDate (lotOccupancy.occupancyEndDate
? lotOccupancy.occupancyEndDateString ? lotOccupancy.occupancyEndDateString
: '<span class="has-text-grey">(No End Date)</span>') + : '<span class="has-text-grey">(No End Date)</span>') +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(lotOccupancy.lotOccupancyOccupants.length === 0 (lotOccupancy.lotOccupancyOccupants.length === 0
? '<span class="has-text-grey">(No ' + ? '<span class="has-text-grey">(No ' +
cityssm.escapeHTML(exports.aliases.occupants) + cityssm.escapeHTML(exports.aliases.occupants) +
")</span>" ')</span>'
: cityssm.escapeHTML(lotOccupancy.lotOccupancyOccupants[0].occupantName) + : cityssm.escapeHTML(lotOccupancy.lotOccupancyOccupants[0].occupantName) +
(lotOccupancy.lotOccupancyOccupants.length > 1 (lotOccupancy.lotOccupancyOccupants.length > 1
? " plus " + (lotOccupancy.lotOccupancyOccupants.length - 1) ? ' plus ' +
: "")) + (lotOccupancy.lotOccupancyOccupants.length - 1)
"</td>")); : '')) +
'</td>'));
rowElement rowElement
.querySelector(".button--addLotOccupancy") .querySelector('.button--addLotOccupancy')
.addEventListener("click", doAddLotOccupancy); .addEventListener('click', doAddLotOccupancy);
searchResultsContainerElement.querySelector("tbody").append(rowElement); searchResultsContainerElement
.querySelector('tbody')
.append(rowElement);
} }
}); });
} }
cityssm.openHtmlModal("workOrder-addLotOccupancy", { cityssm.openHtmlModal('workOrder-addLotOccupancy', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
searchFormElement = modalElement.querySelector("form"); searchFormElement = modalElement.querySelector('form');
searchResultsContainerElement = modalElement.querySelector("#resultsContainer--lotOccupancyAdd"); searchResultsContainerElement = modalElement.querySelector('#resultsContainer--lotOccupancyAdd');
modalElement.querySelector("#lotOccupancySearch--notWorkOrderId").value = modalElement.querySelector('#lotOccupancySearch--notWorkOrderId').value = workOrderId;
workOrderId; modalElement.querySelector('#lotOccupancySearch--occupancyEffectiveDateString').value = document.querySelector('#workOrderEdit--workOrderOpenDateString').value;
modalElement.querySelector("#lotOccupancySearch--occupancyEffectiveDateString").value = document.querySelector("#workOrderEdit--workOrderOpenDateString").value;
doSearch(); doSearch();
}, },
onshown(modalElement) { onshown(modalElement) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
modalElement.querySelector("#lotOccupancySearch--occupantName").addEventListener("change", doSearch); modalElement.querySelector('#lotOccupancySearch--occupantName').addEventListener('change', doSearch);
modalElement.querySelector("#lotOccupancySearch--lotName").addEventListener("change", doSearch); modalElement.querySelector('#lotOccupancySearch--lotName').addEventListener('change', doSearch);
searchFormElement.addEventListener("submit", doSearch); searchFormElement.addEventListener('submit', doSearch);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
@ -435,7 +453,7 @@ document.querySelector("#button--addLotOccupancy").addEventListener("click", ()
}); });
}); });
function doAddLot(clickEvent) { function doAddLot(clickEvent) {
const rowElement = clickEvent.currentTarget.closest("tr"); const rowElement = clickEvent.currentTarget.closest('tr');
const lotId = rowElement.dataset.lotId; const lotId = rowElement.dataset.lotId;
addLot(lotId, (success) => { addLot(lotId, (success) => {
if (success) { if (success) {
@ -443,20 +461,21 @@ function doAddLot(clickEvent) {
} }
}); });
} }
document.querySelector("#button--addLot").addEventListener("click", () => { document.querySelector('#button--addLot').addEventListener('click', () => {
let searchFormElement; let searchFormElement;
let searchResultsContainerElement; let searchResultsContainerElement;
function doSearch(event) { function doSearch(event) {
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML("Searching..."); searchResultsContainerElement.innerHTML =
cityssm.postJSON(los.urlPrefix + "/lots/doSearchLots", searchFormElement, (responseJSON) => { los.getLoadingParagraphHTML('Searching...');
cityssm.postJSON(los.urlPrefix + '/lots/doSearchLots', searchFormElement, (responseJSON) => {
if (responseJSON.lots.length === 0) { if (responseJSON.lots.length === 0) {
searchResultsContainerElement.innerHTML = searchResultsContainerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no records that meet the search criteria.</p>' + '<p class="message-body">There are no records that meet the search criteria.</p>' +
"</div>"; '</div>';
return; return;
} }
searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable"> searchResultsContainerElement.innerHTML = `<table class="table is-fullwidth is-striped is-hoverable">
@ -470,38 +489,41 @@ document.querySelector("#button--addLot").addEventListener("click", () => {
<tbody></tbody> <tbody></tbody>
</table>`; </table>`;
for (const lot of responseJSON.lots) { for (const lot of responseJSON.lots) {
const rowElement = document.createElement("tr"); const rowElement = document.createElement('tr');
rowElement.className = "container--lot"; rowElement.className = 'container--lot';
rowElement.dataset.lotId = lot.lotId.toString(); rowElement.dataset.lotId = lot.lotId.toString();
rowElement.innerHTML = rowElement.innerHTML =
'<td class="has-text-centered">' + '<td class="has-text-centered">' +
'<button class="button is-small is-success button--addLot" data-tooltip="Add" type="button" aria-label="Add">' + '<button class="button is-small is-success button--addLot" data-tooltip="Add" type="button" aria-label="Add">' +
'<i class="fas fa-plus" aria-hidden="true"></i>' + '<i class="fas fa-plus" aria-hidden="true"></i>' +
"</button>" + '</button>' +
"</td>" + '</td>' +
('<td class="has-text-weight-bold">' + ('<td class="has-text-weight-bold">' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"</td>") + '</td>') +
"<td>" + '<td>' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
"</td>" + '</td>' +
("<td>" + cityssm.escapeHTML(lot.lotType || "") + "</td>") + ('<td>' + cityssm.escapeHTML(lot.lotType || '') + '</td>') +
("<td>" + cityssm.escapeHTML(lot.lotStatus || "") + "</td>"); ('<td>' + cityssm.escapeHTML(lot.lotStatus || '') + '</td>');
rowElement.querySelector(".button--addLot").addEventListener("click", doAddLot); rowElement
searchResultsContainerElement.querySelector("tbody").append(rowElement); .querySelector('.button--addLot')
.addEventListener('click', doAddLot);
searchResultsContainerElement
.querySelector('tbody')
.append(rowElement);
} }
}); });
} }
cityssm.openHtmlModal("workOrder-addLot", { cityssm.openHtmlModal('workOrder-addLot', {
onshow(modalElement) { onshow(modalElement) {
los.populateAliases(modalElement); los.populateAliases(modalElement);
searchFormElement = modalElement.querySelector("form"); searchFormElement = modalElement.querySelector('form');
searchResultsContainerElement = modalElement.querySelector("#resultsContainer--lotAdd"); searchResultsContainerElement = modalElement.querySelector('#resultsContainer--lotAdd');
modalElement.querySelector("#lotSearch--notWorkOrderId").value = modalElement.querySelector('#lotSearch--notWorkOrderId').value = workOrderId;
workOrderId; const lotStatusElement = modalElement.querySelector('#lotSearch--lotStatusId');
const lotStatusElement = modalElement.querySelector("#lotSearch--lotStatusId");
for (const lotStatus of exports.lotStatuses) { for (const lotStatus of exports.lotStatuses) {
const optionElement = document.createElement("option"); const optionElement = document.createElement('option');
optionElement.value = lotStatus.lotStatusId.toString(); optionElement.value = lotStatus.lotStatusId.toString();
optionElement.textContent = lotStatus.lotStatus; optionElement.textContent = lotStatus.lotStatus;
lotStatusElement.append(optionElement); lotStatusElement.append(optionElement);
@ -510,9 +532,13 @@ document.querySelector("#button--addLot").addEventListener("click", () => {
}, },
onshown(modalElement) { onshown(modalElement) {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();
modalElement.querySelector("#lotSearch--lotName").addEventListener("change", doSearch); modalElement
modalElement.querySelector("#lotSearch--lotStatusId").addEventListener("change", doSearch); .querySelector('#lotSearch--lotName')
searchFormElement.addEventListener("submit", doSearch); .addEventListener('change', doSearch);
modalElement
.querySelector('#lotSearch--lotStatusId')
.addEventListener('change', doSearch);
searchFormElement.addEventListener('submit', doSearch);
}, },
onremoved() { onremoved() {
bulmaJS.toggleHtmlClipped(); bulmaJS.toggleHtmlClipped();

686
public-typescript/workOrderEdit/workOrderEditLots.ts
View File

File diff suppressed because it is too large Load Diff

88
public-typescript/workOrderMilestoneCalendar.js
View File

@ -3,10 +3,10 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const workOrderSearchFiltersFormElement = document.querySelector("#form--searchFilters"); const workOrderSearchFiltersFormElement = document.querySelector('#form--searchFilters');
const workOrderMilestoneDateFilterElement = workOrderSearchFiltersFormElement.querySelector("#searchFilter--workOrderMilestoneDateFilter"); const workOrderMilestoneDateFilterElement = workOrderSearchFiltersFormElement.querySelector('#searchFilter--workOrderMilestoneDateFilter');
const workOrderMilestoneDateStringElement = workOrderSearchFiltersFormElement.querySelector("#searchFilter--workOrderMilestoneDateString"); const workOrderMilestoneDateStringElement = workOrderSearchFiltersFormElement.querySelector('#searchFilter--workOrderMilestoneDateString');
const milestoneCalendarContainerElement = document.querySelector("#container--milestoneCalendar"); const milestoneCalendarContainerElement = document.querySelector('#container--milestoneCalendar');
function renderMilestones(workOrderMilestones) { function renderMilestones(workOrderMilestones) {
if (workOrderMilestones.length === 0) { if (workOrderMilestones.length === 0) {
milestoneCalendarContainerElement.innerHTML = `<div class="message is-info"> milestoneCalendarContainerElement.innerHTML = `<div class="message is-info">
@ -14,51 +14,51 @@ Object.defineProperty(exports, "__esModule", { value: true });
</div>`; </div>`;
return; return;
} }
milestoneCalendarContainerElement.innerHTML = ""; milestoneCalendarContainerElement.innerHTML = '';
const currentDate = cityssm.dateToString(new Date()); const currentDate = cityssm.dateToString(new Date());
let currentPanelElement; let currentPanelElement;
let currentPanelDateString = ""; let currentPanelDateString = '';
for (const milestone of workOrderMilestones) { for (const milestone of workOrderMilestones) {
if (currentPanelDateString !== milestone.workOrderMilestoneDateString) { if (currentPanelDateString !== milestone.workOrderMilestoneDateString) {
if (currentPanelElement) { if (currentPanelElement) {
milestoneCalendarContainerElement.append(currentPanelElement); milestoneCalendarContainerElement.append(currentPanelElement);
} }
currentPanelElement = document.createElement("div"); currentPanelElement = document.createElement('div');
currentPanelElement.className = "panel"; currentPanelElement.className = 'panel';
currentPanelElement.innerHTML = `<h2 class="panel-heading">${milestone.workOrderMilestoneDateString}</h2>`; currentPanelElement.innerHTML = `<h2 class="panel-heading">${milestone.workOrderMilestoneDateString}</h2>`;
currentPanelDateString = milestone.workOrderMilestoneDateString; currentPanelDateString = milestone.workOrderMilestoneDateString;
} }
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div');
panelBlockElement.className = "panel-block is-block"; panelBlockElement.className = 'panel-block is-block';
if (!milestone.workOrderMilestoneCompletionDate && if (!milestone.workOrderMilestoneCompletionDate &&
milestone.workOrderMilestoneDateString < currentDate) { milestone.workOrderMilestoneDateString < currentDate) {
panelBlockElement.classList.add("has-background-warning-light"); panelBlockElement.classList.add('has-background-warning-light');
} }
let lotOccupancyHTML = ""; let lotOccupancyHTML = '';
for (const lot of milestone.workOrderLots) { for (const lot of milestone.workOrderLots) {
lotOccupancyHTML += lotOccupancyHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
'">' + '">' +
'<i class="fas fa-vector-square" aria-label="' + '<i class="fas fa-vector-square" aria-label="' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"</span>" + '</span>' +
"<br />"; '<br />';
} }
for (const lotOccupancy of milestone.workOrderLotOccupancies) { for (const lotOccupancy of milestone.workOrderLotOccupancies) {
for (const occupant of lotOccupancy.lotOccupancyOccupants) { for (const occupant of lotOccupancy.lotOccupancyOccupants) {
lotOccupancyHTML += lotOccupancyHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType || "") + cityssm.escapeHTML(occupant.lotOccupantType || '') +
'">' + '">' +
'<i class="fas fa-user" aria-label="' + '<i class="fas fa-user" aria-label="' +
los.escapedAliases.Occupancy + los.escapedAliases.Occupancy +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(occupant.occupantName || "") + cityssm.escapeHTML(occupant.occupantName || '') +
"</span>" + '</span>' +
"<br />"; '<br />';
} }
} }
panelBlockElement.innerHTML = panelBlockElement.innerHTML =
@ -68,36 +68,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
(milestone.workOrderMilestoneCompletionDate (milestone.workOrderMilestoneCompletionDate
? '<i class="fas fa-check" aria-label="Completed"></i>' ? '<i class="fas fa-check" aria-label="Completed"></i>'
: '<i class="far fa-square has-text-grey" aria-label="Incomplete"></i>') + : '<i class="far fa-square has-text-grey" aria-label="Incomplete"></i>') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
(milestone.workOrderMilestoneTime === 0 (milestone.workOrderMilestoneTime === 0
? "" ? ''
: milestone.workOrderMilestoneTimeString + "<br />") + : milestone.workOrderMilestoneTimeString + '<br />') +
(milestone.workOrderMilestoneTypeId (milestone.workOrderMilestoneTypeId
? "<strong>" + ? '<strong>' +
cityssm.escapeHTML(milestone.workOrderMilestoneType) + cityssm.escapeHTML(milestone.workOrderMilestoneType) +
"</strong><br />" '</strong><br />'
: "") + : '') +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(milestone.workOrderMilestoneDescription) + cityssm.escapeHTML(milestone.workOrderMilestoneDescription) +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
'<i class="fas fa-circle" style="color:' + '<i class="fas fa-circle" style="color:' +
los.getRandomColor(milestone.workOrderNumber || "") + los.getRandomColor(milestone.workOrderNumber || '') +
'" aria-hidden="true"></i>' + '" aria-hidden="true"></i>' +
' <a class="has-text-weight-bold" href="' + ' <a class="has-text-weight-bold" href="' +
los.getWorkOrderURL(milestone.workOrderId) + los.getWorkOrderURL(milestone.workOrderId) +
'">' + '">' +
cityssm.escapeHTML(milestone.workOrderNumber || "") + cityssm.escapeHTML(milestone.workOrderNumber || '') +
"</a><br />" + '</a><br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(milestone.workOrderDescription || "") + cityssm.escapeHTML(milestone.workOrderDescription || '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column is-size-7">' + lotOccupancyHTML + "</div>") + ('<div class="column is-size-7">' + lotOccupancyHTML + '</div>') +
"</div>"; '</div>';
currentPanelElement.append(panelBlockElement); currentPanelElement.append(panelBlockElement);
} }
milestoneCalendarContainerElement.append(currentPanelElement); milestoneCalendarContainerElement.append(currentPanelElement);
@ -106,18 +106,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
milestoneCalendarContainerElement.innerHTML = los.getLoadingParagraphHTML("Loading Milestones..."); milestoneCalendarContainerElement.innerHTML = los.getLoadingParagraphHTML('Loading Milestones...');
cityssm.postJSON(los.urlPrefix + "/workOrders/doGetWorkOrderMilestones", workOrderSearchFiltersFormElement, (responseJSON) => { cityssm.postJSON(los.urlPrefix + '/workOrders/doGetWorkOrderMilestones', workOrderSearchFiltersFormElement, (responseJSON) => {
renderMilestones(responseJSON.workOrderMilestones); renderMilestones(responseJSON.workOrderMilestones);
}); });
} }
workOrderMilestoneDateFilterElement.addEventListener("change", () => { workOrderMilestoneDateFilterElement.addEventListener('change', () => {
workOrderMilestoneDateStringElement.closest("fieldset").disabled = workOrderMilestoneDateStringElement.closest('fieldset').disabled =
workOrderMilestoneDateFilterElement.value !== "date"; workOrderMilestoneDateFilterElement.value !== 'date';
getMilestones(); getMilestones();
}); });
los.initializeDatePickers(workOrderSearchFiltersFormElement); los.initializeDatePickers(workOrderSearchFiltersFormElement);
workOrderMilestoneDateStringElement.addEventListener("change", getMilestones); workOrderMilestoneDateStringElement.addEventListener('change', getMilestones);
workOrderSearchFiltersFormElement.addEventListener("submit", getMilestones); workOrderSearchFiltersFormElement.addEventListener('submit', getMilestones);
getMilestones(); getMilestones();
})(); })();

160
public-typescript/workOrderMilestoneCalendar.ts
View File

@ -1,97 +1,100 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
;(() => {
(() => { const los = exports.los as globalTypes.LOS
const los = exports.los as globalTypes.LOS;
const workOrderSearchFiltersFormElement = document.querySelector( const workOrderSearchFiltersFormElement = document.querySelector(
"#form--searchFilters" '#form--searchFilters'
) as HTMLFormElement; ) as HTMLFormElement
const workOrderMilestoneDateFilterElement = workOrderSearchFiltersFormElement.querySelector( const workOrderMilestoneDateFilterElement =
"#searchFilter--workOrderMilestoneDateFilter" workOrderSearchFiltersFormElement.querySelector(
) as HTMLSelectElement; '#searchFilter--workOrderMilestoneDateFilter'
) as HTMLSelectElement
const workOrderMilestoneDateStringElement = workOrderSearchFiltersFormElement.querySelector( const workOrderMilestoneDateStringElement =
"#searchFilter--workOrderMilestoneDateString" workOrderSearchFiltersFormElement.querySelector(
) as HTMLInputElement; '#searchFilter--workOrderMilestoneDateString'
) as HTMLInputElement
const milestoneCalendarContainerElement = document.querySelector( const milestoneCalendarContainerElement = document.querySelector(
"#container--milestoneCalendar" '#container--milestoneCalendar'
) as HTMLElement; ) as HTMLElement
function renderMilestones(workOrderMilestones: recordTypes.WorkOrderMilestone[]) { function renderMilestones(
workOrderMilestones: recordTypes.WorkOrderMilestone[]
) {
if (workOrderMilestones.length === 0) { if (workOrderMilestones.length === 0) {
milestoneCalendarContainerElement.innerHTML = `<div class="message is-info"> milestoneCalendarContainerElement.innerHTML = `<div class="message is-info">
<p class="message-body">There are no milestones that meet the search criteria.</p> <p class="message-body">There are no milestones that meet the search criteria.</p>
</div>`; </div>`
return; return
} }
milestoneCalendarContainerElement.innerHTML = ""; milestoneCalendarContainerElement.innerHTML = ''
const currentDate = cityssm.dateToString(new Date()); const currentDate = cityssm.dateToString(new Date())
let currentPanelElement: HTMLElement | undefined; let currentPanelElement: HTMLElement | undefined
let currentPanelDateString = ""; let currentPanelDateString = ''
for (const milestone of workOrderMilestones) { for (const milestone of workOrderMilestones) {
if (currentPanelDateString !== milestone.workOrderMilestoneDateString) { if (currentPanelDateString !== milestone.workOrderMilestoneDateString) {
if (currentPanelElement) { if (currentPanelElement) {
milestoneCalendarContainerElement.append(currentPanelElement); milestoneCalendarContainerElement.append(currentPanelElement)
} }
currentPanelElement = document.createElement("div"); currentPanelElement = document.createElement('div')
currentPanelElement.className = "panel"; currentPanelElement.className = 'panel'
currentPanelElement.innerHTML = `<h2 class="panel-heading">${milestone.workOrderMilestoneDateString}</h2>`; currentPanelElement.innerHTML = `<h2 class="panel-heading">${milestone.workOrderMilestoneDateString}</h2>`
currentPanelDateString = milestone.workOrderMilestoneDateString!; currentPanelDateString = milestone.workOrderMilestoneDateString!
} }
const panelBlockElement = document.createElement("div"); const panelBlockElement = document.createElement('div')
panelBlockElement.className = "panel-block is-block"; panelBlockElement.className = 'panel-block is-block'
if ( if (
!milestone.workOrderMilestoneCompletionDate && !milestone.workOrderMilestoneCompletionDate &&
milestone.workOrderMilestoneDateString! < currentDate milestone.workOrderMilestoneDateString! < currentDate
) { ) {
panelBlockElement.classList.add("has-background-warning-light"); panelBlockElement.classList.add('has-background-warning-light')
} }
let lotOccupancyHTML = ""; let lotOccupancyHTML = ''
for (const lot of milestone.workOrderLots!) { for (const lot of milestone.workOrderLots!) {
lotOccupancyHTML += lotOccupancyHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
'">' + '">' +
'<i class="fas fa-vector-square" aria-label="' + '<i class="fas fa-vector-square" aria-label="' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(lot.lotName || "") + cityssm.escapeHTML(lot.lotName || '') +
"</span>" + '</span>' +
"<br />"; '<br />'
} }
for (const lotOccupancy of milestone.workOrderLotOccupancies!) { for (const lotOccupancy of milestone.workOrderLotOccupancies!) {
for (const occupant of lotOccupancy.lotOccupancyOccupants!) { for (const occupant of lotOccupancy.lotOccupancyOccupants!) {
lotOccupancyHTML += lotOccupancyHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType || "") + cityssm.escapeHTML(occupant.lotOccupantType || '') +
'">' + '">' +
'<i class="fas fa-user" aria-label="' + '<i class="fas fa-user" aria-label="' +
los.escapedAliases.Occupancy + los.escapedAliases.Occupancy +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(occupant.occupantName || "") + cityssm.escapeHTML(occupant.occupantName || '') +
"</span>" + '</span>' +
"<br />"; '<br />'
} }
} }
@ -102,69 +105,72 @@ declare const cityssm: cityssmGlobal;
(milestone.workOrderMilestoneCompletionDate (milestone.workOrderMilestoneCompletionDate
? '<i class="fas fa-check" aria-label="Completed"></i>' ? '<i class="fas fa-check" aria-label="Completed"></i>'
: '<i class="far fa-square has-text-grey" aria-label="Incomplete"></i>') + : '<i class="far fa-square has-text-grey" aria-label="Incomplete"></i>') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
(milestone.workOrderMilestoneTime === 0 (milestone.workOrderMilestoneTime === 0
? "" ? ''
: milestone.workOrderMilestoneTimeString + "<br />") + : milestone.workOrderMilestoneTimeString + '<br />') +
(milestone.workOrderMilestoneTypeId (milestone.workOrderMilestoneTypeId
? "<strong>" + ? '<strong>' +
cityssm.escapeHTML(milestone.workOrderMilestoneType!) + cityssm.escapeHTML(milestone.workOrderMilestoneType!) +
"</strong><br />" '</strong><br />'
: "") + : '') +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(milestone.workOrderMilestoneDescription!) + cityssm.escapeHTML(milestone.workOrderMilestoneDescription!) +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column">' + ('<div class="column">' +
'<i class="fas fa-circle" style="color:' + '<i class="fas fa-circle" style="color:' +
los.getRandomColor(milestone.workOrderNumber || "") + los.getRandomColor(milestone.workOrderNumber || '') +
'" aria-hidden="true"></i>' + '" aria-hidden="true"></i>' +
' <a class="has-text-weight-bold" href="' + ' <a class="has-text-weight-bold" href="' +
los.getWorkOrderURL(milestone.workOrderId!) + los.getWorkOrderURL(milestone.workOrderId!) +
'">' + '">' +
cityssm.escapeHTML(milestone.workOrderNumber || "") + cityssm.escapeHTML(milestone.workOrderNumber || '') +
"</a><br />" + '</a><br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(milestone.workOrderDescription || "") + cityssm.escapeHTML(milestone.workOrderDescription || '') +
"</span>" + '</span>' +
"</div>") + '</div>') +
('<div class="column is-size-7">' + lotOccupancyHTML + "</div>") + ('<div class="column is-size-7">' + lotOccupancyHTML + '</div>') +
"</div>"; '</div>'
;(currentPanelElement as HTMLElement).append(panelBlockElement)
(currentPanelElement as HTMLElement).append(panelBlockElement);
} }
milestoneCalendarContainerElement.append(currentPanelElement!); milestoneCalendarContainerElement.append(currentPanelElement!)
} }
function getMilestones(event?: Event) { function getMilestones(event?: Event) {
if (event) { if (event) {
event.preventDefault(); event.preventDefault()
} }
milestoneCalendarContainerElement.innerHTML = los.getLoadingParagraphHTML("Loading Milestones..."); milestoneCalendarContainerElement.innerHTML = los.getLoadingParagraphHTML(
'Loading Milestones...'
)
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doGetWorkOrderMilestones", los.urlPrefix + '/workOrders/doGetWorkOrderMilestones',
workOrderSearchFiltersFormElement, workOrderSearchFiltersFormElement,
(responseJSON: { workOrderMilestones: recordTypes.WorkOrderMilestone[] }) => { (responseJSON: {
renderMilestones(responseJSON.workOrderMilestones); workOrderMilestones: recordTypes.WorkOrderMilestone[]
}) => {
renderMilestones(responseJSON.workOrderMilestones)
} }
); )
} }
workOrderMilestoneDateFilterElement.addEventListener("change", () => { workOrderMilestoneDateFilterElement.addEventListener('change', () => {
workOrderMilestoneDateStringElement.closest("fieldset")!.disabled = workOrderMilestoneDateStringElement.closest('fieldset')!.disabled =
workOrderMilestoneDateFilterElement.value !== "date"; workOrderMilestoneDateFilterElement.value !== 'date'
getMilestones(); getMilestones()
}); })
los.initializeDatePickers(workOrderSearchFiltersFormElement); los.initializeDatePickers(workOrderSearchFiltersFormElement)
workOrderMilestoneDateStringElement.addEventListener("change", getMilestones); workOrderMilestoneDateStringElement.addEventListener('change', getMilestones)
workOrderSearchFiltersFormElement.addEventListener("submit", getMilestones); workOrderSearchFiltersFormElement.addEventListener('submit', getMilestones)
getMilestones(); getMilestones()
})(); })()

37
public-typescript/workOrderOutlook.js
View File

@ -3,47 +3,48 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const workOrderTypeIdsElement = document.querySelector("#icsFilters--workOrderTypeIds"); const workOrderTypeIdsElement = document.querySelector('#icsFilters--workOrderTypeIds');
const workOrderMilestoneTypeIdsElement = document.querySelector("#icsFilters--workOrderMilestoneTypeIds"); const workOrderMilestoneTypeIdsElement = document.querySelector('#icsFilters--workOrderMilestoneTypeIds');
const calendarLinkElement = document.querySelector("#icsFilters--calendarURL"); const calendarLinkElement = document.querySelector('#icsFilters--calendarURL');
function updateCalendarURL() { function updateCalendarURL() {
let url = window.location.href.slice(0, Math.max(0, window.location.href.indexOf(window.location.pathname) + 1)) + let url = window.location.href.slice(0, Math.max(0, window.location.href.indexOf(window.location.pathname) + 1)) +
los.urlPrefix + los.urlPrefix +
"api/" + 'api/' +
los.apiKey + los.apiKey +
"/" + '/' +
"milestoneICS/" + 'milestoneICS/' +
"?"; '?';
if (!workOrderTypeIdsElement.disabled && if (!workOrderTypeIdsElement.disabled &&
workOrderTypeIdsElement.selectedOptions.length > 0) { workOrderTypeIdsElement.selectedOptions.length > 0) {
url += "workOrderTypeIds="; url += 'workOrderTypeIds=';
for (const optionElement of workOrderTypeIdsElement.selectedOptions) { for (const optionElement of workOrderTypeIdsElement.selectedOptions) {
url += optionElement.value + ","; url += optionElement.value + ',';
} }
url = url.slice(0, -1) + "&"; url = url.slice(0, -1) + '&';
} }
if (!workOrderMilestoneTypeIdsElement.disabled && if (!workOrderMilestoneTypeIdsElement.disabled &&
workOrderMilestoneTypeIdsElement.selectedOptions.length > 0) { workOrderMilestoneTypeIdsElement.selectedOptions.length > 0) {
url += "workOrderMilestoneTypeIds="; url += 'workOrderMilestoneTypeIds=';
for (const optionElement of workOrderMilestoneTypeIdsElement.selectedOptions) { for (const optionElement of workOrderMilestoneTypeIdsElement.selectedOptions) {
url += optionElement.value + ","; url += optionElement.value + ',';
} }
url = url.slice(0, -1) + "&"; url = url.slice(0, -1) + '&';
} }
calendarLinkElement.value = url.slice(0, -1); calendarLinkElement.value = url.slice(0, -1);
} }
document.querySelector("#icsFilters--workOrderTypeIds-all").addEventListener("change", (changeEvent) => { ;
document.querySelector('#icsFilters--workOrderTypeIds-all').addEventListener('change', (changeEvent) => {
workOrderTypeIdsElement.disabled = changeEvent.currentTarget.checked; workOrderTypeIdsElement.disabled = changeEvent.currentTarget.checked;
}); });
document.querySelector("#icsFilters--workOrderMilestoneTypeIds-all").addEventListener("change", (changeEvent) => { document.querySelector('#icsFilters--workOrderMilestoneTypeIds-all').addEventListener('change', (changeEvent) => {
workOrderMilestoneTypeIdsElement.disabled = changeEvent.currentTarget.checked; workOrderMilestoneTypeIdsElement.disabled = changeEvent.currentTarget.checked;
}); });
const inputSelectElements = document.querySelector("#panel--icsFilters").querySelectorAll("input, select"); const inputSelectElements = document.querySelector('#panel--icsFilters').querySelectorAll('input, select');
for (const element of inputSelectElements) { for (const element of inputSelectElements) {
element.addEventListener("change", updateCalendarURL); element.addEventListener('change', updateCalendarURL);
} }
updateCalendarURL(); updateCalendarURL();
calendarLinkElement.addEventListener("click", () => { calendarLinkElement.addEventListener('click', () => {
calendarLinkElement.focus(); calendarLinkElement.focus();
calendarLinkElement.select(); calendarLinkElement.select();
}); });

101
public-typescript/workOrderOutlook.ts
View File

@ -1,85 +1,98 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const workOrderTypeIdsElement = document.querySelector( const workOrderTypeIdsElement = document.querySelector(
"#icsFilters--workOrderTypeIds" '#icsFilters--workOrderTypeIds'
) as HTMLSelectElement; ) as HTMLSelectElement
const workOrderMilestoneTypeIdsElement = document.querySelector( const workOrderMilestoneTypeIdsElement = document.querySelector(
"#icsFilters--workOrderMilestoneTypeIds" '#icsFilters--workOrderMilestoneTypeIds'
) as HTMLSelectElement; ) as HTMLSelectElement
const calendarLinkElement = document.querySelector( const calendarLinkElement = document.querySelector(
"#icsFilters--calendarURL" '#icsFilters--calendarURL'
) as HTMLTextAreaElement; ) as HTMLTextAreaElement
function updateCalendarURL() { function updateCalendarURL() {
let url = window.location.href.slice( let url =
window.location.href.slice(
0, 0,
Math.max(0, window.location.href.indexOf(window.location.pathname) + 1) Math.max(0, window.location.href.indexOf(window.location.pathname) + 1)
) + ) +
los.urlPrefix + los.urlPrefix +
"api/" + 'api/' +
los.apiKey + los.apiKey +
"/" + '/' +
"milestoneICS/" + 'milestoneICS/' +
"?"; '?'
if (!workOrderTypeIdsElement.disabled && if (
workOrderTypeIdsElement.selectedOptions.length > 0) { !workOrderTypeIdsElement.disabled &&
url += "workOrderTypeIds="; workOrderTypeIdsElement.selectedOptions.length > 0
) {
url += 'workOrderTypeIds='
for (const optionElement of workOrderTypeIdsElement.selectedOptions) { for (const optionElement of workOrderTypeIdsElement.selectedOptions) {
url += optionElement.value + ","; url += optionElement.value + ','
} }
url = url.slice(0, -1) + "&"; url = url.slice(0, -1) + '&'
} }
if (!workOrderMilestoneTypeIdsElement.disabled && if (
workOrderMilestoneTypeIdsElement.selectedOptions.length > 0) { !workOrderMilestoneTypeIdsElement.disabled &&
url += "workOrderMilestoneTypeIds="; workOrderMilestoneTypeIdsElement.selectedOptions.length > 0
) {
url += 'workOrderMilestoneTypeIds='
for (const optionElement of workOrderMilestoneTypeIdsElement.selectedOptions) { for (const optionElement of workOrderMilestoneTypeIdsElement.selectedOptions) {
url += optionElement.value + ","; url += optionElement.value + ','
} }
url = url.slice(0, -1) + "&"; url = url.slice(0, -1) + '&'
} }
calendarLinkElement.value = url.slice(0, -1); calendarLinkElement.value = url.slice(0, -1)
} }
( ;(
document.querySelector("#icsFilters--workOrderTypeIds-all") as HTMLInputElement document.querySelector(
).addEventListener("change", (changeEvent) => { '#icsFilters--workOrderTypeIds-all'
workOrderTypeIdsElement.disabled = (changeEvent.currentTarget as HTMLInputElement).checked; ) as HTMLInputElement
}); ).addEventListener('change', (changeEvent) => {
workOrderTypeIdsElement.disabled = (
changeEvent.currentTarget as HTMLInputElement
).checked
})
( ;(
document.querySelector("#icsFilters--workOrderMilestoneTypeIds-all") as HTMLInputElement document.querySelector(
).addEventListener("change", (changeEvent) => { '#icsFilters--workOrderMilestoneTypeIds-all'
) as HTMLInputElement
).addEventListener('change', (changeEvent) => {
workOrderMilestoneTypeIdsElement.disabled = ( workOrderMilestoneTypeIdsElement.disabled = (
changeEvent.currentTarget as HTMLInputElement changeEvent.currentTarget as HTMLInputElement
).checked; ).checked
}); })
const inputSelectElements = ( const inputSelectElements = (
document.querySelector("#panel--icsFilters") as HTMLElement document.querySelector('#panel--icsFilters') as HTMLElement
).querySelectorAll("input, select") as NodeListOf<HTMLInputElement | HTMLSelectElement>; ).querySelectorAll('input, select') as NodeListOf<
HTMLInputElement | HTMLSelectElement
>
for (const element of inputSelectElements) { for (const element of inputSelectElements) {
element.addEventListener("change", updateCalendarURL); element.addEventListener('change', updateCalendarURL)
} }
updateCalendarURL(); updateCalendarURL()
calendarLinkElement.addEventListener("click", () => { calendarLinkElement.addEventListener('click', () => {
calendarLinkElement.focus(); calendarLinkElement.focus()
calendarLinkElement.select(); calendarLinkElement.select()
}); })
})(); })()

124
public-typescript/workOrderSearch.js
View File

@ -4,67 +4,69 @@ Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const workOrderPrints = exports.workOrderPrints; const workOrderPrints = exports.workOrderPrints;
const searchFilterFormElement = document.querySelector("#form--searchFilters"); const searchFilterFormElement = document.querySelector('#form--searchFilters');
los.initializeDatePickers(searchFilterFormElement); los.initializeDatePickers(searchFilterFormElement);
const searchResultsContainerElement = document.querySelector("#container--searchResults"); const searchResultsContainerElement = document.querySelector('#container--searchResults');
const limit = Number.parseInt(document.querySelector("#searchFilter--limit").value, 10); const limit = Number.parseInt(document.querySelector('#searchFilter--limit').value, 10);
const offsetElement = document.querySelector("#searchFilter--offset"); const offsetElement = document.querySelector('#searchFilter--offset');
function renderWorkOrders(responseJSON) { function renderWorkOrders(responseJSON) {
var _a, _b; var _a, _b;
if (responseJSON.workOrders.length === 0) { if (responseJSON.workOrders.length === 0) {
searchResultsContainerElement.innerHTML = searchResultsContainerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no work orders that meet the search criteria.</p>' + '<p class="message-body">There are no work orders that meet the search criteria.</p>' +
"</div>"; '</div>';
return; return;
} }
const resultsTbodyElement = document.createElement("tbody"); const resultsTbodyElement = document.createElement('tbody');
for (const workOrder of responseJSON.workOrders) { for (const workOrder of responseJSON.workOrders) {
let relatedHTML = ""; let relatedHTML = '';
for (const lot of workOrder.workOrderLots) { for (const lot of workOrder.workOrderLots) {
relatedHTML += relatedHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
'">' + '">' +
'<i class="fas fa-fw fa-vector-square" aria-label="' + '<i class="fas fa-fw fa-vector-square" aria-label="' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(lot.lotName || "(No " + exports.aliases.Lot + " Name)") + cityssm.escapeHTML(lot.lotName || '(No ' + exports.aliases.Lot + ' Name)') +
"</span><br />"; '</span><br />';
} }
for (const occupancy of workOrder.workOrderLotOccupancies) { for (const occupancy of workOrder.workOrderLotOccupancies) {
for (const occupant of occupancy.lotOccupancyOccupants) { for (const occupant of occupancy.lotOccupancyOccupants) {
relatedHTML += relatedHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType || "") + cityssm.escapeHTML(occupant.lotOccupantType || '') +
'">' + '">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + cityssm.escapeHTML(occupant.fontAwesomeIconClass || 'user') +
'" aria-label="' + '" aria-label="' +
los.escapedAliases.occupant + los.escapedAliases.occupant +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(occupant.occupantName || "(No Name)") + cityssm.escapeHTML(occupant.occupantName || '(No Name)') +
"</span><br />"; '</span><br />';
} }
} }
resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" + resultsTbodyElement.insertAdjacentHTML('beforeend', '<tr>' +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getWorkOrderURL(workOrder.workOrderId) + los.getWorkOrderURL(workOrder.workOrderId) +
'">' + '">' +
(workOrder.workOrderNumber.trim() (workOrder.workOrderNumber.trim()
? cityssm.escapeHTML(workOrder.workOrderNumber || "") ? cityssm.escapeHTML(workOrder.workOrderNumber || '')
: "(No Number)") + : '(No Number)') +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
cityssm.escapeHTML(workOrder.workOrderType || "") + cityssm.escapeHTML(workOrder.workOrderType || '') +
"<br />" + '<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(workOrder.workOrderDescription || "") + cityssm.escapeHTML(workOrder.workOrderDescription || '') +
"</span>" + '</span>' +
"</td>") + '</td>') +
('<td class="is-nowrap"><span class="is-size-7">' + relatedHTML + "</span></td>") + ('<td class="is-nowrap"><span class="is-size-7">' +
relatedHTML +
'</span></td>') +
('<td class="is-nowrap">' + ('<td class="is-nowrap">' +
('<span class="has-tooltip-left" data-tooltip="' + ('<span class="has-tooltip-left" data-tooltip="' +
los.escapedAliases.WorkOrderOpenDate + los.escapedAliases.WorkOrderOpenDate +
@ -73,7 +75,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
los.escapedAliases.WorkOrderOpenDate + los.escapedAliases.WorkOrderOpenDate +
'"></i> ' + '"></i> ' +
workOrder.workOrderOpenDateString + workOrder.workOrderOpenDateString +
"</span><br />") + '</span><br />') +
('<span class="has-tooltip-left" data-tooltip="' + ('<span class="has-tooltip-left" data-tooltip="' +
los.escapedAliases.WorkOrderCloseDate + los.escapedAliases.WorkOrderCloseDate +
'">' + '">' +
@ -84,55 +86,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
? workOrder.workOrderCloseDateString ? workOrder.workOrderCloseDateString
: '<span class="has-text-grey">(No ' + : '<span class="has-text-grey">(No ' +
los.escapedAliases.WorkOrderCloseDate + los.escapedAliases.WorkOrderCloseDate +
")</span>") + ')</span>') +
"</span>") + '</span>') +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(workOrder.workOrderMilestoneCount === 0 (workOrder.workOrderMilestoneCount === 0
? "-" ? '-'
: workOrder.workOrderMilestoneCompletionCount + : workOrder.workOrderMilestoneCompletionCount +
" / " + ' / ' +
workOrder.workOrderMilestoneCount) + workOrder.workOrderMilestoneCount) +
"</td>") + '</td>') +
(workOrderPrints.length > 0 (workOrderPrints.length > 0
? "<td>" + ? '<td>' +
'<a class="button is-small" data-tooltip="Print" href="' + '<a class="button is-small" data-tooltip="Print" href="' +
los.urlPrefix + los.urlPrefix +
"/print/" + '/print/' +
workOrderPrints[0] + workOrderPrints[0] +
"/?workOrderId=" + '/?workOrderId=' +
workOrder.workOrderId + workOrder.workOrderId +
'" target="_blank">' + '" target="_blank">' +
'<i class="fas fa-print" aria-label="Print"></i>' + '<i class="fas fa-print" aria-label="Print"></i>' +
"</a>" + '</a>' +
"</td>" '</td>'
: "") + : '') +
"</tr>"); '</tr>');
} }
searchResultsContainerElement.innerHTML = searchResultsContainerElement.innerHTML =
'<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' + '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
"<thead><tr>" + '<thead><tr>' +
"<th>Work Order Number</th>" + '<th>Work Order Number</th>' +
"<th>Description</th>" + '<th>Description</th>' +
"<th>Related</th>" + '<th>Related</th>' +
"<th>Date</th>" + '<th>Date</th>' +
'<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' + '<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' +
(workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : "") + (workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : '') +
"</tr></thead>" + '</tr></thead>' +
"<table>"; '<table>';
searchResultsContainerElement.insertAdjacentHTML("beforeend", los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count)); searchResultsContainerElement.insertAdjacentHTML('beforeend', los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count));
searchResultsContainerElement.querySelector("table").append(resultsTbodyElement); searchResultsContainerElement
.querySelector('table')
.append(resultsTbodyElement);
(_a = searchResultsContainerElement (_a = searchResultsContainerElement
.querySelector("button[data-page='previous']")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", previousAndGetWorkOrders); .querySelector("button[data-page='previous']")) === null || _a === void 0 ? void 0 : _a.addEventListener('click', previousAndGetWorkOrders);
(_b = searchResultsContainerElement (_b = searchResultsContainerElement
.querySelector("button[data-page='next']")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", nextAndGetWorkOrders); .querySelector("button[data-page='next']")) === null || _b === void 0 ? void 0 : _b.addEventListener('click', nextAndGetWorkOrders);
} }
function getWorkOrders() { function getWorkOrders() {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML("Loading Work Orders..."); searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML('Loading Work Orders...');
cityssm.postJSON(los.urlPrefix + "/workOrders/doSearchWorkOrders", searchFilterFormElement, renderWorkOrders); cityssm.postJSON(los.urlPrefix + '/workOrders/doSearchWorkOrders', searchFilterFormElement, renderWorkOrders);
} }
function resetOffsetAndGetWorkOrders() { function resetOffsetAndGetWorkOrders() {
offsetElement.value = "0"; offsetElement.value = '0';
getWorkOrders(); getWorkOrders();
} }
function previousAndGetWorkOrders() { function previousAndGetWorkOrders() {
@ -143,11 +147,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString(); offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
getWorkOrders(); getWorkOrders();
} }
const filterElements = searchFilterFormElement.querySelectorAll("input, select"); const filterElements = searchFilterFormElement.querySelectorAll('input, select');
for (const filterElement of filterElements) { for (const filterElement of filterElements) {
filterElement.addEventListener("change", resetOffsetAndGetWorkOrders); filterElement.addEventListener('change', resetOffsetAndGetWorkOrders);
} }
searchFilterFormElement.addEventListener("submit", (formEvent) => { searchFilterFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault();
resetOffsetAndGetWorkOrders(); resetOffsetAndGetWorkOrders();
}); });

203
public-typescript/workOrderSearch.ts
View File

@ -1,96 +1,106 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */ /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
import type * as recordTypes from "../types/recordTypes"; import type * as recordTypes from '../types/recordTypes'
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const workOrderPrints: string[] = exports.workOrderPrints; const workOrderPrints: string[] = exports.workOrderPrints
const searchFilterFormElement = document.querySelector("#form--searchFilters") as HTMLFormElement; const searchFilterFormElement = document.querySelector(
'#form--searchFilters'
) as HTMLFormElement
los.initializeDatePickers(searchFilterFormElement); los.initializeDatePickers(searchFilterFormElement)
const searchResultsContainerElement = document.querySelector("#container--searchResults") as HTMLElement; const searchResultsContainerElement = document.querySelector(
'#container--searchResults'
) as HTMLElement
const limit = Number.parseInt( const limit = Number.parseInt(
(document.querySelector("#searchFilter--limit") as HTMLInputElement).value, (document.querySelector('#searchFilter--limit') as HTMLInputElement).value,
10 10
); )
const offsetElement = document.querySelector("#searchFilter--offset") as HTMLInputElement; const offsetElement = document.querySelector(
'#searchFilter--offset'
) as HTMLInputElement
function renderWorkOrders(responseJSON: { function renderWorkOrders(responseJSON: {
count: number; count: number
offset: number; offset: number
workOrders: recordTypes.WorkOrder[]; workOrders: recordTypes.WorkOrder[]
}) { }) {
if (responseJSON.workOrders.length === 0) { if (responseJSON.workOrders.length === 0) {
searchResultsContainerElement.innerHTML = searchResultsContainerElement.innerHTML =
'<div class="message is-info">' + '<div class="message is-info">' +
'<p class="message-body">There are no work orders that meet the search criteria.</p>' + '<p class="message-body">There are no work orders that meet the search criteria.</p>' +
"</div>"; '</div>'
return; return
} }
const resultsTbodyElement = document.createElement("tbody"); const resultsTbodyElement = document.createElement('tbody')
for (const workOrder of responseJSON.workOrders) { for (const workOrder of responseJSON.workOrders) {
let relatedHTML = ""; let relatedHTML = ''
for (const lot of workOrder.workOrderLots!) { for (const lot of workOrder.workOrderLots!) {
relatedHTML += relatedHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(lot.mapName || "") + cityssm.escapeHTML(lot.mapName || '') +
'">' + '">' +
'<i class="fas fa-fw fa-vector-square" aria-label="' + '<i class="fas fa-fw fa-vector-square" aria-label="' +
los.escapedAliases.Lot + los.escapedAliases.Lot +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(lot.lotName || "(No " + exports.aliases.Lot + " Name)") + cityssm.escapeHTML(
"</span><br />"; lot.lotName || '(No ' + exports.aliases.Lot + ' Name)'
) +
'</span><br />'
} }
for (const occupancy of workOrder.workOrderLotOccupancies!) { for (const occupancy of workOrder.workOrderLotOccupancies!) {
for (const occupant of occupancy.lotOccupancyOccupants!) { for (const occupant of occupancy.lotOccupancyOccupants!) {
relatedHTML += relatedHTML +=
'<span class="has-tooltip-left" data-tooltip="' + '<span class="has-tooltip-left" data-tooltip="' +
cityssm.escapeHTML(occupant.lotOccupantType || "") + cityssm.escapeHTML(occupant.lotOccupantType || '') +
'">' + '">' +
'<i class="fas fa-fw fa-' + '<i class="fas fa-fw fa-' +
cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + cityssm.escapeHTML(occupant.fontAwesomeIconClass || 'user') +
'" aria-label="' + '" aria-label="' +
los.escapedAliases.occupant + los.escapedAliases.occupant +
'"></i> ' + '"></i> ' +
cityssm.escapeHTML(occupant.occupantName || "(No Name)") + cityssm.escapeHTML(occupant.occupantName || '(No Name)') +
"</span><br />"; '</span><br />'
} }
} }
resultsTbodyElement.insertAdjacentHTML( resultsTbodyElement.insertAdjacentHTML(
"beforeend", 'beforeend',
"<tr>" + '<tr>' +
("<td>" + ('<td>' +
'<a class="has-text-weight-bold" href="' + '<a class="has-text-weight-bold" href="' +
los.getWorkOrderURL(workOrder.workOrderId!) + los.getWorkOrderURL(workOrder.workOrderId!) +
'">' + '">' +
(workOrder.workOrderNumber!.trim() (workOrder.workOrderNumber!.trim()
? cityssm.escapeHTML(workOrder.workOrderNumber || "") ? cityssm.escapeHTML(workOrder.workOrderNumber || '')
: "(No Number)") + : '(No Number)') +
"</a>" + '</a>' +
"</td>") + '</td>') +
("<td>" + ('<td>' +
cityssm.escapeHTML(workOrder.workOrderType || "") + cityssm.escapeHTML(workOrder.workOrderType || '') +
"<br />" + '<br />' +
'<span class="is-size-7">' + '<span class="is-size-7">' +
cityssm.escapeHTML(workOrder.workOrderDescription || "") + cityssm.escapeHTML(workOrder.workOrderDescription || '') +
"</span>" + '</span>' +
"</td>") + '</td>') +
('<td class="is-nowrap"><span class="is-size-7">' + relatedHTML + "</span></td>") + ('<td class="is-nowrap"><span class="is-size-7">' +
relatedHTML +
'</span></td>') +
('<td class="is-nowrap">' + ('<td class="is-nowrap">' +
('<span class="has-tooltip-left" data-tooltip="' + ('<span class="has-tooltip-left" data-tooltip="' +
los.escapedAliases.WorkOrderOpenDate + los.escapedAliases.WorkOrderOpenDate +
@ -99,7 +109,7 @@ declare const cityssm: cityssmGlobal;
los.escapedAliases.WorkOrderOpenDate + los.escapedAliases.WorkOrderOpenDate +
'"></i> ' + '"></i> ' +
workOrder.workOrderOpenDateString + workOrder.workOrderOpenDateString +
"</span><br />") + '</span><br />') +
('<span class="has-tooltip-left" data-tooltip="' + ('<span class="has-tooltip-left" data-tooltip="' +
los.escapedAliases.WorkOrderCloseDate + los.escapedAliases.WorkOrderCloseDate +
'">' + '">' +
@ -110,98 +120,111 @@ declare const cityssm: cityssmGlobal;
? workOrder.workOrderCloseDateString ? workOrder.workOrderCloseDateString
: '<span class="has-text-grey">(No ' + : '<span class="has-text-grey">(No ' +
los.escapedAliases.WorkOrderCloseDate + los.escapedAliases.WorkOrderCloseDate +
")</span>") + ')</span>') +
"</span>") + '</span>') +
"</td>") + '</td>') +
("<td>" + ('<td>' +
(workOrder.workOrderMilestoneCount === 0 (workOrder.workOrderMilestoneCount === 0
? "-" ? '-'
: workOrder.workOrderMilestoneCompletionCount + : workOrder.workOrderMilestoneCompletionCount +
" / " + ' / ' +
workOrder.workOrderMilestoneCount) + workOrder.workOrderMilestoneCount) +
"</td>") + '</td>') +
(workOrderPrints.length > 0 (workOrderPrints.length > 0
? "<td>" + ? '<td>' +
'<a class="button is-small" data-tooltip="Print" href="' + '<a class="button is-small" data-tooltip="Print" href="' +
los.urlPrefix + los.urlPrefix +
"/print/" + '/print/' +
workOrderPrints[0] + workOrderPrints[0] +
"/?workOrderId=" + '/?workOrderId=' +
workOrder.workOrderId + workOrder.workOrderId +
'" target="_blank">' + '" target="_blank">' +
'<i class="fas fa-print" aria-label="Print"></i>' + '<i class="fas fa-print" aria-label="Print"></i>' +
"</a>" + '</a>' +
"</td>" '</td>'
: "") + : '') +
"</tr>" '</tr>'
); )
} }
searchResultsContainerElement.innerHTML = searchResultsContainerElement.innerHTML =
'<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' + '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
"<thead><tr>" + '<thead><tr>' +
"<th>Work Order Number</th>" + '<th>Work Order Number</th>' +
"<th>Description</th>" + '<th>Description</th>' +
"<th>Related</th>" + '<th>Related</th>' +
"<th>Date</th>" + '<th>Date</th>' +
'<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' + '<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' +
(workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : "") + (workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : '') +
"</tr></thead>" + '</tr></thead>' +
"<table>"; '<table>'
searchResultsContainerElement.insertAdjacentHTML( searchResultsContainerElement.insertAdjacentHTML(
"beforeend", 'beforeend',
los.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count) los.getSearchResultsPagerHTML(
); limit,
responseJSON.offset,
responseJSON.count
)
)
searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement); searchResultsContainerElement
.querySelector('table')!
.append(resultsTbodyElement)
searchResultsContainerElement searchResultsContainerElement
.querySelector("button[data-page='previous']") .querySelector("button[data-page='previous']")
?.addEventListener("click", previousAndGetWorkOrders); ?.addEventListener('click', previousAndGetWorkOrders)
searchResultsContainerElement searchResultsContainerElement
.querySelector("button[data-page='next']") .querySelector("button[data-page='next']")
?.addEventListener("click", nextAndGetWorkOrders); ?.addEventListener('click', nextAndGetWorkOrders)
} }
function getWorkOrders() { function getWorkOrders() {
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML("Loading Work Orders..."); searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(
'Loading Work Orders...'
)
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doSearchWorkOrders", los.urlPrefix + '/workOrders/doSearchWorkOrders',
searchFilterFormElement, searchFilterFormElement,
renderWorkOrders renderWorkOrders
); )
} }
function resetOffsetAndGetWorkOrders() { function resetOffsetAndGetWorkOrders() {
offsetElement.value = "0"; offsetElement.value = '0'
getWorkOrders(); getWorkOrders()
} }
function previousAndGetWorkOrders() { function previousAndGetWorkOrders() {
offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString(); offsetElement.value = Math.max(
getWorkOrders(); Number.parseInt(offsetElement.value, 10) - limit,
0
).toString()
getWorkOrders()
} }
function nextAndGetWorkOrders() { function nextAndGetWorkOrders() {
offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString(); offsetElement.value = (
getWorkOrders(); Number.parseInt(offsetElement.value, 10) + limit
).toString()
getWorkOrders()
} }
const filterElements = searchFilterFormElement.querySelectorAll("input, select") as NodeListOf< const filterElements = searchFilterFormElement.querySelectorAll(
HTMLInputElement | HTMLSelectElement 'input, select'
>; ) as NodeListOf<HTMLInputElement | HTMLSelectElement>
for (const filterElement of filterElements) { for (const filterElement of filterElements) {
filterElement.addEventListener("change", resetOffsetAndGetWorkOrders); filterElement.addEventListener('change', resetOffsetAndGetWorkOrders)
} }
searchFilterFormElement.addEventListener("submit", (formEvent) => { searchFilterFormElement.addEventListener('submit', (formEvent) => {
formEvent.preventDefault(); formEvent.preventDefault()
resetOffsetAndGetWorkOrders(); resetOffsetAndGetWorkOrders()
}); })
/* /*
const workOrderOpenDateStringElement = document.querySelector("#searchFilter--workOrderOpenDateString") as HTMLInputElement; const workOrderOpenDateStringElement = document.querySelector("#searchFilter--workOrderOpenDateString") as HTMLInputElement;
@ -233,5 +256,5 @@ declare const cityssm: cityssmGlobal;
}); });
*/ */
getWorkOrders(); getWorkOrders()
})(); })()

23
public-typescript/workOrderView.js
View File

@ -3,33 +3,32 @@
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
(() => { (() => {
const los = exports.los; const los = exports.los;
const reopenWorkOrderButtonElement = document.querySelector("#button--reopenWorkOrder"); const reopenWorkOrderButtonElement = document.querySelector('#button--reopenWorkOrder');
if (reopenWorkOrderButtonElement) { if (reopenWorkOrderButtonElement) {
const workOrderId = reopenWorkOrderButtonElement.dataset.workOrderId; const workOrderId = reopenWorkOrderButtonElement.dataset.workOrderId;
reopenWorkOrderButtonElement.addEventListener("click", () => { reopenWorkOrderButtonElement.addEventListener('click', () => {
function doReopen() { function doReopen() {
cityssm.postJSON(los.urlPrefix + "/workOrders/doReopenWorkOrder", { cityssm.postJSON(los.urlPrefix + '/workOrders/doReopenWorkOrder', {
workOrderId workOrderId
}, (responseJSON) => { }, (responseJSON) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = window.location.href = los.getWorkOrderURL(workOrderId, true, true);
los.getWorkOrderURL(workOrderId, true, true);
} }
else { else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Reopening Work Order", title: 'Error Reopening Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); });
} }
}); });
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Reopen Work Order", title: 'Reopen Work Order',
message: "Are you sure you want to remove the close date from this work order and reopen it?", message: 'Are you sure you want to remove the close date from this work order and reopen it?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Reopen Work Order", text: 'Yes, Reopen Work Order',
callbackFunction: doReopen callbackFunction: doReopen
} }
}); });

55
public-typescript/workOrderView.ts
View File

@ -1,56 +1,59 @@
/* eslint-disable unicorn/prefer-module, @typescript-eslint/no-non-null-assertion */ /* eslint-disable unicorn/prefer-module, @typescript-eslint/no-non-null-assertion */
import type * as globalTypes from "../types/globalTypes"; import type * as globalTypes from '../types/globalTypes'
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types"; import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
import type { BulmaJS } from "@cityssm/bulma-js/types"; import type { BulmaJS } from '@cityssm/bulma-js/types'
declare const cityssm: cityssmGlobal; declare const cityssm: cityssmGlobal
declare const bulmaJS: BulmaJS; declare const bulmaJS: BulmaJS
(() => { ;(() => {
const los = exports.los as globalTypes.LOS; const los = exports.los as globalTypes.LOS
const reopenWorkOrderButtonElement = document.querySelector( const reopenWorkOrderButtonElement = document.querySelector(
"#button--reopenWorkOrder" '#button--reopenWorkOrder'
) as HTMLButtonElement; ) as HTMLButtonElement
if (reopenWorkOrderButtonElement) { if (reopenWorkOrderButtonElement) {
const workOrderId = reopenWorkOrderButtonElement.dataset.workOrderId!; const workOrderId = reopenWorkOrderButtonElement.dataset.workOrderId!
reopenWorkOrderButtonElement.addEventListener("click", () => { reopenWorkOrderButtonElement.addEventListener('click', () => {
function doReopen() { function doReopen() {
cityssm.postJSON( cityssm.postJSON(
los.urlPrefix + "/workOrders/doReopenWorkOrder", los.urlPrefix + '/workOrders/doReopenWorkOrder',
{ {
workOrderId workOrderId
}, },
(responseJSON: { success: boolean; errorMessage?: string }) => { (responseJSON: { success: boolean; errorMessage?: string }) => {
if (responseJSON.success) { if (responseJSON.success) {
window.location.href = window.location.href = los.getWorkOrderURL(
los.getWorkOrderURL(workOrderId, true, true); workOrderId,
true,
true
)
} else { } else {
bulmaJS.alert({ bulmaJS.alert({
title: "Error Reopening Work Order", title: 'Error Reopening Work Order',
message: responseJSON.errorMessage || "", message: responseJSON.errorMessage || '',
contextualColorName: "danger" contextualColorName: 'danger'
}); })
} }
} }
); )
} }
bulmaJS.confirm({ bulmaJS.confirm({
title: "Reopen Work Order", title: 'Reopen Work Order',
message: message:
"Are you sure you want to remove the close date from this work order and reopen it?", 'Are you sure you want to remove the close date from this work order and reopen it?',
contextualColorName: "warning", contextualColorName: 'warning',
okButton: { okButton: {
text: "Yes, Reopen Work Order", text: 'Yes, Reopen Work Order',
callbackFunction: doReopen callbackFunction: doReopen
} }
}); })
}); })
} }
})(); })()

2
public/html/adminFees-editFee.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Update Fee Update Fee

2
public/html/adminLotTypes-addLotType.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Add <span class="alias" data-alias="Lot"></span> Type Add <span class="alias" data-alias="Lot"></span> Type

2
public/html/adminLotTypes-addLotTypeField.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Add <span class="alias" data-alias="Lot"></span> Type Field Add <span class="alias" data-alias="Lot"></span> Type Field

2
public/html/adminLotTypes-editLotType.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Update <span class="alias" data-alias="Lot"></span> Type Update <span class="alias" data-alias="Lot"></span> Type

2
public/html/adminLotTypes-editLotTypeField.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Update <span class="alias" data-alias="Lot"></span> Type Field Update <span class="alias" data-alias="Lot"></span> Type Field

2
public/html/adminOccupancyTypes-addOccupancyType.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Add <span class="alias" data-alias="Occupancy"></span> Type Add <span class="alias" data-alias="Occupancy"></span> Type

2
public/html/adminOccupancyTypes-addOccupancyTypeField.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Add <span class="alias" data-alias="Occupancy"></span> Type Field Add <span class="alias" data-alias="Occupancy"></span> Type Field

2
public/html/adminOccupancyTypes-editOccupancyType.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Update <span class="alias" data-alias="Occupancy"></span> Type Update <span class="alias" data-alias="Occupancy"></span> Type

2
public/html/adminOccupancyTypes-editOccupancyTypeField.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Update <span class="alias" data-alias="Occupancy"></span> Type Field Update <span class="alias" data-alias="Occupancy"></span> Type Field

2
public/html/workOrder-addLot.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Add Related <span class="alias" data-alias="Lot"></span> to Work Order Add Related <span class="alias" data-alias="Lot"></span> to Work Order

2
public/html/workOrder-addLotOccupancy.html
View File

@ -1,6 +1,6 @@
<div class="modal" role="dialog"> <div class="modal" role="dialog">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="width:900px"> <div class="modal-card has-width-900">
<header class="modal-card-head"> <header class="modal-card-head">
<h3 class="modal-card-title"> <h3 class="modal-card-title">
Add Related <span class="alias" data-alias="Occupancy"></span> to Work Order Add Related <span class="alias" data-alias="Occupancy"></span> to Work Order

2
public/stylesheets/style.css
View File

File diff suppressed because one or more lines are too long

40
views/print/pdf/_workOrder-header.ejs 100644
View File

@ -0,0 +1,40 @@
<table class="layout-table">
<tr>
<td>
<h1 class="m-0">Work Order #<%= workOrder.workOrderNumber %></h1>
</td>
<td class="has-text-right is-vcentered">
<strong>
<% if (workOrder.workOrderCloseDate) { %>
CLOSED<br />
<% } %>
<%= workOrder.workOrderType %>
</strong>
</td>
</tr>
</table>
<div class="box mt-1">
<table class="layout-table">
<tr>
<td>
<p>
<strong>Description</strong><br />
<%= workOrder.workOrderDescription %>
</p>
</td>
<td class="pl-1 is-width-1 has-text-nowrap">
<p>
<strong><%= configFunctions.getProperty("aliases.workOrderOpenDate") %></strong><br />
<%= workOrder.workOrderOpenDateString %>
</p>
<% if (workOrder.workOrderCloseDate) { %>
<p>
<strong><%= configFunctions.getProperty("aliases.workOrderCloseDate") %></strong><br />
<%= workOrder.workOrderCloseDateString %>
</p>
<% } %>
</td>
</tr>
</table>
</div>

Some files were not shown because too many files have changed in this diff Show More