trin

ok, what u do in login? how other components understand, that the user is authorized? u use vuex?

if u use vuex or other global states, u can write isAuth property to component. if isAuth changed, component will be updated. and u can use

vm.$forceUpdate();

but it not recommended )

in your code u setData on dragstart and write element id

x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "

its mean, u can get this data from event:

toListingDropped: function (event) {
            ...
            console.log('toListingDropped event.srcElement.id::')
            console.log(event.dataTransfer.getData('text/plain'))

of couse u can write any data on dragstart element, like:

// on li.dragstart
x-on:dragstart.self="
	...
	event.dataTransfer.setData('user', JSON.stringify(nextUser));
"

// get data `user` from event
toListingDropped: function (event) {
	...
	console.log('drop user', JSON.parse(event.dataTransfer.getData('user')))

drop user {id: 3, name: "Your Item #3"}

in your code u setData on dragstart and write element id

x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "

its mean, u can get this data from event:

toListingDropped: function (event) {
            ...
            console.log('toListingDropped event.srcElement.id::')
            console.log(event.dataTransfer.getData('text/plain'))

of couse u can write any data on dragstart element, like:

// on li.dragstart
x-on:dragstart.self="
	...
	event.dataTransfer.setData('user', JSON.stringify(nextUser));
"

// get data `user` from event
toListingDropped: function (event) {
	...
	console.log('drop user', JSON.parse(event.dataTransfer.getData('user')))

drop user {id: 3, name: "Your Item #3"}

nodejs is js. u need create project

# mkdir ololo
# cd ololo
# npm install mysql

and simple index.js in ololo dir

import mysql form 'mysql'

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'me',
  password : 'secret',
  database : 'my_db'
})

connection.connect()

setInterval(doJob, 500)

const doJob = () => {
	console.log('do job', new Date())
	connection.query('SELECT 1 + 1 AS solution', (error, results, fields) => {
  		if (error) throw error;
  		console.log('The solution is: ', results[0].solution);
	});
}

your script make mysql connection and execute doJob function every 500 ms

minimal cron interval — 1 minute, not 1 second. for your case i recommended use nodejs, because it event-based lang and run demon with intervals — simple case for him

u right, antd created for desktop app, but most component mobile-friendly. i use react, not vue and for react exist mobile version antd: https://mobile.ant.design.

usually for mobile i use RN, not web-based app, native. and for ui-kit i use react-native-elements or native-base. for web-based app i use antd or spectre.css. but spectre is no longer updated, which makes me cry at times

<p id="demo1"></p>
<p id="demo2"></p>
<script>
let text1 = ''
let text2 = ''
const month = 12
const amount = 100
const step = 5

let number1
let number2

for (let i = 0; i < month; i++) {
  number1 = amount + (step * i)
  number2 = ((number1*0.11/365)*31)
  
  text1 += number1 + '<br />'
  text2 += number2 + '<br />'
}

text1 += number1 + '<br />'
text2 += number2 + '<br />'
  
document.getElementById("demo1").innerHTML = text1
document.getElementById("demo2").innerHTML = text2
</script>

🤷‍♂️

very stranger code ) if u need for by months, use for by months, dont make life difficult for yourself

<p id="demo1"></p>
<p id="demo2"></p>
<script>
let text1 = ''
let text2 = ''
const month = 12
const amount = 100
const step = 5

for (let i = 0; i < month; i++) {
  const number1 = amount + (step * i)
  const number2 = ((number1*0.11/365)*31)
  
  text1 += number1 + '<br />'
  text2 += number2 + '<br />'
}
  
document.getElementById("demo1").innerHTML = text1
document.getElementById("demo2").innerHTML = text2
</script>

100
105
110
115
120
125
130
135
140
145
150
155

0.9342465753424658
0.9809589041095892
1.0276712328767124
1.0743835616438355
1.121095890410959
1.167808219178082
1.2145205479452055
1.2612328767123286
1.307945205479452
1.3546575342465752
1.4013698630136986
1.448082191780822

https://www.antdv.com/components/form/

js event-based language. most backend-based app it is only request-response lifecycle. js app have permanent lifecycle, one load and work forever. js based app load one time and live forever with ajax/websocket request to api backend. js app can and must live without backend, i mean js app generate all html code, templates etc without php or other backend, backend only for api.

u need to understand Promise model, await/async models etc.

u need to understand and use es6. for support all browsers, u need to learn and understand babel.

u need to understand packages, npm or yarn. its like composer, needed libs installed by npm install lodash or yarn add lodash.

after understand packages, u need to understand webpack/gulp to make bundle from your app.

and, of course, u need to understand react-based frameworks, like react, vue, angular etc. most modern js app based on react frameworks.

as a result, if u want understand js app, u need:

1. understand and love event-based app with permanent livecycle without reload page.
2. understand es6 and Promise model, for support all browsers use babel
3. understand packages and webpack philosophy
4. understand and love react-based frameworks

sounds like harder, but it easy, if u use js everyday. and of course, you hardly need to know all this at once. and you are unlikely to immediately make the perfect dream app. but everything is moving towards the fact that a modern application is j, and the backend simply gives data to api.

once again that you need to google: es6, promise, npm/yarn, webpack/gulp, react/vue

use devconsole next time )

$(document).ready(...

not

$(document).read(

$(document).ready(...

not

$(document).read(

like says @martinbean, u need accept tab key too, for navigation with keyboard for next/prev inputs. Tab keyCode is 9

https://keycode.info/

if u need calculate only for display data in front, i recommended use front for this task. u use client time, not your servers. if u need get statistics by percent users completion, u need calculate it on back, of course. i would make a method in the model, which calculate not null fields, for example. foreach for fieilds in model and relations (like photo/avatar), then calculate his weight in percent.

u need event keydown on input

const input = document.querySelector('input')
input.addEventListener('keydown', inputFilter)

and inputFilter function, who stop event, if keyCode not in array [37,38,39,40,8]. 37-40 for arrow, 8 for backspace.

const inputFilter = event => {
  if ([37,38,39,40,8].includes(event.keyCode)) { // if keyCode in array, just return
    return
  }
  event.preventDefault() // if keyCode not in array -- stop execution event
}

https://codepen.io/trin4ik/pen/wvgozgd

yes, i think need allow tab keys

u need event keydown on input

const input = document.querySelector('input')
input.addEventListener('keydown', inputFilter)

and inputFilter function, who stop event, if keyCode not in array [37,38,39,40,8]. 37-40 for arrow, 8 for backspace.

const inputFilter = event => {
  if ([37,38,39,40,8].includes(event.keyCode)) { // if keyCode in array, just return
    return
  }
  event.preventDefault() // if keyCode not in array -- stop execution event
}

https://codepen.io/trin4ik/pen/wvgozgd

u need to call showDateNo, like showDateNo()

document.querySelector('#jssearchdate').addEventListener('click', function (event) {
    showDateNo();
}, false);

or with es6

document.querySelector('#jssearchdate').addEventListener('click', event => {
    showDateNo();
}, false);

u need to call showDateNo, like showDateNo()

document.querySelector('#jssearchdate').addEventListener('click', function (event) {
    showDateNo();
}, false);

or with es6

document.querySelector('#jssearchdate').addEventListener('click', event => {
    showDateNo();
}, false);

ok, seems it send to error, run

<?php
$proc = proc_open("ssh [email protected] 'ls -la'",
array(
	array("pipe", "r"),
	array("pipe", "w"),
	array("pipe", "w")
	),
$pipes);
echo stream_get_contents($pipes[2]);

to read error

yes, with proc_open

<?php
$proc = proc_open("ssh [email protected] 'ls -la'",
array(
	array("pipe", "r"),
	array("pipe", "w"),
	array("pipe", "w")
	),
$pipes);
echo stream_get_contents($pipes[1]);

ssh [email protected] 'ls -la', where user and host -- your $server->ssh_user and $server->ip

if this also works, then the problem is not in the permissions

)))) ok, now execute ssh -V

try to execute simple command with proc_open, like

<?php
$proc = proc_open("whoami",
array(
	array("pipe", "r"),
	array("pipe", "w"),
	array("pipe", "w")
	),
$pipes);
echo stream_get_contents($pipes[1]);

look here https://serverfault.com/questions/157272/allow-apache-to-run-a-command-as-a-different-user

try to modify /etc/sudoers

$ php -r 'system("whoami");'
trin # <-- user, who can ssh

$ which ssh
/usr/bin/ssh # <-- ssh

$ sudo echo "www-data ALL=(trin) NOPASSWD: /usr/bin/ssh" >> /etc/sudoers # <-- allow www-data user execute ssh

or somethink like that. at least so in Linux

https://symfony.com/doc/current/components/process.html#configuring-process-options

Symfony uses the PHP proc_open function to run the processes. You can configure the options passed to the other_options argument of proc_open() using the setOptions() method:

mb proc_open disabled in fpm ini? check disable_functions in php.ini

im not use mix, but look here

• https://github.com/JeffreyWay/laravel-mix/blob/master/docs/sass.md
• https://webpack.js.org/loaders/sass-loader/#sassoptions

i think somethink like this:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/main.scss', 'public/css', {
		sassOptions: {
			additionalData: `@import "./resources/sass/utils/_variables.scss";`
		}
	})
    .options({
		extractVueStyles: true,
    })
    .version()

offtopic. i moved from vuex/redux to mobx, including because of this problem

f*ck, am late )) yes, it is one of way

FormRequest way, its create Requests/ApiRequest.php with code like

<?php

namespace App\Http\Requests;

use Illuminate\Http\JsonResponse;
use Illuminate\Validation\ValidationException;
use Illuminate\Contracts\Validation\Validator;
use Illuminate\Http\Exceptions\HttpResponseException;
use Illuminate\Foundation\Http\FormRequest;

class ApiRequest extends FormRequest
{
    protected function failedValidation(Validator $validator)
    {
        $error = (new ValidationException($validator))->errors();
		$message = (new ValidationException($validator))->getMessage();
        throw new HttpResponseException(
            response()->json(
                [
					'reports' => [
						'type' => 'fail',
						'message' => $message,
						'validation' => ... /* your map code for error */
					]
                ], JsonResponse::HTTP_UNPROCESSABLE_ENTITY)
        );
    }
}

just discussed this (https://laracasts.com/discuss/channels/laravel/request-class-for-api), u can override Exceptions/Handler.php, or extends FormRequest and create u own structure

controversial statement. what if i send Accept: image/png? )) in my case, i need not only json response, but with structure, like:

// good response
{
	"success": true,
	"data": ...
}

// bad response
{
	"success": false,
	"error": ...
}

and if i create backend api with laravel (no need web response), im not care about Accept, all responses are json. as I understand, i have two ways to realize it

• extends FormRequest, as i said
• extends Exceptions/Handle.phpto override render like (for example)

public function render($request, $exception)
    {
        if ($exception instanceof ModelNotFoundException) {
            return response()->json([
                'success' => false,
                'error' => 'not found id in model',
                'exception' => $exception
            ], Response::HTTP_NOT_FOUND);
        }
        return parent::render($request, $exception);
    }

but as I understood, second way more globally and if i use some external module with web interface (telescope etc) it is bad idea.

if i wrong, tell me please best way to response all my requests with json on my structure. hmmm... I'll think about it

try this

https://stackoverflow.com/a/60717467/11386206

yes

<?php
namespace App\Http\Requests;

use Illuminate\Http\JsonResponse;
use Illuminate\Validation\ValidationException;
use Illuminate\Contracts\Validation\Validator;
use Illuminate\Http\Exceptions\HttpResponseException;
use Illuminate\Foundation\Http\FormRequest;

try this solution

https://stackoverflow.com/questions/2221335/access-denied-for-load-data-infile-in-mysql

i created extend for FormRequest

class ApiRequest extends FormRequest
{
    protected function failedValidation(Validator $validator)
    {
        $error = (new ValidationException($validator))->errors();
        throw new HttpResponseException(
            response()->json(
                [
                    'success' => false,
                    'error' => $error
                ], JsonResponse::HTTP_UNPROCESSABLE_ENTITY)
        );

        parent::failedValidation($validator);
    }
}

and extended other Request files like

class OrderCreateRequest extends ApiRequest

stupid question, but what host your database? same server?

welcome )

u can use scopes https://laravel.com/docs/8.x/eloquent#local-scopes

in Electricity_Transaction model adds like

public function scopeMonth($month = date('m'), $year = date('Y'))
{
	return $query->whereMonth('created_at', $month)->whereYear('created_at', $year);
}
public function scopeRegion($region = 'Jakarta')
{
	return $query->where('regional','LIKE','%' . region . '%');
}

and in your controller like

public function DataElectricalJson()
{
return response()->json([
	'january_electrical_jkt' => Electricity_Transaction::month(1)->region('Jakarta')->sum('nominal') ?? 0,
	'febuary_electrical_jkt' => Electricity_Transaction::month(2)->region('Jakarta')->sum('nominal') ?? 0,
	'maret_electrical_jkt' => Electricity_Transaction::month(3)->region('Jakarta')->sum('nominal') ?? 0,
            ...
]); 
}

in terminal exec

ls -la /home/workspace/Documents/projects/laravel-site/storage/csvs/

and post here

i created extend for FormRequest

class ApiRequest extends FormRequest
{
    protected function failedValidation(Validator $validator)
    {
        $error = (new ValidationException($validator))->errors();
        throw new HttpResponseException(
            response()->json(
                [
                    'success' => false,
                    'error' => $error
                ], JsonResponse::HTTP_UNPROCESSABLE_ENTITY)
        );

        parent::failedValidation($validator);
    }
}

and extended other Request files like

class OrderCreateRequest extends ApiRequest

mysql user cant read from folder /home/workspace/Documents/projects/laravel-site/storage/csvs/, change permission to folder/file or move file to /tmp, for example

i think it not BEST practice ) but i use it too ))

of couse. normal module: https://github.com/tymondesigns/jwt-auth

or u can write u own implementation jwt module. i use tymondesigns/jwt-auth, but i don't always like it and I'm thinking about making my own implementation. for example, sometimes you want to customize unsinged data in a token so that you can manipulate it down to php, at the nginx level. but in general this is a great module

i realy not good in blade components, but think this is solution

<div class="absolute z-10 right-3 rounded bottom-3 w-1/4"
     x-data="{{ json_encode(['show' => true, 'style' => $style, 'message' => $message]) }}"
     :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }"
     style="display: none;"
     x-show="show && message"
     x-init="
                document.addEventListener('banner-message', event => {
                    style = event.detail.style;
                    message = event.detail.message;
                    show = true;
					setTimeout(() => show = false, 2000)
                     });
                     "

offtopic.

u use arrow functions

...
then(({ data }) => {
	if (data.success) {
...

and es5 style

window.addEventListener(
	'message',
	function (event) {
		if (event.data.success == true) {
			this.successPayment()
		}
	}.bind(this)
)

in one place. it is not are bug or error, but not true. u can always use es6 style

window.addEventListener(
	'message',
	event => {
		if (event.data.success == true) {
			this.successPayment()
		}
	}
)

less code, no need to bind this etc

https://gist.github.com/JacobBennett/7b32b4914311c0ac0f28a1fdc411b9a7

https://codepen.io/trin4ik/pen/rNWjKYv

big update guys, added scanner for new topics. in experimental mode. one time in 60 secs scanning /discuss for new topics and push notification to u, if u subscribe on category.