Realizing this time of year I’d be driving in the dark both ways - really not up for doing that on my own so I’m going to pass.

?

I was going to show off the Sister City app which I recently deployed on a public server (hosted by Computer Connections- thanks, Dave)? ?Basic stuff is working OK so far – still tinkering with a few things.? Maybe by next meeting it will be closer to prime time ready.

?

--sg

?

I’ve got a call in to Cliff – haven’t heard back.? If he isn’t going, I have to decide whether it’s worth making the drive by myself.

?

Anyone else planning to attend??

?

?

?

So is the meeting a go this month?? ?If so, Sauk or Cross Plains?

?

Working with Vue.js Vuetify scripts.?

?

I had this function to display a status alert at the top of my page:

?

? ? ? ?showAlert(aMessage, aType)

? ? ? ? {

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = aMessage;

? ? ? ? ? this.alertType = aType;

? ? ? ? ? console.log(aType, aMessage);

? ? ? ? },

?

Tried to invoke it and got this error in the console:

Filer.htm:505? Uncaught TypeError: this.showAlert is not a function

?

Banged my head for a good hour trying to figure out what was going on.? Finally added this code:

?

? ? ? ?onAlert(alertMsg,alertType)

? ? ? ? {

? ? ? ? ? console.log('got here');

? ? ? ? ? console.log(alertMsg,alertType);

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = alertMsg;

? ? ? ? ? this.alertType = alertType;

? ? ? ? },

?

Called that, using the same parameters, initial tests worked.? OK, that was odd, but whatever.? I erased the showAlert code and changed all showAlert calls to onAlert.? Now I’m getting onAlert is not a function! ?Switched back to showAlert, some calls fail, other do not ?– can’t get anything to work consistently.?

?

Finally gave up on the idea of an alert function – replaced all instances of showAlert(“message”,”type”) with commands to directly set statusAlert and alertType

?

I have no idea WTF is wrong.? FWIW, I ran my code thru a validator and got no complaints.? Pasting the entire code block below in case someone with nothing better to do wants to look at it but as long as my workaround is functional I have minimal interest in messing further with this.

?

?

--sg

?

? <script type="text/javascript">

? ? new Vue({

? ? ? el: '#app',

? ? ? vuetify: new Vuetify(),

? ? ? mounted()

? ? ? {

? ? ? ? console.log('Checking logon status');

? ? ? ? ajaxJson("LogonStatus.scp", null,

? ? ? ? ? (response) =>

? ? ? ? ? {

? ? ? ? ? ? console.log(response);

? ? ? ? ? ? this.oUser = response;

? ? ? ? ? ? if (this.oUser.level < 4)

? ? ? ? ? ? {

? ? ? ? ? ? ? alert('You do not have permission to access this page.');

? ? ? ? ? ? ? window.open('SCPLogon.htm', '_self', 'noreferrer');

? ? ? ? ? ? }

? ? ? ? ? ? else

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert = ('Logged on as ' + this.oUser.username, "success");

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? (error) =>

? ? ? ? ? {

? ? ? ? ? ? console.log('ERROR');

? ? ? ? ? ? console.log(error.message);

? ? ? ? ? ? window.open('SCPLogon.htm', '_self', 'noreferrer');

? ? ? ? ? });

? ? ? ? const payLoad = { mode: "table" };

? ? ? ? ajaxJson("/SCP/Getfiles.scp", payLoad,

? ? ? ? ? (response) =>

? ? ? ? ? {

? ? ? ? ? ? console.log("Got tables");

? ? ? ? ? ? this.tableList = response;

? ? ? ? ? ? console.log(this.tableList);

? ? ? ? ? },

? ? ? ? ? (error) =>

? ? ? ? ? {

? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? });

? ? ? ? return;

? ? ? },

? ? ? data: () => (

? ? ? ? {

? ? ? ? ? oUser: {},

? ? ? ? ? date: new Date().toISOString().substr(0, 10),

? ? ? ? ? menu: false,

? ? ? ? ? menu2: false,

? ? ? ? ? menu3: false,

? ? ? ? ? alert: true,

? ? ? ? ? search: '',

? ? ? ? ? statusAlert: '',

? ? ? ? ? tableList: '',

? ? ? ? ? fieldList: [],

? ? ? ? ? selectedFields: [],

? ? ? ? ? queryString: "",

? ? ? ? ? logList: [],

? ? ? ? ? iniList: [{ filename: 'scp.ini' }],

? ? ? ? ? alertType: '',

? ? ? ? ? dataMode: 0,

? ? ? ? ? valid: true,

? ? ? ? ? tab: null,

? ? ? ? ? items: [],

? ? ? ? ? fieldPicker: false,

? ? ? ? ? menuItems: [

? ? ? ? ? ? { text: 'Edit Profile', href: 'Patron.htm?id=:USER' },

? ? ? ? ? ? { text: 'Log Off', href: 'SCPLogon.htm' },

? ? ? ? ? ],

? ? ? ? ? tableName: "",

? ? ? ? ? selectedTable: { filename: '' },

? ? ? ? ? selectedLog: { filename: '' },

? ? ? ? ? selectedIni: { filename: '' },

? ? ? ? ? logContent: "",

? ? ? ? ? iniContent: "",

? ? ? ? ? headers: [],

? ? ? ? ? fieldHeaders: [

? ? ? ? ? ? {

? ? ? ? ? ? ? text: 'Field Name',

? ? ? ? ? ? ? align: 'start',

? ? ? ? ? ? ? value: 'fieldname',

? ? ? ? ? ? ? class: "grey accent-1"

? ? ? ? ? ? }

? ? ? ? ? ],

? ? ? ? ? pagination:

? ? ? ? ? {

? ? ? ? ? ? page: 1,

? ? ? ? ? ? rowsPerPage: 20

? ? ? ? ? },

? ? ? ? }),

? ? ? methods: {

? ? ? ? validate()

? ? ? ? {

? ? ? ? ? this.$refs.form.validate()

? ? ? ? },

?

? ? ? ? resetValidation()

? ? ? ? {

? ? ? ? ? this.$refs.form.resetValidation()

? ? ? ? },

?

? ? ? ? showAlert(aMessage, aType)

? ? ? ? {

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = aMessage;

? ? ? ? ? this.alertType = aType;

? ? ? ? ? console.log(aType, aMessage);

? ? ? ? },

? ? ? ? onAlert(alertMsg,alertType)

? ? ? ? {

? ? ? ? ? console.log(alertMsg,alertType);

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = alertMsg;

? ? ? ? ? this.alertType = alertType;

? ? ? ? },

? ? ? ? navigate(href)

? ? ? ? {

? ? ? ? ? console.log('navigating..' + href);

? ? ? ? ? window.location.href = href;

? ? ? ? },

? ? ? ? genHeaders()

? ? ? ? {

? ? ? ? ? {

? ? ? ? ? ? //set having unique values

? ? ? ? ? ? let s = new Set();

?

? ? ? ? ? ? this.items.forEach(item =>

? ? ? ? ? ? {

? ? ? ? ? ? ? for (f in item)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? //adding an existing value doesn't override the old one

? ? ? ? ? ? ? ? s.add(f)

? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? ? //respect the headers format required by Vuetify which

? ? ? ? ? ? // should has at least two fields (text, value)

? ? ? ? ? ? return Array.from(s).map(a =>

? ? ? ? ? ? {

? ? ? ? ? ? ? return {

? ? ? ? ? ? ? ? text: a.toUpperCase(),

? ? ? ? ? ? ? ? value: a

? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? }

? ? ? ? },

? ? ? ? goToLastPage()

? ? ? ? {

? ? ? ? ? const totalItems = this.items.length;

? ? ? ? ? const rowsPerPage = this.pagination.rowsPerPage;

? ? ? ? ? const lastPage = Math.ceil(totalItems / rowsPerPage);

? ? ? ? ? console.log('last', lastPage);

? ? ? ? ? this.pagination.page = lastPage; // Update the current page to the last

? ? ? ? },

? ? ? ? goToFirstPage()

? ? ? ? {

? ? ? ? ? this.pagination.page = 1;

? ? ? ? },

? ? ? ? onTabSelected(index)

? ? ? ? {

? ? ? ? ? console.log(this.tab);

? ? ? ? ? switch (this.tab)

? ? ? ? ? {

? ? ? ? ? ? case "tab2":

? ? ? ? ? ? ? const payLoad = { mode: "logs" };

? ? ? ? ? ? ? ajaxJson("/SCP/Getfiles.scp", payLoad,

? ? ? ? ? ? ? ? (response) =>

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? console.log("Got logs", response);

? ? ? ? ? ? ? ? ? this.logList = response;

? ? ? ? ? ? ? ? ? console.log(this.logList);

? ? ? ? ? ? ? ? ? this.selectedLog = this.logList[0].filename; ?// ?? is drop down model an object or a string, ?doesn't work using selectedLog.filename

? ? ? ? ? ? ? ? ? this.loadText("logs", this.logList[0].filename);

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? (error) =>

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? break;

? ? ? ? ? ? case "tab3":

? ? ? ? ? ? ? this.selectedIni = this.iniList[0].filename;

? ? ? ? ? ? ? console.log('ini tab');

? ? ? ? ? ? ? this.loadText("inis", this.iniList[0].filename);

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? },

? ? ? ? loadText(fileType, fileName)

? ? ? ? {

? ? ? ? ? fileName = this.qualifyName(fileType, fileName);

? ? ? ? ? const payLoad = { filename: fileName, action: "read" };

? ? ? ? ? ajaxJson("/SCP/filer.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log("Got file contents");

? ? ? ? ? ? ? // ? ? ? ? ? ? ? this.logList = response;

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? ? switch (fileType)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? case "logs":

? ? ? ? ? ? ? ? ? this.logContent = response.content;

? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? ? ? this.iniContent = response.content;

? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? saveText(fileType, fileName, fileContents)

? ? ? ? {

? ? ? ? ? fileName = this.qualifyName(fileType, fileName);

? ? ? ? ? fileContents = this.qualifyContents(fileType);

? ? ? ? ? //this.showAlert('!!!!');

? ? ? ? ?// this.onAlert('saving','success');

? ? ? ? ? const payLoad = { filename: fileName, action: "save", contents: fileContents };

? ? ? ? ? ajaxJson("/SCP/filer.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(this.selectedIni);

? ? ? ? ? ? ? this.showAlert("File " + fileName + " has been updated on the server", "success");

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.showAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? qualifyName(fileType, fileName)

? ? ? ? {

? ? ? ? ? console.log('Qualifying', fileName, fileType);

? ? ? ? ? switch (fileType)

? ? ? ? ? {

? ? ? ? ? ? case "logs":

? ? ? ? ? ? ? console.log(fileName, this.selectedLogs, this.selectedLogs.filename);

? ? ? ? ? ? ? if (!fileName)

? ? ? ? ? ? ? ? fileName = this.selectedLog.filename;

? ? ? ? ? ? ? fileName = '\\logs\\' + fileName + '.txt';

? ? ? ? ? ? ? break;

? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? console.log(fileName, this.selectedIni, this.selectedIni.filename);

? ? ? ? ? ? ? if (!fileName)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? if (this.selectedIni.filename)

? ? ? ? ? ? ? ? ? fileName = this.selectedIni.filename

? ? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? fileName = this.selectedIni;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? ? console.log('...to ', fileName);

? ? ? ? ? return fileName;

? ? ? ? },

?

? ? ? ? qualifyContents(fileType)

? ? ? ? {

? ? ? ? ? let contents = '';

? ? ? ? ? switch (fileType)

? ? ? ? ? {

? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? contents = this.iniContent;

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? ? console.log('Contents: ', contents);

? ? ? ? ? return contents;

? ? ? ? },

?

? ? ? ? jumpToBottom()

? ? ? ? {

? ? ? ? ? console.log('to bottom?');

? ? ? ? ? document.getElementById("log-entries").scrollTop = document.getElementById("log-entries").scrollHeight;

? ? ? ? },

? ? ? ? tableSelected()

? ? ? ? {

? ? ? ? ? const payLoad = { table: this.selectedTable.filename };

? ? ? ? ? this.items = [];

? ? ? ? ? console.log(payLoad);

? ? ? ? ? ajaxJson("/SCP/Getfields.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log("Got fields");

? ? ? ? ? ? ? this.fieldList = response;

? ? ? ? ? ? ? console.log(this.fieldList);

? ? ? ? ? ? ? this.fieldPicker = true;

? ? ? ? ? ? ? this.queryString = "SELECT * FROM " + this.selectedTable.filename;

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? ? return;

? ? ? ? },

? ? ? ? selectFields()

? ? ? ? {

? ? ? ? ? console.log('selectFields', this.fieldPicker)

? ? ? ? ? if (!this.fieldPicker)

? ? ? ? ? ? this.fieldPicker = true

? ? ? ? ? else

? ? ? ? ? {

? ? ? ? ? ? let fldstr = '';

? ? ? ? ? ? this.selectedFields.forEach(f =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(f.fieldname);

? ? ? ? ? ? ? fldstr += f.fieldname + ',';

? ? ? ? ? ? }

? ? ? ? ? ? )

? ? ? ? ? ? this.selectedFields = [];

? ? ? ? ? ? if (fldstr)

? ? ? ? ? ? {

? ? ? ? ? ? ? fldstr = fldstr.replace(/,$/, "");

? ? ? ? ? ? ? this.queryString = this.queryString.replace("*", fldstr);

? ? ? ? ? ? ? console.log(fldstr);

? ? ? ? ? ? }

? ? ? ? ? ? this.fieldPicker = false;

? ? ? ? ? }

? ? ? ? },

? ? ? ? submitQuery()

? ? ? ? {

? ? ? ? ? console.log('Executing SQL request..');

? ? ? ? ? console.log(this.tableName);

? ? ? ? ? let submitObject = { sql: this.queryString };

? ? ? ? ? console.log(submitObject);

? ? ? ? ? ajaxJson("/SCP/SQLizer.scp", submitObject,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? ? this.items = response;

? ? ? ? ? ? ? this.items.forEach(item =>

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? // ? ? ? ?console.log("item", item);

? ? ? ? ? ? ? ? for (f in item)

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? // ? ? ? ? ?console.log("f", f);

? ? ? ? ? ? ? ? ? if (item[f] instanceof Date)

? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? item[f] = moment(item[f]).format(moment.HTML5_FMT.DATE);

? ? ? ? ? ? ? ? ? ? if (f == 'updated')

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? item[f] = moment(item[f]).format('LLL');

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? });

? ? ? ? ? ? ? this.headers = this.genHeaders();

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(error);

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? }

? ? ? ? ? );

? ? ? ? }

? ? ? }

? ? })

? </script>

?

?

?

Just to be clear, my problem was not getting my reports to work on the web – it was just having to relearn some basic report designer usage.? I already had some legacy reports that had been set up using the Data Environment so it was a matter of figuring out how to modify the DE to get all the reports working like I want them to.?

?

I’m using Vue.js for my front end pages and an app built with Rick Strahl’s Web Connection to access VFP data on the back end.? As noted, I’m using FoxyPreviewer which makes outputting reports to PDFs ridiculously simple.? Here’s a snippet from my Reporter method:

?

lcStem = lcFilename

lcFilename = lcFilename + [.pdf]

lnX = 1

DO WHILE FILE([..\web\docs\reports\]+lcFilename)? && Make sure file name is unique

? lcFilename = lcStem+ [-] + TRANSFORM(lnX) + [.pdf]

??lnX = lnX + 1?

ENDDO

lcReportName = [reports\]+lcReportName + [.frx]

?

DO FoxyPreviewer.App

* Generate PDF (FoxyPreviewer object type 10)

REPORT FORM (lcReportName);

? OBJECT TYPE 10 ;

? TO FILE [..\web\docs\reports\]+lcFilename

?

IF VARTYPE(loObj) <> [O]

? loObj = CREATEOBJECT("Empty")

ENDIF

ADDPROPERTY(loObj, "pdfname",lcFilename)

?

RETURN loObj

?

loObj gets passed as a JSON object to the front end script, so I can easily display the PDF to the end user:

?

? ? ? ? ? ? ? ? ? window.open('docs/reports/' + response.pdfname, '_blank', 'noreferrer');

?

--sg

?