-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Convert configuration page to SFC #1436
Conversation
0b70b02
to
7cf7475
Compare
7cf7475
to
5bba1f0
Compare
Lorsque je met une valeurs hors limites, dans l'agent:
Ça finit comme ça dans l'UI: Pas fou. |
6dfba5e
to
0f275f7
Compare
We include js and css in Configuration.vue and remove the old files. Jquery is now imported from the npm package.
0f275f7
to
8f053a6
Compare
8f053a6
to
361cdb6
Compare
361cdb6
to
3fbfedc
Compare
current_cat="{{ current_cat }}" | ||
error_message="{{ error_message }}" | ||
error_code="{{ error_code }}" | ||
query_filter="{{ query_filter if query_filter else '' }}" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Conventionaly, it's better to use kebab-case for props (in the template) to align with HTML attributes.
https://vuejs.org/guide/components/props.html#prop-name-casing
|
||
import Error from "../components/Error.vue"; | ||
|
||
const props = defineProps(["current_cat", "error_message", "error_code", "query_filter", "address", "port"]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By convention, it's better to use camelCase for props names.
https://vuejs.org/guide/components/props.html#prop-name-casing
}); | ||
<script type="module" src="{{ vitejs.url_for('pgconf.js') }}"></script> | ||
<script type="text/javascript"> | ||
var data = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
data
is a very generic name prone to conflicts. What about configurationData
?
<div class="col-3 mr-auto"> | ||
<form | ||
method="get" | ||
:action="'/server/' + address + '/' + port + '/pgconf/configuration'" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:action="`/server/${address}/${port}/pgconf/configuration`"
This notation could be use in a few other places.
content += | ||
`<tr><td>Minimum:</td><td><b>${row["min_val"]}</b></td></tr>` + | ||
`<tr><td>Maximum:</td><td><b>${row["max_val"]}</b></td></tr>`; | ||
let url = ""; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For me, it would be easier to read with:
let url = `/proxy/${props.address}/${props.port}/pgconf/configuration`
...
if (queryFilter.value == "") {
url += `/category/${quotePlus(currentCat.value)}`;
}
content += `<tr><td>Unit:</td><td><b>${row["unit"]}</b></td></tr>`; | ||
function getCategories() { | ||
$.ajax({ | ||
url: "/proxy/" + props.address + "/" + props.port + "/pgconf/configuration/categories", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The template string notation would probably fit here and in a few other locations.
}, | ||
error: function (xhr) { | ||
modalLoading.value = false; | ||
error.value.fromXHR(xhr); | ||
}, | ||
}); | ||
} | ||
|
||
function parsedEnumVals(enumString) { | ||
let trimmed = enumString.replace(/^\{|\}$/g, ""); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const ?
We include js and css in Configuration.vue
and remove the old files.
Jquery is now imported from the npm package.